Bram
/
BangleApps
forked from FOSS/BangleApps
1
0
Fork 0
Code Pull Requests Activity

v006 improvements

master
dapgo 2021-05-08 17:19:52 +02:00
parent 4e79ddad84
commit 5c670d9fcb
6 changed files with 229 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps.json
View File

@ -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}

25
apps/testuserinput/README.md
View File

@ -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

274
apps/testuserinput/app.js
View File

@ -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();
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);
g.setFontVector(18).drawString("To test the input, try :",25,90);
/* 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 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 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,190,80);
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");
}
}
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);
//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 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(){
console.log("********************************");
console.log("Log: *** Print Areas in screen");
ClearActiveArea();
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);
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);
//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();
UserInput();

BIN
apps/testuserinput/testUserInput_ss2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 97 KiB

BIN
apps/testuserinput/testUserInput_ss3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 112 KiB

2
core

@ -1 +1 @@
Subproject commit 7d04c488496c873f392c5a068f72a6c75df40f70
Subproject commit 1b1293a5eb9b8bb9e4f743c4599f0587f597d368