Laetus HTML keyboards for iOS! (Patreon)

This is a preview post where I explain some of the things about Laetus and html keyboards also how to use what i've created. At the time of this post i'm currently waiting on the Laetus update to be pushed to Sparks repo. Once it's out I will make another post with a download link for patrons. All the keyboards shown in this post will be included.

I recently discovered Laetus allows html keyboards, but I didn't find any. I did find some image keyboards for it but seemed to limited to my taste. I decided to give a shot in making some of the first html keyboards.

Being the first I ran into some issues with Laetus's html feature. I quickly reported these bugs to @SparkDev_ and throughout the week of him fixing a bunch of things I think Laetus HTML is in a really good state. Follow his twitter to keep updated.

Here is what I came up with. A full html keyboard. Being that it is fully html users can modify these keyboards. In fact all the keyboards I list here are in one html file. Each keyboard theme is applied by adding a .css file. A css file is where you style the keyboard. You can change the text color, background color, outline, opacity, etc. I've made these different keyboard css files to show users what can be done and also shows how it was done so you can customize your own.

To clarify, to change themes all you have to do is uncomment a css file that is in the index.html. I will explain.

The image above is what will show stock. Notice the css files are commented out. This means their code will not run. By default I do provide a styled keyboard so you will still see a keyboard, but lets say you want the abstract keyboard.

To apply the abstract keyboard you remove the <!-- --> around that css. This will uncomment that css file and the keyboard styles will be applied. You can do this on your computer, or in Filza. The files are installed to /Library/Laetus/ on your phone.

If you would like to customize one of these css files I would recommend going to /Library/Laetus/Neo.theme/themes/ this is where all the css files are located. Copy the one you want to modify and change its name. You can name it whatever you want. Then in the html below the other css files add <link rel="stylesheet" href="themes/YOURCSS.css"> now it will be loading your css file.

If you create some awesome custom keyboard and would like to share it, send it to me and I can add it to the package for other users to use. My twitter is @JunesiPhone 

The custom glyphs in these keyboards like the shift, return, spacebar, emoji, dictation, etc. Is all in a font. It's in a font because fonts can be styled in css where as images can't. Also it being in a font they can be sized without distortion unlike images. If you would like custom glyphs added to this font send them over and I can add them to the font.

There is a ton of things that can be done with these html keyboards, this is just a start. If you have any questions, recommendations, or just need help with css my discord is https://discord.gg/cwQtRHx

Enough talking. Props if you read all that, here is the keyboards currently included in the package.

Default keyboard. This is shown when no other css is selected.

rainbow is a slight variation of the default

teal showcases box-shadow in css

mac shows a key effect that looks raised with box-shadow

darkwhite shows how the key background can be changed on touch

Abstract shows you can change the background on keys separately

rounded shows rounded keys but also an animated background

background shows how you could use a background image. Image courtesy of @FrenchiTouch

shaped shows how you can change different corner radius

popup shows a different key animation, separate background and text colors.

These are the current keyboards that will be included. Currently they are portrait only and only support English and Spanish keyboards. More languages can be added if required.

This set will be released within a few days to patrons as a thank you for your continued support.

Thanks!

Links:
Laetus Dev Twitter: https://twitter.com/SparkDev_
Laetus repo: https://sparkdev.me/repo
JunesiPhone Twitter: https://twitter.com/JunesIphone
JunesiPhone Discord: https://discord.gg/cwQtRHx