mirror of https://github.com/espruino/BangleApps
Adding apps for keyboards on bangle.js 2
Gordon Williams
parent
d4d6d48471
commit
0d696558a6
|
|
@ -0,0 +1 @@
|
|||
0.01: New App!
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
# Swipe Keyboard
|
||||
|
||||
A library that provides the ability to input text by swiping PalmOS Graffiti-style characters onto the screen.
|
||||
|
||||
To get a legend of available characters, just tap the screen.
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
In your app's metadata, add:
|
||||
|
||||
```
|
||||
"dependencies": {"textinput":"type"},
|
||||
```
|
||||
|
||||
From inside your app, call:
|
||||
|
||||
```
|
||||
Bangle.loadWidgets();
|
||||
Bangle.drawWidgets();
|
||||
require("textinput").input({text:"Foo"}).then(result => {
|
||||
console.log("Text input", E.toJS(result));
|
||||
});
|
||||
```
|
||||
|
||||
The first argument to `input` is an object containing the following:
|
||||
|
||||
* `text` - initial text to edit
|
||||
|
||||
(in the future, the ability to restrict usage of newline/etc may be added)
|
||||
|
||||
## Make your own
|
||||
|
||||
You can create your own keyboard input apps. Just ensure that they have
|
||||
`"type":"textinput",` in their metadata and provide a library called `textinput`
|
||||
that exports an `input` method.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,110 @@
|
|||
/* To make your own strokes, type:
|
||||
|
||||
Bangle.on('stroke',print)
|
||||
|
||||
on the left of the IDE, then do a stroke and copy out the Uint8Array line
|
||||
*/
|
||||
exports.getStrokes = function(cb) {
|
||||
cb("a", new Uint8Array([58, 159, 58, 155, 62, 144, 69, 127, 77, 106, 86, 90, 94, 77, 101, 68, 108, 62, 114, 59, 121, 59, 133, 61, 146, 70, 158, 88, 169, 107, 176, 124, 180, 135, 183, 144, 185, 152]));
|
||||
cb("b", new Uint8Array([51, 47, 51, 77, 56, 123, 60, 151, 65, 163, 68, 164, 68, 144, 67, 108, 67, 76, 72, 43, 104, 51, 121, 74, 110, 87, 109, 95, 131, 117, 131, 140, 109, 152, 88, 157]));
|
||||
cb("c", new Uint8Array([153, 62, 150, 62, 145, 62, 136, 62, 123, 62, 106, 65, 85, 70, 65, 75, 50, 82, 42, 93, 37, 106, 36, 119, 36, 130, 40, 140, 49, 147, 61, 153, 72, 156, 85, 157, 106, 158, 116, 158]));
|
||||
cb("d", new Uint8Array([57, 178, 57, 176, 55, 171, 52, 163, 50, 154, 49, 146, 47, 135, 45, 121, 44, 108, 44, 97, 44, 85, 44, 75, 44, 66, 44, 58, 44, 48, 44, 38, 46, 31, 48, 26, 58, 21, 75, 20, 99, 26, 120, 35, 136, 51, 144, 70, 144, 88, 137, 110, 124, 131, 106, 145, 88, 153]));
|
||||
cb("e", new Uint8Array([150, 72, 141, 69, 114, 68, 79, 69, 48, 77, 32, 81, 31, 85, 46, 91, 73, 95, 107, 100, 114, 103, 83, 117, 58, 134, 66, 143, 105, 148, 133, 148, 144, 148]));
|
||||
cb("f", new Uint8Array([157, 52, 155, 52, 148, 52, 137, 52, 124, 52, 110, 52, 96, 52, 83, 52, 74, 52, 67, 52, 61, 52, 57, 52, 55, 52, 52, 52, 52, 54, 52, 58, 52, 64, 54, 75, 58, 97, 59, 117, 60, 130]));
|
||||
cb("g", new Uint8Array([160, 66, 153, 62, 129, 58, 90, 56, 58, 57, 38, 65, 31, 86, 43, 125, 69, 152, 116, 166, 145, 154, 146, 134, 112, 116, 85, 108, 97, 106, 140, 106, 164, 106]));
|
||||
cb("h", new Uint8Array([58, 50, 58, 55, 58, 64, 58, 80, 58, 102, 58, 122, 58, 139, 58, 153, 58, 164, 58, 171, 58, 177, 58, 179, 58, 181, 58, 180, 58, 173, 58, 163, 59, 154, 61, 138, 64, 114, 68, 95, 72, 84, 80, 79, 91, 79, 107, 82, 123, 93, 137, 111, 145, 130, 149, 147, 150, 154, 150, 159]));
|
||||
cb("i", new Uint8Array([89, 48, 89, 49, 89, 51, 89, 55, 89, 60, 89, 68, 89, 78, 89, 91, 89, 103, 89, 114, 89, 124, 89, 132, 89, 138, 89, 144, 89, 148, 89, 151, 89, 154, 89, 156, 89, 157, 89, 158]));
|
||||
cb("j", new Uint8Array([130, 57, 130, 61, 130, 73, 130, 91, 130, 113, 130, 133, 130, 147, 130, 156, 130, 161, 130, 164, 130, 166, 129, 168, 127, 168, 120, 168, 110, 168, 91, 167, 81, 167, 68, 167]));
|
||||
cb("k", new Uint8Array([149, 63, 147, 68, 143, 76, 136, 89, 126, 106, 114, 123, 100, 136, 86, 147, 72, 153, 57, 155, 45, 152, 36, 145, 29, 131, 26, 117, 26, 104, 27, 93, 30, 86, 35, 80, 45, 77, 62, 80, 88, 96, 113, 116, 130, 131, 140, 142, 145, 149, 148, 153]));
|
||||
cb("l", new Uint8Array([42, 55, 42, 59, 42, 69, 44, 87, 44, 107, 44, 128, 44, 143, 44, 156, 44, 163, 44, 167, 44, 169, 45, 170, 49, 170, 59, 169, 76, 167, 100, 164, 119, 162, 139, 160, 163, 159]));
|
||||
cb("m", new Uint8Array([49, 165, 48, 162, 46, 156, 44, 148, 42, 138, 42, 126, 42, 113, 43, 101, 45, 91, 47, 82, 49, 75, 51, 71, 54, 70, 57, 70, 61, 74, 69, 81, 75, 91, 84, 104, 94, 121, 101, 132, 103, 137, 106, 130, 110, 114, 116, 92, 125, 75, 134, 65, 139, 62, 144, 66, 148, 83, 151, 108, 155, 132, 157, 149]));
|
||||
cb("n", new Uint8Array([50, 165, 50, 160, 50, 153, 50, 140, 50, 122, 50, 103, 50, 83, 50, 65, 50, 52, 50, 45, 50, 43, 52, 52, 57, 67, 66, 90, 78, 112, 93, 131, 104, 143, 116, 152, 127, 159, 135, 160, 141, 150, 148, 125, 154, 96, 158, 71, 161, 56, 162, 49]));
|
||||
cb("o", new Uint8Array([107, 58, 104, 58, 97, 61, 87, 68, 75, 77, 65, 88, 58, 103, 54, 116, 53, 126, 55, 135, 61, 143, 75, 149, 91, 150, 106, 148, 119, 141, 137, 125, 143, 115, 146, 104, 146, 89, 142, 78, 130, 70, 116, 65, 104, 62]));
|
||||
cb("p", new Uint8Array([52, 59, 52, 64, 54, 73, 58, 88, 61, 104, 65, 119, 67, 130, 69, 138, 71, 145, 71, 147, 71, 148, 71, 143, 70, 133, 68, 120, 67, 108, 67, 97, 67, 89, 68, 79, 72, 67, 83, 60, 99, 58, 118, 58, 136, 63, 146, 70, 148, 77, 145, 84, 136, 91, 121, 95, 106, 97, 93, 97, 82, 97]));
|
||||
cb("q", new Uint8Array([95, 59, 93, 59, 88, 59, 79, 59, 68, 61, 57, 67, 50, 77, 48, 89, 48, 103, 50, 117, 55, 130, 65, 140, 76, 145, 85, 146, 94, 144, 101, 140, 105, 136, 106, 127, 106, 113, 100, 98, 92, 86, 86, 79, 84, 75, 84, 72, 91, 69, 106, 67, 126, 67, 144, 67, 158, 67, 168, 67, 173, 67, 177, 67]));
|
||||
cb("r", new Uint8Array([53, 49, 53, 62, 53, 91, 53, 127, 53, 146, 53, 147, 53, 128, 53, 94, 53, 69, 62, 44, 82, 42, 94, 50, 92, 68, 82, 85, 77, 93, 80, 102, 95, 119, 114, 134, 129, 145, 137, 150]));
|
||||
cb("s", new Uint8Array([159, 72, 157, 70, 155, 68, 151, 66, 145, 63, 134, 60, 121, 58, 108, 56, 96, 55, 83, 55, 73, 55, 64, 56, 57, 60, 52, 65, 49, 71, 49, 76, 50, 81, 55, 87, 71, 94, 94, 100, 116, 104, 131, 108, 141, 114, 145, 124, 142, 135, 124, 146, 97, 153, 70, 157, 52, 158]));
|
||||
cb("t", new Uint8Array([45, 55, 48, 55, 55, 55, 72, 55, 96, 55, 120, 55, 136, 55, 147, 55, 152, 55, 155, 55, 157, 55, 158, 56, 158, 60, 156, 70, 154, 86, 151, 102, 150, 114, 148, 125, 148, 138, 148, 146]));
|
||||
cb("u", new Uint8Array([35, 52, 35, 59, 35, 73, 35, 90, 36, 114, 38, 133, 42, 146, 49, 153, 60, 157, 73, 158, 86, 156, 100, 152, 112, 144, 121, 131, 127, 114, 132, 97, 134, 85, 135, 73, 136, 61, 136, 56]));
|
||||
cb("v", new Uint8Array([36, 55, 37, 59, 40, 68, 45, 83, 51, 100, 58, 118, 64, 132, 69, 142, 71, 149, 73, 156, 76, 158, 77, 160, 77, 159, 80, 151, 82, 137, 84, 122, 86, 111, 90, 91, 91, 78, 91, 68, 91, 63, 92, 61, 97, 61, 111, 61, 132, 61, 150, 61, 162, 61]));
|
||||
cb("w", new Uint8Array([33, 58, 34, 81, 39, 127, 44, 151, 48, 161, 52, 162, 57, 154, 61, 136, 65, 115, 70, 95, 76, 95, 93, 121, 110, 146, 119, 151, 130, 129, 138, 84, 140, 56, 140, 45]));
|
||||
cb("x", new Uint8Array([56, 63, 56, 67, 57, 74, 60, 89, 66, 109, 74, 129, 85, 145, 96, 158, 107, 164, 117, 167, 128, 164, 141, 155, 151, 140, 159, 122, 166, 105, 168, 89, 170, 81, 170, 73, 169, 66, 161, 63, 141, 68, 110, 83, 77, 110, 55, 134, 47, 145]));
|
||||
cb("y", new Uint8Array([42, 56, 42, 70, 48, 97, 62, 109, 85, 106, 109, 90, 126, 65, 134, 47, 137, 45, 137, 75, 127, 125, 98, 141, 70, 133, 65, 126, 92, 137, 132, 156, 149, 166]));
|
||||
cb("z", new Uint8Array([29, 62, 35, 62, 43, 62, 63, 62, 87, 62, 110, 62, 125, 62, 134, 62, 138, 62, 136, 63, 122, 68, 103, 77, 85, 91, 70, 107, 59, 120, 50, 132, 47, 138, 43, 143, 41, 148, 42, 151, 53, 155, 80, 157, 116, 158, 146, 158, 163, 158]));
|
||||
cb("\b", new Uint8Array([183, 103, 182, 103, 180, 103, 176, 103, 169, 103, 159, 103, 147, 103, 133, 103, 116, 103, 101, 103, 85, 103, 73, 103, 61, 103, 52, 103, 38, 103, 34, 103, 29, 103, 27, 103, 26, 103, 25, 103, 24, 103]));
|
||||
cb(" ", new Uint8Array([39, 118, 40, 118, 41, 118, 44, 118, 47, 118, 52, 118, 58, 118, 66, 118, 74, 118, 84, 118, 94, 118, 104, 117, 114, 116, 123, 116, 130, 116, 144, 116, 149, 116, 154, 116, 158, 116, 161, 116, 163, 116]));
|
||||
};
|
||||
|
||||
exports.input = function(options) {
|
||||
options = options||{};
|
||||
var text = options.text;
|
||||
if ("string"!=typeof text) text="";
|
||||
|
||||
Bangle.strokes = {};
|
||||
exports.getStrokes( (id,s) => Bangle.strokes[id] = Unistroke.new(s) );
|
||||
|
||||
var flashToggle = false;
|
||||
const R = Bangle.appRect;
|
||||
|
||||
function draw(noclear) {
|
||||
g.reset();
|
||||
if (!noclear) g.clearRect(R);
|
||||
var l = g.setFont("6x8:4").wrapString(text+(flashToggle?"_":" "), R.w-8);
|
||||
if (l.length>4) l=l.slice(-4);
|
||||
g.drawString(l.join("\n"),R.x+4,R.y+4);
|
||||
}
|
||||
|
||||
function show() {
|
||||
g.reset();
|
||||
g.clearRect(R).setColor("#f00");
|
||||
var n=0;
|
||||
exports.getStrokes((id,s) => {
|
||||
var x = n%6;
|
||||
var y = (n-x)/6;
|
||||
s = g.transformVertices(s, {scale:0.16, x:R.x+x*30-4, y:R.y+y*30-4});
|
||||
g.fillRect(s[0]-1,s[1]-2,s[0]+1,s[1]+1);
|
||||
g.drawPoly(s);
|
||||
n++;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function strokeHandler(o) {
|
||||
//print(o);
|
||||
if (!flashInterval)
|
||||
flashInterval = setInterval(() => {
|
||||
flashToggle = !flashToggle;
|
||||
draw();
|
||||
}, 1000);
|
||||
if (o.stroke!==undefined) {
|
||||
var ch = o.stroke;
|
||||
if (ch=="\b") text = text.slice(0,-1);
|
||||
else text += ch;
|
||||
}
|
||||
flashToggle = true;
|
||||
draw();
|
||||
}
|
||||
Bangle.on('stroke',strokeHandler);
|
||||
g.reset().clearRect(R);
|
||||
show();
|
||||
draw(true);
|
||||
var flashInterval;
|
||||
|
||||
return new Promise((resolve,reject) => {
|
||||
var l;//last event
|
||||
Bangle.setUI({mode:"custom", drag:e=>{
|
||||
if (l) g.reset().setColor("#f00").drawLine(l.x,l.y,e.x,e.y);
|
||||
l = e.b ? e : 0;
|
||||
},touch:() => {
|
||||
if (flashInterval) clearInterval(flashInterval);
|
||||
flashInterval = undefined;
|
||||
show();
|
||||
}, back:()=>{
|
||||
Bangle.removeListener("stroke", strokeHandler);
|
||||
clearInterval(flashInterval);
|
||||
Bangle.setUI();
|
||||
g.clearRect(Bangle.appRect);
|
||||
resolve(text);
|
||||
}});
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{ "id": "kbswipe",
|
||||
"name": "Swipe keyboard",
|
||||
"version":"0.01",
|
||||
"description": "A library for text input via PalmOS style swipe gestures (beta!)",
|
||||
"icon": "app.png",
|
||||
"type":"textinput",
|
||||
"tags": "keyboard",
|
||||
"supports" : ["BANGLEJS2"],
|
||||
"screenshots": [{"url":"screenshot.png"}],
|
||||
"readme": "README.md",
|
||||
"storage": [
|
||||
{"name":"textinput","url":"lib.js"}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
0.01: New App!
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
# Touch Keyboard
|
||||
|
||||
A library that provides an on-screen keyboard for text input.
|
||||
|
||||
## Usage
|
||||
|
||||
In your app's metadata, add:
|
||||
|
||||
```
|
||||
"dependencies": {"textinput":"type"},
|
||||
```
|
||||
|
||||
From inside your app, call:
|
||||
|
||||
```
|
||||
Bangle.loadWidgets();
|
||||
Bangle.drawWidgets();
|
||||
require("textinput").input({text:"Foo"}).then(result => {
|
||||
console.log("Text input", E.toJS(result));
|
||||
});
|
||||
```
|
||||
|
||||
The first argument to `input` is an object containing the following:
|
||||
|
||||
* `text` - initial text to edit
|
||||
|
||||
(in the future, the ability to restrict usage of newline/etc may be added)
|
||||
|
||||
## Make your own
|
||||
|
||||
You can create your own keyboard input apps. Just ensure that they have
|
||||
`"type":"textinput",` in their metadata and provide a library called `textinput`
|
||||
that exports an `input` method.
|
||||
|
||||
## To-do
|
||||
|
||||
Make this Bangle.js 1 compatible (use left/right touch and up/down buttons)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 506 B |
|
|
@ -0,0 +1,132 @@
|
|||
exports.input = function(options) {
|
||||
options = options||{};
|
||||
var text = options.text;
|
||||
if ("string"!=typeof text) text="";
|
||||
|
||||
// Key Maps for Keyboard
|
||||
var KEYMAPLOWER = [
|
||||
"`1234567890-=\b",
|
||||
"\2qwertyuiop[]\n",
|
||||
"\2asdfghjkl;'#\n",
|
||||
" \\zxcvbnm,./ ",
|
||||
];
|
||||
var KEYMAPUPPER = [
|
||||
"¬!\"£$%^&*()_+\b",
|
||||
"\2QWERTYUIOP{}\n",
|
||||
"\2ASDFGHJKL:@~\n",
|
||||
" |ZXCVBNM<>? ",
|
||||
];
|
||||
var KEYIMGL = Graphics.createImage(`
|
||||
|
||||
|
||||
#
|
||||
###
|
||||
#####
|
||||
#
|
||||
#
|
||||
#
|
||||
#
|
||||
#
|
||||
#
|
||||
#
|
||||
#
|
||||
#
|
||||
#
|
||||
#
|
||||
#
|
||||
#
|
||||
`);KEYIMGL.transparent=0;
|
||||
var KEYIMGR = Graphics.createImage(`
|
||||
|
||||
|
||||
#
|
||||
##
|
||||
#####
|
||||
##
|
||||
#
|
||||
|
||||
|
||||
|
||||
###
|
||||
#
|
||||
#
|
||||
#
|
||||
#
|
||||
#
|
||||
#####
|
||||
###
|
||||
#
|
||||
|
||||
#`);KEYIMGR.transparent=0;
|
||||
/* If a char in the keymap is >=128,
|
||||
subtract 128 and look in this array for
|
||||
multi-character key codes*/
|
||||
var KEYEXTRA = [
|
||||
String.fromCharCode(27,91,68), // 0x80 left
|
||||
String.fromCharCode(27,91,67), // 0x81 right
|
||||
String.fromCharCode(27,91,65), // 0x82 up
|
||||
String.fromCharCode(27,91,66), // 0x83 down
|
||||
String.fromCharCode(27,91,53,126), // 0x84 page up
|
||||
String.fromCharCode(27,91,54,126), // 0x85 page down
|
||||
];
|
||||
// state
|
||||
const R = Bangle.appRect;
|
||||
var kbx = 0, kby = 0, kbdx = 0, kbdy = 0, kbShift = false, flashToggle = false;
|
||||
const PX=12, PY=16, DRAGSCALE=24;
|
||||
var xoff = 3, yoff = g.getHeight()-PY*4;
|
||||
|
||||
function draw() {
|
||||
var map = kbShift ? KEYMAPUPPER : KEYMAPLOWER;
|
||||
//g.drawImage(KEYIMG,0,yoff);
|
||||
g.reset().setFont("6x8:2");
|
||||
g.clearRect(R);
|
||||
if (kbx>=0)
|
||||
g.setColor(g.theme.bgH).fillRect(xoff+kbx*PX,yoff+kby*PY, xoff+(kbx+1)*PX-1,yoff+(kby+1)*PY-1).setColor(g.theme.fg);
|
||||
g.drawImage(KEYIMGL,xoff,yoff+PY,{scale:2});
|
||||
g.drawImage(KEYIMGR,xoff+PX*13,yoff,{scale:2});
|
||||
g.drawString(map[0],xoff,yoff);
|
||||
g.drawString(map[1],xoff,yoff+PY);
|
||||
g.drawString(map[2],xoff,yoff+PY*2);
|
||||
g.drawString(map[3],xoff,yoff+PY*3);
|
||||
var l = g.setFont("6x8:4").wrapString(text+(flashToggle?"_":" "), R.w-8);
|
||||
if (l.length>2) l=l.slice(-2);
|
||||
g.drawString(l.join("\n"),R.x+4,R.y+4);
|
||||
|
||||
g.flip();
|
||||
}
|
||||
g.reset().clearRect(R);
|
||||
draw();
|
||||
var flashInterval = setInterval(() => {
|
||||
flashToggle = !flashToggle;
|
||||
draw();
|
||||
}, 1000);
|
||||
|
||||
return new Promise((resolve,reject) => {
|
||||
|
||||
Bangle.setUI({mode:"custom", drag:e=>{
|
||||
kbdx += e.dx;
|
||||
kbdy += e.dy;
|
||||
var dx = Math.round(kbdx/DRAGSCALE), dy = Math.round(kbdy/DRAGSCALE);
|
||||
kbdx -= dx*DRAGSCALE;
|
||||
kbdy -= dy*DRAGSCALE;
|
||||
if (dx || dy) {
|
||||
kbx = (kbx+dx+15)%15;
|
||||
kby = (kby+dy+4)%4;
|
||||
draw();
|
||||
}
|
||||
},touch:()=>{
|
||||
var map = kbShift ? KEYMAPUPPER : KEYMAPLOWER;
|
||||
var ch = map[kby][kbx];
|
||||
if (ch=="\2") kbShift=!kbShift;
|
||||
else if (ch=="\b") text = text.slice(0,-1);
|
||||
else text += ch;
|
||||
Bangle.buzz(20);
|
||||
draw();
|
||||
},back:()=>{
|
||||
clearInterval(flashInterval);
|
||||
Bangle.setUI();
|
||||
g.clearRect(Bangle.appRect);
|
||||
resolve(text);
|
||||
}});
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{ "id": "kbtouch",
|
||||
"name": "Touch keyboard",
|
||||
"version":"0.01",
|
||||
"description": "A library for text input via onscreen keyboard",
|
||||
"icon": "app.png",
|
||||
"type":"textinput",
|
||||
"tags": "keyboard",
|
||||
"supports" : ["BANGLEJS2"],
|
||||
"screenshots": [{"url":"screenshot.png"}],
|
||||
"readme": "README.md",
|
||||
"storage": [
|
||||
{"name":"textinput","url":"lib.js"}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Loading…
Reference in New Issue