Virtual keyboard for use with Textareas

Template Gallery
1

I was interested in seeing if I could make a keyboard for forms similar to the one mentioned in the post below.

Here is my first take on it. It based on my Mac keyboard and I must admit I had some moments of pulling my hair out.

Screen Shot 2015-07-11 at 15.17.46.JPG1392×1204 148 KB

I have it here in two forms a exported symbol and an exported template.

The symbol can be imported to any project. ( use a mi of 700px by 700px scene size)
Make sure you import jquery when using the symbol.

Please let me know what you think
My javascript etc. is organic in form, so I will at some point par it down. But I welcome any suggestions to help improve this.

Things to do:

  • Add up down arrows. ( no mater what I tried I could not get anything to work)

  • Add option key character set for All Alpha keys. ( Using the Option key will only affect the numbers and symbol keys at the mo)

  • Document the functions and action - ( there is a bit going on, so I want people to be able to follow it.)

i.e

  • Each Textarea has a click action on it. Which sets a global var with the Textareas Class name.
    This is then used by the other functions to determine which Texture to type in.

SymbolKeyboardV6_3a-1.hypesymbol.zip (43.4 KB)

SymbolKeyboardV6_3.hypetemplate.zip (78.3 KB)

(
note 1:
I feel symbols is still a little buggy, So use the import menu rather than double clicking or drag n drop, which do also work but I have had some odd results when using the latter.
note 2:
I also had odd issues when exporting them. i.e the exported symbol' s enter hover timeline would not have both animations for background colour. One would be missing and or another key would highlight!!. I had to completely re do it to fix that corruption.

So if you export your own symbols, test them thoroughly before accepting that they have exported correctly

note 3

  • All relevant elements use a class name and not a ID. Until Tumult fix the issue of id's not exporting with a Symbol this is the only way to to point to an element when exporting a Symbol )
6 Likes
2

That’s pretty awesome Mark. I noticed that in the Details text area, that I can use my keyboards up/down keys only after I have hit the “Return” key. Maybe that has something to do with your problem in getting the up/down arrow keys working.

1 Like
3

Thanks Greg, ( @gasspence )

Not sure. Just before I posted I actually changed the details area to use a rect rather than a html widget. I found that doing this makes it easier to access the children.

I will retest the up down code in a bit with this in mind. But the up down code would have to simulate a real key event. Unlike the left right code which changes the insertion point by calculation.

I could Iguess calculate the width, character length etc. to determine where to drop or raise the insertion point. But I think it would be better if I could use simulation

4

Awesome! Thanks so much for the detailed explanation Mark. MUCH APPRECIATED!!!

2 Likes
5

I just had another brief look at this. And decided to fix the Hover state issue where some keys would stick on the hover colour.

The original was using the Hype built in hover.

I change that so the hover is controlled using jQuery functions initiated in the init() method.

This works without a hitch. So here is version with that fix.

–update also UP DOWN arrow keys have been added.

SymbolKeyboardV6_3 3.hypetemplate.zip (78.1 KB)

1 Like
6

On a roll, ( v6.3 last post ) now has UP DOWN Arrow keys working.

Woot

2 Likes
7

This reminds me of KEEN.

July 11, 2015... Looks like you made this years before though :smile:

I don't remember KEEN being a terribly difficult project, but it was very tedious... especially when trying to figure out where the keys go. :smile:

Are you still having trouble? Is your project making a comeback?

KEEN uses ID names. I'm not aware of a problem with exporting ID names. Although, I didn't use symbols.

If this is going to be a thing, like a standard template for Hype users to add to their projects, you might want to drop jQuery. At over 90K, that adds a lot of weight to the project.

I feel like Tumult needs a market place, where templates and tutorials (paid and free) could be available.

8

I have updated the keyboard to use Additional attributes instead of class names.

v7

data-keytype

What ever the keytype is . i.e a hyphen (-) but word form.
examples:
data-keytype = alphakey
data-keytype = enterKey
data-keytype = shiftKey

data-symbolkey
what ever the symbol is . i.e a hyphen (-) in word form or for digits, their number.
examples:
data-symbolkey = hyphen
data-symbolkey = rightSquareBracket
data-symbolkey = semiColon
data-symbolkey = 9

Note that although digit keys are afaik not classed as symbols, I have given them the symbolkey attribute for simplicity in converting the code.

data-elkey
Is the initial character for the key element.

examples:
data-elkey = ]
data-elkey = a
data-elkey = =

new Keyboard_attribs_v7_ 2.zip (126.0 KB)

Mostly all that has been done is the keys have been given attributes depending on what they need (i.e not all share the same data key names)
The values for the attributes are the class names I used before.

And the code adjusted to look for the attributes instead of the class.

The keys no longer have innerHTML for it's key value initially.
This is now linked to the data-elkey attribute. And is set by ::before styling in a head css, which also uses the attribute.

So the code now just changes the data-elkey and the css will do the rest.

3 Likes