[WIP] dragboard - a swiping keyboard for banglejs2

Hi!

I just got my banglejs2 a couple of weeks ago and started playing with it the other day.

I've begun building a text input system which I think could work pretty well for a smart watch. Original inspiration came from Scribble app by @enricorov.

I'm more or less a novice programmer and this is my first time writing javascript. Needless to say, the code could surely be shorter with improved readability if it was further split up in functions etc. However I feel like it's pretty performant!

The espruino documentation has been very helpful! So far I've done the 'first app' and 'clock' guide as well as looked to the reference for inspiration. Thanks!

Check it out and leave a comment! :) I've attached the code, just load it via the web ide. When I feel it's more or less done and cleaned up I'll look into adding it to the app loader.

How it works:
Drag along the red rectangle and release to select a letter.
Do the same for green rectangle to select number or punctuation.
Releasing on left or right part of black part of screen for backspace and space.

"Bug":
I use the standard dark theme. It's not very pleasant to use this with the light theme as of now.

3 Attachments

• dragboard.info
• dragboard.app.js
• 

Very cool idea, seems to work quite well!

Thanks! :)

Looks like a really neat idea! This actually came up somewhere else recently but I'll try and come up with a 'user input' app type so we can have a way of inputting text in apps without every app having to implement their own keyboard.

I implemented a simple keyboard in the 'Bordle' app that mimcs the functionality of the 'Scribble' app, but uses Layout library buttons to simplify the code. Arguably it is a very simple keyboard since it mostly supports upper case letters, but perhaps it could be expanded upon...

@Gordon Thanks! :) The idea of a'user input' type sounds very sensible! :)

@user113695 I feel like some derivation of that keyboard is probably faster for typing than my idea once you have developed a little bit of muscle memory. Something similar to old time cell phone buttons where you tapped a number multiple times to step between its corresponding letters could be quick as well. Or maybe even better, a T9 keyboard?

Ok, I've just added 2 keyboard apps.

One with touch: https://github.com/espruino/BangleApps/t­ree/master/apps/kbtouch

And one with swipe, like PalmOS Graffiti: https://github.com/espruino/BangleApps/t­ree/master/apps/kbswipe

The swipe one really needs the latest build to for things like space/backspace to work properly though.

Just use them in your app like this:

require("textinput").input({text:"Foo"})­.then(result => {
  console.log("Text input", E.toJS(result));
});

If you look at the README it should be easy to make your own keyboard apps too or modify your existing app to work in the same way so a user can choose which keyboard to use

Nice!

Edit3: Is cutting edge 2v12 or stable 2v13 the latest build?

Edit2: Disregard the following. I haven't really tested it on firmware 2v13 yet.

I actually made a rudimentary Graffiti clone as well after seeing you reference it and onedollar in another thread, but for me I didn't get it to reliably recognize what I wanted to type. I wonder if maybe the touch points aren't updated quickly enough to trace the gesture/shape I'm doing (I had the trace of the swiping input displayed while testing and it was hard to repeatedly draw very accurate/precise shapes). Or maybe it's the relative large area of a finger on the small screen that's the culprit. My feeling is the former would be the largest contributor though. Trying "Swipe keyboard" my experience is the same.

After installing "Touch keyboard" and loading your three line code snippet via the web ide I get
"Module textinput not found" and "Uncaught Error: Unhandled promise rejection: Error: Unknown UI mode". The app starts on the watch, but the string "Foo" is not updated on touch. (I got the same messages with Swipe keyboard, but the input was recognized in that case). EDIT1: After I just updated firmware from 2v12 to 2v13 Touch keyboard now works as well.

I don't quite understand this instruction on github: "In your app's metadata, add: "dependencies": {"textinput":"type"}," . Is it to be put inside the curly brackets in a .info file? Also, is the order "textinput":"type" correct?

A question about performance: Why does my app lag more when starting it locally from launcher app on the bangle.js as opposed to loading it via the web ide?

EDIT: On 2v13 using your ( @Gordon ) "Swipe keyboard": The blinking interferes with the input. When it blinks the swiping/drag is cut of and a character selected before I've completed the trace of the intended shape.

Yes, 2v13 is now the latest (released yesterday).

Why does my app lag more when starting it locally from launcher app on the bangle.js as opposed to loading it via the web ide?

Did you run 'Storage -> Utils -> Compact' recently?

"Swipe keyboard": The blinking interferes with the input. When it blinks the swiping/drag is cut of and a character selected

That's odd - are you sure? definitely shouldn't be the case - and while what's drawn on the screen could stutter I don't believe that actually affects the shape that's recorded and sent to the recognizer.

But if you can make it better, PRs are always good :)

1. Thanks for clarifying!
   
2. Tried that now, didn't make a difference (did it just the other day as well). The scrolling of letters definitely feel smoother/higher fps/more responsive when loading the code via web ide. It's not too bad either way, but the experience isn't as 'joyful' with the (small) extra lag.
   
3. My mistake, you're right! For me the trace of my swiping is cleared but like you say, other than that the functionality is as intended.
   
4. I'll see if I figure something out regarding the trace clearing with the marker. (I suspect the whole screen is redrawn every blink of the marker - I'll look at it)
   

The scrolling of letters definitely feel smoother/higher fps

Ahh, ok. This is probably because you were uploading to RAM. Apps normally get executed from Flash, so the JS has to be loaded from flash as it is running.

If you need a function to stay in RAM so it runs quickly you can put "ram" at the front - like:

function myFn() {
  "ram"
  // my code
}

I suspect the whole screen is redrawn every blink of the marker

It is, yes - just updating the marker on its own would be a great addition! Same happens for the keyboard one too I think.

I see! I thought everything had to be loaded into RAM when executed, great to know it doesn't. I'll probably make a setting for choosing to run from Flash or loading it into RAM then. (Do you suggest default being to run from Flash or is it more or less inconsequential?)

just updating the marker on its own would be a great addition!

I'll try doing that!

I'll probably make a setting for choosing to run from Flash or loading it into RAM then

In the app? I'm not sure that's a good idea...

Best bet is figure out which function(s) are the ones that are running often and so are slowing things down, and tag just those functions with the "ram" keyword. That way you get the best of both worlds.

In the app?

Yes and no. I was thinking a toggle via 'dragboard.settings.js' file coupled with an if-statement in the app code. No switching when app is running.

tag just those functions with the "ram" keyword. That way you get the best of both worlds.

Ok!

The app now works as a library in the way @Gordon has instructed. It can be loaded via my app loader fork .

To test it out I suggest loading 'Noteify' via frigis1's app loader fork , then going 'launcher'->'Noteify'->'New note'.

edit: It still has bugs to iron out.

I've now dealt with the most egregious bugs and I consider the keyboard to be in a usable state. Now I just want to get the text to wrap before doing a pull request to the main repo.

Like before it can be loaded via my app loader fork .

And to test it out I suggest loading 'Noteify' via frigis1's app loader fork , then going 'launcher'->'Noteify'->'New note'.

Edit: now available on standard app loader.

I made a PR for introducing settings to 'Touch keyboard' making it possible to use it similarly to how dragboard works. I personally think the qwerty layout is better than the alphabetical row I used for dragboard.

The updated keyboard can be loaded from my app loader.

Select settings as suggested in the readme to mimic dragboard behavior.

1 Attachment