v0.04

probably the menu icon.js(require("heatshrink")...) will fail again when producing a valid .img on server

apps.json

@@ -2793,8 +2793,8 @@
   "name": "Test User Input",
   "shortName":"Test User Input",
   "icon": "app.png",
-  "version":"0.03",
+  "version":"0.04",
-  "description": "Basic app to test the bangle.js input interface. It displays the user action in text or an on/off switch image for swipe movement.",
+  "description": "Basic app to test the bangle.js input interface. It displays the user action in text, an  option round element or an on/off switch image for swipe movements.",
   "readme": "README.md",
   "tags": "input,interface,buttons,touch",
   "storage": [

apps/testuserinput/ChangeLog

@@ -1,3 +1,4 @@
 0.01: New App!
 0.02: Tweaks for app loader
 0.03: Fix app icon, add change of colors
+0.04: Improvements and new round check option elements

apps/testuserinput/README.md

@@ -4,12 +4,19 @@ This very basic app, allows to *test the bangle.js input interface*, and display
 
 
 Launcher icon
+
 ![](testUserInput_ss0.png)
+
 1st screen - Help/Intro
+
 ![](testUserInput_ss1.png)
+
 2nd screen - interface and a result
+
 ![](testUserInput_ss2.png)
+
 3rd screen - interface and a result
+
 ![](testUserInput_ss3.png)
 
 

apps/testuserinput/app-icon.js

@@ -1 +1 @@
-require("heatshrink").decompress(atob("MDDCAP//Bv7m/RF8AAAAAAAAAAAAAAAAAAAAAP/AAAAAAAAAAAAAD//8AAAAAAAAAAAAP///AAAAAAAAAAAA////wAAAAAAAAAAA////wAAAAAAAAAAD/9X/8AAAAAAAAAAD/1V/8AAAAAAAAAAD/1V/8AAAAAAAAAAD/1V/8AAAAAAAAAAD/1V/8AAAAAAAAAAA/1V/wAAAAAAAAAAA/1V/wAAAAAAAAAAAP1V/AAAAAAAAAAAAD1V8AAAAAAAAAAAAAFVAAAAAAAAAAAAAAFVAAAAAAAAAAAAAAFVAAAAAAAAAAAAAAFVAAAAAAAAAAAAAAFVlQAAAAAAAAAAAAFVlVVQAAAAAAAAAAFVVVVVUAAAAAAAAAFVVVVVVQAAAAAAAAFVVVVVVQAAAAFYAAFVVVVVVUAAAAFWAAFVVVVVVUAAAAFVgAFVVVVVVUAAAAFVaAlVVVVVVUAAAABVWqlVVVVVVUAAAAAVVqlVVVVVVUAAAAAFValVVVVVVYAAAAABVWlVVVVVVoAAAAAAVVlVVVVVWoAAAAAAFVVVVVVVaoAAAAAAFVVVVVVVqoAAAAAABVVVVVVWqoAAAAAAAVVVVVVqqoAAAAAAAFVVVVWqqoAAAAAAABVVVVaqqoAAAAAAAAVVVVqqqgAAAAAAAAFVVWqqqgAAAAAAAABVVaqqqAAAAAAAAAAFVqqqgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"))
+require("heatshrink").decompress(atob("mEwwgjgkUikAWVDCkCkUz+cykQuSkf///zGCUin4XB/8yC6ECFwM+90/GAIXS8fzC6cv//vAIQvS+YvBAIIXT93uC6UAiUzC4UyiAXQiMjC4UhC6MBiIXB8MRd6IwBC4QuRAAQXB8AWTC/4XK8gZUC4PtAQI0SCgYAEDJwXIDBwXRBIIXNBwihIC6YJDC6gKBhoXRhwKC9vdC6IwEC6YwEC6RzLC5gwDC6YwOC8JINC5IwNC5QwMC5QwMC5YwK8AXLGBQXNGBIWMDBIWOAH4AvA="))

apps/testuserinput/app.js

@@ -1,6 +1,5 @@
 /* Test  bangle.js input interface */
  var colbackg='#111111';//black 
- //var coldarkred='#CC3333';
  var colorange='#e56e06'; //RGB format rrggbb
  var v_color_lines=0xFFFF; //White hex format
  var v_color_b_area=colbackg;
@@ -8,76 +7,21 @@
  var v_clicks='0';
  console.log("*** Test input interface ***");
  
- function ClearActiveArea(){
+ 
+function ClearActiveArea(){
   g.setColor(colbackg); 
   g.fillRect(0,32,239,239); //fill all screen except widget area
   g.flip();
 }
-function ChangeColorBannerArea(v_color){
- if (v_color=='#111111') v_color='#f3f3f1';
-  else if (v_color=='#f3f3f1') v_color='#51504f';
-    else if (v_color=='#51504f') v_color=0x7800;// Maroon
-      else if (v_color==0x7800) v_color='#111111';
-      return (v_color);  
-}
-function ClearBannerArea(){
-  g.setColor(v_color_b_area); 
-  g.fillRect(50,32,190,85); //fill an specific area
-  g.flip();
-}
- 
-function PrintUserInput(boton){
-  console.log("Pressed touch/BTN",boton);
-  if (v_clicks=='0') PrintAreas();
-  ClearBannerArea();
-  
-    if (boton=='  <---') {
-    var img_off = {
-      width : 48, height : 48, bpp : 2,
-      transparent : 0,
-      palette : new Uint16Array([65535,63968,40283,50781]),
-      buffer : E.toArrayBuffer(atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//AAAAAAAAAAAAA///9VVVVVVVQAAAD/qq/1VVVVVVVAAAP6qqv9VVVVVVVUAA/qqqv/VVVVVVVVAD+qqq//1VVVVVVVQP6qqq//1VVVVVVVQPqqqr//9VVVVVVVUvqqqr//9VVVVVVVU+qqqv/+uVVVVVVVV+qqqv+quVVVVVVVV+qqq+qqvVVVVVVVV+qqvqqqvVVVVVVVV+qv+qqquVVVVVVVV+r/+qqquVVVVVVVVv//6qqq9VVVVVVVUP//6qqq9VVVVVVVUP//qqqr1VVVVVVVQD//qqqv1VVVVVVVQA/+qqq/VVVVVVVVAAP+qqr9VVVVVVVUAAD/qq/1VVVVVVVAAAA///9VVVVVVVQAAAAA//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"))
-    };
-    g.drawImage(img_off,90,35);
-  }
-    else if (boton=='  --->')  {
-      var img_on = {
-      width : 48, height : 48, bpp : 2,
-      transparent : 0,
-      palette : new Uint16Array([65535,36361,27879,40283]),
-      buffer : E.toArrayBuffer(atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//AAAAABVVVVVqqf///AAAAVVVVVWqn////wAAFVVVVVWqf////8AAVVVVVVap//////ABVVVVVVqr//////wBVVVVVVqn//////8FVVVVVVqv//////8FVVVVVWqf///////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////FVVVVVWqf///////FVVVVVVqv//////8BVVVVVVqn//////8BVVVVVVar//////wAVVVVVVap//////AAFVVVVVWqf////8AAAVVVVVWqn////wAAABVVVVVqqf///AAAAAAAAAAAAA//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"))
-    };
-    g.drawImage(img_on,90,35);  
-  }
-    else  
-  {   //no swipe /slide
-    g.setColor(colorange); 
-    g.setFontVector(32).drawString(boton, 60, 65);
-  }
-  g.flip();    
-  v_clicks++;  
-}
-function PrintBtn1(boton){ 
- console.log("Pressed BTN1");
- if (v_clicks=='0') PrintAreas();
- PrintUserInput("Button1"); 
- v_clicks++;
-}
-
-function PrintBtn2(boton){ 
- console.log("Pressed BTN2");
- v_color_b_area=ChangeColorBannerArea(v_color_b_area);
- if (v_clicks=='0') PrintAreas();
- PrintUserInput("Button2"); 
- v_clicks++;
-}
 
 function PrintHelp(){  
   console.log("********************************");
   console.log("Log: *** Print help in screen");
   ClearActiveArea();     
+  g.setColor(colorange); 
+  g.setFontVector(18).drawString("To test the input, try :",25,90);
+  g.flip();
   g.setColor(0,1,0);  //green      
-  g.setFontVector(v_font1size).drawString("To test the input, try :", 30, 90);
   g.setFontVector(v_font1size).drawString("Swipe right -->", 30, 115);
   g.setFontVector(v_font1size).drawString("Swipe left <--", 30, 130);
   g.setFontVector(v_font1size).drawString("Click Left area", 30, 145);
@@ -89,15 +33,121 @@ function PrintHelp(){
   g.flip();    
 } 
 
+
+function ChangeColorBannerArea(v_color){
+ if (v_color=='#111111') v_color='#f3f3f1';
+  else if (v_color=='#f3f3f1') v_color='#51504f';
+    else if (v_color=='#51504f') v_color=0x7800;// Maroon
+     else if (v_color==0x7800) v_color='#CC3333';//coldarkred
+      else if (v_color=='#CC3333') v_color='#111111';
+      return (v_color);  
+}
+//Clean fill top area with a color
+function ClearBannerArea(){
+  g.setColor(v_color_b_area); 
+  g.fillRect(55,32,185,78); 
+  g.flip();
+}
+ 
+ function DrawRoundOption(area){
+  //draw a img from an Image object
+    var img_obj_check = {
+      width : 30, height : 30, bpp : 4,
+      transparent : 0,
+      palette : new Uint16Array([65535,28436,38872,4838,6951,34711,26355,24242,32630,36792,30517,32598,40953,26323,9129,7016]),
+      buffer : E.toArrayBuffer(atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMwiKZmQAAAAAAAAAAAMzMIimZVVUAAAAAAAAADMzCIpmVVViAAAAAAAAAzMwiKZlVVYi7AAAAAAAMzMIimZVVWIu7oAAAAADMzCIpmVVViLu6qgAAAADMwiKZlVVYi7uqoQAAAAzMIimZVVWIu3eqERAAAAzCIpmVVViLtzNxERAAAAwiKZlVVYi7czRxEWAAAAIimZe1WIu3M0cRFmAAAAIpmePqiLtzNHERZmAAAAKZleM+q7czRxEWZtAAAAmZVV4z4XQ0cRFmbdAAAAmVVVjjPjNHERZm3XAAAAlVVYi+MzRxEWZt13AAAAlVWIu640cRFmbdd3AAAABViLu6p3ERZm3XdwAAAABYi7uqoREWZt13dwAAAAAIu7qqERFmbdd3cAAAAAAAu6qhERZm3Xd3AAAAAAAACqoREWZt13dwAAAAAAAAAKERFmbdd3cAAAAAAAAAAAARZm3XdwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"))
+    };
+   var img_obj_uncheck = {
+      width : 30, height : 30, bpp : 4,
+      transparent : 0,
+      palette : new Uint16Array([65535,63422,9532,13789,59197,57084,34266,28220,63390,65503,61310,61277,57116,55003,61309,40604]),
+      buffer : E.toArrayBuffer(atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzMzMzMwAAAAAAAAAAADMzf//3MzMAAAAAAAAAAzPxmZkRrzMwAAAAAAAAM3mZmZmRiKczAAAAAAADP5mZmZmRiKpjMAAAAAAzeZmZmZkRiKq3MwAAAAAzGZmZmZkRiKq8MwAAAAM/mZmZmZkYiKtE8iAAAAMxmZmZmZEYiqtEUiAAAAN5mZmZmRGIiqtExyAAAAPxmZmZkRiIqrRMViAAAAPxEREREYiKq7RMViAAAAP4ERERiIiqq0TFViAAAAP4iIiIiIqqtETFViAAAAN6iIiIiqq7RExV1yAAAAM0qqqqqru0RMVd0iAAAAM/uqqru7RETFXdYiAAAAAzS7u7RERMxV3dIgAAAAAzdEREREzFVd3XIgAAAAADNkREzMVVXd1iIAAAAAAAM3VVVVVd3dciAAAAAAAAAzNtVd3d1iIgAAAAAAAAADMidmZnIiIAAAAAAAAAAAAiIiIiIgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"))
+    };
+     if (area=='Touch 1') {
+         g.drawImage(img_obj_check,20,80);
+         console.log("Draw option check left");
+        }
+         else g.drawImage(img_obj_uncheck,20,80);
+    if (area=='Touch 2')  {
+        g.drawImage(img_obj_check,190,80);
+        console.log("Draw option check right");
+       }
+        else g.drawImage(img_obj_uncheck,190,80);
+}
+
+function DrawSwitch(swipedir){
+if (swipedir=='  <---') {
+    console.log("Draw switch <--");
+    var img_off = {
+      width : 48, height : 48, bpp : 2,
+      transparent : 0,
+      palette : new Uint16Array([65535,63968,40283,50781]),
+      buffer : E.toArrayBuffer(atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//AAAAAAAAAAAAA///9VVVVVVVQAAAD/qq/1VVVVVVVAAAP6qqv9VVVVVVVUAA/qqqv/VVVVVVVVAD+qqq//1VVVVVVVQP6qqq//1VVVVVVVQPqqqr//9VVVVVVVUvqqqr//9VVVVVVVU+qqqv/+uVVVVVVVV+qqqv+quVVVVVVVV+qqq+qqvVVVVVVVV+qqvqqqvVVVVVVVV+qv+qqquVVVVVVVV+r/+qqquVVVVVVVVv//6qqq9VVVVVVVUP//6qqq9VVVVVVVUP//qqqr1VVVVVVVQD//qqqv1VVVVVVVQA/+qqq/VVVVVVVVAAP+qqr9VVVVVVVUAAD/qq/1VVVVVVVAAAA///9VVVVVVVQAAAAA//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"))
+    };
+    g.drawImage(img_off,99,33);
+  }
+    else if (swipedir=='  --->')  {
+      console.log("Draw switch -->");   
+      var img_on = {
+      width : 48, height : 48, bpp : 2,
+      transparent : 0,
+      palette : new Uint16Array([65535,36361,27879,40283]),
+      buffer : E.toArrayBuffer(atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//AAAAABVVVVVqqf///AAAAVVVVVWqn////wAAFVVVVVWqf////8AAVVVVVVap//////ABVVVVVVqr//////wBVVVVVVqn//////8FVVVVVVqv//////8FVVVVVWqf///////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////VVVVVVWq////////FVVVVVWqf///////FVVVVVVqv//////8BVVVVVVqn//////8BVVVVVVar//////wAVVVVVVap//////AAFVVVVVWqf////8AAAVVVVVWqn////wAAABVVVVVqqf///AAAAAAAAAAAAA//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"))
+    };
+    g.drawImage(img_on,99,33);  
+  }
+} 
+
+
+function PrintUserInput(boton){
+  console.log("Pressed touch/BTN",boton);
+  if (v_clicks=='0') {
+	  PrintAreas();
+	  v_clicks=1;
+  }
+  ClearBannerArea();
+  
+    if (boton=='  <---') DrawSwitch(boton);
+     else if (boton=='  --->') DrawSwitch(boton);
+      else  
+       {   //a BUTTON or AREA  AND NO swipe /slide
+         if (boton=='Touch 1'||boton=='Touch 2') DrawRoundOption(boton);
+         g.setColor(colorange); 
+         g.setFontVector(30).drawString(boton, 63, 55);
+       }
+  g.flip();       
+}
+
+function PrintBtn1(boton){ 
+ console.log("Pressed BTN1");
+ if (v_clicks=='0'){ 
+      PrintAreas();
+	  v_clicks=1; 
+ }
+ PrintUserInput("Button1"); 
+ 
+}
+
+function PrintBtn2(boton){ 
+ console.log("Pressed BTN2");
+ v_color_b_area=ChangeColorBannerArea(v_color_b_area);
+ if (v_clicks=='0'){
+	 PrintAreas();
+	 v_clicks=1; 
+ }
+ PrintUserInput("Button2");  
+}
+
+
 function PrintAreas(){  
   console.log("********************************");
   console.log("Log: *** Print Areas in screen");
   ClearActiveArea();     
   g.setColor(v_color_lines);
-  g.drawLine(1, 140, 1, 200);//side border
+  g.drawLine(1, 140, 1, 200);//vline left border
-  g.drawLine(239, 140, 239, 200);//side border
+  g.drawLine(239, 140, 239, 200);//vlide right border
-  g.drawLine(120, 100, 120, 135);//middle separation  top
+  g.drawLine(120, 100, 120, 135);//vline middle separation  top
-  g.drawLine(120, 170, 120, 200);//middle separation  bottom
+  g.drawLine(120, 170, 120, 200);//vline middle separation  bottom
   
   //BTN1 
   g.setFontVector(v_font1size).drawString("Color<-", 130,125);