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

Tag Archives: webkit

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

Android announcement Apple candidate compiler CSS HTML5 javascript Object Pascal OP4JS Pascal release Smart Mobile Studio w3C webkit

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

Only days left

Posted on 11.05.2012 by Jon Lennart Posted in News 17 Comments
Only days to go

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+

FireFox HTML5 javascript Mozilla OP4JS Safari Safari Mobile Smart Mobile Studio webkit

Hardware accelerated webkit animations

Posted on 30.10.2011 by Jon Lennart Posted in Developers log

Working with hardware accelerated webkit animations under vanilla Javascript can be daunting. First of all it takes a while to understand the interrupt driven nature of the webkit engine (or “trigger” based is perhaps a more familiar word to us Delphians) and secondly because there are actually two types of animations (transitions), explicit and non-explicit (animations), which adds to the complexities.

Under OP4JS we have started out by supporting animations only, which basically means that you can trigger a pre-defined animation using either TNamedAnimation or any of our ready-made animation classes. If you wish you can trigger non-explicit animations (or transitions) as much as you like, but you will have to set the tag properties and css values yourself. The heart of our animation system resides in the W3Effects.pas file that is going to ship with the RTL – and you can expect it to grow once we start to issue updates and service packs.

Let me show you how easy it is to setup a hardware acellerated animation and play it:

[sourcecode language=”delphi”]
Procedure TForm1.HandleEffectDone(Sender:TObject);
Begin
TW3NamedAnimation(sender).free;
end;

Procedure TForm1.MoveHeader;
Begin
FEffect:=TW3NamedAnimation.Create;
FEffect.AnimationName:=’HEADER-MOVE’;
FEffect.Duration:=0.80;
FEffect.ExecuteEx(FHeader,NIL,HandleEffectDone);
end;
[/sourcecode]

And in our CSS file we define our animation (this will be automated in a future version of OP4JS):

[sourcecode language=”CSS”]
@-webkit-keyframes HEADER-MOVE {
from {
left: 100%;
top: 0px;
} to {
left: 0px;
top: 0px;
}
}
[/sourcecode]

Voila. That’s all it takes to make a control references by FHeader (or any control you want) to fly across the top of the screen using hardware acceleration (when available, not all platforms supports it directly and resort to software).

Keep it simple

It’s easy to go overboard with effects like this so try to keep in mind that every phone model is unique and have different performance levels. I am currently using 2 hardware accelerated “movers” to navigate between forms, and the difference between the iPhone 3GS and 4G is quite dramatic. It seems 3GS does not support hardware unless your control is placed directly on the document. So while it’s easy to spin things around – we must be prudent in when we use these things. Nothing is worse than an app where the effects get in the way of the actual substance.

 

Animations CSS3 hardware OP4JS webkit

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