2 new apps and updates for another

apps.json

@@ -2793,7 +2793,7 @@
   "name": "Test User Input",
   "shortName":"Test User Input",
   "icon": "app.png",
-  "version":"0.04",
+  "version":"0.05",
   "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",
@@ -2869,10 +2869,10 @@
   ]
 },
 { "id": "helloworld",
-  "name": "hello,world!",
-  "shortName":"helloworld",
+  "name": "hello, world!",
+  "shortName":"hello world",
   "icon": "app.png",
-  "version":"0.01",
+  "version":"0.02",
   "description": "A cross cultural hello world!/hola mundo! app with colors and languages",
   "readme": "README.md",
   "tags": "input,interface,buttons,touch",
@@ -2919,5 +2919,31 @@
     {"name":"waypoints.json","url":"waypoints.json","evaluate":false},
     {"name":"waypointer.img","url":"icon.js","evaluate":true}
   ]
+},
+{ "id": "color_catalog",
+  "name": "Colors Catalog",
+  "shortName":"Colors Catalog",
+  "icon": "app.png",
+  "version":"0.01",
+  "description": "Displays RGB565 and RGB888 colors, its name and code in screen.",
+  "readme": "README.md",
+  "tags": "Color, input,buttons,touch,UI",
+  "storage": [
+    {"name":"color_catalog.app.js","url":"app.js"},
+    {"name":"color_catalog.img","url":"app-icon.js","evaluate":true}
+  ]
+},
+{ "id": "UI4swatch",
+  "name": "UI 4 swatch",
+  "shortName":"UI 4 swatch",
+  "icon": "app.png",
+  "version":"0.01",
+  "description": "A UI/UX for espruino smartwatches, displays dinamically calc. x,y coordinates.",
+  "readme": "README.md",
+  "tags": "Color, input,buttons,touch,UI",
+  "storage": [
+    {"name":"UI4swatch.app.js","url":"app.js"},
+    {"name":"UI4swatch.img","url":"app-icon.js","evaluate":true}
+  ]
 }
 ]

apps/UI4swatch/Changelog

@@ -0,0 +1 @@
+0.01: 1st ver, defining a common UI/UX 

apps/UI4swatch/README.md

@@ -0,0 +1,38 @@
+# UI/UX for Espruino Smartwatches
+
+This is a very basic app that defines a common UI/UX for espruino smartwatchesm and specifically for the *bangle.js*, also it displays dinamically calculated x,y position coordinates and screen areas based in detected smartwatch models.
+
+
+Launcher icon
+
+![](UI4swatch_icon.png)
+
+1st screen - Main page
+
+![](UI4swatch_s1.png)
+
+## Usage
+
+Open and see x,y coordinates for areas
+Interact with buttons or touch screen to print the event or leave the app
+
+## Features
+
+Colours, font, user input,, load widgets
+
+
+## Controls
+Press left area - Prints Touch1
+Press righ area - Prints Touch2
+Press center area - Prints Touch3
+Swipe Left - Prints <--
+Swipe Right - Prints -->
+BTN1 - Prints Button1
+BTN2 - Prints Button2
+BTN3 - Quit to Launcher
+
+
+## Support
+
+This app is so basic that probably the easiest is to just edit the code 
+Otherwise you can contact me [here](https://github.com/dapgo)

apps/UI4swatch/UI4swatch.app.js

@@ -0,0 +1,196 @@
+/* UI/UX for Espruino and Bangle.js 
+Testing USer interface and User usability  
+v20200307
+identify device and dimensions
+max printable position max_x-1 i.e 239 
+*/
+
+ var colbackg='#111111';//black 
+ var colorange='#e56e06'; //RGB format rrggbb
+ var v_color_lines=0xFFFF; //White hex format
+ var v_color_b_area='#111111';
+ var v_color_text=0x07E0;//'#FB0E01';//red
+ var v_font1size=10; //out of quotes
+ var v_font2size=12;
+ var v_font_banner_size=30;
+ var v_clicks=0;
+ //pend identify widget area dinamically
+ var v_model=process.env.BOARD;
+ console.log("device="+v_model);
+  
+ var x_max_screen=g.getWidth();//240;
+ var y_max_screen=g.getHeight(); //240; 
+ var y_wg_bottom=g.getHeight()-25;
+ var y_wg_top=25; 
+ if (v_model=='BANGLEJS') {
+    var x_btn_area=215;
+    var x_max_usable_area=x_btn_area;//Pend! only for bangle.js
+    var y_btn2=124; //harcoded for bangle.js  cuz it is not the half of display height
+ } else x_max_usable_area=240;
+ 
+  
+ var x_mid_screen=x_max_screen/2;
+ 
+ //PEND comment
+ console.log("*** UI dimensions***"); 
+ console.log("x="+x_max_screen);
+ console.log("y_wg_bottom="+y_wg_bottom);
+ 
+ 
+ 
+ //the biggest usable area, button area not included
+function ClearActiveArea(){
+  g.setColor(v_color_b_area); 
+  g.fillRect(0,y_wg_top,x_max_usable_area,y_wg_bottom); //fill all screen except widget areas
+  g.flip();
+}
+
+
+//Clean fill top area with a color
+function ClearBannerArea(){
+  g.setColor(v_color_b_area); 
+  g.fillRect(55,28,185,60); 
+  g.flip();
+}
+  
+
+function PrintUserInput(boton){
+  //var v_font_banner_size=30;//now global size= almost px height
+  console.log("Pressed touch/BTN",boton);
+  ClearBannerArea();
+  g.setColor(colorange); 
+  //print in banner area
+  g.setFontVector(v_font_banner_size).drawString(boton, 63, 29);
+  g.flip();           
+}
+
+function PrintBtn1(boton){ 
+ console.log("Pressed BTN1");
+ PrintUserInput("Button1"); 
+ 
+}
+
+function PrintBtn2(boton){ 
+ console.log("Pressed BTN2");
+ PrintUserInput("Button2");  
+}
+
+function DrawBangleButtons(){    
+        g.setFontVector(v_font1size);
+        g.setColor(v_color_lines);//White
+        //line-separation with buttons area  
+        g.drawLine(x_btn_area, 35, x_btn_area, 180);//vline right sep buttons
+        
+        //x for Border position in 2 lines
+        g.drawString("x=",x_max_screen-g.stringWidth("x= "),68);          
+        g.drawString(x_max_screen,x_max_screen-g.stringWidth("3ch"),78);  
+        
+        g.drawString("Dwn", x_max_screen-g.stringWidth("Dwn"),y_wg_top+v_font1size+1); 
+        //above Btn2 
+        //g.setFontVector(v_font1size).drawString("Off", x_max_screen-g.stringWidth("Off"),y_btn2-(2*v_font1size));        
+        g.drawString("Set", x_max_screen-g.stringWidth("Set"),y_btn2-v_font1size);    
+       //above Btn3  
+        g.drawString("Quit", x_max_screen-g.stringWidth("Quit"),y_wg_bottom-(2*v_font1size));  
+        g.flip(); 
+        g.setColor(v_color_text);  //green   
+        g.setFontVector(v_font1size);
+        g.drawString("B1", x_max_screen-g.stringWidth("B1"),y_wg_top);
+        g.drawString("B2", x_max_screen-g.stringWidth("B2"),y_btn2);
+        g.drawString("B3",x_max_screen-g.stringWidth("B3"),y_wg_bottom-v_font1size);
+        g.flip();
+}
+function DrawBottomInfoBanner(){
+/* External Vars:v_color_text,v_font2size,x_max_usable_area,y_wg_bottom
+*/  
+    g.setColor(v_color_text);  
+    var info_text1="Swipe: Next/Back screen"; 
+    var info_text2="Touch: Left=Up  Right=Down"; 
+    //aligned left of max usable area
+    g.setFontVector(v_font2size);
+    g.drawString(info_text2, x_max_usable_area-g.stringWidth(info_text2)-2 ,y_wg_bottom-(2*v_font2size)); 
+    g.drawString(info_text1, x_max_usable_area-g.stringWidth(info_text1)-2 ,y_wg_bottom-v_font2size);  
+    g.flip(); 
+}
+
+function PrintAreas(){  
+  console.log("********************************");
+  console.log("Log: *** Print Areas in screen");
+  ClearActiveArea();     
+  g.setColor(v_color_lines);
+  
+  //  **** Borders and Separation Lines for areas 
+  g.drawLine(1, 35, 1, 180);//line for left border
+  //
+  g.drawLine(x_max_screen-1, 50, x_max_screen-1, 75);//vlide right border
+  g.drawLine(x_mid_screen, 80, x_mid_screen, 105);//vline middle separation part1 up
+  g.setFontVector(v_font2size).drawString("Output area for "+v_model,(x_max_usable_area-g.stringWidth("Output area for "+v_model))/2,67);
+  g.setFontVector(v_font2size).drawString("x="+x_mid_screen,x_mid_screen-g.stringWidth("x=xxx"),85);  
+  g.drawLine(x_mid_screen, 140, x_mid_screen, 180);//vline middle separation  part2 down
+  
+  
+  //y=26 after widget line y=215 below widget line
+        
+    if (v_model=='BANGLEJS') DrawBangleButtons();
+    
+    g.setFontVector(v_font2size);
+    g.setColor(v_color_text);  
+    g.drawString("Touch", 80,110);
+    g.drawString("Middle area", 80,125);
+    g.drawString("Left area", 15, 145);
+    g.drawString("Right area", 140,145);  
+    g.flip();
+    DrawBottomInfoBanner();
+}  
+
+function UserInput(){
+    Bangle.on('touch', function(button){ 
+        switch(button){
+            case 1:
+               PrintUserInput("Touch 1");//left
+                 break;
+            case 2:
+               PrintUserInput("Touch 2");//right
+                 break;
+            case 3: 
+              PrintUserInput("Touch 3");//center 1+2
+                break;
+        }
+    });
+    
+    if (v_model=='BANGLEJS') {
+        //only the name of the function
+        setWatch(PrintBtn1, BTN1, { repeat: true });
+        setWatch(PrintBtn2, BTN2, { repeat: true });
+        setWatch(Bangle.showLauncher, BTN3, { repeat: true });
+    }   
+    Bangle.on('swipe', dir => {  
+      if(dir == 1) PrintUserInput("  --->");
+      else PrintUserInput("  <---");
+    });
+    console.log("Log: Input conditions loaded");
+} //end of UserInput
+
+//Main code
+ClearActiveArea(); 
+PrintAreas();
+ Bangle.loadWidgets();
+ Bangle.drawWidgets();
+ 
+ 
+ 
+ //optional lines below and above both widget areas
+ g.setColor(v_color_lines);    
+ //line-separation with top widget area
+ g.drawLine(60, y_wg_top, 180, y_wg_top); 
+ g.setFontVector(v_font2size).drawString("y="+y_wg_top,10,y_wg_top+1);   
+ //line-separation with bottom widget area
+ g.drawLine(60, y_wg_bottom, 180, y_wg_bottom); 
+ g.setFontVector(v_font2size).drawString("y="+y_wg_bottom,10,y_wg_bottom-v_font2size); 
+ 
+ 
+ 
+ 
+
+ g.flip(); 
+ //end optional 
+ UserInput();

apps/UI4swatch/app-icon.js

@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwwhC/AEMimYASkQXBkYXTmQXzn//mYBBn/zC6nzC6wvTR/4XG/4ASC/4XlQgwOCkQAEdAIXEdI4OBBIwvGC5JHNC/J3XL/53/C/4JGO/533L4wAJC65HNC9rKFAB4XBAH4AeA="))

apps/color_catalog/Changelog

@@ -0,0 +1 @@
+0.01: 1st ver,RGB565 and RGB888 colors in a common UI/UX 

apps/color_catalog/README.md

@@ -0,0 +1,43 @@
+# Color Catalog
+
+This is a very basic app that displays RGB565 and RGB888 colors, its name and code in screen.
+This apps is based in the "common UI/UX".
+
+
+Launcher icon
+
+![](color_catalog.png)
+
+1st screen - page 1
+
+![](color_catalog_s1.png)
+
+2nd screen - page
+
+![](color_catalog_s2.png)
+
+## Usage
+
+Open and 2 rows of colors per page 
+Interact with a horizontal swipe/slide to move to next or previos page in order to display other colors
+
+## Features
+
+Colours, font, user input, load widgets
+
+
+## Controls
+Press left area - 
+Press righ area - 
+Press center area - 
+Swipe Left - Load the previous page and its colors
+Swipe Right - Load the next page and its colors
+BTN1 - Prints Button1
+BTN2 - Prints Button2
+BTN3 - Quit to Launcher
+
+
+## Support
+
+This app is so basic that probably the easiest is to just edit the code 
+Otherwise you can contact me [here](https://github.com/dapgo)

apps/color_catalog/app-icon.js

@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwwhC/AHczAAYXyh3jC6s+93gC6nuAAMwC6UDC4QYMC40OC4fuC6JeBC53/AAZeEAAKSLC4sPmYXDSJfdAAZNB/4YDR5YXFIQP/MILZMC4iNCmfznxGCgbKDC5PtIgQYBXwUykTDHC4ndOoc/CwcikAXQIwMCCwMikYXRh4uCAAIXQgUT+YXDMAzXEnoWC8kRiQXEJAwXEma8B93hiMRn5IK5gADka8B91BC4IGBF5IXE7s/+fuCwJIFL4wXFDAMxC4ZICa44XG6cyC4URl8yCw4XH7szkIXCiYWIC4/UkZIDag4XJ61jJAUSCxIXHi1i+YWMa4pGBszUBkUq1UicIIACC5XWsMRj8yCwIXPmVGC4MT1WiC6EzIwMRmYWCC5gMBF4IXBjUzCwQXQsMa1R3BC5xHDRQOqD4IXRnQWBC6gWCC84A/AGg="))

apps/color_catalog/color_catalog.app.js

@@ -0,0 +1,183 @@
+/* Color show for Bangle.js 
+grey
+RGB888:#404040 / 0x404040
+RGB565:#4208 / 0x4208
+grey RGB888:#5c5c5c / 0x5c5c5c
+RGB565:#5AEB / 0x5AEB
+*/
+
+
+var v_model=process.env.BOARD;
+ console.log("device="+v_model);
+  
+ var x_max_screen=g.getWidth();//240;
+ var y_max_screen=g.getHeight(); //240; 
+ var y_wg_bottom=g.getHeight()-25;
+ var y_wg_top=25; 
+ if (v_model=='BANGLEJS') {
+    var x_btn_area=215;
+    var x_max_usable_area=x_btn_area;//Pend! only for bangle.js
+    var y_btn2=124; //harcoded for bangle.js  cuz it is not the half of
+ } else x_max_usable_area=240;
+ 
+    var contador=1; 
+    var cont_items=0; 
+    var cont_row=0;
+    var v_boxes_row=4;
+    var cont_page=1;
+    var v_boxwidth=40;
+    var v_boxheight=10; 
+    var v_acolorpos=0;
+    var v_font1size=11;
+    var v_fontsize=13;
+    var v_color_b_area='#111111';//black
+    var v_color_b_area2=0x5AEB;//Dark
+    var v_color_text='#FB0E01';
+    var v_color_statictxt='#e56e06'; //orange RGB format rrggbb 
+    //RGB565 requires only 16 (5+6+5) bits/2 bytes
+    var a_colors_str= Array('White RGB565 0x','Orange','DarkGreen','Yellow',
+    'Maroon','Blue','green','Purple',
+    'cyan','olive','DarkCyan','DarkGrey',
+    'Navy','Red','Magenta','GreenYellow',
+    'Blush RGB888','pure red','Orange','Grey green',
+    'D. grey','Almond','Amber','Bone',
+    'Canary','Aero blue','Camel','Baby pink',
+    'Y.Corn','Cultured','Eigengrau','Citrine');
+    var a_colors= Array(0xFFFF,0xFD20,0x03E0,0xFFE0,
+    0x7800,0x001F,0x07E0,0x780F,
+    0x07FF,0x7BE0,0x03EF,0x7BEF,
+    0x000F,0xF800,0xF81F,0xAFE5,
+    '#DE5D83','#FB0E01','#E56E06','#7E795C',
+    '#404040','#EFDECD','#FFBF00','#E3DAC9',
+    '#FFFF99','#C0E8D5','#C19A6B','#F4C2C2',
+    '#FBEC5D','#F5F5F5','#16161D','#E4D00A');
+    var v_color_lines=0xFFFF; //White hex format
+    
+    
+    //the biggest usable area, button area not included
+function ClearActiveArea(){
+  g.setColor(v_color_b_area); 
+  g.fillRect(0,y_wg_top,x_max_usable_area,y_wg_bottom); //fill all screen except widget areas
+  g.flip();
+}
+    
+    
+    function UserInput(){
+    Bangle.on('touch', function(button){ 
+        switch(button){
+            case 1:
+              console.log("Touch 1");//left
+                 break;
+            case 2:
+                console.log("Touch 2");//right
+                 break;
+            case 3: 
+               console.log("Touch 3");//center 1+2
+                break;
+        }
+    });
+    
+    if (v_model=='BANGLEJS') {
+        //only the name of the function        
+        setWatch(Bangle.showLauncher, BTN3, { repeat: true });
+    }   
+    Bangle.on('swipe', dir => {  
+      if(dir == 1) {          
+           console.log("v_acolorpos"+v_acolorpos+"a_colors.length"+a_colors.length);
+          if (v_acolorpos<a_colors.length-1) {
+              cont_page++; 
+              console.log("swipe page"+cont_page);
+              PrintScreen(cont_page);
+          }
+         }
+      else {          
+          if (cont_page>0) cont_page--; 
+          console.log("swipe page"+cont_page);
+         PrintScreen(cont_page);
+         }
+    });
+    console.log("Log: Input conditions loaded");
+} //end of UserInput
+    
+function DrawBangleButtons(){    
+        g.setFontVector(v_font1size);
+        g.setColor(v_color_lines);//White
+        
+        //g.drawString("Dwn", x_max_screen-g.stringWidth("Dwn"),y_wg_top+v_font1size+1); 
+        //above Btn2 
+        //g.setFontVector(v_font1size).drawString("Off", x_max_screen-g.stringWidth("Off"),y_btn2-(2*v_font1size));        
+        //g.drawString("Set", x_max_screen-g.stringWidth("Set"),y_btn2-v_font1size);    
+       //above Btn3  
+        g.drawString("Quit", x_max_screen-g.stringWidth("Quit"),y_wg_bottom-(2*v_font1size));  
+        g.flip(); 
+        g.setColor(v_color_text);  //green   
+        g.setFontVector(v_font1size);
+        g.drawString("B1", x_max_screen-g.stringWidth("B1"),y_wg_top);
+        g.drawString("B2", x_max_screen-g.stringWidth("B2"),y_btn2);
+        g.drawString("B3",x_max_screen-g.stringWidth("B3"),y_wg_bottom-v_font1size);
+        g.flip();
+}
+    
+    function PrintScreen(page){
+            ClearActiveArea();
+            g.setColor(v_color_statictxt);
+            g.setFont("Vector",v_fontsize); 
+            g.drawString("Page "+page,10,y_wg_top+5);
+            g.flip();
+            
+            v_acolorpos=page*(v_boxes_row*2);
+            
+            ;
+            console.log("page"+cont_page+"arraypos"+v_acolorpos);
+        for (cont_row=0;cont_row<2;cont_row++){
+            console.log("row"+cont_row);
+            for (cont_items=0;cont_items<v_boxes_row;cont_items++){
+                
+                g.setColor(a_colors[v_acolorpos]); //dynamic color
+                //console.log("col"+cont_items);
+                var v_x1_box=(v_boxwidth*cont_items)+5;
+                var v_x2_box=(v_boxwidth*(cont_items+1))+5;
+                //y for second row is v_boxheight+strings
+                var v_pos_row=y_wg_top+v_fontsize+5+(cont_row*v_boxheight)+(cont_row*v_boxes_row*(v_fontsize+4));
+               // console.log("v_pos_row"+v_pos_row);
+                var v_y1_box=(v_pos_row);
+                var v_y2_box=(v_pos_row+v_boxheight);
+                g.fillRect(v_x1_box,v_y1_box,v_x2_box,v_y2_box); //fill all screen except widget areas
+                //identify color format
+               var v_string=v_acolorpos+" "+a_colors_str[v_acolorpos]+" "+a_colors[v_acolorpos].toString(16);
+               
+               
+               //Align always inside the display
+               if ((v_x1_box+g.stringWidth(v_string))<x_max_usable_area){
+                    var v_x_pos_str=v_x1_box;
+               }
+               else  var v_x_pos_str=x_max_usable_area-g.stringWidth(v_string);  
+               //y positions next text line
+               var v_y_pos_str=v_y2_box+8+((v_fontsize+2)*cont_items);
+                g.setFont("Vector",v_fontsize); 
+                g.drawString(v_string,v_x_pos_str,v_y_pos_str); 
+                //line below 2nd string
+                
+                g.flip();
+                    
+                if (v_acolorpos<a_colors.length-1) v_acolorpos++;
+                else break; //no more print until swipe
+            }
+        
+        }
+        
+   }
+    
+    
+    console.log("**************************");
+    console.log("Log: *** Color Catalog app");
+    console.log("array length"+a_colors.length);
+    
+    g.clear();
+    Bangle.loadWidgets();
+    Bangle.drawWidgets();
+    if (v_model=='BANGLEJS') DrawBangleButtons();
+    UserInput();
+    PrintScreen(0);
+    
+    

apps/helloworld/Changelog

@@ -1 +1,2 @@
 0.01: 1st version !
+0.02: Supports bottom widgets and UI based in UI4swatch!

apps/helloworld/app.js

@@ -1,21 +1,41 @@
-//HolaMundo v2021
+//HolaMundo v202103
 // place your const, vars, functions or classes here
 {
     var contador=1; 
-    var v_color_statictxt='#e56e06'; //orange RGB format rrggbb 
-    //white,Orange,DarkGreen,Yellow,Maroon,Blue,green,Purple,cyan,olive,DarkCyan,pink
+    var v_color_statictxt='#e56e06';
+    var v_color_b_area='#111111';   //orange RGB format rrggbb     //white,Orange,DarkGreen,Yellow,Maroon,Blue,green,Purple,cyan,olive,DarkCyan,pink
     var a_colors= Array(0xFFFF,0xFD20,0x03E0,0xFFE0,0x7800,0x001F,0x07E0,0x780F,0x07FF,0x7BE0,0x03EF,0xF81F);
     var v_color_lines=0xFFFF; //White hex format
-    var v_font1size='32';
-    var v_font2size='12';
-    var v_font3size='12';
+ //new
+  var v_color_text=0x07E0;
+    var v_font1size=10; //out of quotes
+    var v_font2size=12;
+    var v_font_banner_size=30;    
+    var v_font3size=12;
     var v_arraypos=0;
     var v_acolorpos=0;
     var a_string1 = Array('hola', 'hello', 'saluton', 'ola','ciao', 'salut','czesc','konnichiwa');
     var a_string2 = Array('mundo!', 'world!', 'mondo!','mundo!','mondo!','monde!','swiat!','sekai!');
     var mem=process.memory();
-    }
+    var v_model=process.env.BOARD;
+    console.log("device="+v_model);
+  
+    var x_max_screen=g.getWidth();//240;
+    var y_max_screen=g.getHeight(); //240; 
+    var y_wg_bottom=g.getHeight()-25;
+    var y_wg_top=25; 
+     if (v_model=='BANGLEJS') {
+        var x_btn_area=215;
+        var x_max_usable_area=x_btn_area;//Pend! only for bangle.js
+        var y_btn2=124; //harcoded for bangle.js  cuz it is not the half of display height
+     } else x_max_usable_area=240;
+}
             
+ console.log("*** UI dimensions***"); 
+ console.log("x="+x_max_screen);
+ console.log("y_wg_bottom="+y_wg_bottom);
+ 
+
     // special function to handle display switch on
     Bangle.on('lcdPower', (on) => {
       if (on) {
@@ -27,12 +47,45 @@
     });
     
     //Clear/fill dynamic area except widget area, right and bottom status line
-    function ClearActiveArea(){
-        var colorbackg='#111111';//black 
-        g.setColor(colorbackg); 
-        g.fillRect(0,32,195,150); 
+    function ClearActiveArea(){        
+        g.setColor(v_color_b_area); 
+        //harcoded values to avoid clearing areas
+        g.fillRect(0,y_wg_top,195,150);
         g.flip();
       }
+      
+      function DrawBangleButtons(){    
+        g.setFontVector(v_font1size);
+        g.setColor(v_color_lines);//White
+        
+        
+        g.drawString("Lang", x_max_screen-g.stringWidth("Lang"),y_wg_top+v_font1size+1); 
+        //above Btn2 
+        //g.setFontVector(v_font1size).drawString("Off", x_max_screen-g.stringWidth("Off"),y_btn2-(2*v_font1size));        
+        g.drawString("Color", x_max_screen-g.stringWidth("Color"),y_btn2-v_font1size);    
+       //above Btn3  
+        g.drawString("Quit", x_max_screen-g.stringWidth("Quit"),y_wg_bottom-(2*v_font1size));  
+        g.flip(); 
+        g.setColor(v_color_text);  //green   
+        g.setFontVector(v_font1size);
+        g.drawString("B1", x_max_screen-g.stringWidth("B1"),y_wg_top);
+        g.drawString("B2", x_max_screen-g.stringWidth("B2"),y_btn2);
+        g.drawString("B3",x_max_screen-g.stringWidth("B3"),y_wg_bottom-v_font1size);
+        g.flip();
+}
+
+function DrawBottomInfoBanner(){
+/* External Vars:v_color_text,v_font2size,x_max_usable_area,y_wg_bottom
+*/  
+    g.setColor(v_color_text);  
+    var info_text1="Swipe <- -> (Lang)"; 
+    //var info_text2="Touch: Left=Up  Right=Down"; 
+    //aligned left of max usable area
+    g.setFontVector(v_font2size);
+    //g.drawString(info_text2, x_max_usable_area-g.stringWidth(info_text2)-2 ,y_wg_bottom-(2*v_font2size)); 
+    g.drawString(info_text1, x_max_usable_area-g.stringWidth(info_text1)-2 ,y_wg_bottom-v_font2size);  
+    g.flip(); 
+}
     
     //function Graphics.setColor(r, g, b) binary
     // banglejs.com/reference#l_Graphics_setColor
@@ -43,7 +96,7 @@
         console.log("drawing a "+a_string1[v_arraypos]+" "+a_string2[v_arraypos]);
         
         g.setColor(a_colors[v_acolorpos]); //dynamic color
-        g.setFont("Vector",35); 
+        g.setFont("Vector",v_font_banner_size); 
         g.drawString(a_string1[v_arraypos],2,55); 
         //line below 2nd string
         g.drawLine(10, 149, 150, 149);
@@ -65,7 +118,7 @@
     function PrintMainStaticArea(){ 
         g.setColor(v_color_statictxt);  
         g.setFont("Vector",v_font3size);    
-        g.drawString("#for #bangle.js",10,170); 
+        g.drawString("#by DPG #bangle.js",10,170); 
         g.drawString("#javascript #espruino",10,185); 
         
         var img_obj_RedHi = {
@@ -125,17 +178,8 @@
     g.clear();
       Bangle.loadWidgets();
       Bangle.drawWidgets();   
-      g.setColor(0,1,0);  //green
-        
-       // top or bottom 24px of the screen (reserved for Widgets) 
-        g.setFontVector(v_font2size).drawString("BTN1", 202,37);  
-        g.setFontVector(v_font2size).drawString("Lang", 202,51); 
-        g.setFontVector(v_font2size).drawString("Color<", 197,110);  
-        g.setFontVector(v_font2size).drawString("BTN2", 202,124);  
-        g.setFontVector(v_font2size).drawString("Swipe <- -> (Lang)", 15,223);  
-        g.setFontVector(v_font2size).drawString("Quit<", 200,209);  
-        g.setFontVector(v_font2size).drawString("BTN3", 201,223);  
-        g.flip();
+      if (v_model=='BANGLEJS') DrawBangleButtons();
+      DrawBottomInfoBanner();
       UserInput();
       PrintMainStaticArea();
       PrintHelloWorld();