Smart Mobile Studio | Tag Archives: javascriptjavascript Archives

SPNG: Be informed when values change

There are many new and powerful features in the upcoming release of Smart Mobile Studio (also refered to as Smart Pascal, Next Generation: SPNG in short): One of the most powerful is the ability to be notified when a value or object changes with a single line of code.

So far TVariant has just been a helper class for dealing with typical tasks. Well, perhaps not just typical because under Smart Pascal, variants can map directly to a javascript object (of any type) and allows you direct access to its prototype. The Handle property that all visual controls have is an example of this. The type TControlHandle is actually a reference to the visual element inside the DOM (document object mode). So by accessing that directly in your code, you can change styles, attributes and properties of that element. You are not bounds to only use our pre-fabricated solutions.

In the next update TVariant have a lot of new members. Two that stands out as important: watch() and unwatch().

As their name imply they will warch something for you. In this case you wil be notified whenever a single property, a whole object or indeed – a property deep within an object is altered. It may sound trivial but it’s actually one of those features that lays the foundation for responsive, data-aware controls.

But you can use it for many other things as well. For example you can now attach an event directly to a string. And whenever that string changes (either by your code, the user, or some other script) you can act on it directly. That is pretty cool and very helpful!

  // create an empty javascript object
  var MyValue: Variant := TVariant.CreateObject();

  // Set a default value
  MyValue.NewProperty := 12; // add a property and set a value

  // We want to know when the object changes
  TVariant.Watch(MyValue, "NewProperty", procedure ()
    begin
      showmessage("You changed the value!");
    end);

In this snippet we setup a javascript object and place a named-property inside that object. We then listen for changes to that property (by name even). So if you change that value further down in the code, or by calling some procedure elsewhere – the event will fire and show the message dialog.

This is of-cource just a tiny fragment of the new code that has been added, not to mention the changes and fixes. Some of these features are presently in alpha stage and is being tested. We will post more and more news in the days and weeks ahead – and we are sure you will be pleased with some the fantastic new things you can now code!

Here is an example of the new desktop and windowing applications you can write (picture below): The smart desktop!

The Smart desktop

We decided to update the uartex Media Desktop, an example initially made for touch based embedded environments – and turned it into a fully functional desktop environment!

Both the desktop itself, the filesystem, the IO drivers and windowing toolkit is written in Smart Pascal. You can create kiosk software designed to run on embedded devices, advanced applications designed to run on your intranet – or full cloud systems. So it can run a Smart application inside each Window if you like. But you have full control over windows, file access, directly listings, menu items and can sculpt both the desktop and applications to suit your needs.

The desktop can be coupled with a node.js backend that handles multi-user login and file access. It gives your users access to designated home-folders (again under your control). So each user can have their own work files just like a thin client, and each user can run different applications from a fully working desktop environment.

Below you are seeing Quake II compiled from C/C++ to LLVM bitcode. This is in turn compiled to JavaScript via asm.js. This means the browser will compile the javascript into machine code after loading. So Quake II runs at native speed, all JavaScript, inside our desktop window.

Create windowed applications with Smart Desktop

You will also be happy to head that x86 Linux and ARM kiosk distros have been created. So once happy with your desktop you can in fact boot straight into it in fullscreen. No Linux desktop or shell — just your desktop running. Both Firefox and Chrome can be used as presenter.

Have a great easter!

JavaScript hardware, books and the long awaited update

Posted on 03.11.2016 by Jon Lennart Posted in News 1 Comment

Worth every penny!

If you head over to Manning publishing you will find a very interesting book called Javascript on things, written by Lyza Danger Gardner. As mentioned both here as well as Jon’s developer personal developer blog (*) on numerous occasions – more and more hardware is capable of running JavaScript. Or to be more precise: they use JavaScript as their primary automation language.

There is actually a whole market where you as a Smart Pascal developer can use your skills to deliver top of the line products. A market where archetypical languages like C++ and Delphi makes less sense. IOT is about adapting to technology quickly, pivoting on a dime, connecting hardware together in new and exciting ways. In such a market script engines makes more sense than heavy-duty native languages.

If this inspires you then have a look at JavaScript of things, it is one of those books you can return to again and again.

Smart Pascal and IOT

While we love JavaScript at The Smart Company we created Smart Pascal for a reason, and that was to give you the best of both worlds. Smart Pascal gives you a huge advantage over vanilla JavaScript.

The ability to write proper classes with traditional inheritance just like you do in C++ or Delphi is one of them. While JavaScript developers will argue that JS is object-oriented, it is not really true; at least not in the traditional sense. A JavaScript object has no VMT (virtual method table) and instead relies on something called prototypes. Which essentially is an object that can be expanded with new properties at any time, and properties can be both values and methods.

Inheritance is typically emulated through cloning of these prototypes. This is extremely inefficient and cause compatibility problems between frameworks and libraries. This is why standards such as require.js has become so important for JavaScript development because it provides structure. The same structure and order languages like object pascal and C++ gives you out of the box.

Smart Pascal doesn’t need things like require.js or similar standards to deliver order and safe code. Nor do we need to clone prototypes en-mass to fake what is already an intrinsic part of the language. Our compiler organize and sculpts a VMT in JavaScript itself and does exactly what C++ and Delphi does. Namely to isolate an objects data (the fields of your class) in a Self record. A self record that is passed along to class calls as the first parameter automatically. This completely removes the need for low-level cloning of entire objects. Class code is implemented once, and only the self record is initialized when you create new instances. So if you create 10 instances of a class you don’t get 10 copies of all your methods, all your properties and so on in memory. Instead you get 10 instance records (self) and your code is compiled once. This is the way of things, the way of the force .. 😉

So believe it or not, but traditional object orientation in itself an advantage over traditional JavaScript. Then you get all the other perks of a real, archetypical programming language on top of that: interfaces, partial classes, virtual and abstract methods, helper classes, operator overloading, unit organization, a wast runtime library of classes and visual controls – and much, much more!

Most Delphi or C++ developers don’t really think about these things. We are so used to proper inheritance and VMT operations that we regard them as fundamental. Which is also why many C++ and Delphi developers dont like to work in JavaScript. They get the sense that JavaScript is sort of half-finished. Which is actually true! The author of JavaScript never got to finish it, so the prototype system in JavaScript was never intended to be publicly exposed. He was aiming for object inheritance like Smart Pascal and TypeScript delivers – but sadly he never got to finish that part.

Using Smart Pascal to work with JavaScript enabled hardware

Smart Mobile Studio has supported this for quite some time. You can create Espruino projects if you need to work with micro controllers. If you look in the RTL directory there is a folder named Espruino, and it contains pascal versions of the Espruino JavaScript objects. It really gives you a huge advantage over bare-metal JavaScript.

Then there is node.js, which is essentially the engine most hardware vendors add to their SoC to JavaScript enable their devices. Node.js has been supported since version 2.0, and allows you to write a whole host of platform independent projects. You can write Linux servers, Linux Services (daemons as they are called), Windows services — anything you can think of really.

But naturally, you need to get a book on node.js and Espruino to know how to use these project-types properly. But they are all there and once you get into node.js and what you can do, the world really is your oyster.

The next update to Smart Mobile Studio

We are working very hard on getting the next version of Smart Mobile Studio ready for x-mas. While there will be bug fixes to the IDE (and a few new features as well), this update is primarily an update for the RTL and run-time library. We have tried very hard to keep things compatible with previous versions, but there will be changes that requires a bit of editing. But believe me, it will be worth it.

Here are some of the highlights:

Better fragmentation of classes and unit files
Namespace orientation
New visual components
Unified filesystem classes
A full overhaul of all visual controls
Plenty of bug fixes
Faster execution time
Better resource handling
Wiki documentation!

Stay tuned for more in-depth look at all the new classes and the features they provide.

As a bonus, Jon Lennart Aasenden have decided to give his upcoming book, Smart Mobile Studio Unleashed, for free to registered customers. The book will retail for $33 on Amazon. So if you want to learn the inner secrets of the VJL (visual JavaScript component library), how to write kick-ass custom controls – all the way to scalable, cluster based node.js services, this is THE book to get.

(*) the statements and articles on Jon’s personal devlog is not affiliated with this company. His blog is a personal blog which covers a variety of topics.

NodeJS server programming

Posted on 26.09.2016 by Jon Lennart Posted in Developers log 3 Comments

Work is progressing at a steady pace, and one of the aspects of the new Smart Mobile Studio is how the RTL is cleverly organized into namespaces.

Now it’s to early to spill the beans on all the new stuff, but in short we reached the point where we had to make some radical changes in order for the product to grow and reach its full potential. So far our RTL has aimed at the much loved VCL/LCL component architecture. This is not going to change at all, but how things are organized just had to be dealt with at some point. The longer we wait, the harder it’s going to be to introduce new features.

Namespaces

In the new model we have a clear distinction between visual and non-visual units. Visual units (or code in general) depends on the document object model (DOM) being present. As you probably know, non-visual environments like Node.js and IO.js doesnt have a document object model. These are primarily designed to run server code. They are also used to write actual system services (specially on Linux where turning a script into a background service is easy) or command line scripts.

Add to that technologies like Cordova Phonegap and Espruino (micro controller); then hybrid systems like nodewebkit, and you probably understand how important a clear separation of concepts and code is. But im not going into the nitty gritty of this now.

NodeJS and server side programming

Smart Mobile Studio have shipped with a node.js project type for some time. It throws you in at the deep-end of JavaScript programming, with nothing but the low-level header files to work with. This is fine if you are a JavaScript guru and know node intimately. But working on the level of headers and external declarations is not really user friendly. When you need to finish a server by next week, one that scales and can be clustered (which is just so powerful that I find it hard to describe just how cool this is) – you dont want to fiddle around with header files.

Well, soon you wont have to! In fact, as of writing I’m testing the first server type (http) and it’s performing brilliantly. Its a pleasure to write this part of the RTL !

Nodejs rocks! And with Smart Pascal, it rocks even more!

A simple Node.js server

So, what does the most basic node.js web service look like? It’s almost to easy:

  var server := TNJHTTPServer.Create;
  Server.Port:=80;
  Server.OnAfterServerStarted:= procedure (sender: TObject)
    begin
      console.log("Server has started, listening on port:" + TNJHTTPServer(Sender).Port.toString);
    end;

  Server.OnRequest := procedure (Sender: TObject;
      const Request: TNJHttpRequest;
      const Response: TNJHttpResponse)
    begin
      console.log("-------------");
      console.log("Handling request:");
      console.log(request.Method);
      console.log(request.Url);
      console.log(request.Socket.remoteAddress);
      console.log("Listing headers:");
      for var x:=1 to request.headers.count do
      begin
        console.log(request.headers.Items[x-1]);
      end;
      console.log("-- OK");
      var LText:= "Your headers are:" + #13
        + Request.Headers.ToJSON() + #13
        + "All done.";
      response.end(Ltext);
    end;

  server.Start;

And that’s just one type of server. The really exciting stuff is when you dig into websocket and use socket.io to design your protocols (and clustering!). You can even setup events on both sides that trigger on spesific message types. Forget about heavy duty threading models — all of that is done for you. All you have to do is write the actual service.

Benefits of Node.js

Hosting node services costs next to nothing. Hosting providers are a dime a dozen and you can forget about those nifty prices you normally pay for pure executables (like under Delphi or Lazarus). So there is a huge financial aspect to take into consideration here as well, not just technical jargon. Node services can be moved, they are platform independent and couldnt care less if you use Linux or Windows, Amazon or Azure: as long as node is installed your good to go!

And last but not least: inter-communicating with existing services that are modern, and delivering solutions to your customers that talk JavaScript, Delphi, C++, C# or whatever their preference may be.

So good times ahead!

Events as objects

Posted on 18.01.2016 by Jon Lennart Posted in Developers log 5 Comments

Events are fun right? Well, only in part to be honest. For example, what do you do if you want to catch the same event but at different places?

This is where JavaScript’s addEventListener() comes into play. In short it allows you to add as many event-handlers to the same event as your heart desires. But raw unadulterated JavaScript is a bit of a mess, so I decided to wrap this up in clear cut objects. Oh, and I added a “fixed” event for when you want to have objects for standard events as well.

So now whenever you want to hook an event without ruining your published event-handlers (for instance in TW3CustomControl) you can just use one of these 🙂

Enjoy!

unit eventobjs;

interface

uses 
  w3c.dom,
  SmartCL.Components,
  SmartCL.System;

type


  TEventObjTriggeredEvent = procedure (sender:TObject;EventObj:JEvent);

  TEventObj = class(TObject)
  private
    FOwner:     TW3TagObj;
    FAttached:  Boolean;
    FEventName: String;
  protected
    procedure   HandleEvent(eobj:variant);virtual;
  public
    Property    Attached:Boolean read FAttached;
    procedure   Attach(EventName:String);
    procedure   Detach;
    constructor Create(AOwner:TW3TagObj);virtual;
    destructor  Destroy;Override;
  public
    Property    EventName:String read FEventName;
    Property    Owner:TW3TagObj read FOwner;
    Property    OnEvent: TEventObjTriggeredEvent;
  end;

  TFixedEventObj = class(TObject)
  protected
    FAttached:  Boolean;
    FOwner:     TW3TagObj;
    procedure   HandleEvent(eobj:variant);virtual;
  protected
    function    DoGetEventName:String;virtual;abstract;
  public
    Property    Attached:Boolean read FAttached;
    procedure   Attach;
    procedure   Detach;
    constructor Create(AOwner:TW3TagObj);virtual;
    destructor  Destroy;override;
  public
    Property    Owner:TW3TagObj read FOwner;
    Property    OnEvent: TEventObjTriggeredEvent;
  end;

  TElementRemovedEvent = class(TFixedEventObj)
  protected
    function  DoGetEventName:String;override;
  end;

  TElementAddedEvent = class(TFixedEventObj)
  protected
    function  DoGetEventName:String;override;
  end;

implementation


//#############################################################################
// TElementAddedEvent
//#############################################################################

function TElementAddedEvent.DoGetEventName:String;
begin
  result := "DOMNodeInserted";
end;

//#############################################################################
// TElementRemovedEvent
//#############################################################################

function TElementRemovedEvent.DoGetEventName:String;
begin
  result := "DOMNodeRemoved";
end;

//#############################################################################
// TFixedEventObj
//#############################################################################

constructor TFixedEventObj.Create(AOwner:TW3TagObj);
begin
  inherited Create;
  FOwner:=AOwner;
  Attach;
end;

destructor TFixedEventObj.Destroy;
begin
  Detach;
  inherited;
end;

procedure TFixedEventObj.Attach;
begin
  if FAttached then
  Detach;
  FOwner.Handle.addEventListener(DoGetEventName,@HandleEvent,true);
  FAttached := true;
end;

procedure TFixedEventObj.Detach;
begin
  if FAttached then
  begin
    FOwner.Handle.removeEventListener(DoGetEventName,@HandleEvent,true);
    FAttached := false;
  end;
end;

procedure TFixedEventObj.HandleEvent(eObj:variant);
begin
  if assigned(OnEvent) then
  OnEvent(self, JEvent(eObj));
end;

//#############################################################################
// TEventObj
//#############################################################################

constructor TEventObj.Create(AOwner:TW3TagObj);
begin
  inherited Create;
  FOwner := AOwner;
end;

destructor TEventObj.Destroy;
begin
  if FAttached then
  Detach;
  inherited;
end;

procedure TEventObj.HandleEvent(eobj:variant);
begin
  if assigned(OnEvent) then
  OnEvent(self,JEvent(eObj));
end;

procedure TEventObj.Attach(EventName:String);
begin
  if FAttached then
  Detach;

  FEventName := EventName;
  try
    FOwner.handle.addEventListener(FEventName,@HandleEvent,true);
  except
    FEventname:= '';
    FAttached:=false;
    exit;
  end;
  FAttached:=true;
end;

procedure TEventObj.Detach;
begin
  if FAttached then
  begin
    try
      FOwner.handle.removeEventListener(FEventName,@HandleEvent,true);
    finally
      FEventName := '';
      FAttached := false;
    end;
  end;
end;

end.

Nullable types

Posted on 16.01.2016 by Smart Mobile Studio Team Posted in Developers log, News and articles

JavaScript – in contrast to Object Pascal – is a dynamic language. Beyond dynamic type checks, this also means that it can be extended at runtime. Thus, variables and with this fields of prototypes may only be present (accessible) when they have been set first. In external JavaScript libraries, these are typically initialized or set, but not necessarily. And sometimes it is even intentional to leave them unset.

Continue reading→

Telling a 32bit float from a 64bit float

Posted on 16.01.2016 by Jon Lennart Posted in Developers log 2 Comments

The RTL is getting a bit of attention these days, with plenty of visual effects, tweens and more being added to it. It’s easy to forget that sometimes even the smallest things can be of utmost importance. Like how to tell a single from a double via code!

As you may have noticed, Smart Mobile suddenly got support for streams, memory allocation and the ability to manipulate data on byte and bit level. This may sound trivial but it actually changes how we write and deal with data completely. Under vanilla JavaScript working with bits and bytes can be a huge problem. Most JS developers shun native, raw data like the plauge – because they cant do much with it. Well, thats not going to be a problem for us! Buffers, streams, memory allocation, move, copy — easy as apple pie 🙂

Effect Virtual Machine

Amos Basic 2d and 3d

Today I was fiddling with a “mini language” module I have been working on. Actually it’s an effect module that allows you to script and compile effect logic in smart pascal itself, so almost like a second language. If you ever played around with Amos Basic on the Amiga home computer back in the 90’s, you may remember that Amos had a secondary animation language? Well, on that old computer sprites and animation was interrupt based (just think threads if you dont have any idea what hardware interrupts are). This allowed the creator of Amos Basic, Francois Lionet, to add a really cool animation language which was executed in the background — allowing your main program to run in parallell to your animation code.

I dont know how many months and years I spent coding Amos and BlitzBasic in my teens, but let’s just say it was A LOT! Francois Lionet and Mark Sibly, the author of BlitzBasic and the Blitz compiler chain were my absolute childhood heroes.

Well, that animation language (but better naturally) is in effect what I am hoping to achieve with my little virtual machine. I really want it to be super-easy to create awesome effects, and I want it to be fast, flicker free and smooth as a baby’s bottom. So a mini bytecode system seems like just the ticket to get that working – and naturally it’s written in smart itself, so you can play around with it when it’s done.

But back to the problem: I had to extend the TReader and TWriter class with the abillity to handle variant datatypes. This also meant adding “word” as a new RTL datatype to handle those 16 bit values. And last but not least — detecting the difference between 32 and 64 bit floating points.

I mean, if you get that wrong it’s going to cause havoc!

CodeSeg and DataSeg

In a bytecode virtual machine like, say, Java or CLR (common language runtime, .NET style) your compiler have to deal with two different things: code and data. One thing is variables (both global and local), but what about constants? Whenever you pass a fixed value to a procedure, that value is actually a constant. It doesnt change and it will be compiled with your program. Well this is where the compiler get’s smart and picks that up, and the value is stored in a special list. So when the program runs, it will fetch that constant from storage and use it. Or, in case of the CLR, it will be compiled directly into the bytecode if it’s an intrinsic value (long story).

Bytecode galore

As you probably guess, that’s called a dataseg (data segment), which is different from a codeseg, where the opcode and “asm” is stored.

So thats when i suddenly realized: we have no function in the RTL to tell the difference between a 32bit float and a 64bit float !

Well here is one way of telling the difference. It’s already incorporated into the Read/Write variant, which are functions I added to TReader and TWriter. So you dont have to worry about it. But for those that have (for some odd reason) been looking for this — here it is:

 function IsFloat32(const x:variant):Boolean;
 begin
  asm
  @result = isFinite(@x) && @x == Math.fround(@x);
  end;
 end;

Not much is it? But yet so important.

Using external JS libraries with Smart Mobile Studio

Posted on 15.01.2016 by Smart Mobile Studio Team Posted in Developers log, News and articles

Neuron groups, ZEISS-Microscopy, CC

In the forums there was a discussion about how to wrap existing libraries transparently and with a minimum of overhead. In that discussion an example was given about how to wrap the neural network library brain. To avoid posting the same text here as well, this blog post is about translating another neural network library called ‘Synaptic‘.

Continue reading→

Smart Mobile Studio 1.1 RC (build 1.1.0.400)

Posted on 15.02.2013 by Smart Mobile Studio Team Posted in News

We are very proud to present the release candidate for Smart Mobile Studio version 1.1 (build number v1.1.0.400). If you would like to give this groundbreaking product a test drive before we officially release it, then you can download the installer directly from SmartMobileStudio.com/download/setup_v1_1_0_400_rc.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 some of the improvements that have been done since version 1.0 (see full manifest of changes for beta 1 here).

IDE changes

Added: Support for external form files
Added: Navigate to ancestor from class-browser
Added: Components are now organized in more tabs
Added: RTL source proxy, speeds up compilation and dependency chain
Added: Syntax hints and improved code insight
Added: The IDE now uses threading to handle background compilation
Added: Dependencies for controls are automatically added to the uses clause
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

Updated: Remobjects headers
Updated: WebGL headers
Updated: Sprite3d
Added: DrawTo, DrawPart and misc CODEF functions added to TW3Canvas
Added: TW3Progressbar control
Added: TW3ListBox control
Added: Unit for complex numbers (w3complex.pas)
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

Added: Support for RTTI (!)
Added: Support for property expressions
Added: Support for interface expressions
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: formatting of Archimedes Spiral
Added: frames demo
Added: modal dialog example

Sincerely,
Jon Lennart Aasenden
—
The Smart Mobile Studio Team

Smart Contest 2013 – Round #1

Posted on 01.02.2013 by Smart Mobile Studio Team Posted in Developers log, News

February is upon us and so is our announced graphics competition! This is the first competition out of four this year. So this is your chance to win some exciting prices by showing off your Object Pascal skills!

The topic of this round is: graphics programming (eg. demo-scene, fractal art, visualizations etc).

The rules are as follows:

Registration before the 10th of February (registration at contest@smartmobilestudio.com)
Deliver your contribution before 1st of March
Games are not accepted this round (that’s scheduled for a later date)
User interaction is allowed (but not mandatory)
Porting of retro demos is allowed (providing it is a clean rewrite)
JavaScript snippets are allowed (within limits)

Fractal art

Demoscene

Prizes

First prize is a tablet device of your own choice (up to USD 750). So have your pick between

iPhone
iPad
iPad mini
Windows Tablet
Windows phone
Android tablet or phone

Judges

Primož Gabrijelčič

Developer of the popular omnithread library, author of the Smart Mobile Studio Bible, contributor to the Smart Mobile Studio IDE and RTL, and dedicated object pascal speaker and innovator

Christian Budde

Developer of various open source projects. Among these, the popular Delphi ASIO & VST Project for professional audio related development. Another focus of his work is Graphics, which is reflected in projects such as the modernized AggPas implementation, an independent object pascal png library and a native object pascal interface to TrueType fonts (called PascalType). He is also contributor and maintainer of Graphics32.

Currently he is working on the Smart Mobile Studio IDE and RTL.

Delivery

All contributions must be delivered in full source and binary with no missing pieces. The project must compile on the current version of Smart Mobile Studio (1.1 branch).

Happy coding!

Smart Graphics

Posted on 24.01.2013 by Jon Lennart Posted in Developers log, News

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.

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

Only days left

Posted on 11.05.2012 by Jon Lennart Posted in News 17 Comments

Only days to go

It is now only a matter of days before Smart Mobile Studio 1.0 goes on sale. It marks the end of a one year journey for us to create something completely new for the object pascal community, written in nothing but Delphi itself. But while the journey from idea to realization is over, the next stage of Smart technology is about to begin – and it’s going to be big. Really big.

In this our first release, focus has been on providing you with a solid foundation. A visual javascript component library (VJL) with identical parent/child relationship to what you are already familiar with. An integrated development environment with essential functionality including a component palette. And last but not least, a mock form designer with live rendering of the actual HTML5.

As we move ahead each aspect of the formula will be expanded, strengthened and refined. And while we cant blow the whistle just yet, we have something very exciting in our labs that is going to change everything. Forever.

This is quite possibly the most significant Pascal
development to be watching right now, and brings
the wonderful Pascal language to the world of
Internet development! -Simon Stuart, Delphi developer via Google+

What is new in community beta 2?

Posted on 25.04.2012 by Jon Lennart Posted in News 4 Comments

Below are some of the new features that has been added to Smart Mobile Studio community beta II. We hope you find our efforts in creating this product,a product that is both unique, innovative and extremely powerful, useful and interesting. Our customers can look forward to gestures, databases, even better browser support, Phone-Gap support and (last but not least) WebGL. We also aim for tight integration with classical Delphi server technology, like the Remobjects remoting framework and the C# websocket hub.
Continue reading→

Pascal game developer’s compo!

Posted on 31.03.2012 by Jon Lennart Posted in Developers log

Waste of time? Think again!

Many programmers don’t get the demo scene. What could be the point of spending hours, days and weeks on creating effects? Well for me the demo scene has been one of the best things in my life. I grew up with Commodore 64, MSX, Atari and Amiga machines. And while we all loved to play games only the few asked the magical question “how”. Some were happy to just play the games, but the rest of us, those that became programmers as adults, were always the people who just had to ask the question “how the hell did they do that”?

I have been extremely privileged growing up in Norway during the 1980’s and 90’s, nowhere in the world (with exception of Germany, Sweden and Finland) was the demo scene stronger than in Norway. Even to this day we fill the viking ship annually with thousands of young programmers full of creativity (check out this site for tickets to The Gathering). So there can be little doubt that the “demo scene” is primarily a European phenomenon.

PS: if you are looking for talent then The Gathering should be the proverbial shangri-la !

But why? What is it good for?

Demo coding is one of the best ways of growing as a programmer and as a thinking individual. The problems you face (like tweening objects, calculating sprite paths, how one object stands in context to another, proportion, animation cycles – the works!) will help you in every avenue of life, including your personal life since it involved organization and thinking in terms of context. It will benefit you in the most unlikely of scenarios: Take an example from my life, I always wanted to code games, but I spent many years coding invoice systems, win32 services and all the “boring stuff”. But one day my employers wanted a 3d look and feel to their report, so i ended up using the skills i learned as a demo coder to complete tasks. Without it those reports would have been very dry, very dull and not very productive. So it turned out to be my creative side that made the difference, not my education (!) You dont learn stuff like this at the university.

No matter what your interests might be, from games programming to spreadsheets – you are bound to face the same mathematics and the same train of thought. But those that really succeed in these things are the programmers who took the time to really experiment with demo and games coding. Anyone can code a spreadsheet, but it’s the hacker that makes the numbers bounce 😉

The Pascal Game Developer’s compo

Smart Mobile @ 98% complete

When you think “pascal”, you think database driven business applications right? Well that’s just wrong. Delphi (which is the universal name for object pascal) earned that label because it made database programming simple in the early 90’s. But object pascal as a language is capable of so much more. So much so that databases become almost trivial in comparison. Remember all those high-speed dos games? (if you don’t, then get an emulator) A lot of those games were coded in turbo pascal. This was before we had full OOP and the might of the VCL at our fingertips.

It thus stands to reason that with all the power of the Delphi XE2 and the latest free-pascal compiler, that object pascal could knock out some serious games right? I mean — when compared to a commodore 64, Atari ST or Amiga?

Remember that the commodore 64 contained the same cpu-chip that powers most modern dishwasher’s today. Yet that little machine running at 1Mz with an 8bit bandwidth knocked out some pretty cool games! Now imagine what you could do with a computer 10.000 times faster, with 32 bit graphics, 24 bit sound and an IDE unlike anything we had back in the 80’s!

Well, unless you are reading this on a Pentium PC, that computer is what you have right now.

The gathering, Vikingship, Norway

So… If they can do this on a 1mhz dishwasher, then surely we can do better right? With our dual-core processors, fifth generation 3d graphics chip-sets and latest operative systems?

Here are a couple of examples of what people can do with a commodore 64 (second video is from a modern PC, coded in machine code):

Instinct & Horizon C-64 Demo, 2008

And just how much brilliance can you pack into 64k of machine code?

Razor 1911 – my #1 demo group

And just to make it retro – here is the first Amiga demo i ever saw. This demo made me forget all about commodore 64 gaming, and ask the question “how”. This demo changed me from a gamer for a coder:

Doc – Demons are forever

Our mission is to follow javascript at every step. From it’s birth as HTML5 and onto it’s full evolution as a fully fledged multimedia system. We want to push the limits of what can be done under javascript to the full extent of it’s capabilities. And last but not least – to provide the infrastructure required for modern object pascal programmers to continue their hard earned experience and knowledge under a new platform. Javascript is quite alien to the average Delphi or FPC programmer, but with Smart you will be able to knock out apps with little effort.

Getting inspired

Today, the Pascal Game Developer competition started. And Smart was included in the list of allowed pascal compilers (jeey!). If you would like to use our product to push some limits then send us an email and we will return a preview version of smart (32bit) that you can use. You can use Smart as much as you want for the duration of the competition for free. While we are still in beta (with all the bells and whistles that pertains) there really is no compiler and IDE out there like Smart for webkit development!

Let’s push that border a couple of more inches, like pascal has always done 🙂

Click here for the pascal game developer’s website

About the author

Jon Lennart Aasenden is a software architect at Optimale Systemer AS. He is currently the lead developer of Smart Mobile Studio and have been a strong supporter of Delphi and object pascal since the beginning. He is also involved in the evangelizing of object pascal in Norway and is by many called “a Delphi fundamentalist” due to his somewhat radical teaching methods. The views of the author is his own and does not reflect the policy of Optimale Systemer AS.

What can Javascript do?

Posted on 10.02.2012 by Jon Lennart Posted in News and articles

Would you believe its 1k of source?

A lot has changed since the average programmer had a stab at javascript. As a Delphi developer I played around with it roughly 10 years ago (when everyone was doing scrollers, pop-up windows and the “dark side” of javascript) but a couple of years ago I realized that browser technology had come of age. And thus Smart Mobile Studio was born.

To give people a taste of what modern javascript can do I want to share a link to the JS1K website, which holds a “yearly” competition for the best javascript demos (using the canvas tag). The rules are simple: stuff as much graphical bliss as you can into 1k of source-code. The best effect and technique get’s the price.

My favorite is without a doubt: http://js1k.com/2010-first/demo/171 but all the demos on the website are really spectacular. Especially considering the size of the sourcecode.

So head over to JS1k and have a look!

And who needs webGL when we have hardware acellerated 3d transformation in webkit? Check out Sprite3d (note: requires a webkit browser, like Safari or Chrome) which we aim to wrap for Smart Mobile Studio in v1.2. Here is Mario Cart written in javascript and HTML5.

Understanding smart

Posted on 08.02.2012 by Smart Mobile Studio Team Posted in News and articles

Compiler technology

First, we are extremely grateful for all the positive feedback and questions regarding Smart Mobile Studio! We cannot underline enough how the enthusiasm really makes us work that much harder to deliver a knockout product that will serve the community for a long time. It is indeed clear that we have hit “bulls eye” and a serious gap in the modern programming model can now be filled. We are equally excited to that the emails stem from every corner of the software developing world, from the Delphi community, the C# community and believe it or not -the javascript community itself.

Since so many people have asked more or less the same questions, it would be a good idea to outline just what Smart is and what it does, so that people can appreciate even further the depth and broad application of what we are building and what we hope to achieve.

The compiler

Like all code generating systems, the Smart compiler knows only a handful of things. It knows how to handle units (source files), procedures, classes, enumerations, assignments and other important language features. But on it’s own the compiler have no “built in knowledge” of neither what a browser is or what a control looks like. A compiler and code generator is a very complex piece of software that is able to take your source-code, break it down and transform it into something else. Which is javascript in our case. But it could equally have been machine code or C#.

Beginners will discover a language that has withstood
the test of time with unparalleled elegance.

This is where Smart differs radically from a lot of the other products on offer, namely that its built from the ground up to be “real”. Where other HTML5 products out there have a fixed set of classes, and knowledge of what you are allowed to do is pre-determined by the vendor – Smart has more in common with a classical C++ or Object Pascal environments where you are in charge.

The VJL

Just like in Delphi

As you should expect, all the components and classes that ship with Smart was actually coded in Smart itself. We also ship the source units for our RTL (called the visual javascript library, or VJL in short) so that people can examine, learn and also make changes if they want to.

The underlying [RTL] work must have been tremendous -Michael Thuma, Delphi developer via Google +

You could in fact replace the entire RTL with your own version if you so desired. And that is something that no other mobile development studio on sale today can match. They all come with a predefined set of classes, and in the majority of cases these are closed API’s. Meaning that you dont have access to the source.

Smart blows this to pieces just like Borland Delphi once did. While the list of classes you get for free out of the box is to large for this document, the most noteworthy are:

TW3Component and TW3CustomControl
Full implementation of HTML5’s canvas
CSS animation classes
Font and bitmap handling, both on-screen and off-screen
Buffer classes and buffer-view classes, painstakingly implemented from the WC3 standard
Form classes, TApplication and smooth scrolling when navigating between forms
Timers, style mapping and much much more

And of-course, with a real compiler you can create as many classes and components as you wish. And you don’t have to be a javascript guru to do so. All you need is some basic understanding of object pascal and you are set to go.

Boundless possibilities

Just like you can create anything under the sun with Delphi, C++ builder or C# due to the fact that these environments have a real compiler – you can create anything you like with Smart Mobile Studio. Smart both compiles to and can interface directly with javascript – which means that whatever javascript can do, Smart can do.

Cool! I created my first OP4JS control: a DHTMLX grid
-André Mussche, Delphi developer via Google +

Smart Mobile Studio, early Alpha

It is by definition impossible to say what people will use Smart for. So far people have created games with it, connected to remote web-services, displayed database grids, added control bindings, created fantastic fractal explorers and much, much more. Just like Embarcadero ignited a firestorm of creativity on the Windows platform – our aim is carry that fire into the next frontier which just happens to be the browser.

So the question is not really if Smart Mobile Studio can support feature X. If you can sculpt it in either JavaScript or Object Pascal, then Smart can support it. We will provide you with the Visual Component Library and all the tools you need to create and interact with HTML5 and the latest web developments. We will also work hard to provide you with a standard set of components – but also give you the option to extend our technology with your own packages and components.

Nothing is impossible

Smart Mobile Studio is a vision and an idea. An idea brought to the table by Jon Lennart Aasenden, and embraced by the management at Optimale Systemer AS and a some key developers in the Delphi community. It was by many said to be impossible, if not heretical. When we presented the concept for the general public back in December 2010, it was met by applaud from the few and ridicule by the many. To make it a reality we have worked extremely hard, considering the technical difficulties involved.

Right before Christmas we shipped the first Alpha version, and some smart programmers of the Delphi community immediately created some stunning demos and thus proved the concept right.

And now, in February of 2012, the product has matures further, and we can proudly say that the vision has become a reality.

This tool should really get a place be in every Delphi developers toolbox.

Sincerely

The Smart Mobile Team