Librem5 - A custom squeekboard keyboard tutorial

Yes, I should have said blank line. And for anyone wondering, this is how the character is represented:

^$

This is how to create a file with a blank line using echo, replace that character using sed, and print the contents using cat:

#!/bin/bash
FILE=/path/to/file
echo "" > $FILE
sed -i "s|^$|REPLACEMENT TEXT|" $FILE
cat $FILE

Output:

REPLACEMENT TEXT
4 Likes

Okay, resizing fixes are applied to repo. You don’t need to change the script to apply the changes, I combined them into a single file. It also makes it easier for manual install.

After some testing I can say that install script set everything to a functional and bug-free state. But that does not mean that there aren’t any issues. :smile:

The script removes unused files, but there is a way a file will be forgotten.

  1. Install custom color layout.
  2. Install default color layout with resizing.

This way glassy-style.css is still present. It just will be ignored, so it does not affect the currently install.

And now a bit more tricky - I already told it in post 107 (but may not well explained enough). glassy-styles.css is used for keyboard custom style, but also for Phosh custom style. The Squeekboard custom style contains 3 lines:

@import url("colors/pink-glass.css");
@import url("osk/squeekboard-colors.css");
@import url("osk/scale_1.0_and_2.0/squeekboard_resizing.css");

The Phosh custom style contains those 3 lines:

@import url("colors/pink-glass.css");
@import url("backgrounds/bg001.css");
@import url("styles/glassy-style_phosh.css");

Combined (both styles applied) it contains 5 lines:

@import url("colors/pink-glass.css");
@import url("osk/squeekboard-colors.css");
@import url("osk/scale_1.0_and_2.0/squeekboard_resizing.css");
@import url("backgrounds/bg001.css");
@import url("styles/glassy-style_phosh.css");

You may already see the issue. Installing custom color overwrites this file and removes Phoshs custom style. Removing that file also removes the Phosh custom style. And as you see, both (Phosh and Squeekboard) are using same colors file - removing this also removes colors entirely from Phosh.

Right now the issue only happens to me, since I’m the only person who has the Phosh custom styles. But I want to release those some time later. Could you handle this as with gtk.css file? Checking if there already exists a file and if so, just adding the lines that are not already in or on remove checking if it contains more @import rules than those 3 lines and if so, just remove the 2 lines (without color line). Removing no color line also means not to remove the pink-glass.css file. And removing not the glassy-style.css means not to remove the line from gtk.css.

Sorry if this is a bit complicated. But after this the install script would be perfect. The installation is a bit more complicated to make it easier for people to modify my work.

Edit:
I will test the uninstall script later.

3 Likes

I haven’t done extensive testing, but I think my recent updates should work well to selectively add/remove files and css code in the way that you want.

Please let me know if I missed something.

2 Likes

I just realized something about my repo and a possible mistake I made:

After I forked your repo, I did not create a new branch; instead, I added and modified files directly in my repo’s main branch. I did the same for the mobile-config-firefox repo. I don’t now if that causes any problems, but I really hope not.

Do you know if there is a correct way for me to pull the updates from your Squeekboard-Layouts into mine?

2 Likes

It doesn’t really hurt anything to work in your main branch. It just makes it hard to work on multiple things.

To keep in sync with a repository you’ve forked, use git remote to set up tracking.
In your repository:
‘git remote add upstream [forked repository URL]’

You can replace ‘upstream’ with any name you prefer. Then you can:
‘git fetch upstream’
‘git merge upstream/main’

2 Likes

I also have to learn more about Git. But I also think that makes no problem for this little project. I just have to figure out how to merge your request.

@Emma:
I found one bugs and I guess it is the last one. It depends on the issue I wrote above. Once glassy-styles.css contains something, the @import-rules for osk-directory wont be added on install custom color. So let’s say from my previous post the file exists like example 2, but will not become example 3 as it should be. That results in a colorless keyboard.

It took me some time to find this, also because other “bugs” depending on my own phone and never will happen to other people. :smile: uninstall script is untested yet. There are maybe also some issues, but I want to take more time to test it.

I hope I do not annoy you with my QA-skills. But let me say that I am really thankfully for your work! I hope some people will like and use it (and maybe push back some other languages).

Edit:
If everything works fine, the colors of default and custom color should look like this (150% variant):

If it looks something different, please let me know.

2 Likes

Thank you very much for this!

I have now merged the upstream updates into the main branch of my repo.

This issue has now been fixed. It was a simple typo; I had used the wrong variable name in that small section of code.

I’m glad you like it, and I’m not annoyed. You have been very helpful in finding these bugs so that I can fix them. I may add a US English keyboard at some point next year; I would need to make new modified versions of the one I’m currently using so that it supports different display scales like yours.

2 Likes

Just share your layout to me. I will create the other scales in no time and want to check it anyway to provide the same quality over all layouts (only technical stuff, not about the keybindings) on this repository.

2 Likes

I’m currently using a slightly modified version of the layouts designed by @SteveC. I shared my modified version on post 70 of my Mobile-Friendly-Firefox thread.

The only modifications that I applied:

  • switch the slash (/) and question mark (?) keys so that the slash is on the default view in the portrait mode layout
  • move the numbers section from the right side to the left side in the landscape layout

Since the code was originally posted here on the forums with no copyright information, I don’t know what to do. Are my minor modifications enough to justify putting my own copyright info in these files and adding them to my repo? @SteveC, would that be acceptable to you, and would you like to be credited? As with the rest of the code in my Squeekboard-Layouts repo (and @Ick’s repo), I would use the SPDX-License-Identifier GPL-3.0-or-later.

2 Likes

I see. I mainly want to support my own design in this repository. I mean, I have no problem to add non supported designs in a separate folder, but than proper color support etc is not given.

However, this could be translated into my design.

There would be little changes as you can see, but this shouldn’t be a problem at all. Would you like to test such? And if so, 200% resolution or which version do you want to use? Edit: Forgot to translate modifier for screenshot. :sweat_smile:

3 Likes

Glad to hear my time on the Librem5 was worth something to someone. (I never could get the damned $2000 boat anchor to make a phone call–and tech support never responded to the last log file I sent them, so it’s collecting dust now. Someone made a pile of money off of me…)

Feel free to modify the keyboard. You can credit me with a “based on a design by SteveC”.

I actually very deliberately put the question mark where I did. I never use my current phone’s keyboard for anything other than text messages, and the / is nearly useless for that, but the ? is very useful. Obviously most people differ on that or the current designers wouldn’t bury the question mark.

(I know the ? is a “capital” symbol on a real keyboard, but on a real keyboard that doesn’t make it any slower to access…on a rinkydink phone keyboard it’s two operations that must be done in sequence rather than simultaneously–or it’s a hold-down, which I hate for common symbols, like (just for instance) periods, apostrophes, and commas. If I had a nickel for every time I sent “isnxt” instead of “isn’t” or something similar, I could fill the $2000 hole the librem 5 paperweight left in my finances.)

3 Likes

I understand, and that makes perfect sense.

I can certainly test new layouts; if you add them to your repo, I can pull the updates into mine and modify the install script to incorporate any new layouts.

I am currently testing that new phosh-osk-stub keyboard and trying to learn how to modify it.

Thank you very much for the keyboard layout and your permission to modify and share it! It has been my favorite layout for the Librem 5 and has allowed me to edit css code much easier than the default keyboard.

I’m sorry that you had such a bad experience with your Librem 5 and with Purism support.

2 Likes

Right now I released wide screen keyboard plus more custom colors.

3 Likes

I created a new branch on my fork and updated the install.sh script for your new release. I also linked Custom-Color/Screenshots/ScreenshotsOSK.png on the README.md so that there is a nice embedded image showcasing your work, and I have created a pull request.

2 Likes

I already saw it, thanks again!

You were a way faster than expected. I am not done with everything yet (or better said with things like readme and picture upload). It was just a bit too late yesterday to finish this job. I will do so later.

2 Likes

Yeah, I happened to notice your post and checked it out. I had already written most of the code a while ago, using arrays and variables to apply the code. So I just needed to add the new variables and array items and then make the user prompt (which I do by just copying and editing one of the other user prompt sections).

3 Likes

Another shout out to @SteveC and your extended keyboard! Copy-pasting with context menus is just too hard on this phone, with the keyboard jumping on and off, the menu appearing below the keyboard, blinking or not appearing at all, selection disappearing when I try to copy it and so on. SO I’m happy to do ctrl-c ctrl-v without having to switch to the “Terminal” layout every time.

Here I adapted it to the Swiss-French layout and added some Sanskrit letters as I happen to learn Sanskrit (I used to switch between layouts but it gets tiring after a while to switch back and forth when I’m writing French text with Sanskrit words in the middle)

I would gladly share the yaml file in case there are other Librem5 users in Switzerland who need to type both French and Sanskrit. But somehow I expect I’m the only one intersecting all those circles :smile:

EDIT: actually I realise it would almost work fine for Swiss-German as well, there’s only the ß (I had to copy-paste that from Wikipedia) that’s missing…

3 Likes

Thank you for the kudos. I’m glad people feel free to swap out the “special” characters on that keyboard. I’d love to see a future development where people can customize such things on a keyboard without having to update a yaml file.

I’ll update everyone who cares about my keyboard:

The directions I followed basically were to copy one’s custom keyboard to the terminal keyboard, once you were sure it worked. You end up then with identical terminal and “regular” keyboards.

I may just create a special terminal version that swaps the ? and / back (I find the ? more useful for texting, and the / more useful for typing in a terminal; my design reflects the fact that on most phones I text far more than I program) like someone upthread suggested…and also most critically, put a tab key on the “main” keyboard since I use tab completion a LOT. In essence I didn’t anticipate having a use for a terminal mode–which based on my past experience with Android Surveillance phones, makes some sense.

1 Like

Thanks to @lwriemen my Squeekboard-Layout got an US-layout update. If someone wants to try out, let me know your feedback. Click on my “avatar” to find the link.

2 Likes

Hey, nice update. I’ve recreated a wip branch and fixed some issues in the install.sh script, but I’m unsure about one thing.

Fixed issues in my wip branch:

  • fixed: changed $KEYBOARDS to $TERMINAL for section to copy default-color yaml file into terminal directory
  • fixed: added $LANG variable assignments to user language selection section

In this commit, the user language selection section was added, including a $LANGUAGE variable assignment for each language option but no $LANG variable assignment.

In this commit, the old and unnecessary code was deleted (as the header had instructed), but $LANG variable assignments were still not added.

Basically, the code had previously set both variables explicitly, but now only one variable is set according to the user selection, with the other variable being unset/undefined.

Because the $LANG variable is unset/undefined, I think that this commit was unnecessary and should probably be reverted when my above fixes are applied, though I have not tested this.

In the install.sh script, the purpose of the $LANGUAGE variable is to inform the user of the language that was selected, while the purpose of the $LANG variable is for the behind-the-scenes configuration (adding the selected keyboard to the evdev.xml file).

@lwriemen, could you test this? Also, thanks for your contribution to @Ick’s project.

2 Likes