diff --git a/apps.json b/apps.json index dbf438dde..18c74638f 100644 --- a/apps.json +++ b/apps.json @@ -2857,10 +2857,10 @@ "name": "Test User Input", "shortName":"Test User Input", "icon": "app.png", - "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.", + "version":"0.06", + "description": "App to test the bangle.js input interface. It displays the user action in text, circle buttons or on/off switch UI elements.", "readme": "README.md", - "tags": "input,interface,buttons,touch", + "tags": "input,interface,buttons,touch,UI", "storage": [ {"name":"testuserinput.app.js","url":"app.js"}, {"name":"testuserinput.img","url":"app-icon.js","evaluate":true} diff --git a/apps/testuserinput/README.md b/apps/testuserinput/README.md index 3202ae752..47c1779be 100644 --- a/apps/testuserinput/README.md +++ b/apps/testuserinput/README.md @@ -1,7 +1,14 @@ # Test User Input -This very basic app, allows to *test the bangle.js input interface*, and displays the result in text or a switch on/off image. +This basic app, allows to **test the bangle.js input interface** trough every types of finger interaction. +Interactrion type is displayed in text or a switch on/off image for swipe screen. +Besides the basics, the UI also includes multiple rows with radio buttons + + +## Captures + +(Following images can be outdated) Launcher icon @@ -31,14 +38,14 @@ Colours, font, user input, image, load widgets ## Controls -Press left area - Prints Touch1 -Press righ area - Prints Touch2 -Press center area - Prints Touch3 -Swipe Left - Displays Switch OFF image -Swipe Right - Displays Switch ON image -BTN1 - Prints Button1 -BTN2 - Prints Button2 -BTN3 - Quit to Launcher + - Press left area - Prints Touch1 + - Press righ area - Prints Touch2 + - Press center area - Prints Touch3 + - Swipe Left - Displays Switch OFF image + - Swipe Right - Displays Switch ON image + - BTN1 - Prints Button1 + - BTN2 - Prints Button2 + - BTN3 - Quit to Launcher ## Support diff --git a/apps/testuserinput/app.js b/apps/testuserinput/app.js index 106d7d9fc..4f5f26408 100644 --- a/apps/testuserinput/app.js +++ b/apps/testuserinput/app.js @@ -1,35 +1,71 @@ /* Test bangle.js input interface */ + var v_mode_debug=0; //1=yes, 0=no (to disable console msg) + if (v_mode_debug==1) console.log("Debug mode enabled"); + else console.log("Debug mode disabled"); + var v_model=process.env.BOARD; + if (v_mode_debug==1) console.log("device="+v_model); + + var v_str_version='v0.06'; //testing purpose + + 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 x_mid_screen=x_max_screen/2; + var colbackg='#111111';//black var colorange='#e56e06'; //RGB format rrggbb var v_color_lines=0xFFFF; //White hex format - var v_color_b_area=colbackg; - var v_font1size='16'; - var v_clicks='0'; - console.log("*** Test input interface ***"); + var v_color_b_area=colbackg; //for banner area + var v_color_text='#FB0E01'; + //var v_font1size=16; + var v_font1size=11; //out of quotes + var v_font2size=18; + var v_font3size=14; + + var v_clicks=0; + var v_selected_row=1; //used by round option + var v_total_rows=2;//used by round option + var array_r_option=[]; + + var v_y_optionrow1=80; + var v_y_optionrow2=110; + var v_y_optionrow3=140; -function ClearActiveArea(){ + if (v_mode_debug==1) console.log("*** Test input interface ***"); + +//the biggest usable area, button area not included +function ClearActiveArea(x1,y1,x2,y2){ g.setColor(colbackg); - g.fillRect(0,32,239,239); //fill all screen except widget area + //FOR BANGLE.JS (0,y_wg_top,x_max_usable_area,y_wg_bottom); + //fill all screen except widget area + g.fillRect(x1,y1,x2,y2); g.flip(); } -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); +function PrintHelp(){ + if (v_mode_debug==1) console.log("Log: *** Print help in screen"); + ClearActiveArea(0,y_wg_top,x_max_usable_area,y_wg_bottom); + g.setColor(colorange); + /* PRINT FROM widget BOTTOM */ + g.setFontVector(v_font2size).drawString("To test the UI, try:",5,y_wg_bottom-(10*v_font3size)); g.flip(); g.setColor(0,1,0); //green - 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); - g.setFontVector(v_font1size).drawString("Click Right area", 30,160); - g.setFontVector(v_font1size).drawString("Click Middle area", 30,175); - g.setFontVector(v_font1size).drawString("Press Button1 ", 30,190); - g.setFontVector(v_font1size).drawString("Press Button2 for colors", 30,205); - g.setFontVector(v_font1size).drawString("Press Button3 to Quit", 30,220); + g.setFontVector(v_font3size); + g.drawString("Swipe right -->", 30, y_wg_bottom-(8*v_font3size)); + g.drawString("Swipe left <--", 30, y_wg_bottom-(7*v_font3size)); + g.drawString("Click Left area", 30, y_wg_bottom-(6*v_font3size)); + g.drawString("Click Right area", 30,y_wg_bottom-(5*v_font3size)); + g.drawString("Click Middle area", 30,y_wg_bottom-(4*v_font3size)); + g.drawString("Press Button1", 30,y_wg_bottom-(3*v_font3size)); + g.drawString("Press Button2: Colour", 30,y_wg_bottom-(2*v_font3size)); + g.drawString("Press Button3: Quit", 30,y_wg_bottom-v_font3size); g.flip(); } @@ -48,8 +84,8 @@ function ClearBannerArea(){ g.fillRect(55,32,185,78); g.flip(); } - - function DrawRoundOption(area){ + //arg input area Touch1=left Touch2=right + function DrawRoundOption(x_obj1,y_obj1,x_obj2,y_obj2,i_area){ //draw a img from an Image object var img_obj_check = { width : 30, height : 30, bpp : 4, @@ -63,21 +99,26 @@ function ClearBannerArea(){ 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"); + if (i_area=='none') { + g.drawImage(img_obj_uncheck,x_obj1,y_obj1); + g.drawImage(img_obj_uncheck,x_obj2,y_obj2); + } + else if (i_area=='Touch 1') { + g.drawImage(img_obj_check,x_obj1,y_obj1); + g.drawImage(img_obj_uncheck,x_obj2,y_obj2); + if (v_mode_debug==1) 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 if (i_area=='Touch 2') { + g.drawImage(img_obj_uncheck,x_obj1,y_obj1); + g.drawImage(img_obj_check,x_obj2,y_obj2); + if (v_mode_debug==1) console.log("Draw option check right"); } - else g.drawImage(img_obj_uncheck,190,80); + } function DrawSwitch(swipedir){ if (swipedir==' <---') { - console.log("Draw switch <--"); + if (v_mode_debug==1) console.log("Draw switch <--"); var img_off = { width : 48, height : 48, bpp : 2, transparent : 0, @@ -87,7 +128,7 @@ if (swipedir==' <---') { g.drawImage(img_off,99,33); } else if (swipedir==' --->') { - console.log("Draw switch -->"); + if (v_mode_debug==1) console.log("Draw switch -->"); var img_on = { width : 48, height : 48, bpp : 2, transparent : 0, @@ -100,70 +141,154 @@ if (swipedir==' <---') { function PrintUserInput(boton){ - console.log("Pressed touch/BTN",boton); - if (v_clicks=='0') { + if (v_mode_debug==1) console.log("Pressed touch/BTN",boton); + if (v_clicks==0) { PrintAreas(); - v_clicks=1; + v_clicks++; } 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); - } + //all input but not swipe + else { + g.setColor(colorange); + //Call info banner + g.setFontVector(30).drawString(boton, 63, 55); + if ((boton=='Touch 1')||(boton=='Touch 2')){ + if (v_selected_row==1) v_y_opt=v_y_optionrow1; + else if (v_selected_row==2) v_y_opt=v_y_optionrow2; + DrawRoundOption(20,v_y_opt,190,v_y_opt,boton); + //set the option value in an array + array_r_option[v_selected_row]=boton; + if (v_mode_debug==1) console.log("array["+v_selected_row+"]="+array_r_option[v_selected_row]); + } + } + g.flip(); } -function PrintBtn1(boton){ - console.log("Pressed BTN1"); - if (v_clicks=='0'){ - PrintAreas(); - v_clicks=1; +function Btn1Clkd(boton){ + if (v_mode_debug==1) console.log("Pressed BTN1"); + if (v_clicks==0){ + PrintAreas(); //only 1st time + //v_selected_row=1; + v_clicks++; + } + + + else if ((v_clicks>0)&&(v_selected_row!=v_total_rows)){ + v_selected_row++; + //Params: row_arrow, row_clear_area + if (v_mode_debug==1) console.log("row :"+v_selected_row); + DrawRowSelArrow(v_selected_row,v_selected_row-1); + v_clicks++; + } + else if ((v_clicks>0)&&(v_selected_row==v_total_rows)){ + + DrawRowSelArrow(1,v_selected_row); + if (v_mode_debug==1) console.log("last row :"+v_selected_row); + v_selected_row=1; + v_clicks++; } PrintUserInput("Button1"); - } -function PrintBtn2(boton){ - console.log("Pressed BTN2"); +function Btn2Clkd(boton){ + if (v_mode_debug==1) console.log("Pressed BTN2"); v_color_b_area=ChangeColorBannerArea(v_color_b_area); - if (v_clicks=='0'){ - PrintAreas(); - v_clicks=1; + if (v_clicks==0){ + PrintAreas();//only 1st time + v_clicks++; } PrintUserInput("Button2"); } +function DrawBangleButtons(){ + + /*Button name */ + g.setColor(v_color_text); //green + g.setFontVector(v_font3size); + g.drawString("B1", x_max_screen-g.stringWidth("B1"),y_wg_top); + g.drawString("B2", x_max_screen-g.stringWidth("B2"),y_btn2); + //y y_wg_bottom-v_font3size ? + g.drawString("B3",x_max_screen-g.stringWidth("B3"),y_wg_bottom); + + /*Button area description */ + g.setFontVector(v_font1size); + g.setColor(v_color_lines); + //y_wg_bottom-(2*v_font1size) + g.drawString("Quit", x_max_screen-g.stringWidth("Quit"),y_wg_bottom-v_font1size-2); + + + //Print version + if (v_mode_debug==1){ + g.setColor(0,1,0); //green + //y_wg_bottom-(2*v_font1size) + g.drawString(v_str_version, x_max_screen-g.stringWidth(v_str_version),y_wg_bottom-(v_font1size*3)); + } + + //under btn2, left top 90grades + g.setFontAlign(-1,-1,1); + g.drawString("Color", x_max_screen-v_font1size,y_btn2+v_font3size); + //g.drawString("Color", x_max_screen-g.stringWidth("Color"),y_btn2+v_font1size); + + + g.setColor(0,1,0); //green + g.drawString("Up", x_max_screen-v_font1size,y_wg_top+v_font3size); + g.setColor(v_color_lines); + g.drawString("Down", x_max_screen-2*v_font1size,y_wg_top+v_font3size); + g.flip(); + //back to standard /horizontal + g.setFontAlign(-1,-1,0); +} -function PrintAreas(){ - console.log("********************************"); - console.log("Log: *** Print Areas in screen"); - ClearActiveArea(); - g.setColor(v_color_lines); - g.drawLine(1, 140, 1, 200);//vline left border - g.drawLine(239, 140, 239, 200);//vlide right border - g.drawLine(120, 100, 120, 135);//vline middle separation top - g.drawLine(120, 170, 120, 200);//vline middle separation bottom +function DrawRowSelArrow(v_drawRow, v_clearRow){ + //Params: row_arrow, row_clear_area + //for clear previous draw arrow + if (v_clearRow!== undefined) { + g.setColor(colbackg); + if (v_clearRow==1) v_y_arrow=v_y_optionrow1+14; + else if (v_clearRow==2) v_y_arrow=v_y_optionrow2+14; + else if (v_clearRow==3) v_y_arrow=v_y_optionrow3+14; + g.fillRect(5,v_y_arrow-5,13,v_y_arrow+5); + g.flip(); + } + //draw an arrow to select a row + if (v_drawRow!== undefined) { + if (v_drawRow==1) v_y_arrow=v_y_optionrow1+14; + else if (v_drawRow==2) v_y_arrow=v_y_optionrow2+14; + else if (v_drawRow==3) v_y_arrow=v_y_optionrow3+14; + + g.setColor(v_color_lines); + g.drawLine(5, v_y_arrow, 13, v_y_arrow);//horizontal + g.drawLine(13, v_y_arrow, 10, v_y_arrow-5);//over diag + g.drawLine(13, v_y_arrow, 10, v_y_arrow+5);//under diag + g.flip(); + } + else console.log("Error: Param row nbr missing"); +} + +function PrintAreas(){ + if (v_mode_debug==1) console.log("Log: *** Print Areas in screen"); + ClearActiveArea(0,y_wg_top,x_max_usable_area,y_wg_bottom); + g.setColor(v_color_lines); - //BTN1 - g.setFontVector(v_font1size).drawString("Color<-", 130,125); - //BTN13 - g.setFontVector(v_font1size).drawString("Quit<-", 135,225); - g.flip(); - g.setColor(0,1,0); //green - g.setFontVector(v_font1size).drawString("BTN1", 195,45); + DrawRowSelArrow(1); + DrawRoundOption(20,v_y_optionrow1,190,v_y_optionrow1,'none'); + DrawRoundOption(20,v_y_optionrow2,190,v_y_optionrow2,'none'); - g.setFontVector(v_font1size).drawString("BTN2", 195,125); + g.drawLine(x_max_screen-1, 50, x_max_screen-1, 65);//vlide right border + g.drawLine(x_mid_screen, 80, x_mid_screen, 105);//vline middle separation part1 up + g.drawLine(x_mid_screen, 140, x_mid_screen, 180);//vline middle separation part2 down - g.setFontVector(v_font1size).drawString("BTN3", 195,225); - g.setFontVector(v_font1size).drawString("Middle area", 80,155); - g.setFontVector(v_font1size).drawString("Left area", 15, 185); - g.setFontVector(v_font1size).drawString("Right area", 140,185); - g.flip(); + + g.setFontVector(v_font3size); + g.drawString("Middle area", 80,155); + g.drawString("Left area", 15, 185); + g.drawString("Right area", 140,185); + + if (v_model=='BANGLEJS') DrawBangleButtons(); } function UserInput(){ @@ -181,23 +306,26 @@ function UserInput(){ } }); //only the name of the function - setWatch(PrintBtn1, BTN1, { repeat: true }); - setWatch(PrintBtn2, BTN2, { repeat: true }); + setWatch(Btn1Clkd, BTN1, { repeat: true }); + setWatch(Btn2Clkd, 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"); + if (v_mode_debug==1) console.log("Log: Input conditions loaded"); } //end of UserInput //Main code + g.clear(); Bangle.loadWidgets(); Bangle.drawWidgets(); - //optional line below widgets area + g.setColor(v_color_lines); - g.drawLine(60, 30, 180, 30); - g.flip(); + //optional line below widgets area + //g.drawLine(60, 30, 180, 30); + //g.flip(); //end optional - PrintHelp(); + PrintHelp(); + UserInput(); \ No newline at end of file diff --git a/apps/testuserinput/testUserInput_ss2.png b/apps/testuserinput/testUserInput_ss2.png index c2fd19ae4..2a380380a 100644 Binary files a/apps/testuserinput/testUserInput_ss2.png and b/apps/testuserinput/testUserInput_ss2.png differ diff --git a/apps/testuserinput/testUserInput_ss3.png b/apps/testuserinput/testUserInput_ss3.png index 421f44e49..0e0a83773 100644 Binary files a/apps/testuserinput/testUserInput_ss3.png and b/apps/testuserinput/testUserInput_ss3.png differ diff --git a/core b/core index 7d04c4884..1b1293a5e 160000 --- a/core +++ b/core @@ -1 +1 @@ -Subproject commit 7d04c488496c873f392c5a068f72a6c75df40f70 +Subproject commit 1b1293a5eb9b8bb9e4f743c4599f0587f597d368