From ac3d0acedcce80c31527e4502a54a16045a5de60 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com> Date: Thu, 14 Apr 2022 22:35:38 +0200 Subject: [PATCH] dragboard app added --- apps/dragboard/ChangeLog | 2 + apps/dragboard/README.md | 23 +++ apps/dragboard/app.png | Bin 0 -> 1514 bytes apps/dragboard/lib.js | 346 ++++++++++++++++++++++++++++++++++ apps/dragboard/metadata.json | 14 ++ apps/dragboard/screenshot.png | Bin 0 -> 2215 bytes 6 files changed, 385 insertions(+) create mode 100644 apps/dragboard/ChangeLog create mode 100644 apps/dragboard/README.md create mode 100644 apps/dragboard/app.png create mode 100644 apps/dragboard/lib.js create mode 100644 apps/dragboard/metadata.json create mode 100644 apps/dragboard/screenshot.png diff --git a/apps/dragboard/ChangeLog b/apps/dragboard/ChangeLog new file mode 100644 index 000000000..b12304571 --- /dev/null +++ b/apps/dragboard/ChangeLog @@ -0,0 +1,2 @@ +0.01: New App! +0.02: Added some missing code. diff --git a/apps/dragboard/README.md b/apps/dragboard/README.md new file mode 100644 index 000000000..13f89bbcb --- /dev/null +++ b/apps/dragboard/README.md @@ -0,0 +1,23 @@ +Swipe along the red field and release to select a letter. + +Do the same for green field to select number or punctuation. + +Release on left or right part of black field for backspace or space. + +Swiping between the different fields is possible! + +The drag in Dragboard is a nod to the javascript 'drag' event, which is used to select the characters. Also, you can't help but feel somewhat glamorous and risque when this is your keyboard! + +Known bugs: +- Initially developed for use with dark theme set on Bangle.js 2 - looks aweful with other themes. +- Keyboard is not exited correctly when trying to close the keyboard. +- Text is drawn over system back button. +- Text does not wrap. + +To do: +- Make keyboard theme agnostic. +- Keep number/punctuation color one color. +- Handle system back button in some way. +- Make text wrap and/or scroll up/sideways once available space runs out. +- Optimize code. Further split it up in functions. Add 'ram' keyword where suitable. +- Possibly provide a dragboard.settings.js file diff --git a/apps/dragboard/app.png b/apps/dragboard/app.png new file mode 100644 index 0000000000000000000000000000000000000000..26e7518960bb859db3c3aa7802bd20406e7d1604 GIT binary patch literal 1514 zcmVXTO*^&uvR#&ToY#3)6v z8Mwoqa|wv|A%Q*!KG~*^MIwseQwVaIJ0~-7DvcpcFqn$?RYcG>HVs(Ol4|_OEr^Z@ zGjsOp!<;KObLaD%$<2#@81|mE)?Rz9S!?atA3_%dL9oU-cU(j+7K_DuyUC_SKA(TX zIk&W4uRl?_t7Logk#p3yHV=}D--}g_%3IN9H_4;{hZP$rKF11J!`M6he>iVEt1Z;AOZlD zO6BVy2!0taqZ|6kMS#i4$(tID#xo+aJtn;pMbYEsa`{}ZvGZ#0L(lWJ&CJYv)oToN zsezf9nXf$0+or1TiO9u%jE|z|0}=TRusr_kGRAx`F)?vtukj*sQB~g?#CYhCLP=n) zeF=C3H~~yWQ6$Eg1Hk>jpTaQA4r{LY7|JRX<5vL2n8(5}{BOBjJ{LvNRLtAnWn3x@ z(}CrH77B&W<_Pn0|JotWa~X!|z*WJI4qR>g=)iywhPZS?hkxQL0c-7XU~4?*Dd34P z3{R)kyOz^l*Lt4!Y+9v@=75OoEffl~ zg+gK0Ikz{aZJT40ur?N>22KKQ{?@o$E`J`M@|Ig`PXOaUMnq25>-FCrK79D&ewC++ z!1(xhW@>6`q?=3_hC9MA+}TCseqbq(QPl@Bnauk^5NznzhC~st)@}lx2DVhIRn6z~ z@APr1YztLAqNo2M!HvIs64U)><2JcQl{R zA6>U@UDfyfsdxJ0$~GzP0vCU`-T7HTtto~(ANnsJLgsd*Tw%ED^+!0t5A|6 zo(0xkx^!s;@a-J2SS&u6*wi*K#_SEl@B%;(1dluC9;Ue!xeNn4psN2Ak+r~P;6JG? zU5J+fH~(a3j5+U|16b86Jg@^I@(v4BuHk&nR4C@ynvNCSdM<8CS&jQzsjEvlq-n`z3 zqUaU?RsE!umvqfO3gCI(f_%La5Rp6L?%!K^i5zgw9RX0)U5k`Px5w>*6I>z(N~O}@ zfRBJ1ec!)gw{Fnf57B(;!t=c0H~=VcFz)Z^CYToM*RS79^VaX9c9*`1_btx37l118 zptbh4Uh*lh9Y9rIX~#_LK&e!^psELHz6AX~sh(a?)g5trvK>Fw&M}k8><6lolNRm ziP6!~{UY))a7VRT{aspp^P#Gfaa-slliGm;2M&A>Oac+`q_uV^%W4n=x6(|XZ)&yL z(N1zhxfd!Hi*KvyQ-A?x;&XFiWV2a6ilQgtuP;_Am5y(8L%SEM*X#Ry-`@!A@I3Ed zy= ( g.getHeight() - 12 )) { + // Translate x-position to character + if (event.x < abcPadding) { charHL = 0; } + else if (event.x >= 176-abcPadding) { charHL = 25; } + else { charHL = Math.floor((event.x-abcPadding)/6); } + + // Datastream for development purposes + //print(event.x, event.y, event.b, abc.charAt(charHL), abc.charAt(charHLPrev)); + + // Unmark previous character and mark the current one... + // Handling switching between letters and numbers/punctuation + if (typePrev != 'abc') { + // Small character in list + g.setColor(0,1,0); + g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6, g.getHeight()/4); + // Large character + g.setColor(0,0,0); + g.setFont('6x8:3'); + g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6 -largeCharOffset, g.getHeight()/3); + g.setFont('6x8'); + } + + if (charHL != charHLPrev) { + // unmark in the list + g.setColor(1,0,0); + g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6, g.getHeight()/2); + // hide previous large character + g.setColor(0,0,0); + g.fillRect(0,g.getHeight()/3,176,g.getHeight()/3+24); + g.setColor([0,0,0]); + g.setFont('6x8:3'); + g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6 -largeCharOffset, g.getHeight()/3); + g.setFont('6x8'); + // mark in the list + g.setColor(1,1,1); + g.setFont('6x8'); + g.drawString(abc.charAt(charHL), abcPadding + charHL*6, g.getHeight()/2); + // show new large character + //g.setColor(1,1,1); + g.setFont('6x8:3'); + g.drawString(abc.charAt(charHL), abcPadding + charHL*6 -largeCharOffset, g.getHeight()/3); + g.setFont('6x8'); + } + // Print string at top of screen + if (event.b == 0) { + text = text + abc.charAt(charHL); + updateTopString(); + + // Autoswitching letter case + if (abc.charAt(charHL) == abc.charAt(charHL).toUpperCase()) { + g.setColor(0,0,0); + g.drawString(abc, abcPadding, g.getHeight()/2); + abc = abc.toLowerCase(); + g.setColor(1,0,0); + g.drawString(abc, abcPadding, g.getHeight()/2); + letterCase = 0 + } + //print(text); + } + // Update previous character to current one + charHLPrev = charHL; + typePrev = 'abc'; + } + + // 12345678901234567890 + // Choose number or puctuation by draging on green rectangle + else if ((event.y < ( g.getHeight() - 12 )) && (event.y > ( g.getHeight() - 52 ))) { + // Translate x-position to character + if (event.x < numPunctPadding) { numPunctHL = 0; } + else if (event.x > 176-numPunctPadding) { numPunctHL = numPunct.length-1; } + else { numPunctHL = Math.floor((event.x-numPunctPadding)/6); } + + // Datastream for development purposes + //print(event.x, event.y, event.b, numPunct.charAt(numPunctHL), numPunct.charAt(numPunctHLPrev)); + + // Unmark previous character and mark the current one... + // Handling switching between letters and numbers/punctuation + if (typePrev != 'numPunct') { + // Small character in list + g.setColor(1,0,0); + g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6, g.getHeight()/2); + // Large character + g.setColor(0,0,0); + g.setFont('6x8:3'); + g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6 -largeCharOffset, g.getHeight()/3); + g.setFont('6x8'); + } + if (numPunctHL != numPunctHLPrev) { + // unmark in the list + g.setColor(0,1,0); + g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6, g.getHeight()/4); + // hide previous large character + g.setColor(0,0,0); + g.fillRect(0,g.getHeight()/3,176,g.getHeight()/3+24); + g.setColor(0,0,0); + g.setFont('6x8:3'); + g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6 -largeCharOffset, g.getHeight()/3); + g.setFont('6x8'); + // mark in the list + g.setColor(1,1,1); + g.setFont('6x8'); + g.drawString(numPunct.charAt(numPunctHL), numPunctPadding + numPunctHL*6, g.getHeight()/4); + // show new large character + //g.setColor(1,1,1); + g.setFont('6x8:3'); + g.drawString(numPunct.charAt(numPunctHL), numPunctPadding + numPunctHL*6 -largeCharOffset, g.getHeight()/3); + g.setFont('6x8'); + } + // Print string at top of screen + if (event.b == 0) { + g.setColor(1,1,1); + // Backspace if releasing before list of numbers/punctuation + if (event.x < numPunctPadding) { + // show delete sign + g.setColor(1,1,1); + g.setFont('6x8:3'); + g.drawString('del', g.getWidth()/2 -27, g.getHeight()/3); + g.setFont('6x8'); + delLast = 1; + + text = text.slice(0, -1); + updateTopString(); + //print(text); + } + // Append space if releasing after list of numbers/punctuation + else if (event.x > g.getWidth()-numPunctPadding) { + //show space sign + g.setColor(1,1,1); + g.setFont('6x8:3'); + g.drawString('space', g.getWidth()/2 -6*3*5/2, g.getHeight()/3); + g.setFont('6x8'); + spaceLast = 1; + + text = text + ' '; + updateTopString(); + //print(text); + } + // Append selected number/punctuation + else { + text = text + numPunctHidden.charAt(numPunctHL); + updateTopString(); + + // Autoswitching letter case + if ((text.charAt(text.length-1) == '.') || (text.charAt(text.length-1) == '!')) { + g.setColor(0,0,0); + g.drawString(abc, abcPadding, g.getHeight()/2); + abc = abc.toUpperCase(); + g.setColor(1,0,0); + g.drawString(abc, abcPadding, g.getHeight()/2); + letterCase = 1; + + } + //print(text); + } + } + // Update previous character to current one + numPunctHLPrev = numPunctHL; + typePrev = 'numPunct'; + } + // Make a space or backspace by swiping right or left on screen above green rectangle + else { + if (event.b == 0) { + g.setColor(1,1,1); + if (event.x < g.getWidth()/2) { + // unmark character in the list + g.setColor(1,0,0); + g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6, g.getHeight()/2); + + // unmark number/punctuation in the list + g.setColor(0,1,0); + g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6, g.getHeight()/4); + + // hide previous large character + g.setColor([0,0,0]); + g.setFont('6x8:3'); + g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6 -largeCharOffset, g.getHeight()/3); + + // hide previous large character + g.setColor(0,0,0); + g.setFont('6x8:3'); + g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6 -largeCharOffset, g.getHeight()/3); + + // show delete sign + g.setColor(1,1,1); + g.setFont('6x8:3'); + g.drawString('del', g.getWidth()/2 -27, g.getHeight()/3); + g.setFont('6x8'); + delLast = 1; + + // Backspace and draw string upper right corner + text = text.slice(0, -1); + updateTopString(); + if (text.length==0) { + g.setColor(0,0,0); + g.drawString(abc, abcPadding, g.getHeight()/2); + abc = abc.toUpperCase(); + g.setColor(1,0,0); + g.drawString(abc, abcPadding, g.getHeight()/2); + letterCase = 1; + } + //print(text, 'undid'); + } + else { + // unmark character in the list + g.setColor(1,0,0); + g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6, g.getHeight()/2); + + // unmark number/punctuation in the list + g.setColor(0,1,0); + g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6, g.getHeight()/4); + + // hide previous large character + g.setColor([0,0,0]); + g.setFont('6x8:3'); + g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6 -largeCharOffset, g.getHeight()/3); + + // hide previous large character + g.setColor(0,0,0); + g.setFont('6x8:3'); + g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6 -largeCharOffset, g.getHeight()/3); + + //show space sign + g.setColor(1,1,1); + g.setFont('6x8:3'); + g.drawString('space', g.getWidth()/2 -6*3*5/2, g.getHeight()/3); + g.setFont('6x8'); + spaceLast = 1; + + // Append space and draw string upper right corner + text = text + numPunctHidden.charAt(0); + updateTopString(); + //print(text, 'made space'); + } + } + } + }); + + return new Promise((resolve,reject) => { + Bangle.setUI({mode:"custom", back:()=>{ + Bangle.setUI(); + g.clearRect(Bangle.appRect); + resolve(text); + }}); + }); + +}; diff --git a/apps/dragboard/metadata.json b/apps/dragboard/metadata.json new file mode 100644 index 000000000..f8f1f6c85 --- /dev/null +++ b/apps/dragboard/metadata.json @@ -0,0 +1,14 @@ +{ "id": "dragboard", + "name": "Dragboard", + "version":"0.02", + "description": "A library for text input via swiping keyboard", + "icon": "app.png", + "type":"textinput", + "tags": "keyboard", + "supports" : ["BANGLEJS2"], + "screenshots": [{"url":"screenshot.png"}], + "readme": "README.md", + "storage": [ + {"name":"textinput","url":"lib.js"} + ] +} diff --git a/apps/dragboard/screenshot.png b/apps/dragboard/screenshot.png new file mode 100644 index 0000000000000000000000000000000000000000..a9451d1a43161be0d33b1686743d9564663a15a9 GIT binary patch literal 2215 zcmds3Ygm$J82-R-iZvZ9%``BR%x!tdv@!%dgo2uq);vThO^dQ(nu-THeXX*oQ`9_V zV42z~@@%99l9hCXg@&a@PR&X@rY3kC+rR$q$98Q$-sf;#_x)VY_1w?-nPS0>_q`NXgYwrgLF6)2;1aj)wzt?M zumx%ZNl<12>#e6s*4Z0#`}Ihxq_E{Uo;fu$r^#qFvVSmS#<2YA5vLcQcmZp%_{c+b zGP)hBIRcDA9me)_z?=);na!31A45 z(I4&vy_++mu6@>I+t&n^<3@uS`x{Fp<83Qa>f1L}nv>1Ki}DR;V@=NNH`s|wofs!j zS{rU~heq_0A9pm=vM@^2YK8b7zSHG#^@XTmn?v()bOux}-4-T@D`Dx!%nEA^g*7_) z7esk3T&v%F=J`RQweo#N@P_?~h38(ijg zBJs4d{iiaF`bcs*06DI^)S$X7crYmM^pR&Xj^_}A8MK2XLJ9@ zp|Oi*JJNbDA9*GaG==Bz>|v83%}SH-h}=UGudzv8KfSk8M_!ENy(_adts9@Fc1f+H z>$&YIA(LS&&&NR%$~O{=dXAizC`>EQ?IVn+Xu<>g7k>!q_@uEsW;`|NH`b9fXZ?}r zn;#`e_TJ)M+W16KV%{{>GBC&o>8guH za@x{nrD)jb8KH{uhBXkH#mDcJ7%VIH?aoTH?NTnk5q2e4@jz%rF5H~mkgLXo3)jx{ zGwUjq{9hR^8{m4YMmqziPiJTNoV%{Gu;G<+aVv;aJ9+4it~w#+O%%>J!9e0K92j2T zqRRScKT)eA6&ndq;fO)+;s&br4z(go#W?_+EoTh>MQv8;I?pe@fghH;qIYdPnwo`j zjxI!o*c-xC>0Oq{5OSs%hZP_|#dBb|u z32kvpxVA0vgWU#v6Fn&2i-|(;FO%uqEE)(`y+?&GNF+KOfxhKjTE4`M&PAaheT(Ss z9?p4xK#L}Ut51lbw9QdC7^pBsp$Y)Fo}J;<4)7*XAbnF3D&uq!FAtf zh`aCctcMfv}%uDT5iEB@W z;%eJMRhmxjPWG<-ai<0E_QBq)IqxJjhReEOH23a_4F)L|PQA!M> zKTl{m>Z8Yum7l5=5gRYsBxTsKZq$aFHK#ih-1+Fb3|wQxB)W>oFn-kq)vt+ptB4S; zuUr&c9v#SJ*l+Q}KT%_u9qJvDAtBMM_I~?_qgR5@P;+%EO?F^FjD;A?-It}SUz?ZG z=AU9NJ?w(#^8~yfLrb29bt{tCPcAq9lzEC1;wu=;RexfZ=y$M%!3ozN_8T6=aBdZ^ zw1^)lE+j~85a=sQBWv6M$mC)S1+A6ozn40EajZa8VQctc;oF?s6MpeTB=ThnTN#Ra zxzz<%1