Virtual keyboard for use with Textareas

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.

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

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

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

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

2 Likes

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

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

Woot

2 Likes

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.