helloworld compat improvements

minor improvements and bjs2

apps/helloworld/README.md

@@ -3,7 +3,6 @@
 A cross cultural hello world!/hola mundo! app
 The most common testing sentence in several languages ;)
 
-
 ## Pictures:
 
 Launcher icon
@@ -14,6 +13,10 @@ Screen - Spanish
 
 ![](helloworld_es.png)
 
+Screenshot BJS2 emul
+
+![](ss_emul_BJS2.png)
+
 Screen - English
 
 ![](helloworld_en.png)
@@ -22,6 +25,10 @@ Screen - Japanese
 
 ![](helloworld_jp.png)
 
+Screenshot BJS1 emul
+
+![](ss_emul_BJS1.png)
+
 
 
 ## Usage
@@ -31,17 +38,32 @@ interact to change language, color or quit.
 
 ## Features
 
-Colours, all inputs , graph, widgets loaded 
-Counter for Times Display
+ - Compatible Bangle.js1 Bangle.js2
+ - Bottom Widget compatible
+ - Change FG/BG colors, 
+ - Usage of many input events
 
 
-## Controls
+## Pending/future Features
+- replace UI hardcoded colors for dynamic based on theme
+- BJS2 change BTN1 from quit to Change FG Color (conflict wit setUI?)
 
-finger swipe 
-button 1,2 and 3
-touch screen left, center or right
+
+## Controls/UI
+ - Left area: Back/Exit/launcher 
+ - BTN3 (long press)(BJS1): default Exit/kill app 
+
+ - BTN1 (BJS2): Back/Exit/launcher 
+ - BTN1 (BJS1): Change Language
+ - BTN2 (BJS1): Change FG Color 
+ - BTN3 (BJS1): Quit
+
+ - Right area: Change BG Color 
+ - Swipe left: Change Language
+ - Swipe right: Change Language 
 
 
 ## Creator
 
-Daniel Perez
+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/my_espruino_smartwatch_things)

apps/helloworld/helloworld.app.js

@@ -0,0 +1,219 @@
+//HolaMundo v202212
+// place your const, vars, functions or classes here
+{
+    var contador=1; 
+    var v_mode_debug=0;
+    var v_model=process.env.BOARD;
+
+    var v_color_statictxt='#b30000';
+    //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 x_max_screen=g.getWidth();
+    var y_max_screen=g.getHeight(); 
+    var y_wg_bottom=g.getHeight()-25;
+    var y_wg_top=25; 
+    
+    //EMSCRIPTEN,EMSCRIPTEN2
+if (v_model=='BANGLEJS'||v_model=='EMSCRIPTEN') {
+    var v_color_lines=0xFFFF; //White hex format
+    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 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
+    var graph_y=120;
+    var box_x2=195;
+    var box_y2=150;
+  }else{   //BJS2
+      //176x176
+    var v_color_lines="#000"; //White hex format
+    var v_color_text="#000";
+    var v_font1size=9; //out of quotes
+    var v_font2size=9;
+    var v_font_banner_size=16;    
+    var v_font3size=8;
+    //g.setColor("#000"); //black or dark
+    x_max_usable_area=176;	
+    var graph_y=60;
+    var box_x2=128;
+    var box_y2=104;
+  }
+  if (v_mode_debug>0) console.log("device="+v_model);
+    var v_arraypos=0;
+    var v_acolorpos=0; //for fg
+    var v_aBGcolorPos=5; //for bg
+    var a_string1 = Array('hola', 'hello', 'saluton', 'ola','ciao', 'salut','czesc','konnichiwa');
+    var a_string2 = Array('mundo!', 'world!', 'mondo!','mundo!','mondo!','monde!','swiat!','sekai!');
+
+   
+}
+ if (v_mode_debug>0) {
+     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) {
+          contador=contador+1;
+          PrintHelloWorld();      
+        // call your app function here
+        // If you clear the screen, do Bangle.drawWidgets();    
+      }
+    });
+    
+    //Clear/fill dynamic area except widget area, right and bottom status line
+    function ClearActiveArea(){                 
+        g.setColor(a_colors[v_aBGcolorPos]); //dynamic color
+        g.fillRect(0,y_wg_top,box_x2,box_y2);
+        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
+    
+    function PrintHelloWorld(){     
+        ClearActiveArea(); //except widgets and bottom
+        
+        if (v_mode_debug>0) console.log("drawing a "+a_string1[v_arraypos]+" "+a_string2[v_arraypos]);
+        
+        g.setColor(a_colors[v_acolorpos]); //dynamic color
+        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);
+        g.flip();
+    
+        g.setColor(a_colors[v_acolorpos+1]); //dynamic color
+        g.drawString(a_string2[v_arraypos],5,85);   
+        g.flip();
+    
+        g.setFont("Vector",v_font3size);   
+        g.setColor(v_color_statictxt);  
+        g.drawString("Display on/off: "+contador ,10,box_y2+7); 
+        //var mem=process.memory();        
+        //if (v_mode_debug>0) console.log("Mem free/total: "+mem.free+"/"+mem.total);            
+        g.flip();    
+    }
+    
+    function PrintMainStaticArea(){ 
+        g.setColor(v_color_statictxt);  
+        g.setFont("Vector",v_font3size);    
+        g.drawString("#by DPG #bangle.js",10,box_y2+5+(v_font3size*2)); 
+        g.drawString("#javascript #espruino",10,box_y2+5+(v_font3size*3)); 
+        
+        var img_obj_RedHi = {
+            width : 40, height : 40, bpp : 4,
+            transparent : 0,
+            buffer : require("heatshrink").decompress(atob("AFkM7vd4EAhoTNhvQhvcgHdAQIAL5oWCFIPdExo+CEoIZCABI0DhvADIZhJL4IXDHRkMEAQmOCYgmOAAIOBHwImNRQgmPHgYmCUIIXMJobfB3jgCWZJNDEga1JYQQQCMYZoJJAJNDBwgTICQPdCY7lDRQx4DVIwTIHYZzEHZATFBwblDCZRKEO5ITFWAbIJCYrHBAAImICYwEB5raKCYwAMCYXc5gADE5hLDAAgTIBJLkBBJAyKHw5hKBRJJKKJSuII5Q0IhqPKCbjRKCc4AgA=="))
+          }
+          g.drawImage(img_obj_RedHi,box_x2+2,graph_y);		  
+          g.flip();
+    }
+    
+    
+    //inc var postion for text array
+    function ChangeLang(dir){        
+        if (v_mode_debug>0) console.log("ChangeLang, dir, Prev pos: "+dir+" , "+v_arraypos);        
+       
+        if ((dir==1) && (v_arraypos<a_string1.length-1)) v_arraypos++;
+        else if ((dir== 1) && (v_arraypos==a_string1.length-1)) v_arraypos=0;
+         else if ((dir== -1) && (v_arraypos>0)) v_arraypos--;  
+          else if ((dir== -1) && (v_arraypos==0)) v_arraypos=a_string1.length-1;  
+        PrintHelloWorld();
+    }
+    
+    //inc var postion for color array
+    function ChangeColor(){
+        //if (v_mode_debug>0) console.log("ChangeColor, colpos: "+v_acolorpos);
+        if (v_acolorpos<a_colors.length-2) v_acolorpos++;
+         else v_acolorpos=0;    
+        PrintHelloWorld();
+    }
+    function ChangeBGColor(){        
+        if (v_aBGcolorPos<a_colors.length-2) v_aBGcolorPos++;
+         else v_aBGcolorPos=0; 
+        ClearActiveArea(); //except widgets and bottom    
+        PrintHelloWorld();
+    }
+    function UserInput(){   
+        Bangle.on('touch', function(button){ 
+            switch(button){
+                case 1:       
+                    ChangeLang();//left area
+                         break;
+                case 2:
+                    ChangeBGColor();//right
+                         break;
+                case 3: 
+                    ChangeColor();
+                  //Bangle.showLauncher();//quit     
+                        break;
+            }  
+        });
+    
+   if (v_model=='BANGLEJS'||v_model=='EMSCRIPTEN') {
+       setWatch(ChangeLang, BTN1, { repeat: true });//func  to quit
+        setWatch(ChangeColor, BTN2, { repeat: true });
+        setWatch(Bangle.showLauncher, BTN3, { repeat: true });  
+     } //touchscreen to quit
+     else setWatch(ChangeColor, BTN1, { repeat: true });//func  to quit
+    Bangle.on('swipe', dir => {  
+        if(dir == 1) ChangeLang(1); //right
+        else ChangeLang(-1); //left
+    });
+    }
+    
+    if (v_mode_debug>0) console.log("**************************");
+    if (v_mode_debug>0) console.log("Log: *** hola mundo app");
+    g.clear();
+      Bangle.loadWidgets();
+      Bangle.drawWidgets();   
+      Bangle.setUI({
+      mode : "custom",
+      back : function() {load();}
+    });
+    if (v_model=='BANGLEJS'||v_model=='EMSCRIPTEN') DrawBangleButtons();
+      DrawBottomInfoBanner();
+      UserInput();
+      PrintMainStaticArea();
+      PrintHelloWorld();
+    

apps/helloworld/metadata.json

@@ -2,14 +2,15 @@
   "id": "helloworld",
   "name": "hello, world!",
   "shortName": "hello world",
-  "version": "0.02",
+  "version": "0.03",
   "description": "A cross cultural hello world!/hola mundo! app with colors and languages",
   "icon": "app.png",
   "tags": "input,interface,buttons,touch",
-  "supports": ["BANGLEJS"],
+  "screenshots": [{"url":"screenshot.png"}],
+  "supports": ["BANGLEJS","BANGLEJS2"],
   "readme": "README.md",
   "storage": [
-    {"name":"helloworld.app.js","url":"app.js"},
+    {"name":"helloworld.app.js","url":"helloworld.app.js"},
     {"name":"helloworld.img","url":"app-icon.js","evaluate":true}
   ]
 }