From f4a467fbe66258ae23a0b8d07bdb0fefb3f6eef8 Mon Sep 17 00:00:00 2001
From: Erik Andresen <erik@vontaene.de>
Date: Sat, 19 Mar 2022 22:10:05 +0100
Subject: [PATCH] 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"],