Is it possible to make a webpage with a local keyboard?

:man_facepalming:

I forgot to put quotes around auto… I’ve fixed the previous example, but I’ll repeat the important line here.

      keyman.init({ attachType: 'auto' }).then(function() {

Not:

      keyman.init({ attachType: auto }).then(function() {

It works now :smiley: But I think I found a bug on Android. When I press the Shift-CTRL button, it gets marked, so I can write different symbols. But Shift doesn’t work. Clicking it does nothing. And there is no Alt.

I tried to work around the problem by forcing Android Chrome to use Desktop mode, and then it looks like this: Screenshot (11 May 2023 09:35:34) - Google Drive

This is what happens when I tried it on iPhone: DSC_0561.JPG - Google Drive

It’s an older model (6S), so that might have something to do with it, but then again, maybe not.

For mobile devices, it’s important to add viewport meta tags to resize the document in the <head> section:

<meta name="viewport" content="width=device-width, user-scalable=no">

(Note, this is a general mobile web development thing, not specific to KeymanWeb)

You should also include a DOCTYPE declaration at the very start of the file to ensure that browsers treat your page as a modern page:

<!DOCTYPE html>

And finally, also include a “charset” meta tag in your <head> section:

<meta charset="utf-8">

Putting that all together, you’ll get something like this (I’ve also fixed your out-of-order </head>, removed an extraneous <body> tag, and made a couple of other minor fixes around formatting:

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta name="viewport" content="width=device-width, user-scalable=no">
	<title>Klavaro esperantujanisma / 𐑒𐑤𐑨𐑝𐑨𐑮𐑩 𐑧𐑕𐑐𐑧𐑮𐑨𐑵𐑑𐑪𐑢𐑨𐑵𐑦𐑕𐑫𐑨</title>
	<style>
h1 {
  font-family: "Arial", Times, serif;
  font-size: 2.5em;
}
h2 {
  font-family: "Arial", Times, serif;
  font-size: 2.1em;
}

a {
  color: #000000;
  text-decoration: underline;
}

</style>
</head>
<body>
	<center><br><br><h2>KLAVARO ESPERANTUJANISMA</h2><H1>𐑒𐑤𐑨𐑝𐑨𐑮𐑩 𐑧𐑕𐑐𐑧𐑮𐑨𐑵𐑑𐑪𐑢𐑨𐑵𐑦𐑕𐑫𐑨</h1>
<A HREF=https://esperantujanismo.net TARGET=_BLANK>esperantujanismo.net</A>
		<br><br>Rimarku, ke la klavaro adaptiĝas laŭ via sistema klavaro, kaj tial ĝi povas funkcii iom malsame ol la surekrana klavaro.<br>
		𐑮𐑦𐑫𐑨𐑮𐑒𐑪, 𐑒𐑧 𐑻 𐑒𐑤𐑨𐑝𐑨𐑮𐑩 𐑨𐑛𐑨𐑐𐑑𐑦𐑡𐑨𐑕 𐑤𐑨𐑘 𐑝𐑦𐑨 𐑕𐑦𐑕𐑑𐑧𐑫𐑨 𐑒𐑤𐑨𐑝𐑨𐑮𐑩, 𐑒𐑨𐑢 𐑑𐑦𐑨𐑤 𐑡𐑦 𐑐𐑩𐑝𐑨𐑕 𐑓𐑪𐑵𐑒𐑔𐑦𐑦 𐑦𐑩𐑫 𐑫𐑨𐑤𐑕𐑨𐑫𐑧 𐑩𐑤 𐑻 𐑕𐑪𐑮𐑧𐑒𐑮𐑨𐑵𐑨 𐑒𐑤𐑨𐑝𐑨𐑮𐑩.
		<br><br>
	    <textarea cols="92" rows="15"></textarea>

<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>

  <script>
    window.addEventListener('load', function () {
      keyman.init({ attachType: 'auto' }).then(function() {
        keyman.addKeyboards({
	  id:'esperanto__sava_eujao',
          name:'Ŝava de Esperantujanismo',
          languages:{
            id:'eo',
            name:'Eujao'
          },
          filename:'js/esperanto__sava_eujao.js'
        });
      });
    });
  </script>

		</center>
	</body>
	</html>

Ah, now it works a lot better! Thanks :smiley:

There’s just the issue with Shift not working and ALT missing left :slight_smile:

I mean on Android and iPhone. It works well on computer with keyboard.

I wonder if certain keys not working on Android is a problem with your mobile keyboard itself, that is, what’s stored in the .keyman-touch-layout file and what is what is displayed on the Touch Layout tab in the Keyman Developer program.

For example, the Shift key on the “default” layer, needs to specify that the layer should change:
image

And likewise the Shift key on the “shift” layer needs to specify a Next Layer of “default”. (It is confusing that “default” is used in a number of contexts.)

But I’m using the online ones.

<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>

But I’m using the online ones.

Assuming this is in reply to @drowe’s comment:

Those resources are for the “keyboard interpreter” - KeymanWeb. Those are completely different from your keyboard - “Sava de Esperantujanismo”.

If the issue is in your keyboard, you’ll see the same issue regardless of whether you use the “online ones” or “locally-hosted ones” for KeymanWeb. It’d be esperanto__sava_eujao.kmn and/or esperanto__sava_eujao.touch-layout you’d need to look at, within Developer.

Ah, I misunderstood.

It works fine on the computer/keyboard version. I’m not sure what I have to do here to get it to work.

Is the keyboard code available? I’d be interested in seeing the .keyman-touch-layout file and the .kmn file.

The things that aren’t available on the site, I can make downloadable tomorrow. Thanks for the help! :blush:

Here they are. I think these are the right files: EUJMO.zip - Google Drive

On the “default” layer (as well as the “shift-ctrl” and “shift-ctrl-alt” layers), the Shift key (“id”: “K_SHIFT”) needs to include “nextlayer”: “shift” in order to change to the “shift” layer. Similarly, the Shift key on the “shift” layer needs to include “nextlayer”: “default” so that you can leave the “shift” layer.

You can change these by (very carefully!) editing the .keyman-touch-layout file, but it is far easier to use the Keyman Developer program to make these changes. (You can see the screenshot I posted previously.) You’ll need to make a change on all four layers.

If anything isn’t clear, please write again.

Thanks for the help. I’m very confused about what I need to do here. If it’s not too much to ask, could you give it a go? I would be really grateful.

Are you wanting someone to take your files and submit them to the keyman repo, or what are you asking for? If you want them submitted to the repo, we will also need a readme.htm and welcome.htm file. The readme.htm is just a generic file that says what the keyboard is for. It is available when the package is first opened. The welcome.htm general gives the layout or keystrokes needed for using the keyboard.
If we were to do this, the keyboard would be available on the Keyman Web page, but you would still have to do the work to add it to your own webpage.

I would be very happy with just the files working, until I can figure out how GitHub works. First and foremost, I want my online keyboard to work as it should.

Try replacing your esperanto_sava_eujao.keyman-touch-layout file with the following one and then recompiling the keyboard.

esperanto_sava_eujao.keyman-touch-layout (25.1 KB)

I will try that. Thanks!