diff --git a/apps.json b/apps.json index 57bb04d20..95d39fdb7 100644 --- a/apps.json +++ b/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} + ] } ] diff --git a/apps/UI4swatch/Changelog b/apps/UI4swatch/Changelog new file mode 100644 index 000000000..d81132fb6 --- /dev/null +++ b/apps/UI4swatch/Changelog @@ -0,0 +1 @@ +0.01: 1st ver, defining a common UI/UX diff --git a/apps/UI4swatch/README.md b/apps/UI4swatch/README.md new file mode 100644 index 000000000..11d61cd40 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/apps/UI4swatch/UI4swatch.app.js b/apps/UI4swatch/UI4swatch.app.js new file mode 100644 index 000000000..8cf3891b4 --- /dev/null +++ b/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(); \ No newline at end of file diff --git a/apps/UI4swatch/UI4swatch_icon.png b/apps/UI4swatch/UI4swatch_icon.png new file mode 100644 index 000000000..11dc192b6 Binary files /dev/null and b/apps/UI4swatch/UI4swatch_icon.png differ diff --git a/apps/UI4swatch/UI4swatch_s1.png b/apps/UI4swatch/UI4swatch_s1.png new file mode 100644 index 000000000..bc667e950 Binary files /dev/null and b/apps/UI4swatch/UI4swatch_s1.png differ diff --git a/apps/UI4swatch/app-icon.js b/apps/UI4swatch/app-icon.js new file mode 100644 index 000000000..11a709efe --- /dev/null +++ b/apps/UI4swatch/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwhC/AEMimYASkQXBkYXTmQXzn//mYBBn/zC6nzC6wvTR/4XG/4ASC/4XlQgwOCkQAEdAIXEdI4OBBIwvGC5JHNC/J3XL/53/C/4JGO/533L4wAJC65HNC9rKFAB4XBAH4AeA=")) \ No newline at end of file diff --git a/apps/UI4swatch/app.png b/apps/UI4swatch/app.png new file mode 100644 index 000000000..f26037a9b Binary files /dev/null and b/apps/UI4swatch/app.png differ diff --git a/apps/color_catalog/Changelog b/apps/color_catalog/Changelog new file mode 100644 index 000000000..b79d0c85b --- /dev/null +++ b/apps/color_catalog/Changelog @@ -0,0 +1 @@ +0.01: 1st ver,RGB565 and RGB888 colors in a common UI/UX diff --git a/apps/color_catalog/README.md b/apps/color_catalog/README.md new file mode 100644 index 000000000..c2d9aeb00 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/apps/color_catalog/app-icon.js b/apps/color_catalog/app-icon.js new file mode 100644 index 000000000..ad28d4dd6 --- /dev/null +++ b/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=")) \ No newline at end of file diff --git a/apps/color_catalog/app.png b/apps/color_catalog/app.png new file mode 100644 index 000000000..15401bdad Binary files /dev/null and b/apps/color_catalog/app.png differ diff --git a/apps/color_catalog/color_catalog.app.js b/apps/color_catalog/color_catalog.app.js new file mode 100644 index 000000000..a3abd9411 --- /dev/null +++ b/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_acolorpos0) 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 (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(); diff --git a/apps/helloworld/helloworld_en.png b/apps/helloworld/helloworld_en.png index f262d1248..5a97440f1 100644 Binary files a/apps/helloworld/helloworld_en.png and b/apps/helloworld/helloworld_en.png differ diff --git a/apps/helloworld/helloworld_es.png b/apps/helloworld/helloworld_es.png index 2534d39e9..131babc63 100644 Binary files a/apps/helloworld/helloworld_es.png and b/apps/helloworld/helloworld_es.png differ diff --git a/apps/helloworld/helloworld_jp.png b/apps/helloworld/helloworld_jp.png index 7a4e8142e..0b97f0352 100644 Binary files a/apps/helloworld/helloworld_jp.png and b/apps/helloworld/helloworld_jp.png differ