Back

Images

Create Image controls using the CreateImage method of the app object:

 img = app.CreateImage( file, width, height, options );

Use the SetOnTouch method of the Image object to set the name of a function you want to be called when the Image is touched.

When Image controls are touched, they send an event object parameter to your callback function which contains details of the touch event, for example the action property of the event object contains "Down", "Up" or "Move" as the user touches and moves their finger on the screen and the x and y properties contain arrays of touch coordinates.

If you don't set a size, the image object will match the original image size. If you set one dimension to a positive value and leave the other dimension as -1, then the image will maintain its original aspect ratio.

Specifying both width and height will stretch the image to fill the Image object, unless you can use the "ScaleCenter" option to keep the image at it's original size and centered within the Image object

Example - Original Size

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   

Example - Stretched

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   

Example - Maintain Aspect

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   

Drawing On Images

You can use an image control like a Canvas by calling it's drawing methods, such DrawRectangle, DrawCircle, DrawImage etc.

It's possible to draw over a loaded image or you can start with a blank image by passing the value 'null' to the CreateImage method instead of a filename. You can set the background color of your blank image using the 'SetColor' method.

Example - Draw Shapes

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.05 );
  
  app.AddLayout( lay );
}
  Copy   Copy All    Run   

The following methods are avaiable on the Image object:

 GetVisibility()
 SetVisibility( visibility )
 SetPadding( left, top, right, bottom )
 SetMargins( left, top, right, bottom )
 SetPosition( left, top, width, height )
 SetSize( width, height )
 GetWidth()
 GetHeight()
 SetAlpha( alpha )
 SetImage( fileName, width, height )
 SetImage( img, width, height )
 GetImgHeight()
 SetMaxRate( ms )
 SetOnTouch( callback )
 SetOnTouchUp( callback )
 SetOnTouchMove( callback )
 SetOnTouchDown( callback )
 SetOnLongTouch( callback )
 SetTouchable( callback )
 DrawImage( image, x, y, w, h, angle )
 DrawImageMtx( image, matrix )
 DrawPoint( x, y )
 DrawCircle( x, y, radius )
 DrawArc( x1, y1, x2, y2, start, sweep )
 DrawLine( x1, y1, x2, y2 )
 DrawRectangle( x1, y1, x2, y2 )
 DrawText( text, x, y )
 SetColor( colorCode )
 SetTextSize( size )
 SetLineWidth( width )
 SetPaintColor( colorCode )
 SetPaintStyle( style )
 Rotate( angle, pivotX, pivotY )
 Move( x, y )
 Scale( x, y )
 Reset()