This article will be published on the 25th.

Stay tuned…

Do you wanna try Game Development with Smart Mobile Studio?
Then this is your big chance.

The second round of “The Smart Contest 2013” will be all about “Game development”.

Take a look at the announcement.

Best regards,
The Smart Mobile Studio Team

We are proud to present the winner of the Smart Mobile Studio graphics competition!

And the winner is .. Bioptopia webgl demo by Mattias Andersson – Congratulations!

Biotopia

You can testdrive the demo live by clicking here (Chrome is prefered)

In Mattias own words:

The demo consists of two parts — the first part is about drawing isosurfaces constructed by using a marching cubes implementation by Aaron Hochwimmer. The second part unites the isosurfaces with an extension of the CFDG language, which I call “3D-CFDG” (see http://www.contextfreeart.org for the original 2D implementation.) This was an idea that I had planned to implement at some point and this contest seemed like the perfect opportunity.

We congratulate Mattias with the #1 demo – job well done!

About the author

I kindly asked if the author could write a few words about himself, his background in demo coding and where he came from in terms of technology (being old Amiga hackers we naturally asked him if he ever did some coding on 16 bit computers). He was kind enough to reply with a short description. Again — hat off Mattias! Great work!

Lennart asked me to write a few lines about myself, so here it goes:

While I was certainly around in the old Amiga days (I’m born in 1981), I was a bit too young to actively engage in the “demo scene” myself. However I did help a friend of mine set up a BBS (we spent a lot of time working on fancy ANSI animations.) Those days you would download things by dialing up different BBSs with your 56k US Robotics modem; things such as music modules, demos and other cool stuff.

Some of the more prominent demo groups at this time were “future crew” and “triton” and they made some really spectacular demos. Triton was from Sweden (like me) and they wrote an amazing piece of software called FastTracker II, which was really way ahead of its time as far as software development goes (IMO.) I guess one thing I learned from this episode is that you don’t have to be a huge corporation in order to produce something great that a lot of people can benefit from. Ideas always originate with the individual and by crafting your ideas into something useful, it will benefit the whole of humanity (and quite possibly your own ego as well.) I guess this is one of the things that have motivated me to participate in various open source projects, such as Graphics32. I have also worked for a few years on a quite advanced image editing software that incorporates a node-based filter graph editor as well as a whole bunch of filter modules. I’m planning to continue this project after releasing my current Android project (a Z-brush-like software for Android that seemed like a more achievable short-term goal. P.S. Very good to now be able to test it on a tablet!)

Alright, now some words about my contest entry. The interesting part is clearly the CFDG implementation that I’ve managed to extend to three dimensions. CFDG is a simple language for describing geometric vector objects. There are some basic operations: scaling, translation, rotation and color adjustment. Additionally you know some predefined 3D “drawables”, such as a sphere, a cube or an extrusion along a lattice (you can add any primitive you like.) You define rules that will recursively invoke other rules. Recursion stops when the current scale parameter is smaller than a certain threshold value. Multiple versions of a rule can be implemented, whereby the effective rule will be randomly selected. This produces some very interesting geometric objects as can be seen by the end of the demo. One challenge in the implementation was how to move from one 3D reference space to another space transformed by a certain rotation. Fortunately I realized that quaternions would work ideally for this application. I encourage anyone interested in 3D graphics to learn about the benefits of quaternions.

Final verdict

Norway and Sweden have always been like two brothers. We like to tell jokes about each other, since we live right next to each other on the map I mean), have fun competitions from time to time (like the fact that we beat the crap out of your ice-hockey team last year) and we all meetup in the viking ship demo party once a year. Following Norwegian tradition we decided to deduct 10 points from the demo since you are in fact from Sweden — but we have to admit that even then you still won,  so fair is fair: great work Mattias! You won this compo lock, stock and barrel!

Smart Mobile Studio 1.1

We are proud to release Smart Mobile Studio 1.1 to the general public (build 1.1.0.911).

You can download the product here

Notes

• Remember to update the css and html in your projects after updating (right click file in the ide, click “revert to default”)
• Remember to back-up any units you have stored in either the RTL or Libraries folder before you install
• Remember to re-build the RTL index database after installation to examine the new classes and units in the classbrowser
• Since all controls now exist in their own RTL units, some projects might require you to alter the uses section manually (the easiest way is to drop a control onto the designer, as this will add the unit automatically for you).
• You can now use curley brackets in ASM sections

Changelog

• Fixed: TW3Canvas.toDataURL
• Added: L-System Fiddle demo
• Added: URI functions
• Fixed: installer script backs up libs + RTL
• Fixed: Allow adjusting tab height
• Added: Active property to pause animation
• Added: w3Elements.pas  &  elements controls to toolbar
• Improved JS SetLength for arrays of simple types
• Re-committed latest WebIDL code
• Fixed: browser render bug. Was in fact the onNeedsInclude event that needed a modification
• Added: registered various controls
• Fixed: unit parser
• Added: some automatic Web IDL translations (manual work necessary!)
• Fix: empty names for anonymous methods in unitparser
• Clarified error messages
• Initial version of unit test demo (text runner)
• Updated unit test framework. Unpublished methods that didn’t need published status (now)
• Fixed: CTRL+V missing from SearchAndReplaceDialog -> ComboBoxSearch
• Added unit tests
• SmartUnit now reached initial working state
• Added time properties
• TestFramework initial version
• Added property read write syntax with automatic anonymous field declaration
• Fixed case for strict hints
• FastInt64ToStr RTTIMethodAttribute.Call MultByPowerOfTwo expression
• Minor codegen improvements & cleanup
• Fixed case for strict hints
• Added missing units
• Fixed case for strict hints
• Updated: CSS theme for latest components + cleanup
• Added “case of boolean” optimization to if/then/else Improved if..then condExpr optimization for the CodeGen
• Reintroduced as unit namespace, please complete with missing units from former W3Ctrls unit!
• Fixed name case
• Fixed case for strict hints
• Extended if then optimization to if then else
• Added RelIntIs(Not)
• Zero optimization Fixed for non-prototypable fields in external classes
• Added initial RTTI for methods
• Improved error reporting when crash occurs during optimization
• Improved CodeGen for
• “if” on assigned & int<>0 checks
• Layout and widget updates
• Updated: Added check and callback timer to scrollbox so that it initializes when the form is ready (if the contentbox holds elements).
• Added: childadded + childremoved methods to TW3Component
• Added: W3_DOMReady function in W3System.pas
• Altered: cleaned up the use of w3ctrls in various RTL units
• Altered: All components are now in their seperate units
• All controls seperated into units
• Fixed minor memory leak
• Fixed json array clear
• Altered: Basecompiler changes Lost: vertical scrollbar (!) damn svn?
• Fixed external form issue in background compiler & some refactorings in compiler unit
• Fixed missing initial background compilation for new projects
• Added: *.inc files to repository
• RTL Backup before splitting components into their own unit
• Added: debug logging of background compiler error messages &  added more user warnings in case such errors appear.
• JSON.Stringify did not work with obfuscation
• Accept initialization/finalization as end markers for a type declaration block
• Added: simplified helper syntax
• Delete unused file (QR code was used as test)
• Added: QR code generation for server window
• Moved remaining forms to source directory (below new subdirectory ‘window’, as these are no dialogs)
• Removed unused dependency WIP on new flowing components
• Fixed smart-linking not properly filtering the main program, initialization & finalization sections (relevant when types or functions where declared there, but not used)
• Fixed codegen for multi-dimensional dynamic arrays
• Improved symbol dictionary discrimination between forwards & declarations
• Fixed requestAnimationFrame support for IE8-9 and others
• Fixed hints for strict mode
• Added: TW3CustomScrollBar Class
• Added: TW3VerticalScrollbar
• Altered: Tweaked CSS, more firefox styles
• Altered: Added css for scrollbar
• Improved unit test coverage
• Test manual execution of the automatic build #2
• Test manual execution of the automatic build
• Added: The switch control is now added to the toolbar palette
• Altered: The TW3ToggleSwitch transition now uses the w3_CSSPrefix so it also works on other browsers
• Altered: minor changes to the toggle-switch. Delayed event callback more in sync with the css animation + destructor
• Added: TW3ToggleSwitch control
• Altered: Updated the CSS stylesheet with toggle css classes
• Added: requestAnimFrame added to drivers
• Improved unit test coverage
• Support asm blocks with curlies in them
• Add support for deactivating curly comments in Pascal tokenizer
• Tokenizer tests moved to own unit
• Fix for anonymous symbols acquire in a class var ExprBase
• Fixed: Adjustment error in TW3HeaderControl fixed
• Improved errors for null read/write expressions
• Fixed: Layout difference between offline & online rendering
• Fixed: Added callback for control adjustment (important!)
• Added: supportAdjustment method to TW3MovableControl
• Altered: AdjustToParentBox now checks supportAdjustment
• Altered: TW3ProgressBar is not affected by AdjustToParentBox
• Fixed: missing adjustToparentBox
• Added: internet explorer driver
• Added: requestAnimationFrame in driver API
• Disabled trigger and delayed start for code templates (should never work this way)
• Added Layout.Center
• Added: script to flush the target RTL folder when updating
• Added NoRTTI option and slightly rearranged options dialog (compiler options contain only compiler options now, etc.), also added new tab for the linker (as there will be more options in the future for sure)

Sincerely,
Jon Lennart Aasenden
—
The Smart Mobile Studio Team

The interface of the TW3Scrollbox:

unit w3scrollbox;
 
interface
 
uses w3system, w3components, w3graphics, w3scrollbar;
 
  //Default size of the scrollbars
  const
  CNT_SCROLLBAR_SIZE  = 18;
 
type
 
  TW3ScrollBoxContainer = Class(TW3CustomControl)
  End;
 
  TW3Scrollbox = Class(TW3CustomControl)
  Private
    FHScroll: TW3HorizontalScrollbar;
    FVScroll: TW3VerticalScrollbar;
    FContent: TW3ScrollBoxContainer;
    Procedure HandleScroll(sender:TObject);
    Procedure UpdateWhenReady;
  protected
    procedure ChildAdded(Const aChild:TW3Component);override;
    procedure InitializeObject; override;
    procedure FinalizeObject; override;
    procedure Resize; override;
  public
    Property  Content:TW3ScrollBoxContainer read FContent;
    Procedure Update;
  End;

Since all the child objects will be created runtime via the constructor in Smart, the JavaScript browser code might not be ready when ChildAdded() is called (which is invoked whenever a child control attach as a child). The “UpdateWhenReady” method will wait until both the DOM (document object model) and TApplication instance is truly ready, and then it will automatically update the scrollbars if there is any content that is larger than the client-area.

Take a look at the implementation:

implementation
 
 
  //###########################################################################
  // TW3Scrollbox
  //###########################################################################
 
  procedure TW3Scrollbox.InitializeObject;
  Begin
    inherited;
    FContent:=TW3ScrollBoxContainer.Create(self);
 
    FHScroll:=TW3HorizontalScrollbar.Create(self);
    FHScroll.OnChanged:=HandleScroll;
    FHScroll.visible:=False;
 
    FVScroll:=TW3VerticalScrollbar.create(self);
    FVScroll.OnChanged:=HandleScroll;
    FVScroll.visible:=False;
 
    //UpdateWhenReady;
  end;
 
  procedure TW3Scrollbox.FinalizeObject;
  Begin
    FHScroll.free;
    FVScroll.free;
    FContent.free;
    inherited;
  end;
 
  procedure TW3Scrollbox.ChildAdded(Const aChild:TW3Component);
  Begin
    inherited ChildAdded(aChild);
    UpdateWhenReady;
  end;
 
  Procedure TW3Scrollbox.UpdateWhenReady;
  begin
    if (w3_DOMReady=False)
    or (ObjectReady=False) then
    w3_callback(updateWhenReady,10) else
    w3_callback(Update,1);
  end;
 
  procedure TW3Scrollbox.Resize;
  var
    wd,hd:  Integer;
  begin
    inherited;
    wd:=clientWidth;
    hd:=clientHeight;
 
    if FHScroll.visible then
    dec(hd,CNT_SCROLLBAR_SIZE);
 
    if FVScroll.Visible then
    dec(wd,CNT_SCROLLBAR_SIZE);
 
    if FHScroll.Visible then
    FHScroll.setBounds(0,hd,wd,CNT_SCROLLBAR_SIZE);
 
    if FVScroll.Visible then
    FVScroll.setBounds(wd,0,CNT_SCROLLBAR_SIZE,hd);
 
    FContent.SetBounds(1,1,wd-2,hd-2);
  end;
 
  Procedure TW3Scrollbox.HandleScroll(sender:TObject);
  Begin
    FContent.ScrollInfo.ScrollTo(FHScroll.Position,FVScroll.Position);
  end;
 
  Procedure TW3Scrollbox.Update;
  begin
    BeginUpdate;
    try
      if FContent.ScrollInfo.ScrollWidth>FContent.ClientWidth then
      Begin
        FHScroll.Total:=FContent.ScrollInfo.ScrollWidth;
        FHScroll.PageSize:=FContent.ClientWidth;
        If not FHScroll.Visible then
        Begin
          FHScroll.Visible:=True;
          self.SetWasSized;
        end;
      end;
 
      if FContent.ScrollInfo.ScrollHeight>FContent.clientHeight then
      Begin
        FVScroll.Total:=FContent.ScrollInfo.ScrollHeight;
        FVScroll.PageSize:=FContent.clientHeight;
        If not FVScroll.Visible then
        Begin
          FVScroll.Visible:=True;
          SetWasSized;
        end;
      end;
 
      FContent.SendToBack;
 
    finally
      EndUpdate;
    end;
 
  end;
 
end.

Using the scrollbox (without the designer) is straight forward. In this case I added a Beatles poster as a resource, inserted an image into the content of the scrollbox – and used the image as a background (as opposed to the image itself. Neat trick!).

FBox:=TW3Scrollbox.Create(self);
FBox.SetBounds(10,200,600,500);
FBox.StyleClass:='TW3CustomControl';
 
FTest:=TW3Image.Create(FBox.Content);
FTest.Background.FromURL('res/beatles.jpg');
FTest.setBounds(0,0,1644 * 2, 1086 * 2);

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→