User Tools

Site Tools


sample_code:img_toggle_button

Differences

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

Link to this comparison view

Next revision
Previous revision
sample_code:img_toggle_button [2014/11/26 09:29]
stevegarman created
sample_code:img_toggle_button [2015/01/13 17:55] (current)
Line 6: Line 6:
 The images can be passed either as file-paths or as images The images can be passed either as file-paths or as images
 The sample code passes one of each. The sample code passes one of each.
 +
 +The first image decides the size of the button.
 +
 +In case it is not obvious, the actual toggling is done in the OnTouchDown handler.
 +
 +You could move this to any of the OnTouch events but be aware that some of them (such as SetOnTouch) may fire more often than you expect.
 ===== The code ===== ===== The code =====
 <code javascript toggle.js> <code javascript toggle.js>
 //Called when application is started. //Called when application is started.
-function OnStart(){ +function  OnStart() 
-    // Create layout +    // Create layout 
-    lay = app.CreateLayout( "linear", "VCenter,FillXY" );     +       
-     +  lay  =  app.CreateLayout( "linear",  "VCenter,FillXY" );             // Create resized first image for the button 
-    // Create resized first image for the button +       
-    var pauseImg = app.CreateImage( "/Sys/Img/Droid1.png",0.1,-1); +  var  pauseImg   app.CreateImage( "/Sys/Img/Droid1.png", 0.1, -1);        //Create the button with OnTouchDown event 
-    +       
-    //Create the button with OnTouchDown event +  btn  =  CreateImageToggle(pauseImg,  "/Sys/Img/Droid2.png" ) ;     
-    btn = CreateImageToggle(pauseImg, "/Sys/Img/Droid2.png" ) ; +  btn.SetOnTouchDown(btnToggle);         
-    btn.SetOnTouchDown(btnToggle); +  lay.AddChild( btn );         //Add layout to app.     
-     +       
-    lay.AddChild( btn ); +  app.AddLayout( lay );
-     +
-    //Add layout to app.     +
-    app.AddLayout( lay );+
 } }
  
-function btnToggle(ev){ +function  btnToggle(ev) 
-   this.Toggle = ! this.Toggle; +   
-   if(this.Toggle){ +  this.Toggle  =  ! this.Toggle;    
-      this.SetImage(this.imgTrue); +  if (this.Toggle) 
-      app.ShowPopup("Playing"); +  {       
-   } else{ +    this.SetImage(this.imgTrue);       
-      this.SetImage(this.imgFalse); +    app.ShowPopup("Playing");    
-      app.ShowPopup("Paused"); +   
-   }+  else 
 +  {       
 +    this.SetImage(this.imgFalse);       
 +    app.ShowPopup("Paused");    
 +  }
 } }
  
-function CreateImageToggle(img1,img2){ +function  CreateImageToggle(img1, img2) 
-  // accepts images or file-paths +  // accepts images or file-paths 
-  //img1 represents false, img1 true(toggled) +     //img1 represents false, img2 true(toggled) 
-  if (typeof img1 == "string"{ +     
-     img1 = app.CreateImage(img1); +  if  (typeof  img1  ==  "string")  
-  } +  {      
-  if (typeof img2 == "undefined"){ +    img1  =  app.CreateImage(img1);   
-    img2 = img1; +  }   
-  } else if (typeof img2 == "string"{ +  if  (typeof  img2  ==  "undefined"
-    img2 = app.CreateImage(img2,img1.GetWidth(),img1.GetHeight()); +  {     
-  } +    img2  =  img1;   
-  var obj = app.CreateImage(null,img1.GetWidth(),img1.GetHeight()); +   
-  obj.SetImage(img1) +  else  if  (typeof  img2  ==  "string")  
-  obj.Toggle = false; +  {     
-  obj.imgFalse = img1 +    img2  =  app.CreateImage(img2, img1.GetWidth(), img1.GetHeight());   
-  obj.imgTrue = img2 +  }   
-  return obj+  var  obj   app.CreateImage(null, img1.GetWidth(), img1.GetHeight());   
 +  obj.SetImage(img1); 
 +  obj.Toggle  =  false;   
 +  obj.imgFalse  =  img1; 
 +  obj.imgTrue  =  img2  
 +  return  obj;
 } }
- 
 </code> </code>
 ===== Note ===== ===== Note =====
 This code has had only rudimentary testing. You may well be able to improve it This code has had only rudimentary testing. You may well be able to improve it
  
sample_code/img_toggle_button.1416994166.txt.gz · Last modified: 2014/11/26 17:29 (external edit)