Smart Mobile Studio
  • News
  • Forums
  • Download
  • Store
  • Showcases
    • Featured demos
    • The Smart Contest 2013, Round 1 – Graphics
  • Documentation
    • Get the book
    • System requirements
    • Prerequisites
    • Getting started
      • Introduction
      • Application architecture
      • The application object
      • Forms and navigation
      • Message dialogs
      • Themes and styles
    • Project types
      • Visual project
      • Game project
      • Console project
    • Layout manager
    • Networking
      • TW3HttpRequest
      • TW3JSONP
      • Loading files
  • About

Monthly Archives: January 2013

Smart Graphics – Part 5

Posted on 31.01.2013 by Jon Lennart Posted in News

This is the final installment of our graphics programming overview. If you havent read the previous articles they can be found here:

  • first article
  • second article
  • third article
  • fourth article

In this final installment on graphics programming, we will be looking at Sprite3d. This is a very popular graphics library for HTML5 and javascript development which uses the latest hardware acelerated CSS technologies. In fact we found it so useful that we decided not to wrap it – but rather create a full implementation in object pascal from scratch.
Continue reading→

Smart Graphics – Part 4

Posted on 30.01.2013 by Jon Lennart Posted in Developers log, News 3 Comments

In this installment of our graphics tutorial we will be covering alpha blending (opacity) for controls and images, and also how to load images via code into your Smart applications. If you haven’t read the previous articles they can be found here:

  • first article
  • second article
  • third article

There are also plenty of examples in the documentation, here (see bottom of page) that will get you up and running quickly.
Continue reading→

Smart Graphics – Part 3

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

In our previous articles we covered general concepts related to graphics programming together with basic drawing methods, focusing on those that should be familiar to Delphi programmers. In this article we will investigate double buffering and learn about off-screen bitmaps.
Continue reading→

Smart Graphics – Part 2

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

In the previous article we introduced some general graphical concepts, things like double buffering, per scene rendering, sprites and alpha blending. Time to get our hands dirty and jump into it – how can a Delphi developer leverage his skills under HTML5? Well let’s find out!
Continue reading→

Smart Graphics

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

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

  • W3Schools HTML5 canvas tutorial
  • HTML5 path tutorial
  • Liquid particles demo
  • Apple Quartz API documentation
  • Or so they say JS demo
Apple code delphi graphics javascript Object Pascal pixel webkit

Smart Mobile Studio v1.1 (beta-2)

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

We are very proud to present an updated beta-version of our 1.1 release (build number v1.1.0.372) of Smart Mobile Studio. If you would like to give this update a test run before we officially release it, then you can download the installer directly from SmartMobileStudio.com/download/setup_v1_1_0_372_beta.exe


(The context menu is replaced with Ctrl+Shift+R (start/stop recording) and Ctrl+Shift+P (replay the recorded macro).

We have done a lot of improvements in the IDE, the editor, the RTL and the Smart Pascal language. Below is a list of the improvements that have been done since the previous beta (see full manifest of changes for beta 1 here).

IDE changes

  • Fixed: Resizer bugs for nested controls
  • Fixed: Scrolling issue fixed ([CTRL] + [Up]/[Down])
  • Fixed: Disabled unit structure flickering
  • Fixed: LineCount issue
  • Fixed: Case fix for strict hints
  • Fixed: A label “mistake” in the baseframe (it was renamed further up the chain).
  • Fixed: modified [CTRL]+/ to work the same as in Delphi:
    • if a single line is changed, caret is moved to the next line (current column is preserved)
    • if multiple lines are selected, comment is toggled for the whole block and caret is move to the line following the block (current column is set to 1)
    • modification is placed into the undo buffer so that it can be undone
  • Altered: [CTRL]+[/] is replaced by [CTRL]+[#] for systems where [/] is only accessible via [SHIFT]
  • Altered: Minor changes on compiler output (bulk output of errors, warnings and hints).
  • Altered: Search and replace dialog remembers the last states
  • Altered: improved code proposal (insert item highlight)
  • Altered: dialogs are centered
  • Altered: Recent file on welcome tab now supports to show unlimited entries if desired (by default limited to 10 items)
  • Added: Pascal “Gabelou” StyleCop (see prefrences->misc. to enable it).
  • Added: Rename refactoring (including closed files)
  • Added ‘Format Keywords’ action (see popup menu), which translates all keywords to lowercase.
  • Added: Simplified BrowserAPI
  • Added: possibility to filter log messages from the console output (filtered ‘event.layerX and event.layerY are broken and deprecated …’ by default). Select a certain text to filter and right click -> Ignore Message to filter out all messages containing this particular string. The filter will be resetted on restart.

RTL

  • Minor formating and added overload function for CreateImageData
  • Added fast sequential read text file loaders
  • Applied the new ‘Format Keywords’ to the remaining RTL files
  • Removed duplicate & tweaked hash function
  • Improved hashing function
  • dialogs need custom initialization
    • modal dialog support integrated into TW3CustomApplication (ShowModal, HideModal)
    • modal dialog is re-centered if application is resized (for example when orientation of a mobile device changes)
    • added  TW3CustomApplication.CreateOpaqueMask
    • TW3CustomControl.getMaxZIndex is now public
    • modal dialogs triggered from modal dialogs are now supported
  • Fixed: zIndex issues with modal dialogs
  • Fixed: opaque layer has high z-index to cover all controls on the form
  • Fixed: SendToBack
  • Altered: dialogs are centered on the form
  • Altered: event handlers are only called when assigned
  • Altered: W3ModalDialog made external for easier reuse
  • Altered: updated Remobjects interface
  • Altered: Changed default Mouse event X,Y coordinates
  • Added: W3ModalDialog uses opaque div to block owner form (tnx to Eric)
  • Added: PixelRatio info
  • Added TVariant.Properties + OwnProperties
  • Added HorzLine/VertLine
  • Added: New FillRectF/StrokeRectF overloads
  • Added: TW3CustomApplication.FormByName, TW3Component.ChildByName, TW3Component.EnumChildrenAltered: SetSize now virtual
  • Added: PhoneGapAPI is now complete

COMPILER

  • Fixed: Case fixes for strict mode
  • Fixed: an issue where compiler would accept method implementations in a different unit the class was declared
  • Fixed: Lambdas don’t have a “var”/”const”/etc. section
  • Fixed: issue with invalid symbol table in suggestions in case of fatal error in a lambda
  • Fixed: SymbolDictionary bug for forwarded overloaded methods
  • Fixed: calling overloaded inherited constructors
  • Fixed: codegen for assignments of a function’s result to a var param
  • Fixed: timestamp is now up to date
  • Updated: now uses latest compiler core
  • Updated: tokenizer updated to latest revision
  • Altered: Compile speed optimizations
  • Added: Missing semi-colon no longer a stopping error
  • Added: JSON to reserved names
  • Added: JSON static class
  • Added: Preparation for source maps

DEMOS

  • Fixed: style bug in smartflow
  • Fixed: bug in spartacus
  • Fixed: bug in box2d wrapper
  • Altered: Tested all demos (with exception of gyro). All demos now compile.
  • Altered: formating of Archimedes Spiral
  • Added: frames demo
  • Added: modal dialog example

Sincerely,
Jon Lennart Aasenden
—
The Smart Mobile Studio Team

beta release

Scrollcontrol, creating a better menu

Posted on 18.01.2013 by Jon Lennart Posted in Developers log, News 2 Comments

Smart Mobile Studio comes with an implementation of the standard, round cornered, iPhone menu – but while handy, there are cases where you want to display more than just some options. What we really need is a scrolling menu that can be easily adapted to display more information. It’s time to dive deeper into the RTL and create a scrolling control.
Continue reading→

The Smart Contest 2013 – Topic for the first round

Posted on 15.01.2013 by Smart Mobile Studio Team Posted in Developers log, News
Fractal art created by longan drink.

Fractal art created by longan drink.

As previously announced, we will arrange 4 contests this year with some really cool prizes.

The topic for the first round will be “Graphics”.

We will reveal the details of this round by the end of January, but pay attention to our upcoming blog posts. They will give you lots of inspiration and get you started on the “graphics area” with Smart Mobile Studio.

(To get some inspirations right away, you can click on the image above).

In case you missed it:
First prize in each round will be a tablet (iPad, iPad mini, Android based tablet, Windows tablet). Value ~750 USD


Q: Will it be possible to participate with a trial version of Smart Mobile Studio?
A: Yes. We will even extend your trial period to cover the competition period if that is necessary. 😀


Best regards,
The Smart Mobile Studio Team

announcement graphics Smart Contest 2013

Working with webSQL

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

In the current release of Smart Mobile Studio we have finally added database support. Since smart mobile development targets the browser API directly, the classes are more low-level than what we have in delphi, but the flip side is that there are a lot less elements involved and they are very easy to use.
Continue reading→

Introducing a playful 2013 :-)

Posted on 05.01.2013 by Jørn E. Angeltveit Posted in Developers log, News

We want to have more fun in 2013.
We want people do discover what Smart Mobile Studio is capable of and we want to share all the excellent stuff people create with Smart Mobile Studio.

So.

In 2013 we will run a few competitions 🙂

Four rounds on various topics with some nice prizes.

The “competition months” will be
– February
– May
– August
– November

Revision of contributions and announcement of winner will happen during the following month.

First prize in each round will be a tablet (iPad, iPad mini, Android based tablet, Windows tablet). Value ~750 USD

More details will be given before the first round.

 


(Don’t miss out on our Special offer ending tomorrow.)

announcement Smart Contest 2013

Updated roadmap

Posted on 04.01.2013 by Smart Mobile Studio Team Posted in News 3 Comments

We are proud to present our roadmap for 2013, with the goals we have set out to achieve and the technologies we are going to build. Due to unforeseen circumstances – some of the technologies that were planned for 2012 have been pushed ahead into 2013, there have also been significant shifts in the world of browser technologies that have made some of our plans redundant (“native” webservice support is one feature, which is now covered by node.js).
Continue reading→

announcement roadmap Smart Mobile Studio

Pages

  • About
  • Feature Matrix
  • Forums
  • News
  • Release History
  • Download
  • Showcases
    • The Smart Contest 2013, Round 1 – Graphics
  • Store
  • Documentation
    • Creating your own controls
    • Debugging, exceptions and error handling
    • Differences between Delphi and Smart
    • Get the book
    • Getting started
      • Introduction
      • Local storage, session storage and global storage
      • Application architecture
      • The application object
      • Forms and navigation
      • Message dialogs
      • pmSmart Box Model
      • Themes and styles
    • Layout manager
    • Networking
      • Loading files
      • TW3HttpRequest
      • TW3JSONP
    • Prerequisites
    • Real data, talking to sqLite
    • System requirements
    • Project types
      • Visual project
      • Game project
      • Console project

Archives

  • December 2019
  • December 2018
  • November 2018
  • July 2018
  • June 2018
  • February 2018
  • September 2017
  • April 2017
  • November 2016
  • October 2016
  • September 2016
  • April 2016
  • March 2016
  • January 2016
  • October 2015
  • September 2015
  • July 2015
  • April 2015
  • January 2015
  • December 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • November 2011
  • October 2011
  • September 2011

Categories

  • Announcements (25)
  • Developers log (119)
  • Documentation (26)
  • News (104)
  • News and articles (16)

WordPress

  • Register
  • Log in
  • WordPress

Subscribe

  • Entries (RSS)
  • Comments (RSS)
© Optimale Systemer AS