diff --git a/apps.json b/apps.json index a7517fb27..97b90c59d 100644 --- a/apps.json +++ b/apps.json @@ -2793,8 +2793,8 @@ "name": "Test User Input", "shortName":"Test User Input", "icon": "app.png", - "version":"0.03", - "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.", + "version":"0.04", + "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": [ diff --git a/apps/testuserinput/ChangeLog b/apps/testuserinput/ChangeLog index 35dbd45dd..de61a1b35 100644 --- a/apps/testuserinput/ChangeLog +++ b/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 \ No newline at end of file +0.03: Fix app icon, add change of colors +0.04: Improvements and new round check option elements \ No newline at end of file diff --git a/apps/testuserinput/README.md b/apps/testuserinput/README.md index 5fc5f3864..3202ae752 100644 --- a/apps/testuserinput/README.md +++ b/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) diff --git a/apps/testuserinput/app-icon.js b/apps/testuserinput/app-icon.js index 381134172..5efac11e2 100644 --- a/apps/testuserinput/app-icon.js +++ b/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=")) \ No newline at end of file diff --git a/apps/testuserinput/app.js b/apps/testuserinput/app.js index 82328ab23..deb3332ef 100644 --- a/apps/testuserinput/app.js +++ b/apps/testuserinput/app.js @@ -1,6 +1,5 @@ /* Test bangle.js input interface */ - var colbackg='#111111';//black - //var coldarkred='#CC3333'; + var colbackg='#111111';//black 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(239, 140, 239, 200);//side border - g.drawLine(120, 100, 120, 135);//middle separation top - g.drawLine(120, 170, 120, 200);//middle separation bottom + 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 //BTN1 g.setFontVector(v_font1size).drawString("Color<-", 130,125); diff --git a/apps/testuserinput/testUserInput_ss2.png b/apps/testuserinput/testUserInput_ss2.png index ba680a366..c2fd19ae4 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 8c0765911..421f44e49 100644 Binary files a/apps/testuserinput/testUserInput_ss3.png and b/apps/testuserinput/testUserInput_ss3.png differ