User Tools

Site Tools


built_in:images

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
built_in:images [2014/12/05 13:33]
162.252.85.172 [Methods]
built_in:images [2018/04/19 23:23] (current)
Line 1: Line 1:
 ====== Images ====== ====== Images ======
-===== Create ===== 
-Create Image controls using the CreateImage method of the app object: 
  
 +//(Information and examples taken from the DroidScript documentation)//
 +
 +===== Description =====
 +Create Image controls using the **CreateImage** method of the **[[built_in:app|app]]** object:
 <code>img = app.CreateImage( file, width, height, options );</code> <code>img = app.CreateImage( file, width, height, options );</code>
-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.+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.
  
-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.+When Image controls are touchedthey 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**.
  
-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+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 
 + 
 +=====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. 
 + 
 +----
  
 ===== Methods ===== ===== Methods =====
-^Method ^Description^ +Some controls use the same methods.\\ 
-|Image.Clear() | | +For examples of the **[[same methods]]** look here. 
-|Image.Destroy() | | +^ Method                                                        ^ Description                                                                                                                                                                   
-|Image.Draw( func, p1, p2, p3, p4, p5, p6, p7 ) | | +| Image.Clear()                                                                                                                                                                                                                               
-|Image.DrawArc( x1,y1,x2,y2,start,sweep ) | | +| Image.Destroy()                                               Destroy image object. Release memory                                                                                                                                          
-|Image.DrawCircle( x,y,radius ) | | +| Image.Draw( func, p1, p2, p3, p4, p5, p6, p7 )                                                                                                                                                                                              
-|Image.DrawImage( image,x,y,w,h,angle ) | | +| Image.DrawArc( x1, y1, x2, y2, start, sweep )                                                                                                                                                                                               
-|Image.DrawImageMtx( image,matrix ) | | +| Image.DrawCircle( x,y,radius )                                                                                                                                                                                                              
-|Image.DrawLine( x1,y1,x2,y2 ) | | +| Image.DrawImage( image, x, y, w, h, angle )                                                                                                                                                                                                 
-|Image.DrawPoint( x,y ) | | +| Image.DrawImageMtx( image, matrix )                                                                                                                                                                                                         
-|Image.DrawRectangle( x1,y1,x2,y2 ) | | +| Image.DrawLine( x1, y1, x2, y2 )                                                                                                                                                                                                            
-|Image.DrawText( txt,x,y ) | | +| Image.DrawPoint( x, y )                                       Draw a point on the image canvas.                                                                                                                                             
-|Image.GetAbsHeight() | | +| Image.DrawRectangle( x1, y1, x2, y2 )                                                                                                                                                                                                       
-|Image.GetAbsWidth() | | +| Image.DrawText( txt, x, y )                                   Draw text on x,y position inside the image canvas.                                                                                                                            
-|Image.GetHeight() | | +| Image.GetAbsHeight()                                          Get absolute pixel height size of the image.                                                                                                                                  
-|Image.GetName() | | +| Image.GetAbsWidth()                                           Get absolute pixel width size of the image.                                                                                                                                   
-|Image.GetPixelData( format,left,top,width,height ) | | +| Image.GetHeight()                                                                                                                                                                                                                           
-|Image.GetPosition() | | +| Image.GetName()                                                                                                                                                                                                                             
-|Image.GetType() | | +| Image.GetPixelData( format, left, top, width, height )        format can be "rawbase64", "rawbase64,grayscale" "pngbase64", "jpgbase64" or json (3x slower than others). Left,Top start pixel position. Width,Height size of pixel output.  
-|Image.GetVisibility() | | +| Image.GetPosition()                                           returns an object with properties: left, top, width, height                                                                                                                   
-|Image.GetWidth() | | +| Image.GetType()                                                                                                                                                                                                                             
-|Image.Move( p1,p2 ) | | +| Image.GetVisibility()                                                                                                                                                                                                                       
-|Image.Release() | | +| Image.GetWidth()                                                                                                                                                                                                                            
-|Image.Reset() | | +| Image.Move( x                                           Move of a canvas                                                                                                                                                                              
-|Image.Rotate( p1,p2,p3 ) | | +| Image.Release()                                               Release object memory.                                                                                                                                                        
-|Image.Save( fileName ) | | +| Image.Reset()                                                                                                                                                                                                                               
-|Image.Scale( p1,p2 ) | | +| Image.Rotate( anglepivotXpivotY                         Rotate of a canvas                                                                                                                                                                            
-|Image.SetAlpha( alpha ) | | +[[Image.Save]]( fileName,quality                            quality parameter new since Vers 1.29 \\ support for png files since Vers 1.29                                                                                                
-|Image.SetAutoUpdate( onoff ) | | +| Image.Scale( x                                          Set zoom of a canvas                                                                                                                                                                              
-|Image.SetBackColor( p1 ) | | +| Image.SetAlpha( alpha )                                       Transparency of a canvas                                                                                                                                                                              
-|Image.SetBackGradient( p1,p2,p3,p4,p5,p6,p7 ) | | +| Image.SetAutoUpdate( onoff )                                  Turn On/Off the update on action on image manipulation. By turning off update, call to Image.Update( ) will update the image all commands done on the image.                  
-|Image.SetBackGradientRadial( p1,p2,p3,p4,p5,p6,p7 ) | | +| Image.SetBackColor( colorCode                               Set background color                                                                                                                                                                              
-|Image.SetBackground( p1,p2 ) | | +| Image.SetBackGradient( color1,color2,color3,p4,p5,p6,p7 )                                                                                                                                                                                   
-|Image.SetColor( clr ) | | +| Image.SetBackGradientRadial( x,y,r,color1,color2,color3,p7 )                                                                                                                                                                                
-|Image.SetFontFile( file ) | | +| Image.SetBackground( imagefile,options                                                                                                                                                                                                    
-|Image.SetImage( image,width,height,options ) | | +| Image.SetColor( color                                                                                                                                                                                                                     
-|Image.SetLineWidth( width ) | | +| Image.SetFontFile( file )                                     Set the font type to be draw on the image.                                                                                                                                    
-|Image.SetMargins( left,top,right,bottom ) | | +| Image.SetImage( image,width,height,options )                                                                                                                                                                                                
-|Image.SetMaxRate( p1 ) | | +| Image.SetLineWidth( width )                                                                                                                                                                                                                 
-|Image.SetName( p1 ) | | +| Image.SetMargins( left,top,right,bottom )                                                                                                                                                                                                   
-|Image.SetOnLoad( callback ) | | +| Image.SetMaxRate( ms                                        Set the minimum amount of time (in ms) between OnTouchMove events                                                                                                             
-|Image.SetOnLongTouch( p1 ) | | +| Image.SetName( p1 )                                           Set name canvas                                                                                                                                                                              
-|Image.SetOnTouch( p1 ) | | +| Image.SetOnLoad( callback )                                                                                                                                                                                                                 
-|Image.SetOnTouchDown( p1 ) | | +| Image.SetOnLongTouch( callback                                                                                                                                                                                                            
-|Image.SetOnTouchMove( p1 ) | | +| Image.SetOnTouch( callback                                                                                                                                                                                                                
-|Image.SetOnTouchUp( p1 ) | | +| Image.SetOnTouchDown( callback                                                                                                                                                                                                            
-|Image.SetPadding( p1,p2,p3,p4 ) | | +| Image.SetOnTouchMove( callback                                                                                                                                                                                                            
-|Image.SetPaintColor( clr ) | | +| Image.SetOnTouchUp( callback                                                                                                                                                                                                              
-|Image.SetPaintStyle( style ) | | +| Image.SetPadding( lefttoprightbottom                                                                                                                                                                                                
-|Image.SetPosition( p1,p2,p3,p4 ) | | +| Image.SetPaintColor( color                                  Set the color on draw action to the image.                                                                                                                                    
-|Image.SetScale( x,y ) | | +| Image.SetPaintStyle( style )                                  Paint style(line,fill)                                                                                                                                                                              
-|Image.SetSize( p1,p2 ) | | +| Image.SetPosition( lefttopwidthheight                                                                                                                                                                                               
-|Image.SetTextSize( size ) | | +| Image.SetScale( x,y )                                         Fract values (as usual): 1=original, -1=flip (mirror)                                                                                                                         
-|Image.SetTouchable( p1 ) | | +| Image.SetSize( widthheight                                                                                                                                                                                                              
-|Image.SetVisibility( p1 ) | | +| Image.SetTextSize( size )                                                                                                                                                                                                                   
-|Image.Skew( p1,p2 ) | | +| Image.SetTouchable( callback                                                                                                                                                                                                              
-|Image.Transform( matrix ) | | +| Image.SetVisibility( HideShow                                                                                                                                                                                                             
-|Image.Update() | | +| Image.Skew( p1,p2 )                                                                                                                                                                                                                         
-|Image.Update2() | |+| Image.Transform( matrix )                                                                                                                                                                                                                   
 +| Image.Update()                                                                                                                                                                                                                              
 +| Image.Update2()                                                                                                                                                                                                                             |
  
-===== Sample code =====+===== Options ===== 
 + 
 +^ Button       ^ Causes the image to depress like a button when touched                                                                                                                                       ^ 
 +| async        | Loads the image from file in the background and allows your code to continue without waiting for it to load                                                                                  | 
 +| FontAwesome  | Use this option to write icons as Text on your image\\ (see the sample at the bottom)                                                                                                        | 
 +| Resize       | The Resize option internally scales down the original image to the display size, so it uses up less memory than the full size image (useful if you are displaying lots of thumbnail images) 
 +| ScaleCenter  | you can use the option to keep the image at it's original size and centered within the Image object                                                                                          | 
 +| Button       | Causes image to depress like a button when touched                                              | 
 + 
 +---- 
 + 
 +====Example - Original Size==== 
 + 
 +<code javascript> 
 +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!" ); 
 +
 +</code> 
 + 
 +====Example - Stretched==== 
 + 
 +<code javascript> 
 +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!" ); 
 +
 +</code> 
 + 
 +====Example - Maintain Aspect==== 
 + 
 +<code javascript> 
 +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" ); 
 +
 +</code> 
 + 
 +====Example - Draw Shapes==== 
 + 
 +<code javascript> 
 +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 ); 
 +
 +</code> 
 + 
 +====Example - FontAwesome====
 Some say there should always be **Hello World** code. Some say there should always be **Hello World** code.
-<code JavaScript helloimage.js> +<code javaScript helloimage.js> 
-function OnStart(){ +function OnStart() 
-  lay = app.CreateLayout( "Linear", "VCenter,FillXY" );+
 +  lay = app.CreateLayout( "Linear", "VCenter,FillXY" ); 
 + 
 +  img = app.CreateImage( null, 0.8, 0.8, "FontAwesome" ); 
 +  lay.AddChild( img );
  
-  img = app.CreateImagenull, 0.8, 0.8, "FontAwesome" ); +  img.SetColor"#99ff99" ); 
-  lay.AddChildimg );+  img.SetPaintColor( "#0000dd" );  
 +  img.SetTextSize(42); 
 +  img.DrawText( "[fa-globe] Hello World!", 0.3, 0.5 );
  
-  img.SetColor( "#99ff99" ); +  app.AddLayout( lay );
-  img.SetPaintColor( "#0000dd" );  +
-  img.SetTextSize(42); +
-  // +
-  img.DrawText( "[fa-globe] Hello World!", 0.3, 0.5 ); +
-  app.AddLayout( lay );+
 } }
 </code> </code>
built_in/images.1417786410.txt.gz · Last modified: 2014/12/05 21:33 (external edit)