Tag Archives: Object Pascal

SPNG: Be informed when values change

Posted on by Posted in Developers log, News, News and articles 2 Comments

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

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!

That installer thing

Posted on by Posted in Developers log

Smart Mobile Studio can be downloaded as a traditional installer-file for Microsoft Windows. This works quite well, especially when doing a clean install, and it would be very odd not to provide an installer in 2016.

However, we do get feedback from people that experience problems with this. Not the installer itself, but rather when they update their system by just installing on-top of an older installation, things become problematic. In short: depending on just how old that installation is, it can be plain sailing or a frustrating experience.

In newer versions of SMS you dont need to download a new installer

In newer versions of SMS you dont need to download a new installer

A while back we introduced the concept of “live updates”. In short Smart Mobile Studio ships with an automatic update application that makes sure you have the latest executables, the latest RTL and that your libraries are always fresh off the mint. Each version of Smart has its own channel inside the update program. The value of such a system is naturally that you dont have to keep on downloading installers, punch in the serial number – or that we accidentally overwrite or delete your own library files. The updater will only deal with the files known to it’s RTL, and leave your work in peace.

File IO is not just write and forget

Windows abound

Windows abound

Windows is not what it used to be. I personally think Windows has embraced the concept of users, access rights and credentials quite well (although Windows Vista made me leave the platform for Ubuntu Linux for a while). But all in all, Windows 7, 8 and 10 are a joy to use.

However, writing an installer that should be compatible with the majority of Windows systems (as many as possible) is not actually straight forward.  There are still things like credentials, roaming and non-roaming profiles, read/write rights, elevated users and functionality requiring admin notification (not to mention access bits on the filesystem itself); So a Windows box in Indonesia is not nessacarily identical to a Windows box in north America.

Microsoft have clear cut rules established for what paths to use when installing software. Smart Mobile Studio follows those rules always, but just because you follow the rules, doesnt mean that the user’s credentials (which propagate into everything he/she does) allows you to write all the files. This is where elevation comes in; Something that is finally easier to deal with in Delphi, the compiler we use to make Smart Mobile Studio.

We have seen people try to install Smart Mobile on thin clients and chrome-books, on roaming profiles in a corporate environment to their old Windows 98 machine. To make a long story short: modern Windows can be configured to be just about anything, and when installing a development platform you really need a normal PC without those restrictions. A developer machine.

Older installations

One of the biggest problems we have had and something that is topping our “how to” question chart, is when they have an ancient version of Smart Mobile Studio on their harddisk (anything from the first beta through version 2.0). This was before we added the automatic update program, and more importantly — the preferences files and dll files have since been utterly re-designed.

So they install the new version thinking it will replace some 3-4 year old install. But fact is, the installer will not overwrite the preferences file, and in many cases its not allowed to delete/replace the dll files. The old software prior to the update program must be manually un-installed through Windows before you install a more modern version (!)

What typically happens is that the old preferences file is left lingering on the system, the new executable tries to read it but finds none of the values it expects. This causes conflicts inside SMS, the server in particular is sensitive to this (which will be made more robust). This is not critical stuff, but annoying.

Using an old preferences file on a new exe will cause problems

Using an old preferences file on a new exe will cause problems, this is a typical stacktrace

The secondly, more critical, is when the older DLL files for the webkit rendering engine is left to linger. That means the header-files we use to talk with the DLL files wont match, causing a serious and show-stopping exception.

Again, manually uninstall the older version first. Then go into your “program files” folder and make sure to delete it completely. Same goes for “program data” (or appdata local or roaming). And last but not least, “user data” where library units, the RTL and various other tidbits are stored.

Using the update program

If you have a newer version you really dont need to download and use the installer. Simply start the update program and it will download the latest files. But its vital to remember that if you have made manual changes to the RTL files (which technically you shouldnt, but we dont mind as long as you stick to the license agreement for copying) – the update program will overwrite those files.

The point of the update program is to make sure the RTL, libraries, shims and IDE executable is the latest. It wont touch files that doesnt belong to SMS.

Events as objects

Posted on by 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 by 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 by 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

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

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 by Posted in Developers log, News and articles
Neuron groups, ZEISS-Microscopy, CC

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 by 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 by 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

Fractal art

Demos

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 by 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

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

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

What is new in community beta 2?

Posted on by 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 by Posted in Developers log
Waste of time? Think again!

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

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

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.