Getting Started with Smart Mobile Studio

Introduction

You can use Smart Mobile Studio to obtain HTML5 web pages with CSS and JavaScript translated from the Smart dialect of Pascal. Note that we now use Version 2.1 of Smart Mobile Studio and offer this guidance for coping with changes.

At http://smartmobilestudio.com/store/ you can see this most welcome announcement:
Smart Mobile Studio is free for educational purpose :-):

"If your school or your local code club would like to use Smart Mobile Studio in the education, then send an e-mail at edu-license@smartmobilestudio.com with a short description of intended use."

In the following sections on this page we offer (1) tips to help you get started with Smart Mobile Studio, (2) notes on the free chapters of Primož Gabrijelčič's A Smart Book, (3) names of the supplied demonstrations with comments on selected ones, (4) advice on the use of the SMS website and (5) other sources of information. Follow the links at the foot of the page for our very basic demonstrations and then progress to our tutorial on Smart Mobile Studio.

Tips

  • Use F12 to toggle between the code of a form and its design view.
  • Most of the source code of demonstrations is "hidden" in the project file. Open the .sproj file of each demonstration in the IDE to see the Pascal source. Once in the IDE you can right click on the unit name and click on "Make item external" to obtain the Pascal source in the project folder. For the unit of a form, this also gives you the external .sfm XML file of the form design. (The .sproj project file is merely a text file containing the contents of the Pascal units and the other text files in the project, so you can open it in an editor such as Notepad++ and perform searches).
  • Right click on the design view of the form and select "View XML" to see the properties of all of the components placed on the form.
  • The directive {$I 'Form1:impl'} converts the design view of the form to code, so make any of your code changes to properties of controls after this.
  • View the code of the inbuilt classes to help you to make good use of them. Double click on the class name in the RTL Class Browser (or right click on the name in the uses clause and select menu item "Open file at cursor") to load the corresponding unit. For example, double clicking on EW3Database in the class browser loads the W3DbSql unit.

A Smart Book

The free sample of this book by Primož Gabrijelčič includes a long chapter on the Smart dialect of Pascal, another full chapter on regular expressions and selections from other chapters. The following points are from the chapter on the Smart dialect.

  • You can enclose strings in single quotes as usual or in double quotes. Double-quoted strings can span multiple lines.
  • You can use the in and not in operators to test the presence of an element in an array.
  • A dynamic array has useful "pseudo-methods" such as Push, Pop, Clear, Copy, Delete, IndexOf, Swap and Reverse.
  • Case statements can use any data type as a selector (not only an integer as in pure Pascal).
  • For loops support the step parameter, which must be positive.
  • You can use the C-style compound operators +=, -=, *= and /=.
  • You can use advanced features such as delegates, closures (anonymous methods), lambda functions, lambda statements, helper methods, operator overloading and property expressions (which are all explained in the chapter).
  • Comments cannot be nested.
  • Variables can also be declared inline in for statements e.g. for var i := 1 to 10 do
  • There are many inbuilt handy functions such as Clamp (to limit a value to an interval), IsPrime, IsDelimiter, StrSplit and StrJoin.
  • Smart Pascal allows you to directly include JavaScript code in an asm block.
Other sections have advice on the following:
  • ShowDialog;
  • modal dialogs;
  • handling application shutdown;
  • the controls EditBox, ListBox, ScrollBox and Toolbar including notes on the demonstration programs;
  • notes on RTL units, e.g. "W3Dictionaries - Contains various dictionary classes used to store key-referenced values. An example can be found in the MultiFingerPaint demo";
  • graphics including colour, lines, arcs, circles, rectangles, rounded rectangles, transparency, gradient fills, images and text.

Demonstrations

The first table contains demonstrations by Primož Gabrijelčič in the folder "A Smart Book Demos".

 
ApplicationShutdown ControlsHTMLElements ControlsPanel ControlsToolbar
CommandLineApplication ControlsImage ControlsProgressBar ControlsToolbutton
ControlsButton ControlsLabel ControlsScrollbar Graphics
ControlsCheckbox ControlsListBox ControlsScrollbox HttpAndJsonp
ControlsComboBox ControlsListMenu ControlsScrollControl LocalStorage
ControlsEditBox ControlsMemo ControlsStyling MessageDialogs
ControlsHeader ControlsPaintbox ControlsToggleSwitch MyFirstProgram

Contents of the "Demos" folder (from an early version of Smart Mobile Studio) are tabulated below.

AccelerometerDemo (by Primoz Gabrijelcic) MegaDemo
Animated Logo (by Christian-W. Budde) Minesweeper (by Christian-W. Budde)
Archimedes Spiral MissileCommand (by Eric Grange)
Binary Data Import (by Christian-W. Budde) ModalDialog
Box2D Demo (by Christian-W. Budde) MouseCoordinates
Box2D Integration (by Christian-W. Budde) MouseTouchDemo (by Primoz Gabrijelcic)
BuddhaBrot (by Christian-W. Budde) MultiFingerPaint (by Primoz Gabrijelcic)
Calc (by Eric Grange) Particles
CanvasToImage PlasmaEffect (by Jason Reid)
ColorListBox (by Primoz Gabrijelcic) PolyShape
CanvasTranslate PythagorasTree (by Christian-W. Budde)
ControlAnimation (by Primoz Gabrijelcic) RegExDemo (by Primoz Gabrijelcic)
Frames RemObjectsSDKChatDemo (by Andre Mussche)
GalaxyClock (by Eric Grange) Sine Generator
GameOfLife (by Primoz Gabrijelcic) SmartFlow (by Eric Grange)
GeoLocation Demo (by Christian-W. Budde) SmartTTT (by Primoz Gabrijelcic)
GestureDemo (by Primoz Gabrijelcic) SmartUnit
GradLines (by Christian-W. Budde) Spartacus
Graphic Control Demo SpiralClock (based on GalaxyClock)
HelloWebGL (by Eric Grange) SVG Demo (by Christian-W. Budde)
Image Filters (by Christian-W. Budde) TCoinImage (based on TSmiley)
Large Map Scrolling (by Christian-W. Budde) TeeChart (by Steema Software)
LayoutManagerDemo (by Primoz Gabrijelcic) Tetris (by Christian-W. Budde)
ListBoxControl (by Primoz Gabrijelcic) TSmiley (by Primoz Gabrijelcic)
LSystemFiddle (by Eric Grange) WebSql
MandelbrotExplorer (by Primoz Gabrijelcic) WebWorker
Media Player Demo (by Christian-W. Budde) ZenSky

We recommend a few of these (presented in alphabetical order) for trying before the others to inspire you to use Smart Mobile Studio.

  • Archimedes Spiral is a simple, impressive demonstration of motion graphics using the canvas game project. Only a few lines of code are required to generate a fascinating effect.
  • Try spinning and flinging the shapes in Box2D Demo. See Box2d Support for information and a link to an example.
  • Calc (by Eric Grange) is a basic calculator. Playing with the design" shows how you can customise its display.
  • ImageFilters applies to a photograph the effect of stack blur, emboss, grayscale, invert, HSL, contrast, solarize, posterize, fish eye or twist. You move the mouse up and down the photo to adjust the parameters.
  • Large Map Scrolling demonstrates how to give the user pleasing control of the position of a graphic that is too large to fit into the window. The New York City Subway Diagram slides nicely into position, with just the right amount of damping. It uses the W3Touch unit to cater for devices with touch screens, but it also works well under mouse control. You must try it!
  • L-System Fiddle applies different axioms and rules in the L-system repeatedly to generate the classic tree, Heighway dragon, fractal plant, Kevs tree, pleasant error, Koch snowflake, Peano-Gosper curve, Sierpinski triangle and Penrose tiling. You can try it here on Eric Grange's DelphiTools website.
  • Mega Demo (1) invites you to spin the Buddha image, (2) shows many particles leaving trails as they move in curved paths, (3) shows a "quad vertex" motion graphic and (4) demonstrates the use of a Back button in a header control.
  • PlasmaEffect uses the canvas game project to produce a pleasing motion graphic with surprisingly little code.
Several games such as Minesweeper and Tetris are ported from Delphi. Other demonstrations show further capabilities of Smart Pascal:
  • ControlAnimation moves and rotates a button.
  • GeoLocationDemo shows you how to use the W3GeoLocation unit to output information such as latitude, longitude, altitude and speed.
  • HelloWebGL uses the W3C.WebGL, GLS.Base, GLS.Vectors units to show you how to get started with complex graphics. It displays rotating shapes with gradient colour shading.
  • SmartUnit demonstrates unit testing. It uses the TextTestRunner and TestFramework units by Eric Grange and outputs results via the Smart console.
  • TeeChartDemo shows how you can present a wide range of charts such as bar, candle, line, pie and point in a highly customisable manner. See Steema TeeChart Converted to Smart.
  • WebSql creates a database, populates it with data then reads the data and outputs it to the console. (For an explanation of the code see Working with webSQL.
  • ZenSky shows how you can create motion graphics using a timer to repeat a procedure that changes the properties of sprites. The sun's coordinates and scale change and it also rotates. This alternative to the game canvas uses forms so you can easily add buttons to control games. (See also Part 5 of Jon Lennart's graphics article recommended in the next section).

Several further demonstrations are provided with the latest releases of Smart Mobile Studio and "featured demos" are now sorted into the folders API, Business, Canvas, Console, Espruino, Forms & Components, Games, Node.js and System.

The folder "Contest Demos" contains these entries to a graphics competition: Afternoon Walk, Biotopia, GraphicsDemo, PolyDna, Real Fire and RetroBalls. Biotopia by Mattias Andersson was a clear winner.

Smart Website

The home page has links to sections on documentation, news, archives, a showcase (where you can try a few demonstrations) and a forum. There is a large amount of information from which we offer some suggestions on where to start.

The huge News page is packed with information, much of which appears also elsewhere on the site. Click on the title of an article to see it in its own page. (You may find it easier to find material in the monthly digests or the developers' log). We have already referred to the "Playing with the design" article. You will learn lot by working through the graphics and game development articles by Jon Lennart Aasenden. (Follow these links to Smart Graphics Parts 1, 2, 3, 4 and 5 and Game Programming Parts 1 and 2). This excerpt explains the success of the graphics.

Excerpt from Game Programming:

"HTML5 has this amazing new feature, namely hardware accelerated CSS. Which means that you can get the GPU (graphical processing unit) to do the work for you (which is what the sprite3d.pas unit is all about. See the demos/spartacus.opp). So instead of manually scrolling the pixels of a bitmap of DIB like we would under native Delphi, scanline by scanline – we can cheat and draw the whole map (if it’s not too large) onto an offscreen bitmap – then use that bitmap as a background for a normal DIV control. Scrolling is then just a matter of changing the X and Y position of the control’s CSS rather than brute-force pixel manipulation."

The News page tracks the development of the Smart Mobile Studio and you will find many further helpful items there, including Using external JS libraries with Smart Mobile Studio.

Find interesting and informative discussions such as the following on the Forums pages.

Other Websites

  • Smart Pascal Help
  • The Smart Programmer website by the Smart project manager Primož Gabrijelčič is an obvious place to look for authoritative information.
  • Other articles by Primož Gabrijelčič such as the one on layout on The Delphi Geek website.
  • See applications produced by Eric Grange in his HTML5 section on the DelphiTools website.
  • The personal website of Jon Lennart Aasenden, the inventor of Smart Mobile Studio.
Programming - a skill for life!

Getting Started, Links and other resources