We trying to integrate a customable keyboard into hype. Our ButtonLayout ist defined in .css and the definition of the characters in html, the behavior in .js.
Not shure where is the best workflow for this.
The typical way to do this would be:
- Click "Resources" in the toolbar to show the Resources Library
- Drag in your .js and .css files. They will by default have the "Include in document <head>" option checked, so that they will be used.
- It may or may not be strictly necessary, but you may want to uncheck "Protect from external styles" in the Document Inspector to better make sure the CSS properly applies.
- Add a Rectangle element (which is a just div on the page)
- Remove all styling like border and background
- Choose 'Edit > Edit Element's Inner HTML' and paste in the relevant code
You may need to also add an On Prepare for Display action to Run Javascript to run any code that might hook up your HTML tags to your javascript code. Further, you may also either need to ensure this only runs once (vs. every time you return to the scene) and/or have teardown code in On Scene Unload. This part is really dependent on the code itself.
Thanks for helping. We will try this.
1 Like
Dear Jonathan,
the layout is working but javascript not. The script is simple just some const definitions like:
const special_btn = document.querySelector('.special')...
and eventhandlers for the click handling.
Is the right position the On Prepare For Display ->Run Javascript function or is a better way to create separate keys as Buttons and use the hype On Mouse events?
Possible a Little hard to fully tell you what to try without seeing exactly what you are doing.
--
On a side note I wrote a virtual keyboard for hype a few years ago.
Just downloaded and tested it. Still works ok as far as I can see.
It may help/give you some ideas.
As in you are still working on it, or it is failing for a reason you don't know/need help with?
The answer is... it depends 
. Generally for a small number of items it is probably easier to hook it up in the Hype UI. And this is the more "Hype-y" way to do it.
But for a lot of items, especially if they may change/need programmatic control later, then doing it in code (using a On Prepare For Display handler), is probably easier if you're capable to do so.
Yes.
The original is very customisable.
You just need to understand how it works.
All the keys have a class name, which determines how its treated when shift or the option key is down.
The main Alpha keys in my keyboard all have the alphakey class name.
If a button has the alphakey class name , they will only be looked at by the shift().
Any other mani key/button that is not an alpha key has a class name which defines what it is.
the 9 button has the class key_9
The 1 button has the class key_1
These keys are dealt with by the options(), which changes them to the required char when the option button is used.
There is also shift/option which will change them further.
All you need to really do to change things is look in the init().
All the option type keys i.e the ones that have a class name that start with key_ are defined there.
They all will be assigned 4 chars as a string.
i.e key_9 will be defined like this.
window.key_9 = "9(/·";
char 1 will be its default value
char 2 will be its shift value
char 3 will be its option value
char 4 will be its shift/option value.
The char string can be anything you want as long as you understand the above order.
If you want one of the Alph keys to be controlled the same way as an option key.
You just need to remove the alphakey class name and replace it own key class name.
i.e the q key would have its alphakey class name replace with key_q
You would then simply define it in the init()
i.e
window.key_q = "qQ$ ";
( a space char, will give a blank key )
Here is a quick change example.
Since it looks like you only have one shift and option key, I have commented out the code in shift() and option() that changed style.backgroundColor the second ones I had in mine
And remove some of the keys not needed.
custom_keyboard_mhv_633_1.hype.zip (111.5 KB)
1 Like
If you have external code you can also hook it up using Hype Events either in an external file or in Head HTML
Thanks for the help, trying the Hype UI-way and the alternatively marks template.
1 Like
i there a way to get the displayName of an element? (in an old forum entry from 2019, there is a note, that it is just for internal use?)
Thanks
Ralf
Unfortunately not -- that is a Hype GUI-only property, so we recommend using the Unique Element Id for storing names.
Can I ask what the aim is for wanting to do this?
just a question to adress the "caller", if i use the same javascript for multiple elements.
You would normally use the callers id, class name or an additional html attribute.
The single function would ve structured to check the relevant one of these you are targeting in whatever conditional you have set up.
I did convert my original keyboard to use attributes yesterday. If you interested?
The code change was minimal
1 Like
Yes please, for our first project we used single elements, but the more convenient way sounds like yours with attributes.
Here you go.
Remember it's based on the original.
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.
2 Likes