CreateImage

Hello World

Content:
- Drawing on Images
- Drawing on Images fast
- Properties
- Methods

Image controls can be used to display images such like png, jpg or gif.
Just pass the file path and you're done.

img = app.CreateImage( file?, width=-1, height=-1, options='', pxw=-1, pxh=-1 ) → app object: Image

Without the width and height dimensions the image will be shown without any scaling.

Example - Original Size click to expand contents

function OnStart()
{
    lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

    img = app.CreateImage( "/Sys/Img/Droid1.png" );
    img.SetOnTouch( img_OnTouch );
    lay.AddChild( img );

    app.AddLayout( lay );
}

function img_OnTouch( ev )
{
    if( ev.action=="Down" )
        app.ShowPopup( "Ouch!" );
}

Copy Copy All Run

If you specify one of them and leave the other null, -1 or blank, it will be scaled so that the aspect ratio is kept.

Example - Maintain Aspect click to expand contents

function OnStart()
{
    lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

    img = app.CreateImage( "/Sys/Img/Droid1.png", 0.5, -1 );
    img.SetOnTouch( img_OnTouch );
    lay.AddChild( img );

    app.AddLayout( lay );
}

function img_OnTouch( ev )
{
    if( ev.action=="Down" )
        app.ShowPopup( ev.x[0] + ", " + ev.y[0], "Short" );
}

Copy Copy All Run

And if you specify both parameters it will be scaled to your wishes.

Example - Stretched click to expand contents

function OnStart()
{
    lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

    img = app.CreateImage( "/Sys/Img/Droid1.png", 0.5, 0.7 );
    img.SetOnTouch( img_OnTouch );
    lay.AddChild( img );

    app.AddLayout( lay );
}

function img_OnTouch( ev )
{
    if( ev.action=="Down" )
        app.ShowPopup( "Aaaargh!" );
}

Copy Copy All Run

If you want images to depress like buttons if touched you can use the “Button” option.

Example - Button click to expand contents

function OnStart()
{
    lay = app.CreateLayout( "linear", "VCenter,FillXY" );

    btn = app.CreateImage( "/Sys/Img/Hello.png", 0.2, -1, "button" );
    btn.SetOnTouchUp( btn_OnTouch );
    lay.AddChild( btn );

    app.AddLayout( lay );
}

function btn_OnTouch()
{
    app.ShowPopup( "Hello World!" );
    app.Vibrate( "0,100,30,100,50,300" );
}

Copy All

Drawing on Images

Images are also useful for drawing basic shapes and other images on it and therefore for creating dynamic animations or even basic games. To create an empty image you can pass null as file parameter.

This way you can also specify a fixed pixel size to the image you can use the “fix” option and pass values for the pxw and pxh parameters.

img = app.CreateImage( null, 0.8, 0.5, "fix", 20, 20 );
img.DrawLine( 0, 0, 1, 1 );

If you dislike the anti-alias effect you can apply the “alias” option on a higher resolution image and draw a low-resolution image on it:

img2 = app.CreateImage( null, .8, .5, "alias" );
img2.DrawImage( img, 0, 0, 1, 1, 0 );

There are a whole bunch of drawing methods defined here. Some of the were already used above. You can draw lines, rectangles, circles and other images, just to name a few. You can even draw a transformed image using an transformation matrix. Check out the Draw* methods in the method list below to get more details about all drawing functions.

Example - Draw Shapes click to expand contents

function OnStart()
{
    lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

    img = app.CreateImage( null, 0.8, 0.8 );
    lay.AddChild( img );

    img.SetColor( "#8888ff" );
    img.SetPaintColor( "#ff0000" );
    img.DrawCircle( 0.5, 0.5, 0.1 );
    img.DrawRectangle( 0.7, 0.7, 0.1, 0.75 );

    app.AddLayout( lay );
}

Copy Copy All Run

Drawing on Images fast

If you have many draw operations to perform at runtime (ie. for games) you might want to disable the automatic canvas update after each Draw* call using the SetAutoUpdate method. To force the rendering now, you have to call Update.

Another way to increase the animation speed is using the NoDom configuration. This will disable html and js Dom elements in your app that consume a lot of resources, but app functions can still be used.
For animations you can then use the Animate function of the app object which calls a function for a given amount per second. Note that the canvas still needs some time to refresh - so going over 60 fps makes no sense at all.

Example - Advanced Clock Animating click to expand contents

cfg.No_Dom, cfg.Portrait;

var wh;

function OnStart()
{
    lay = app.CreateLayout( "linear", "VCenter,FillXY" );

    // clock pointer
    ptr = app.CreateImage( null, 0.1, 0.1, "fix,alias", 30, 30 );
    ptr.SetTextSize( 4.3 );

    // image aspect ratio for drawing square images
    wh = ptr.GetAbsWidth() / ptr.GetAbsHeight();

    // main canvas
    img = app.CreateImage( null, 1, 1, "alias" );
    img.SetPaintStyle( "line" );
    img.SetAutoUpdate( false );
    img.SetLineWidth( 15 );
    lay.AddChild( img );

    app.AddLayout( lay );

    app.SetDebug( "console" );
    app.Animate( OnAnimate, 40 );
}

function OnAnimate( time, dtime )
{
    time = Date.now();

    // calculate pointer position from current time
    var secs = time / 1000;
    var angle = Math.PI * secs / 2 + Math.abs( Math.sin( Math.PI * secs ));
    var px = 0.5 + 0.5 * Math.cos( angle );
    var py = 0.5 + 0.5 * Math.sin( angle );

    // get current datetime
    var hrs = Math.floor( secs / 3600 ) % 60;
    var min = Math.floor( secs / 60 ) % 60;
    var sec = Math.floor( secs ) % 60;
    var time = min + ":" + sec;

    // measure text dimensions for centering
    var tsize = ptr.MeasureText( time );
    var tx = (1 - tsize.width ) / 2;
    var ty = (1 + tsize.height) / 2;

    // draw pointer and datetime text
    ptr.Clear();
    ptr.SetPaintColor( "red" );
    ptr.DrawLine( .5, .5, px, py );
    ptr.SetPaintColor( "white" );
    ptr.DrawText( time, tx, ty );

    // render
    img.Clear();
    img.DrawCircle( .5, .5, .48 );
    img.DrawImage( ptr, 0, (1 - wh) / 2, 1, wh );
    img.Update();
}