In our previous articles we covered general concepts related to graphics programming together with basic drawing methods, focusing on those that should be familiar to Delphi programmers. In this article we will investigate double buffering and learn about off-screen bitmaps.
Continue reading
Smart Graphics – Part 2
In the previous article we introduced some general graphical concepts, things like double buffering, per scene rendering, sprites and alpha blending. Time to get our hands dirty and jump into it – how can a Delphi developer leverage his skills under HTML5? Well let’s find out!
Continue reading
Smart Graphics
Every Delphi programmer knows how to use the canvas. Its easy, its straight forward and it can be a source of phenomenal frustration if you want to do more than draw straight lines. Good old TCanvas is, despite it’s ease of use, a dinosaur in terms of modern features. The moment you start thinking about anti-aliasing, alpha blending or anything pertaining to rotation – it’s game over for TCanvas.
A smarter canvas
Smart mobile studio implements (or wraps) the HTML5 canvas directly, which means that you have access to all the latest features. The HTML5 canvas was implemented by Apple (webkit codebase) and is the browser equivalent of their Quartz API. This means first of all that it’s a bit trickier to get going, but on the flipside once you master it you can generate some truly amazing graphical effects.
Before we dig into the canvas, i thought it might be best to get up to speed with some of the terminology you are bound to encounter. Some of the concepts are not bound directly to HTML5 but are loosely related to computer programming in general.
Double buffering
Double buffering simply means that you draw your graphics to an offscreen bitmap rather than directly onto the visible canvas. When you are finished drawing you copy (also called “blitting”) the result to the visible display in one fast operation. This technique reduces flickering and makes movement appear smooth. The reason double buffering works is because there is often a delay between your calls – and the actual pixel memory being altered by the CPU/GPU (graphical processing unit). It greatly depends on the kind of hardware you are running, but either way – double buffering is what people do.
On a side note I can mention that Delphi actually uses double buffering by default. If you look up the drawing mechanism for TWinControl you will find that Delphi allocates a new bitmap, draws the control, then copy the result onto the device context. The problem with Delphi is that it allocates a bitmap for each draw, which is extremely slow. Thankfully, we dont have to care about that under Smart Mobile Studio.
Per scene rendering
Under Delphi whenever you use the canvas and call methods like lineto, circle, ellipse etc. these functions are executed “as is”. So once you issue a call to lineTo the underlying WINAPI draws a line into the bitmap your canvas is connected to. This method is very effective, bare bone and does it’s job well. Sadly it is very tricky to create anything modern with this. It’s perfect for 1990’s user interfaces but doesnt cut it for 2013.
HTML5 doesnt really work this way (nor does quartz) because here everything is based on paths. A path is basically just an array of TPoints that you pre-calculate before anything is drawn on screen. So to draw a line you first have to call beginpath, then issue a moveto and lineto command (which we already know under delphi), and finally you draw the line with a call to stroke or endpath. Here is a code snippet from HTML5 Canvas Tutorials:
canvas.beginPath();
canvas.moveTo(100, 20);
// line 1
canvas.lineTo(200, 160);
// quadratic curve
canvas.quadraticCurveTo(230, 200, 250, 120);
// bezier curve
canvas.bezierCurveTo(290, -40, 300, 200, 400, 150);
// line 2
canvas.lineTo(500, 90);
canvas.lineWidth := 5;
canvas.strokeStyle := 'blue';
canvas.stroke();
Paths are cool
As you can probably imagine, by automating the variables involved you can really get some amazing results with very little effort. Check out this liquid particles demo for instance (click image):
Nice canvas demo
My personal favorite JavaScript demo has to be: or so they say
Also make sure you check out the graphics demos that ship with Smart Mobile Studio for more inspiration! And remember, the smart canvas maps more or less directly to the HTML5 canvas. We have added a few helper routines to make life easier for pascal programmers (and helper classes) but you will have no problems following a HTML5 JavaScript canvas tutorial with Smart Mobile Studio.
Alpha blending
Alpha blending simply means that you can draw graphics that is semi-transparent. Typically alpha blending is associated with 32bit graphics (RGBA) where each pixel or dot on the display is represented by 4 bytes. The first 3 bytes represents red, green and blue while the last byte defines the opacity of the pixel. When you copy a bitmap onto another which uses opacity as an option, it will merge with the existing graphics rather than overlap with it.
Sprites
In the golden days of 16 bit home computers (Amiga and Atari) the hardware supported sprites. A sprite is basically just a small, transparent picture which game programmers use to display and animate characters. In our day of fast processors and high speed 3d effects – there is no longer hardware support for sprites, but the concept of a “sprite” (as a moving graphical element) is still widely used. So if someone uses the term “sprite” or “bob” (the graphical co-processor in the Amiga was called “the blitter”, hence “blitter object”) you what they are talking about.
Next article
In this first installment we have taken a quick look at related concepts that you are bound to meet when programming graphics. Concepts like double buffering, sprites, alpha blending are universal and are deployed on all platforms regardless of language. So it’s handy to get to know these concepts straight away. We have also introduced how the HTML5 canvas works, that it uses paths rather than ad-hoc, brute force like good old TCanvas.
In the next installment we will dive into Smart Mobile Studio and familiarize ourselves with the API and draw some stuff. We will further look at how each of the above concepts work, things like double buffering, in real-life.
Reference material
Smart Mobile Studio v1.1 (beta-2)
We are very proud to present an updated beta-version of our 1.1 release (build number v1.1.0.372) of Smart Mobile Studio. If you would like to give this update a test run before we officially release it, then you can download the installer directly from SmartMobileStudio.com/download/setup_v1_1_0_372_beta.exe
(The context menu is replaced with Ctrl+Shift+R (start/stop recording) and Ctrl+Shift+P (replay the recorded macro).
We have done a lot of improvements in the IDE, the editor, the RTL and the Smart Pascal language. Below is a list of the improvements that have been done since the previous beta (see full manifest of changes for beta 1 here).
IDE changes
- Fixed: Resizer bugs for nested controls
- Fixed: Scrolling issue fixed ([CTRL] + [Up]/[Down])
- Fixed: Disabled unit structure flickering
- Fixed: LineCount issue
- Fixed: Case fix for strict hints
- Fixed: A label “mistake” in the baseframe (it was renamed further up the chain).
- Fixed: modified [CTRL]+/ to work the same as in Delphi:
- if a single line is changed, caret is moved to the next line (current column is preserved)
- if multiple lines are selected, comment is toggled for the whole block and caret is move to the line following the block (current column is set to 1)
- modification is placed into the undo buffer so that it can be undone
- Altered: [CTRL]+[/] is replaced by [CTRL]+[#] for systems where [/] is only accessible via [SHIFT]
- Altered: Minor changes on compiler output (bulk output of errors, warnings and hints).
- Altered: Search and replace dialog remembers the last states
- Altered: improved code proposal (insert item highlight)
- Altered: dialogs are centered
- Altered: Recent file on welcome tab now supports to show unlimited entries if desired (by default limited to 10 items)
- Added: Pascal “Gabelou” StyleCop (see prefrences->misc. to enable it).
- Added: Rename refactoring (including closed files)
- Added ‘Format Keywords’ action (see popup menu), which translates all keywords to lowercase.
- Added: Simplified BrowserAPI
- Added: possibility to filter log messages from the console output (filtered ‘event.layerX and event.layerY are broken and deprecated …’ by default). Select a certain text to filter and right click -> Ignore Message to filter out all messages containing this particular string. The filter will be resetted on restart.
RTL
- Minor formating and added overload function for CreateImageData
- Added fast sequential read text file loaders
- Applied the new ‘Format Keywords’ to the remaining RTL files
- Removed duplicate & tweaked hash function
- Improved hashing function
- dialogs need custom initialization
- modal dialog support integrated into TW3CustomApplication (ShowModal, HideModal)
- modal dialog is re-centered if application is resized (for example when orientation of a mobile device changes)
- added TW3CustomApplication.CreateOpaqueMask
- TW3CustomControl.getMaxZIndex is now public
- modal dialogs triggered from modal dialogs are now supported
- Fixed: zIndex issues with modal dialogs
- Fixed: opaque layer has high z-index to cover all controls on the form
- Fixed: SendToBack
- Altered: dialogs are centered on the form
- Altered: event handlers are only called when assigned
- Altered: W3ModalDialog made external for easier reuse
- Altered: updated Remobjects interface
- Altered: Changed default Mouse event X,Y coordinates
- Added: W3ModalDialog uses opaque div to block owner form (tnx to Eric)
- Added: PixelRatio info
- Added TVariant.Properties + OwnProperties
- Added HorzLine/VertLine
- Added: New FillRectF/StrokeRectF overloads
- Added: TW3CustomApplication.FormByName, TW3Component.ChildByName, TW3Component.EnumChildrenAltered: SetSize now virtual
- Added: PhoneGapAPI is now complete
COMPILER
- Fixed: Case fixes for strict mode
- Fixed: an issue where compiler would accept method implementations in a different unit the class was declared
- Fixed: Lambdas don’t have a “var”/”const”/etc. section
- Fixed: issue with invalid symbol table in suggestions in case of fatal error in a lambda
- Fixed: SymbolDictionary bug for forwarded overloaded methods
- Fixed: calling overloaded inherited constructors
- Fixed: codegen for assignments of a function’s result to a var param
- Fixed: timestamp is now up to date
- Updated: now uses latest compiler core
- Updated: tokenizer updated to latest revision
- Altered: Compile speed optimizations
- Added: Missing semi-colon no longer a stopping error
- Added: JSON to reserved names
- Added: JSON static class
- Added: Preparation for source maps
DEMOS
- Fixed: style bug in smartflow
- Fixed: bug in spartacus
- Fixed: bug in box2d wrapper
- Altered: Tested all demos (with exception of gyro). All demos now compile.
- Altered: formating of Archimedes Spiral
- Added: frames demo
- Added: modal dialog example
Sincerely,
Jon Lennart Aasenden
—
The Smart Mobile Studio Team
Scrollcontrol, creating a better menu
Smart Mobile Studio comes with an implementation of the standard, round cornered, iPhone menu – but while handy, there are cases where you want to display more than just some options. What we really need is a scrolling menu that can be easily adapted to display more information. It’s time to dive deeper into the RTL and create a scrolling control.
Continue reading
The Smart Contest 2013 – Topic for the first round
Fractal art created by longan drink.
As previously announced, we will arrange 4 contests this year with some really cool prizes.
The topic for the first round will be “Graphics”.
We will reveal the details of this round by the end of January, but pay attention to our upcoming blog posts. They will give you lots of inspiration and get you started on the “graphics area” with Smart Mobile Studio.
(To get some inspirations right away, you can click on the image above).
In case you missed it:
First prize in each round will be a tablet (iPad, iPad mini, Android based tablet, Windows tablet). Value ~750 USD
Q: Will it be possible to participate with a trial version of Smart Mobile Studio?
A: Yes. We will even extend your trial period to cover the competition period if that is necessary. 😀
Best regards,
The Smart Mobile Studio Team
Working with webSQL
In the current release of Smart Mobile Studio we have finally added database support. Since smart mobile development targets the browser API directly, the classes are more low-level than what we have in delphi, but the flip side is that there are a lot less elements involved and they are very easy to use.
Continue reading
Introducing a playful 2013 :-)
We want to have more fun in 2013.
We want people do discover what Smart Mobile Studio is capable of and we want to share all the excellent stuff people create with Smart Mobile Studio.
So.
In 2013 we will run a few competitions 🙂
Four rounds on various topics with some nice prizes.
The “competition months” will be
– February
– May
– August
– November
Revision of contributions and announcement of winner will happen during the following month.
First prize in each round will be a tablet (iPad, iPad mini, Android based tablet, Windows tablet). Value ~750 USD
More details will be given before the first round.
(Don’t miss out on our Special offer ending tomorrow.)
Updated roadmap
We are proud to present our roadmap for 2013, with the goals we have set out to achieve and the technologies we are going to build. Due to unforeseen circumstances – some of the technologies that were planned for 2012 have been pushed ahead into 2013, there have also been significant shifts in the world of browser technologies that have made some of our plans redundant (“native” webservice support is one feature, which is now covered by node.js).
Continue reading
12 Days of Christmas – Special offer
Everyone who order Smart Mobile Studio in the period from December 26th to January 6th will receive an additional year of subscription for free!
It has been one year since we launched the first Alpha version of Smart Mobile Studio, and since we officially announced product name “Smart Mobile Studio”. That’s really something to celebrate. 🙂
Secondly, we’re sorry about the delay we’ve had this autumn and we would like make up for that to our existing customers. We would also like to remove all doubt for our new users: We’re serious about Smart Mobile Studio and we will work hard to keep Smart the best tool for HTML5 based (mobile and web) development.
So. Order now, and get two years for the price of one. That’s 50% off.
(All of our existing customers will receive a similar offer, too…)
Take a look at the news in the version 1.1 update and stay tuned for our updated roadmap. Besides, we do have another cool announcement to make during these days.
Best regards,
Jørn E. Angeltveit
—
The Smart Mobile Studio Team
Smart Mobile Studio v1.1 (beta)
Source thumbnails
We are about to release our delayed update of Smart Mobile Studio – version 1.1.
If you would like to give this update a test run before we officially release it, then you can download the installer directly from SmartMobileStudio.com/download/setup_v1_1_0_371_beta.exe
Changes
We have done a lot of improvements in the IDE, the editor, the RTL and the Smart Pascal language.
This is what we have done:
IDE:
- Added Open project by parameter (SmartMS.exe %1)
- Added Cmd switches /C /E /Q (SmartMS.exe %1 /E /Q)
- Added File Type Support in Windows
- Script based project templates
- Improved “New project” dialog
- Added support for drag & drop of external units to the project manager
- Added support for drag & drop of resources to the project manager
- Added support for adding multiple resources.
- Added some more layout presets
- Added recent projects to welcome screen
- Added more screen sizes preview dialog (mobile device sizes and standard ad sizes)
- Improved Class Browser
- Added Image Map for Document Navigation
- Added support for external forms (all Smart files are CVS friendly)
Editor:
- Improved: Search/Replace dialog
- Added: FindNext and FindPrevious (F3 and SHIFT + F3)
- Added: Go To Line Number (Alt+G)
- Added: FocusCodeLine (with auto-centering)
- Added: Ruler for the Gutter
- Added: Macro Recorder (CTRL+R and CTRL+P)
- Added: File Changed Outside Smart Notification
- Added: Sort lines
- Added: Surround code feature
- Added: Toggle comment feature
- Added: Some basic code templates (CTRL+J)
- Added: Parameter list (CTRL+SHIFT+SPACE)
- Added: Toggle Implementation/Interface (CTRL+UP and CTRL+DOWN)
- Added: Rename Refactor feature (F2)
- Added: Normalize Refactor (CTRL+N)
- Added: Some Project Metrics (Preference)
RTL:
- RTL
- PhoneGapAPI: Compass class added
- w3c.Date unit added (maps native JS methods)
- w3Animation unit added
- w3DbSql unit added for working with WebSQL
- w3ListBox unit added
- w3MouseTouch unit added
- w3Spinner unit added
- w3BufferedImage added BackgroundImage support to TW3BufferedImage
- w3Components: TW3CustomControl: Mousewheel support
- w3Components: SendToBack and BringToFront
- w3CookieStorage unit renamed (from CookieStorage)
- w3Ctrls: TW3Memo: Support for scrollbars
- w3Graphics: TW3CanvasPattern class added
- w3Graphics: TW3Canvas: Canvas Line and Dash methods added to TW3Canvas
- w3Graphics: TW3Canvas: Canvas FillText methods added
- w3Graphics: TW3Canvas: toDataUrl and toImageUrl methods added
- w3Inet: TW3HttpRequest: Added Handle and RequestHeaders properties
- w3List: TStringList: Added insert method
- w3List: TObjectList: Added insert method
- w3Scroll: TW3ScrollContent: Bug fix related to scrolling
- w3Storage: JStorage class added for direct access
- w3System: TRect and TRectF added Extend functions
- w3System: Added w3_RequestAnimationFrame unit function
Demos:
- General improvements…
- Archimedes Spiral demo added
- ColorListBox demo added
- ControlAnimation demo added
- Large Map Scrolling demo added
- ListBoxControl demo added
- MouseTouchDemo demo added
- TeeChart demo added
- WebSql demo added
- ZenSky demo added
Language features:
- Support for namespaces
- Aggregated namespaces and conditional units
- for [var] support
- A new base-object (JObject) above TObject (can be mapped directly to a JS object)
- ClassParent added to TObject
- Support for Lambdas
- Accepts binary literals (0b…)
- New syntax for hexadecimal literals (0x…)
- See also the DWS homepage an overview of news, fixes, and improvements
- Primož Gabrijelčič has also published a lot of interesting information at his Smart blog, www.SmartProgrammer.org.
- We would also recommend his book A Smart Book.
We will give more details and examples in dedicated articles 🙂
Murphy’s law has been with us for these last few months, so we are really happy to finally announce this update.
During these Christmas days we will update our road map and give you some insight to our future plans for Smart Mobile Studio.
We have also some special announcements we would like to share at the beginning of 2013.
Oh, and we will give our new users and exciting users a great offer when we officially release version 1.1. So stay tuned!
Sincerely,
Jørn E. Angeltveit
—
The Smart Mobile Studio Team
Sneak peek: Advanced project templates
In the upcoming version of Smart Mobile Studio, we have added support for customizable project templates.
That means that you can add your own project templates to the template repository, and with the scripting capabilities you can make pretty cool templates.
The project templates are defined in separate folders, which will be reflected in the “New project” dialog.
You define the project title and project description in a configuration file, along with the basic project settings. The API is based on a Pascal based scripting and pretty powerful.
Which project types would you like to have?
Cooperation with bit Time Software
bit Time Software
We are very happy to announce that bit Time Software, Italy, is now selling Smart Mobile Studio. We look forward to further cooperation and has already discussed lots of interesting issues with this cooperation. We already attended the DroidDevCon and ITDevCon and gave three presentations of Smart Mobile Studio. The experience from these sessions will form the basis for further Smart-dedicated trainings and seminars on Smart Pascal and mobile development.
We urge our Italian users to discuss Smart Mobile Studio issues – requests, needs and desires – with the nice bit Time Software staff, and order Smart Mobile Studio via their webshop.
Sincerely
The Smart Mobile Team
Rethinking navigation, random rant from SMS development
In the previous update of Smart Mobile Studio (not the summer hotfix) we added support for CTRL + CLICK navigation inside the editor. So if you hold down the CTRL key and click a symbol (a method name for example) it would navigate to the declaration or implementation section for that symbol.
Getting this function to work as expected (i.e “like Delphi does it”) is actually quite tricky. Depending on the type of method for instance, being marked as either virtual or abstract, the navigation could result the IDE showing the ancestor implementation rather than the current overridden implementation. In other words, if you have written a class that inherits from a standard class – and then do a CTRL + CLICK on a method declaration – it can actually confuse the IDE and you end up looking at the implementation for the original base class.
Navigation should be linear and recursive. So if you inherit from a class, click a method you have overridden, you should end up at your own implementation. If you further click on your implemented method – you should go directly to the original implementation.
This has now been fixed, and I’ve also started on the reverse navigation (SHIFT + CTRL + CLICK should bring you from implementation to declaration). Once the reverse is in place we can add keyboard shortcuts like SHIFT + Up/Down as well, since that is more or less the same function in a non recursive form. Of-course, the reverse navigation will stop at the interface section of the baseclass since we don’t want to remember the top-level starting point (that could cause some confusion between units). Keep it simple and clean.
Battle for the sun
While we are busy chewing through the fogbugz list of reported issues (and adding new RTL features) we came across a very interesting side effect with relation to graphics. As you probably know modern browsers have a very tight security system built into it. One of the rules is that you cannot call or use resources from other domain (cross domain communication). The exception is JSONP or when the server provides a special header which tells the browser that you can, indeed, use any resources you want.
What I did not know was that the same security system (worthy of Alcatraz) also applies to graphics (!). In fact, your browser regards itself as one domain (127.0.0.1 or machine name to be precise) and the server where you download index.html and other files – as a distinctly separate domain. This is of-course all true in network terms. Your local PC, iPhone or iPad is not the same as your server (hence the concept of “sessions” – which is server controlled due to the fact that HTTP is stateless).
What does this mean? It means that if your app has images stored in your resource folder (added to the project via the IDE, or manually copied into the res folder), there will be limits to how you extract and move the pixeldata. For instance this example:
procedure TForm1.ButtonClick(Sender:TObject);
begin
FImage.OnLoad := procedure(Sender:TObject)
var
mData: TW3ImageData;
x, y: Integer;
begin
try
//Get the pixel buffer directly
mData := FImage.ToImageData;
if mData <> NIL then
begin
//Dump info to stdout
WriteLn('Data is valid object');
WriteLn('Width=' + IntToStr(mData.Width));
WriteLn('Height=' + IntToStr(mData.Height));
//Set all pixels to red
for y := 0 to mData.height-1 do
for x := 0 to mData.Width-1 do
mData.Colors[x,y] := clRed;
//Apply as background to form
Self.Background.FromURL(mData.ToDataUrl);
//Release pixel buffer
mData.Free;
end
else begin
Raise Exception.Create('Image was NIL!');
end;
except
on e: exception do
ShowMessage(e.Message);
end;
end;
FImage.LoadFromURL('res/parallax.png');
end;
.. will work fine for desktop browsers (safari, chrome and firefox), but fail due to security reasons on the iPhone and iPad (which enforce CORS to the extreme). I’m not sure how beneficial such extreme security measures are to be frank, but that’s another story.
Solutions
In those rare cases where “security exception 18” will cause havoc, the obvious solution is to use the image converter (Tools -> Image converter) to turn your image into a constant and include it as source instead of as an external file. But for normal use (display, move around, rotate etc. ) you wont run into that problem. So it’s only for hard core programmers that like to fiddle with bits and bytes (like myself) that this will be a potential case.
The second solution, which is also what Smart was made to target, is to use phonegap. When you compile your app with phonegap all the security restraints go away, and you can pretty much do everything an ordinary .exe file can – including file access, camera access and the like.
Clearly, one does not simply waka waka into mordor 🙂
Making a slider control
In this mini article we are going to create a normal slider control. It is actually very simple and hardly deserves a full article, but since HTML and the DOM (document object model) have a long and bumpy trail of evolution behind it – some explanation is in order.
Setting it up
Under the DOM, a slider is actually a text-box in disguise. So to create a slider, you simply alter some properties of a normal TW3Editbox and it magically turns into a range-based slider instead. I’m not sure what the programmers behind the DOM thought when they made this rule, but I’m sure they had their reasons.
So, start by creating a new visual application. This also creates a default form for us. Now click the editbox icon from the component palette – and then click on the form. Resize and position the box as you see fit.
Editbox sized and ready
Now that we have our editbox lined up, make sure you click CTRL + S (save shortcut) so that the form design data is stored in your project file. Once you have done so, switch over to the code tab. Alter the initializeObject() method by adding the following text:
procedure TForm1.InitializeObject;
begin
inherited;
{$I 'Form1:impl'}
W3EditBox1.InputType:=itRange;
W3EditBox1.setMin(0);
W3EditBox1.setMax(100);
w3EditBox1.OnChanged:=Procedure (sender:TObject)
var
mValue: Integer;
begin
mValue:=TVariant.asInteger(w3EditBox1.handle.value);
writeln(mValue);
end;
end;
Why the esoteric handle stuff?
The reason we have to access the value property of the DOM element directly (handle always points to the actual HTML element), is because of an old difference in browser API. FireFox supports the older “range” property of the element, but the modern API supported by nearly all browsers today is to obtain the value via the.. well, value property. The Smart RTL sadly used the older variation when it was written, but the next update will have the correct range property.
Voila, sliders galore