Librem5 - A custom squeekboard keyboard tutorial

Maybe? I still have a lot to learn about using git. The Codeberg site is required for creating and editing Releases, and I set tags to be created when creating a Release. It hadn’t occurred to me that I could have deleted the tag using git in the terminal.

1 Like

Custom colors. Default does not need any CSS (but CSS for resizing is an option).

squeekboard_colors.css defines what elements have to be colored, pink-glass.css defines the color. In other words squeekboard_colors.css has to be installed and pink-glass.css is one of many possible colorizations where exactly one has to be choosen. Right now it’s the only one, but it can be more in future. So let’s say easier: one of the files inside Squeekboard-Layouts/colors at main - Squeekboard-Layouts - Codeberg.org has to be chosen.

In future I also want to release my Phosh customization. Both things are using the same files inside this directory (to make editing easier). If you open that file you can already see what I’m speaking about. And in fact, the name came from the Phosh customization, if someone wonders.

You don’t need to worry about this. The correct order is already inside glassy-style.css. Thanks to your question I found a bug I currently fixed. :+1:

Custom color:
@import url("themes/glassy-style.css");
Default color (no resizing):
nothing (also no other CSS-files required)
Default color (resizing enabled):
@import url("themes/osk/scale_1.0_and_2.0/squeekboard-colors.css"); or
@import url("themes/osk/scale_1.25/squeekboard-colors.css"); or
@import url("themes/osk/scale_1.5/squeekboard-colors.css"); or
@import url("themes/osk/scale_1.75/squeekboard-colors.css"); … depending on the chosen screen scale. Don’t forget to do the same for custom colors in glassy-style.css.

In best case you just add or remove that single line from gtk.css without changing anything else, because it’s the only file where other modifications could be registered. I created everything else on own files.

Thank you for helping here. :slight_smile: I will test everything at the end and of course help where I can.

2 Likes

I’m happy to help.

I have started creating the install script and will be working on it for a few days. And I also will make an uninstall script. When I am ready to share, I will clone your repo in my Codeberg account and add the scripts there for easy downloading.

3 Likes

Just fork it. This way you have everything without a need to copy and you can start a merge request when you’re done. It’s also a perfect opportunity to learn about this workflow (at least for me). :smile: On a fork you also should see if I changed something.

4 Likes

I have forked your repo, added automated install and uninstall scripts, updated the instructions in the README.md, and issued a pull request to merge my commits into the main branch on your repo:

2 Likes

Thank you, I’m looking into it, test and merge as soon as I can.

1 Like

The scripts are cool. Especially the “i don’t know” answers. :+1: The install script seems to have some issues yet.

Issue #1:
Installing default color with resizing enabled results in wrong line inside gtk.css.
It is @import url("osk/scale.../squeekboard_resizing.css");, but it should be @import url("themes/osk/scale.../squeekboard_resizing.css");

Issue #2:

  1. Install custom color layout.
  2. Install default color layout without uninstalling previous install and with resizing adjustment.

Result: in gtk.css there are both lines

@import url("osk/scale.../squeekboard_resizing.css");
@import url("themes/glassy-style.css");

And since glassy-styles.css also contains a resizing import, it overwrites the first apply.

Could you check if glassy-styles.css contains other lines than the 3 ones we add via script and if so, removing just squeekboard-colors.css and resizing lines, otherwise just remove gtk.css-line with glassy-style.css and also files that are imported in glassy-style.css plus this file itself (and empty folders).
This way we have a clean install without trash-data.

1 Like

I thought I fixed those two issues just now, but now I have another issue:

One of the copy commands is copying the entire repo folder instead of just the specified files. I will need to spend more time investigating this.

Nevermind. The issue was that I had multiple Squeekboard-Layouts folders; I was saving older versions to compare and contrast, but the install script searches for directories with that name.

Still more issues to fix…

2 Likes

You know, you don’t need to hurry. I also have some work to do with landscape versions (thanks to a bug of Squeekboard). It’s done, when it’s done. :slight_smile:

2 Likes

Good point. I should probably take a break and test more later.

2 Likes

After some more testing, I think that I have fixed all issues.

If anyone finds something that I missed, please let me know.

2 Likes

Looking into it tomorrow.


I’m close to finish the widescreen layout. I just need to adjust some colors and create the different scaling versions.

2 Likes

Thanks for pointing that out; I guess I hadn’t tested enough. This is issue is now fixed, and I have tested more thoroughly.

For anyone wondering, the problem was that the sed command cannot insert strings into blank files, and I was unaware of that. I have replaced the touch commands with echo "" > $FILE in order to create a new file with a blank space, which is different from a totally blank file. Now the sed commands work in all use cases.

I also cleaned up the code for better readability as well as having it remove unused files and directories.

2 Likes

To be more precise, the file ends up containing a single line feed (LF) character. This is because echo, by default, always outputs a LF. If however you do echo -n "" >$file then the file will end up with length 0. So in the first scenario, the file contains a single blank line (where blank line means a line of length 0).

4 Likes

Okay seems to work. I’m testing further, but I also found a bug created by my own. Resizing of default color does not work entirely. This is because I renamed something in default color files to automatically pick system colors. I think I need to create different resizing files for this. This should be just a minor change for install script.

3 Likes

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