Komi OS
- 3 Devlogs
- 13 Total hours
This is Komi OS, a WebOS created by me that is heavily inspired by Komi Can't Communicate.
This is Komi OS, a WebOS created by me that is heavily inspired by Komi Can't Communicate.
Komi OS devlog 3
I believe my cold is starting to go away which is good, and I’ve been able to do little bits here and there this week with my OS and I’m super excited to continue working on it. I worked mostly on the music player since the last devlog and I was able to add a playback slider that lets you seek through the song thats currently playing while also showing the current time on the left, with the total duration of the song on the right. I added previous/skip buttons that let you move between songs in the playlist (current total of 4, which are 2 opening themes and 2 ending themes from the show) and I added/switched a lot of buttons to have icons like the play/pause button, previous/skip buttons and both sides of the volume slider. Because of the added playback slider and the icons taking up more space I had to increase the window height of the music player and I also slightly darkened the background of the player too to increase the contrast of the text and buttons and stuff in front of it to make them easier to see on lighter cover art. Lastly, if the song ends it will automatically move forward to the next song, the same thing if a song was currently playing and you skip it’ll autoplay the next song, otherwise if you skip while paused it’ll stay paused.
Outside of the music player, I added drop shadows to all the windows and the current focused window gains a darker shadow to show that it’s focused. I also began work on a boot screen that I’ll probably create a cooldown for so that you don’t have to watch it boot up every time you reload the page since it’s pretty long but I’m having a really great time working on this project, it’s been really fun and I can’t wait to get to work on it some more. If I forget anything else I worked on in this devlog I might mention it in my ship.
Over the last two days I:
I first implemented the nice blurred background you quite often get with music players, along with the music cover art. Behind the scenes I got the play/pause button to work and play the current song as well as a working volume slider. I’ve also implemented a function that lets me change the song that’s currently playing however I’ve not yet attached it to any buttons or anything so I can only do it via script. I think I’ll either just have forward/back buttons that move through a hidden playlist or I might make an actual playlist that you select from if I can think of a design for that. Almost forgot to say that I also have the music and artist’s names appear alongside the cover art and I created a spotify-esque icon to make it more obvious to people what my app does before they even open it. I believe I covered everything, a couple of minor annoyances when trying to implement things but I guess I’ll count that as new web ball knowledge.
Gonna preface this by saying I really should’ve made more devlogs to split this up more because now I’m going to have to try and remember everything that I did, so here goes. I followed most of the guide initially just to get a similar setup working, but from the beginning I knew there were some fundamental things I wanted to change about the project like making windows use classes/OOP so that I can have multiple of them and easily interact with specific windows and another thing I wanted to change was just having some cleaner/nicer ways of doing things since I noticed the guide was kept relatively simple for absolute beginners. Anyway, once I had gotten as much as I wanted from the guide, I split off and started making the project fully my own. Windows being fully (I believe fully, altho I still have to do some cleanup) converted to using classes along with the ability to have multiple windows of the same app open is really the big main obvious one, however I have made so many tiny changes that don’t show visually which you’ll notice a lot more while you’re using and interacting with it, like adding mini app icons on window headers, changing the z-index ordering so it doesn’t infinitely go up, creating my own selection code for icons on the desktop including them requiring a double click to open, making some text/images non-selectable just like real operating systems and so many more little tweaks that really make it super intuitive to use. Currently I’m stuck on something trivial, I’m trying to decide between two images to use as the operating system’s “image” but I’m just going to set that aside for now, so instead next I think I will be working on adding either a music player or a settings menu that will allow me to change out the wallpaper, and maybe also save/remember anything you do on the operating system. Or I may leave that to WebOS 2 and just work on getting a nice base WebOS 1 page working by customising the operating system more to make it more unique. Either way I guess we’ll see. Sorry if you had to read this entire devlog I understand it’s a lot, so thank you very much.