kbswipe: Support input of numbers
To switch between the input of alphabetic and numeric characters tap the widget which displays either "123" or "ABC" closes #1820master
Erik Andresen
parent
88da8fbc24
commit
48815b249e
|
|
@ -3,3 +3,4 @@
|
|||
0.03: Positioning of marker now takes the height of the widget field into account.
|
||||
0.04: Fix issue if going back without typing.
|
||||
0.05: Keep drag-function in ram, hopefully improving performance and input reliability somewhat.
|
||||
0.06: Support input of numbers
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ A library that provides the ability to input text by swiping PalmOS Graffiti-sty
|
|||
|
||||
To get a legend of available characters, just tap the screen.
|
||||
|
||||
To switch between the input of alphabetic and numeric characters tap the widget which displays either "123" or "ABC".
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
const INPUT_MODE_ALPHA = 0;
|
||||
const INPUT_MODE_NUM = 1;
|
||||
|
||||
/* 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) {
|
||||
exports.getStrokes = function(mode, cb) {
|
||||
if (mode === INPUT_MODE_ALPHA) {
|
||||
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]));
|
||||
|
|
@ -31,17 +35,33 @@ exports.getStrokes = function(cb) {
|
|||
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]));
|
||||
} else if (mode === INPUT_MODE_NUM) {
|
||||
cb("0", new Uint8Array([105, 63, 97, 63, 80, 63, 62, 64, 52, 69, 47, 79, 47, 94, 48, 111, 55, 125, 74, 138, 100, 141, 126, 137, 148, 129, 158, 119, 161, 107, 161, 98, 159, 92, 154, 87, 149, 82]));
|
||||
cb("1", new Uint8Array([123, 59, 123, 60, 123, 63, 123, 67, 123, 70, 122, 73, 121, 78, 119, 83, 118, 91, 117, 100, 116, 108, 115, 117, 114, 126, 113, 135, 112, 143, 111, 149, 111, 155, 110, 159]));
|
||||
cb("2", new Uint8Array([61, 99, 61, 94, 61, 88, 61, 80, 65, 71, 73, 66, 83, 62, 97, 62, 109, 62, 126, 62, 141, 62, 149, 65, 151, 74, 151, 87, 150, 95, 143, 108, 130, 118, 117, 127, 100, 138, 84, 146, 67, 151, 55, 157, 52, 159, 73, 159, 117, 159, 163, 159, 183, 159]));
|
||||
cb("3", new Uint8Array([69, 62, 78, 56, 98, 49, 121, 49, 141, 54, 149, 58, 150, 65, 148, 74, 143, 82, 126, 92, 114, 98, 119, 100, 135, 105, 143, 117, 142, 135, 123, 149, 105, 155]));
|
||||
cb("4", new Uint8Array([78, 45, 78, 47, 78, 50, 78, 56, 78, 64, 78, 75, 78, 88, 78, 103, 78, 119, 78, 132, 78, 144, 78, 148, 80, 149, 84, 149, 96, 149, 112, 148, 127, 147, 144, 144, 163, 140, 175, 137]));
|
||||
cb("5", new Uint8Array([142, 49, 134, 47, 121, 44, 104, 44, 88, 45, 75, 46, 68, 48, 64, 52, 64, 59, 64, 73, 64, 86, 64, 100, 67, 105, 82, 105, 106, 105, 130, 105, 143, 105, 149, 105, 151, 110, 148, 125, 138, 144, 118, 157, 92, 164, 76, 165, 65, 165, 60, 165]));
|
||||
cb("6", new Uint8Array([161, 47, 151, 47, 133, 47, 108, 48, 85, 52, 65, 59, 53, 72, 46, 89, 44, 107, 49, 133, 71, 151, 100, 156, 118, 152, 120, 141, 108, 132, 84, 127, 70, 126]));
|
||||
cb("7", new Uint8Array([43, 53, 53, 49, 72, 45, 96, 40, 116, 38, 129, 38, 138, 38, 144, 38, 147, 39, 149, 47, 143, 75, 127, 121, 114, 147, 107, 158, 104, 162, 98, 168, 93, 171]));
|
||||
cb("8", new Uint8Array([148, 66, 135, 58, 113, 49, 97, 43, 84, 40, 74, 40, 66, 43, 62, 47, 62, 51, 67, 61, 84, 75, 101, 88, 111, 101, 113, 115, 110, 135, 98, 149, 84, 156, 73, 157, 63, 157, 58, 154, 52, 144, 52, 133, 54, 122, 65, 111, 81, 100, 97, 92, 110, 86, 121, 81, 129, 80, 137, 80, 145, 79, 151, 78]));
|
||||
cb("9", new Uint8Array([146, 57, 146, 52, 146, 46, 143, 42, 135, 41, 123, 41, 107, 45, 92, 49, 83, 53, 78, 62, 89, 82, 110, 94, 126, 94, 139, 88, 147, 81, 151, 74, 152, 75, 152, 80, 152, 88, 152, 101, 152, 121, 152, 140, 152, 154, 152, 165, 152, 171]));
|
||||
}
|
||||
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||{};
|
||||
let input_mode = INPUT_MODE_ALPHA;
|
||||
var text = options.text;
|
||||
if ("string"!=typeof text) text="";
|
||||
|
||||
function setupStrokes() {
|
||||
Bangle.strokes = {};
|
||||
exports.getStrokes( (id,s) => Bangle.strokes[id] = Unistroke.new(s) );
|
||||
exports.getStrokes(input_mode, (id,s) => Bangle.strokes[id] = Unistroke.new(s) );
|
||||
}
|
||||
setupStrokes();
|
||||
|
||||
var flashToggle = false;
|
||||
const R = Bangle.appRect;
|
||||
|
|
@ -49,6 +69,7 @@ exports.getStrokes( (id,s) => Bangle.strokes[id] = Unistroke.new(s) );
|
|||
var Rx2;
|
||||
var Ry1;
|
||||
var Ry2;
|
||||
let flashInterval;
|
||||
|
||||
function findMarker(strArr) {
|
||||
if (strArr.length == 0) {
|
||||
|
|
@ -101,10 +122,13 @@ exports.getStrokes( (id,s) => Bangle.strokes[id] = Unistroke.new(s) );
|
|||
*/
|
||||
|
||||
function show() {
|
||||
if (flashInterval) clearInterval(flashInterval);
|
||||
flashInterval = undefined;
|
||||
|
||||
g.reset();
|
||||
g.clearRect(R).setColor("#f00");
|
||||
var n=0;
|
||||
exports.getStrokes((id,s) => {
|
||||
exports.getStrokes(input_mode, (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});
|
||||
|
|
@ -119,7 +143,7 @@ exports.getStrokes( (id,s) => Bangle.strokes[id] = Unistroke.new(s) );
|
|||
if (!flashInterval)
|
||||
flashInterval = setInterval(() => {
|
||||
flashToggle = !flashToggle;
|
||||
draw();
|
||||
draw(false);
|
||||
}, 1000);
|
||||
if (o.stroke!==undefined) {
|
||||
var ch = o.stroke;
|
||||
|
|
@ -128,13 +152,38 @@ exports.getStrokes( (id,s) => Bangle.strokes[id] = Unistroke.new(s) );
|
|||
g.clearRect(R);
|
||||
}
|
||||
flashToggle = true;
|
||||
draw();
|
||||
draw(false);
|
||||
}
|
||||
|
||||
// Switches between alphabetic and numeric input
|
||||
function cycleInput() {
|
||||
input_mode++;
|
||||
if (input_mode > INPUT_MODE_NUM) input_mode = 0;
|
||||
setupStrokes();
|
||||
show();
|
||||
Bangle.drawWidgets();
|
||||
}
|
||||
|
||||
Bangle.on('stroke',strokeHandler);
|
||||
g.reset().clearRect(R);
|
||||
show();
|
||||
draw(false);
|
||||
var flashInterval;
|
||||
|
||||
// Create Widget to switch between alphabetic and numeric input
|
||||
WIDGETS.kbswipe={
|
||||
area:"tl",
|
||||
width: 36, // 3 chars 6*2 px/char
|
||||
draw: function() {
|
||||
g.reset();
|
||||
g.setFont("6x8:2x3");
|
||||
g.setColor("#f00");
|
||||
if (input_mode === INPUT_MODE_ALPHA) {
|
||||
g.drawString("123", this.x, this.y);
|
||||
} else if (input_mode === INPUT_MODE_NUM) {
|
||||
g.drawString("ABC", this.x, this.y);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return new Promise((resolve,reject) => {
|
||||
var l;//last event
|
||||
|
|
@ -142,11 +191,16 @@ exports.getStrokes( (id,s) => Bangle.strokes[id] = Unistroke.new(s) );
|
|||
"ram";
|
||||
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;
|
||||
},touch:(n,e) => {
|
||||
if (WIDGETS.kbswipe && e.x>=WIDGETS.kbswipe.x && e.x<WIDGETS.kbswipe.x+WIDGETS.kbswipe.width
|
||||
&& e.y>=WIDGETS.kbswipe.y && e.y<=WIDGETS.kbswipe.y+24) {
|
||||
// touch inside widget
|
||||
cycleInput();
|
||||
} else {
|
||||
show();
|
||||
}
|
||||
}, back:()=>{
|
||||
delete WIDGETS.kbswipe;
|
||||
Bangle.removeListener("stroke", strokeHandler);
|
||||
if (flashInterval) clearInterval(flashInterval);
|
||||
Bangle.setUI();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{ "id": "kbswipe",
|
||||
"name": "Swipe keyboard",
|
||||
"version":"0.05",
|
||||
"version":"0.06",
|
||||
"description": "A library for text input via PalmOS style swipe gestures (beta!)",
|
||||
"icon": "app.png",
|
||||
"type":"textinput",
|
||||
|
|
|
|||
Loading…
Reference in New Issue