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

I’m sorry, but I really don’t understand why I can’t get it to work. This program is so confusing to me. I’ve uploaded all the files I have, and I hope someone can take a look at it.

I’ll send you a link privately that you can try. I renamed the folder/files to remove the double underscore since that usage seemed inconsistent. Also, I recreated the .kps because every time I edited it the program crashed, so it might have had some corrupt in it.

Can you send me details on the crash you experienced? I cannot repro here

Thank you all for your help! Lorna sent me fixed files, but sadly the problem persists. It works fine on my computer, but Shift still doesn’t work on Android (Chrome). I can live without Shift-CTRL and Shift-CTRL-ALT, but I need Shift to access all the letters.

You can take a look here: https://klavaro.esperanto.one/

Maybe it was user error since I hand edited the kpj and kmn and kps files. :thinking:

Since I can’t tell which of the keyman-touch-layouts you were using, I’m not 100% sure this is the solution, but with the one I’m looking at, the “Next Layer” isn’t set appropriately. It needs to go the “shift” and it was set to “(none)”. So, select the K_SHIFT key and then look at the bottom right to select Next Layer. Do that for each of the layers. Sorry I didn’t catch that on the first round.

It’s a bit obscure, but the Desktop version is developed from the source in the .kmn folder as you’ve done. The web version also uses this source.

However, the mobile version can have a completely different layout and the source is separate. But, even if the mobile version is exactly the same as the desktop, you do have to double-check those shift states to make sure they are set correctly. I thought Keyman Developer was doing a better job of getting those set correctly, but I know in previous versions it wouldn’t set them right.

Hi. That is what I was trying to do before, but the program just refused to make any changes there. When I clicked I just got nothing. Like the option to change isn’t even there. That is why I asked for help.

Looks like this is resolved. The issue is that the k_shift key didn’t have a “Next Layer” set.

It all seems to work now, which is such a relief for me. I’m very grateful to you all!

I think it’s a little weird that there is an import function for the phone keyboard, which doesn’t import everything. For most people, I think it would make more sense that it carbon copies everything, and then you may remove the stuff you don’t need afterwards.

I’m not entirely sure what you are referring to here? Is this related to the development tooling? The touch layout import from visual keyboard normally does import everything from the desktop layout, but in reality there is a lot of work to turn a desktop layout into a viable touch layout. The usual next step after importing from the visual keyboard is to apply the ‘basic’ template to the touch layout – which rearranges the layout to a fairly common basic set of keys on each layer as a starting point. I would agree that this is not obvious and we are looking at ways of improving the touch layout designer.

OK, that makes sense. Since I’m a noob and not a developer, I always look for tools that have default settings that do the things people usually want to do, and let you tinker with the options afterwards. This part is to me one of those “just copy everything as is”-defaults that should exist. If possible, that is.

Yes, it is possible to create a webpage with your own custom keyboard. You can build and integrate a keyboard into your webpage using JavaScript and HTML. Here’s a general outline of the steps you can follow:

  1. Design your keyboard layout: Determine the keys you want to include, their positions, and any specific functionalities you require.

  2. Create the HTML structure: Start by creating the necessary HTML elements for your keyboard, such as a container div and individual key elements. You can use HTML buttons or any other suitable elements for your keys.

  3. Style your keyboard: Use CSS to style your keyboard, including key colors, sizes, and positioning. You can also add animations or custom styles to enhance the visual appearance.

  4. Handle user interactions: Write JavaScript code to handle user interactions with the keyboard. This includes detecting key presses, updating input fields or text areas with the corresponding characters, and managing any special functionalities you want to implement.

  5. Implement the keyboard behavior: Define the behavior of the keys, such as key repeating, shift or alt key functionality, and any other specific actions you want the keys to perform.

  6. Test and debug: Test your keyboard implementation across different browsers and devices to ensure compatibility and functionality. Debug any issues that may arise during testing.

  7. Upload your keyboard: Once you have a working keyboard, you can consider uploading it to a common repository like Keymanweb, if you wish to make it widely available to others. This would involve following the specific guidelines and processes provided by the repository.

Remember that the specific implementation details will depend on your chosen technologies and frameworks. You may also find existing libraries or frameworks that can help simplify the process of creating a custom keyboard for the web.

Wow that sure sounds like a lot of work. Or you could embed KeymanWeb which already does all that…

(FYI we don’t allow advertising on this site, so edited your post to remove the url)

This conversation has been resolved.

This topic was automatically closed after 14 days. New replies are no longer allowed.