WebOS 2 Devlog #10: icon implementation + taskbar remodeling

When i looked at the webos, i realised it missed something to look like an actual os. It wasnt realistic enough. So, i decided to do two changes to make it more realistic. Here is what it did:

Change 1:

I added some real user data in the taskbar. More specifically, the host device’s actual network and battery status and date. I used the the browser’s native navigator.onLine and the navigator.getBattery() APIs. I also made it such that the os actively listens for network connection drops such as when wifi is disconnected and battery charging/level events, and updates the data accordingly.

Change 2:

I also noticed that my entire os is filled with emojis for stuff like calculator, file manages (all the apps essentially), the taskbar, the browser, the sites in the browser, etc. THis made it look really unprofessional so i fixed it. I replace all system emojis with Google Material Symbols to make it look a lot better.

I did face one challenge however, the emojis in my website in my web browser weren’t being replaced by icons for some reason and I then realised that the iframe sites acts as a sandbox and they dont inherit the imported apis from the main html file. So I just injected a tag and imported the Google Material Symbols API directly in the isolated HTML code in my js file.

Change 3:

The goal of this change was ot allow the user to snap the taskbar to the top of the screen (Linux style). This was the part that took longer than expected. I originally just added an optoin in the settings to move my taskbar to the top of the screen but the pill-like, floating taskbar i had was really ugly when it was at the top. So, i spent like more than an hour and half trying out new designs and redesigning the taskbar so it looks good both when its at the top and the bottom and finalised a design that actually looks much better than what i had before. It now takes up like the entire bottom/top of the screen instead of floating in the middle liek before. That was all the changes made since the last devlog.