From 299e754d22a93b6c388b63bfad65f502736efc06 Mon Sep 17 00:00:00 2001 From: Erik Andresen Date: Tue, 15 Mar 2022 21:53:20 +0100 Subject: [PATCH 1/4] hidjoystick: Make BangleJS2 compatible --- apps/hidjoystick/ChangeLog | 1 + apps/hidjoystick/metadata.json | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/hidjoystick/ChangeLog b/apps/hidjoystick/ChangeLog index 5560f00bc..625daf4bb 100644 --- a/apps/hidjoystick/ChangeLog +++ b/apps/hidjoystick/ChangeLog @@ -1 +1,2 @@ 0.01: New App! +0.02: Make Bangle.js 2 compatible diff --git a/apps/hidjoystick/metadata.json b/apps/hidjoystick/metadata.json index e2b78a97b..35be134dc 100644 --- a/apps/hidjoystick/metadata.json +++ b/apps/hidjoystick/metadata.json @@ -2,11 +2,11 @@ "id": "hidjoystick", "name": "Bluetooth Joystick", "shortName": "Joystick", - "version": "0.01", + "version": "0.02", "description": "Emulates a 2 axis/5 button Joystick using the accelerometer as stick input and buttons 1-3, touch left as button 4 and touch right as button 5.", "icon": "app.png", "tags": "bluetooth", - "supports": ["BANGLEJS"], + "supports": ["BANGLEJS", "BANGLEJS2"], "storage": [ {"name":"hidjoystick.app.js","url":"app.js"}, {"name":"hidjoystick.img","url":"app-icon.js","evaluate":true} From 802bd08173f1d391b0abe16e5f6a8343efbc9823 Mon Sep 17 00:00:00 2001 From: Erik Andresen Date: Sat, 19 Mar 2022 16:05:50 +0100 Subject: [PATCH 2/4] hidjoystick Disable Button 2-5 on BangleJs2, use Layout library --- apps/hidjoystick/app.js | 67 ++++++++++++++++++++++------------ apps/hidjoystick/metadata.json | 2 +- 2 files changed, 45 insertions(+), 24 deletions(-) diff --git a/apps/hidjoystick/app.js b/apps/hidjoystick/app.js index 134814cee..a571dcc0e 100644 --- a/apps/hidjoystick/app.js +++ b/apps/hidjoystick/app.js @@ -1,8 +1,43 @@ -var storage = require('Storage'); +const storage = require('Storage'); +const Layout = require("Layout"); const settings = storage.readJSON('setting.json',1) || { HID: false }; +const BANGLEJS2 = process.env.HWVERSION == 2; +const buttonWidth = Bangle.appRect.w/2; +const buttonHeight = (Bangle.appRect.h-16)/2*0.85; // subtract text row and add a safety margin var sendInProgress = false; // Only send one message at a time, do not flood + +function renderBtnArrows(l) { + const d = g.getWidth() - l.width; + + function c(a) { + return { + width: 8, + height: a.length, + bpp: 1, + buffer: (new Uint8Array(a)).buffer + }; + } + + g.drawImage(c([0,8,12,14,255,14,12,8]),d,g.getHeight()/2); + if (!BANGLEJS2) { + g.drawImage(c([16,56,124,254,16,16,16,16]),d,40); + g.drawImage(c([16,16,16,16,254,124,56,16]),d,194); + } +} + +const layout = new Layout( + {type:"h", c:[ + {type:"v", width:Bangle.appRect.w-18, c: [ + {type:"h", c:[ + {type:"txt", font:"6x8:2", label:"Joystick"}, + ]} + ]}, + {type:"custom", width:18, height: Bangle.appRect.h, render:renderBtnArrows} + ]} +); + const sendHid = function (x, y, btn1, btn2, btn3, btn4, btn5, cb) { try { const buttons = (btn5<<4) | (btn4<<3) | (btn3<<2) | (btn2<<1) | (btn1<<0); @@ -20,31 +55,17 @@ const sendHid = function (x, y, btn1, btn2, btn3, btn4, btn5, cb) { function drawApp() { g.clear(); - g.setFont("6x8",2); - g.setFontAlign(0,0); - g.drawString("Joystick", 120, 120); - const d = g.getWidth() - 18; - - function c(a) { - return { - width: 8, - height: a.length, - bpp: 1, - buffer: (new Uint8Array(a)).buffer - }; - } - - g.drawImage(c([16,56,124,254,16,16,16,16]),d,40); - g.drawImage(c([16,16,16,16,254,124,56,16]),d,194); - g.drawImage(c([0,8,12,14,255,14,12,8]),d,116); + Bangle.loadWidgets(); + Bangle.drawWidgets(); + layout.render(); } function update() { - const btn1 = BTN1.read(); - const btn2 = BTN2.read(); - const btn3 = BTN3.read(); - const btn4 = BTN4.read(); - const btn5 = BTN5.read(); + const btn1 = BTN1 ? BTN1.read() : 0; + const btn2 = !BANGLEJS2 ? BTN2.read() : 0; + const btn3 = !BANGLEJS2 ? BTN3.read() : 0; + const btn4 = !BANGLEJS2 ? BTN4.read() : 0; + const btn5 = !BANGLEJS2 ? BTN5.read() : 0; const acc = Bangle.getAccel(); var x = acc.x*-127; var y = acc.y*-127; diff --git a/apps/hidjoystick/metadata.json b/apps/hidjoystick/metadata.json index 35be134dc..3642e732c 100644 --- a/apps/hidjoystick/metadata.json +++ b/apps/hidjoystick/metadata.json @@ -3,7 +3,7 @@ "name": "Bluetooth Joystick", "shortName": "Joystick", "version": "0.02", - "description": "Emulates a 2 axis/5 button Joystick using the accelerometer as stick input and buttons 1-3, touch left as button 4 and touch right as button 5.", + "description": "Emulates a 2 axis/5 button Joystick using the accelerometer as stick input and buttons 1-3, touch left as button 4 and touch right as button 5. On Bangle.js 2 only one button is supported at this moment)", "icon": "app.png", "tags": "bluetooth", "supports": ["BANGLEJS", "BANGLEJS2"], From f4a467fbe66258ae23a0b8d07bdb0fefb3f6eef8 Mon Sep 17 00:00:00 2001 From: Erik Andresen Date: Sat, 19 Mar 2022 22:10:05 +0100 Subject: [PATCH 3/4] hidjoystick Emulate buttons 2-5 with touchscreen on BangleJs2 --- apps/hidjoystick/app.js | 68 ++++++++++++++++++++++++++++------ apps/hidjoystick/metadata.json | 2 +- 2 files changed, 57 insertions(+), 13 deletions(-) diff --git a/apps/hidjoystick/app.js b/apps/hidjoystick/app.js index a571dcc0e..6198afffe 100644 --- a/apps/hidjoystick/app.js +++ b/apps/hidjoystick/app.js @@ -2,11 +2,15 @@ const storage = require('Storage'); const Layout = require("Layout"); const settings = storage.readJSON('setting.json',1) || { HID: false }; const BANGLEJS2 = process.env.HWVERSION == 2; -const buttonWidth = Bangle.appRect.w/2; +const sidebarWidth=18; +const buttonWidth = (Bangle.appRect.w-sidebarWidth)/2; const buttonHeight = (Bangle.appRect.h-16)/2*0.85; // subtract text row and add a safety margin var sendInProgress = false; // Only send one message at a time, do not flood - +var touchBtn2 = 0; +var touchBtn3 = 0; +var touchBtn4 = 0; +var touchBtn5 = 0; function renderBtnArrows(l) { const d = g.getWidth() - l.width; @@ -27,17 +31,57 @@ function renderBtnArrows(l) { } } +const layoutChilden = []; +if (BANGLEJS2) { // add virtual buttons in display + layoutChilden.push({type:"h", c:[ + {type:"btn", width:buttonWidth, height:buttonHeight, label:"BTN2", id:"touchBtn2" }, + {type:"btn", width:buttonWidth, height:buttonHeight, label:"BTN3", id:"touchBtn3" }, + ]}); +} +layoutChilden.push({type:"h", c:[ + {type:"txt", font:"6x8:2", label:"Joystick" }, +]}); +if (BANGLEJS2) { // add virtual buttons in display + layoutChilden.push({type:"h", c:[ + {type:"btn", width:buttonWidth, height:buttonHeight, label:"BTN4", id:"touchBtn4" }, + {type:"btn", width:buttonWidth, height:buttonHeight, label:"BTN5", id:"touchBtn5" }, + ]}); +} + const layout = new Layout( {type:"h", c:[ - {type:"v", width:Bangle.appRect.w-18, c: [ - {type:"h", c:[ - {type:"txt", font:"6x8:2", label:"Joystick"}, - ]} - ]}, - {type:"custom", width:18, height: Bangle.appRect.h, render:renderBtnArrows} + {type:"v", width:Bangle.appRect.w-sidebarWidth, c: layoutChilden}, + {type:"custom", width:18, height: Bangle.appRect.h, render:renderBtnArrows } ]} ); +function isInBox(box, x, y) { + return x >= box.x && x < box.x+box.w && y >= box.y && y < box.y+box.h; +} + +if (BANGLEJS2) { + Bangle.on('drag', function(event) { + if (event.b == 0) { // release + touchBtn2 = touchBtn3 = touchBtn4 = touchBtn5 = 0; + } else if (isInBox(layout.touchBtn2, event.x, event.y)) { + touchBtn2 = 1; + touchBtn3 = touchBtn4 = touchBtn5 = 0; + } else if (isInBox(layout.touchBtn3, event.x, event.y)) { + touchBtn3 = 1; + touchBtn2 = touchBtn4 = touchBtn5 = 0; + } else if (isInBox(layout.touchBtn4, event.x, event.y)) { + touchBtn4 = 1; + touchBtn2 = touchBtn3 = touchBtn5 = 0; + } else if (isInBox(layout.touchBtn5, event.x, event.y)) { + touchBtn5 = 1; + touchBtn2 = touchBtn3 = touchBtn4 = 0; + } else { + // outside any buttons, release all + touchBtn2 = touchBtn3 = touchBtn4 = touchBtn5 = 0; + } + }); +} + const sendHid = function (x, y, btn1, btn2, btn3, btn4, btn5, cb) { try { const buttons = (btn5<<4) | (btn4<<3) | (btn3<<2) | (btn2<<1) | (btn1<<0); @@ -62,10 +106,10 @@ function drawApp() { function update() { const btn1 = BTN1 ? BTN1.read() : 0; - const btn2 = !BANGLEJS2 ? BTN2.read() : 0; - const btn3 = !BANGLEJS2 ? BTN3.read() : 0; - const btn4 = !BANGLEJS2 ? BTN4.read() : 0; - const btn5 = !BANGLEJS2 ? BTN5.read() : 0; + const btn2 = !BANGLEJS2 ? BTN2.read() : touchBtn2; + const btn3 = !BANGLEJS2 ? BTN3.read() : touchBtn3; + const btn4 = !BANGLEJS2 ? BTN4.read() : touchBtn4; + const btn5 = !BANGLEJS2 ? BTN5.read() : touchBtn5; const acc = Bangle.getAccel(); var x = acc.x*-127; var y = acc.y*-127; diff --git a/apps/hidjoystick/metadata.json b/apps/hidjoystick/metadata.json index 3642e732c..c13ae2efa 100644 --- a/apps/hidjoystick/metadata.json +++ b/apps/hidjoystick/metadata.json @@ -3,7 +3,7 @@ "name": "Bluetooth Joystick", "shortName": "Joystick", "version": "0.02", - "description": "Emulates a 2 axis/5 button Joystick using the accelerometer as stick input and buttons 1-3, touch left as button 4 and touch right as button 5. On Bangle.js 2 only one button is supported at this moment)", + "description": "Emulates a 2 axis/5 button Joystick using the accelerometer as stick input and buttons 1-3, touch left as button 4 and touch right as button 5. On Bangle.js 2 buttons 2-5 are emulated with the touchscreen.", "icon": "app.png", "tags": "bluetooth", "supports": ["BANGLEJS", "BANGLEJS2"], From 9e82dec18131f4675f9cb7de1af13d793ad04629 Mon Sep 17 00:00:00 2001 From: Erik Andresen Date: Sat, 19 Mar 2022 22:15:25 +0100 Subject: [PATCH 4/4] hidjoystick retab --- apps/hidjoystick/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/hidjoystick/app.js b/apps/hidjoystick/app.js index 6198afffe..69f56463d 100644 --- a/apps/hidjoystick/app.js +++ b/apps/hidjoystick/app.js @@ -45,7 +45,7 @@ if (BANGLEJS2) { // add virtual buttons in display layoutChilden.push({type:"h", c:[ {type:"btn", width:buttonWidth, height:buttonHeight, label:"BTN4", id:"touchBtn4" }, {type:"btn", width:buttonWidth, height:buttonHeight, label:"BTN5", id:"touchBtn5" }, - ]}); + ]}); } const layout = new Layout(