Basically, I want to create a webpage with a keyboard I’ve made (similar to Keymanweb), but I want to use my own keyboard, as it’s not uploaded to the common repository (I am thinking about it too, but I don’t really get how you do that, yet). Is it possible to do?
This is absolutely possible! We’ve got a relatively simple guide page on our help-site that demonstrates how to do this pretty well:
https://help.keyman.com/developer/engine/web/16.0/guide/examples/automatic-control
In that example, KeymanWeb itself is also ‘locally hosted’, though this isn’t necessary when using local keyboards.
To highlight the most important part of the example:
keyman.addKeyboards({
id:'laokeys', // This must match your keyboard's ID as set in Keyman Developer
name:'Lao (Phonetic)', // The name shown to users for your keyboard in KMW's keyboard menu and sometimes the spacebar
languages:{
id:'lo', // The language code
name:'Lao' // The language name (as seen in certain KMW language menus)
},
filename:'./js/laokeys.js' // Where you have the file locally stored
});
Note that the path you give to filename will be strongly affected by certain options used in the engine’s init function. In particular, note the root and keyboards entries in the page I just linked.
Regarding the details related to language menu stuff… let’s take a look at the touch-device language menu:
Note how all the English keyboards are listed first under English - the language name. Each of the keyboards is then listed with its friendly, human-readable name.
Thanks for the help! I looked at that page, but I had some trouble understanding it. Javascript isn’t my strong point, and all I want is a simple, working online keyboard 
I tried out a bunch of different code, but I can’t get the keyboard to work. I uploaded it here, if you could take a look: klavaro.esperanto.one
Do I need to add any other files other than the .js to the site, because I couldn’t find any mention about that in the documentation.
OK, part of that is a bit of the guide’s fault; by default, Keyman is accessible through the global variable keyman. I admittedly tended to use kmw as a shorthand at one point, which affected the guide. Also, the filename will need a bit of fixing, and your keyboard ID didn’t match.
Try:
keyman.addKeyboards({
id:'esperanto__sava_eujao',
name:'Sava de Esperantujanismo',
languages:{
id:'eo',
name:'Eujao'
},
filename:'js/esperanto__sava_eujao.js'
});
When I do this manually via the developer console when visiting your site, this command gets your page working correctly.
I’ve patched that page of the guide – fix will be merged soon. There may be others (look for the Edit button at the bottom to edit any page in the documentation and quickly and easily contribute fixes!)
Thanks! I sorta got it to work, but when I use
<script src="js/keymanweb.js" type="text/javascript"></script>
it produces a bunch of garbage below the text box. Changing it to
<script src='https://s.keyman.com/kmw/engine/16.0.139/keymanweb.js'></script>
<script src='https://s.keyman.com/kmw/engine/16.0.139/kmwuitoggle.js'></script>
worked.
I get the problem. Things looks so simple and straight forward when you already know how things work. But guides should be written as through the eyes of someone who doesn’t know anything.
I can also say through experience that you usually save a lot of time if you offer some sort of copy-and-paste-solution. “Download this and put it in this drawer, create this html file and add this code and it should work.” It’s easier to play around with a guide if you have some sort of working template to start from, because then you can try out a lot of stuff and figure out yourself what works and what doesn’t.
I added the version with the garbage text, so you can see for yourself: esperanto.one/klavaro/index-2.html
Also, is it possible to add a “copy-all-text” button?
Oh, I just noticed that it doesn’t work on android: klavaro.esperanto.one
I see what happened there - the Web engine wasn’t able to properly link in the on-screen keyboard’s stylesheet due to a pathing issue; I’m guessing you may have moved files at some point. With the link broken, it does look like “garbage text”, to be sure.
That’s fixed by properly configuring the resources entry of the previously-mentioned init function. It can be a bit fiddly, but it’s the current organizational pattern we have in place.
I get the problem. Things looks so simple and straight forward when you already know how things work. But guides should be written as through the eyes of someone who doesn’t know anything.
Preaching to the choir here. You’d be surprised how difficult that is to actually do, though… too much detail up-front is typically quite unhelpful as well. Then there’s balancing documentation-time vs dev-time.
Of note, though, is that that is from our section of help meant to serve exactly this role. The true first page, though, is this one: https://help.keyman.com/developer/engine/web/16.0/guide/get-started. The difference… it doesn’t link in local keyboards either.
At any rate, if you have suggestions on how to improve the guides on the help site, feel free to give those - and even more free to use the cool button @Marc pointed out to do so! Even if you don’t get it all perfectly correct, we’ll probably be able to discern your intent and be able to figure things out from there.
Also, is it possible to add a “copy-all-text” button?
There’s probably some general JS way to do it, but on most browsers… there’s also this wonderful shortcut: CTRL-A. As long as your keyboard doesn’t need that for a keystroke, it should serve you pretty well.
If you’re really wanting a button you can click… here’s a StackOverflow link on the problem: How do I copy to the clipboard in JavaScript? - Stack Overflow.
From the answer here: How do I copy to the clipboard in JavaScript? - Stack Overflow
Automatic copying to the clipboard may be dangerous, and therefore most browsers (except Internet Explorer) make it very difficult.
… hence the lack of a straightforward answer on my part.
Oh, I just noticed that it doesn’t work on android: klavaro.esperanto.one
In your init() function call, include attachType: 'auto' as an entry of the parameter object - between the curly braces ({ & }).
Um, I don’t get it, where? Can you write the line for me?
I remember reading about when they were going to add a program to rip and transfer mp3-s to the iPod, and the devs wanted to have all these fancy functions to tailor to every need, and they argued about how to best explain the procedure in-program. Then came Steve Jobs. He didn’t get it, so he told them how it should work: “Drag the files to the folder, press ‘Rip’, and done!”
I have been using Linux for years, but it still baffles me that so many want to add so much stuff that, frankly, most users doesn’t need, and just complicate things. It’s usually so simple to have one setting, that is what you need 90% of the time, but people, in the name of having options, don’t add. There are exceptions, of course, but it’s still so common.
Sorry about the rant. I think the easiest solution here is to add a page with templates, where people have to mostly copy-and-paste, and change as little as possible. Like having the online version being default, as it works fine.
CTRL-A is fine of course, but a button would be a nice addon. Thanks for the link, but if it’s not recommended, I will avoid it
I have tried to add that line on a bunch of different places, but it either breaks the whole keyboard, or it still doesn’t work on Android. Sorry, I am at a hold-hands-level here.
Given what I currently see on your site…
window.addEventListener('load', function () {
keyman.init().then(function() {
should become
window.addEventListener('load', function () {
keyman.init({ attachType: 'auto' }).then(function() {
FWIW, I agree with you @Johannes_Genberg. A lot of work is needed on these guides; they’re out of date and inconsistent, and missing a lot of content – that’s true for all the different Keyman Engine guides, including Keyman Engine for Web.
We’ve had a need for a technical writer to join the Keyman team for a long time, but so far no luck. Our small team is stretched beyond capacity already, so rewriting the Keyman Engine guides (which is a big job to do properly) keeps getting kicked into the ‘too hard’ basket.
Thanks, but that broke the keyboard again. You can take a look at esperanto.one/klavaro/index-3.html
I wish I could help, but I don’t know anything about this stuff. The best I can do is to help evaluate if the guide is beginner-friendly or not.