FOSS
/
BangleApps
mirror of https://github.com/espruino/BangleApps
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

dragboard v0.03

pull/1736/head
thyttan 2022-04-19 23:03:59 +02:00
parent ac3d0acedc
commit 9e78afb1b1
5 changed files with 204 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/dragboard/ChangeLog
View File

@ -1,2 +1,3 @@
0.01: New App!
0.02: Added some missing code.
0.03: Made the code shorter and somewhat more readable by writing some functions. Also made it work as a library where it returns the text once finished. The keyboard is now made to exit correctly when the 'back' event is called. The keyboard now uses theme colors correctly, although it still looks best with dark theme. The numbers row is now solidly green - except for highlights.

9
apps/dragboard/README.md
View File

@ -9,15 +9,10 @@ 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.
- Initially developed for use with dark theme set on Bangle.js 2 - that is still the preferred way to view it although it now works with other themes.
- 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.
- Optimize code. Further split it up in functions.
- Possibly provide a dragboard.settings.js file

364
apps/dragboard/lib.js
View File

@ -7,340 +7,260 @@ exports.input = function(options) {
var text = options.text;
if ("string"!=typeof text) text="";
//Draw the alphabet on the screen
var BGCOLOR = g.theme.bg;
var HLCOLOR = g.theme.fg;
var ABCCOLOR = g.toColor(1,0,0);//'#FF0000';
var NUMCOLOR = g.toColor(0,1,0);//'#00FF00';
var BIGFONT = '6x8:3';
var BIGFONTWIDTH = parseInt(BIGFONT.charAt(0)*parseInt(BIGFONT.charAt(-1)));
var SMALLFONT = '6x8:1';
var SMALLFONTWIDTH = parseInt(SMALLFONT.charAt(0)*parseInt(SMALLFONT.charAt(-1)));
var abc = 'abcdefghijklmnopqrstuvwxyz'.toUpperCase();
var fontSize = "6x8";
//var xStep = 6;
var abcPadding = (g.getWidth()-6*abc.length)/2;
var ABC = 'abcdefghijklmnopqrstuvwxyz'.toUpperCase();
var ABCPADDING = (g.getWidth()-6*ABC.length)/2;
var numPunct = ' 1234567890!?,.- ';
var numPunctHidden = ' 1234567890!?,.- ';
var numPunctPadding = (g.getWidth()-6*numPunct.length)/2;
var NUM = ' 1234567890!?,.- ';
var NUMHIDDEN = ' 1234567890!?,.- ';
var NUMPADDING = (g.getWidth()-6*NUM.length)/2;
var rectHeight = 40;
var bgColor = [0,0,0];
var HLColor = [1,1,1];
var abcColor = [1,0,0];
var numPunctColor = [0,1,0];
var delLast;
var spaceLast;
function drawABC() {
var delSpaceLast;
function drawAbcRow() {
g.clear();
g.setFont(fontSize);
g.setColor(1,0,0);
g.drawString(abc, abcPadding, g.getHeight()/2);
g.setFont(SMALLFONT);
g.setColor(ABCCOLOR);
g.drawString(ABC, ABCPADDING, g.getHeight()/2);
g.fillRect(0, g.getHeight()-26, g.getWidth(), g.getHeight());
}
function drawNumPunct() {
g.setFont(fontSize);
g.setColor(0,1,1);
g.drawString(numPunct, numPunctPadding, g.getHeight()/4);
function drawNumRow() {
g.setFont(SMALLFONT);
g.setColor(NUMCOLOR);
g.drawString(NUM, NUMPADDING, g.getHeight()/4);
g.fillRect(numPunctPadding, g.getHeight()-rectHeight*4/3, g.getWidth()-numPunctPadding, g.getHeight()-rectHeight*2/3);
g.fillRect(NUMPADDING, g.getHeight()-rectHeight*4/3, g.getWidth()-NUMPADDING, g.getHeight()-rectHeight*2/3);
}
function initMarker() {
g.setColor(0.5,0,0);
g.fillRect(5,5,11,13);
g.setColor(1,1,1);
g.fillRect(3,4+20,11,13+20);
g.setColor(HLCOLOR);
}
function updateTopString() {
g.setColor(0,0,0);
g.fillRect(0,5,176,13);
"ram"
g.setColor(BGCOLOR);
g.fillRect(0,4+20,176,13+20);
g.setColor(0.2,0,0);
g.fillRect(5,5,5+text.length*6,13);
g.fillRect(3,4+20,5+text.length*6,13+20);
g.setColor(0.7,0,0);
g.fillRect(text.length*6+5,5,10+text.length*6,13);
g.fillRect(text.length*6+5,4+20,10+text.length*6,13+20);
g.setColor(1,1,1);
g.drawString(text, 5, 5);
g.drawString(text, 5, 5+20);
}
drawABC();
drawNumPunct();
drawAbcRow();
drawNumRow();
initMarker();
var charHL;
var charHLPrev = -10;
var numPunctHL;
var numPunctHLPrev = -10;
var abcHL;
var abcHLPrev = -10;
var numHL;
var numHLPrev = -10;
var type = '';
var typePrev = '';
var largeCharOffset = 6;
var letterCase = 1;
function resetChars(char, HLPrev, typePadding, heightDivisor, rowColor) {
"ram"
// Small character in list
g.setColor(rowColor);
g.setFont(SMALLFONT);
g.drawString(char, typePadding + HLPrev*6, g.getHeight()/heightDivisor);
// Large character
g.setColor(BGCOLOR);
g.fillRect(0,g.getHeight()/3,176,g.getHeight()/3+24);
//g.drawString(charSet.charAt(HLPrev), typePadding + HLPrev*6 -largeCharOffset, g.getHeight()/3);; //Old implementation where I find the shape and place of letter to remove instead of just a rectangle.
// mark in the list
}
function showChars(char, HL, typePadding, heightDivisor) {
"ram"
// mark in the list
g.setColor(HLCOLOR);
g.setFont(SMALLFONT);
if (char != 'del' && char != 'space') g.drawString(char, typePadding + HL*6, g.getHeight()/heightDivisor);
// show new large character
g.setFont(BIGFONT);
g.drawString(char, typePadding + HL*6 -largeCharOffset, g.getHeight()/3);
g.setFont(SMALLFONT);
}
function changeCase(abcHL) {
g.setColor(BGCOLOR);
g.drawString(ABC, ABCPADDING, g.getHeight()/2);
if (ABC.charAt(abcHL) == ABC.charAt(abcHL).toUpperCase()) ABC = ABC.toLowerCase();
else ABC = ABC.toUpperCase();
g.setColor(ABCCOLOR);
g.drawString(ABC, ABCPADDING, g.getHeight()/2);
}
return new Promise((resolve,reject) => {
// Interpret touch input
Bangle.on('drag', function(event) {
g.setFont('6x8');
// hide delete sign
if (delLast == 1) {
g.setColor(0,0,0);
g.setFont('6x8:3');
g.drawString('del', g.getWidth()/2 -27, g.getHeight()/3);
g.setFont('6x8');
delLast = 0;
}
//hide space sign
if (spaceLast == 1) {
g.setColor(0,0,0);
g.setFont('6x8:3');
g.drawString('space', g.getWidth()/2 -6*3*5/2, g.getHeight()/3);
g.setFont('6x8');
spaceLast = 0;
}
Bangle.setUI({
mode: 'custom',
back: ()=>{
Bangle.setUI();
g.clearRect(Bangle.appRect);
resolve(text);
},
drag: function(event) {
// ABCDEFGHIJKLMNOPQRSTUVWXYZ
// Choose character by draging along red rectangle at bottom of screen
if (event.y >= ( 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); }
if (event.x < ABCPADDING) { abcHL = 0; }
else if (event.x >= 176-ABCPADDING) { abcHL = 25; }
else { abcHL = Math.floor((event.x-ABCPADDING)/6); }
// Datastream for development purposes
//print(event.x, event.y, event.b, abc.charAt(charHL), abc.charAt(charHLPrev));
//print(event.x, event.y, event.b, ABC.charAt(abcHL), ABC.charAt(abcHLPrev));
// 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 (typePrev != 'abc') resetChars(NUM.charAt(numHLPrev), numHLPrev, NUMPADDING, 4, NUMCOLOR);
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');
if (abcHL != abcHLPrev) {
resetChars(ABC.charAt(abcHLPrev), abcHLPrev, ABCPADDING, 2, ABCCOLOR);
showChars(ABC.charAt(abcHL), abcHL, ABCPADDING, 2);
}
// Print string at top of screen
if (event.b == 0) {
text = text + abc.charAt(charHL);
text = text + ABC.charAt(abcHL);
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);
if (ABC.charAt(abcHL) == ABC.charAt(abcHL).toUpperCase()) changeCase(abcHL);
}
// Update previous character to current one
charHLPrev = charHL;
abcHLPrev = abcHL;
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); }
if (event.x < NUMPADDING) { numHL = 0; }
else if (event.x > 176-NUMPADDING) { numHL = NUM.length-1; }
else { numHL = Math.floor((event.x-NUMPADDING)/6); }
// Datastream for development purposes
//print(event.x, event.y, event.b, numPunct.charAt(numPunctHL), numPunct.charAt(numPunctHLPrev));
//print(event.x, event.y, event.b, NUM.charAt(numHL), NUM.charAt(numHLPrev));
// 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');
if (typePrev != 'num') resetChars(ABC.charAt(abcHLPrev), abcHLPrev, ABCPADDING, 2, ABCCOLOR);
if (numHL != numHLPrev) {
resetChars(NUM.charAt(numHLPrev), numHLPrev, NUMPADDING, 4, NUMCOLOR);
showChars(NUM.charAt(numHL), numHL, NUMPADDING, 4);
}
// Print string at top of screen
if (event.b == 0) {
g.setColor(1,1,1);
g.setColor(HLCOLOR);
// Backspace if releasing before list of numbers/punctuation
if (event.x < numPunctPadding) {
if (event.x < NUMPADDING) {
// 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;
showChars('del', 0, g.getWidth()/2 +6 -27 , 4);
delSpaceLast = 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) {
else if (event.x > g.getWidth()-NUMPADDING) {
//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;
showChars('space', 0, g.getWidth()/2 +6 -6*3*5/2 , 4);
delSpaceLast = 1;
text = text + ' ';
updateTopString();
//print(text);
}
// Append selected number/punctuation
else {
text = text + numPunctHidden.charAt(numPunctHL);
text = text + NUMHIDDEN.charAt(numHL);
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);
if ((text.charAt(text.length-1) == '.') || (text.charAt(text.length-1) == '!')) changeCase();
}
}
// Update previous character to current one
numPunctHLPrev = numPunctHL;
typePrev = 'numPunct';
numHLPrev = numHL;
typePrev = 'num';
}
// 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);
g.setColor(HLCOLOR);
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);
resetChars(ABC.charAt(abcHLPrev), abcHLPrev, ABCPADDING, 2, ABCCOLOR);
resetChars(NUM.charAt(numHLPrev), numHLPrev, NUMPADDING, 4, NUMCOLOR);
// 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;
showChars('del', 0, g.getWidth()/2 +6 -27 , 4);
delSpaceLast = 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;
}
if (text.length==0) changeCase(abcHL);
//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);
resetChars(ABC.charAt(abcHLPrev), abcHLPrev, ABCPADDING, 2, ABCCOLOR);
resetChars(NUM.charAt(numHLPrev), numHLPrev, NUMPADDING, 4, NUMCOLOR);
//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;
showChars('space', 0, g.getWidth()/2 +6 -6*3*5/2 , 4);
delSpaceLast = 1;
// Append space and draw string upper right corner
text = text + numPunctHidden.charAt(0);
text = text + NUMHIDDEN.charAt(0);
updateTopString();
//print(text, 'made space');
}
}
}
}
});
return new Promise((resolve,reject) => {
});
/* return new Promise((resolve,reject) => {
Bangle.setUI({mode:"custom", back:()=>{
Bangle.setUI();
g.clearRect(Bangle.appRect);
Bangle.setUI();
resolve(text);
}});
});
}); */
};

2
apps/dragboard/metadata.json
View File

@ -1,6 +1,6 @@
{ "id": "dragboard",
"name": "Dragboard",
"version":"0.02",
"version":"0.03",
"description": "A library for text input via swiping keyboard",
"icon": "app.png",
"type":"textinput",

BIN
apps/dragboard/screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB