Komi OS devlog 4

It’s been a while since I wrote my last devlog, just been starting university, but I’ve made a ton of changes since my first ship and I’ll try to remember them all. First off, the boot screen has been cleaned up, the boot video will now stop at the correct time consistently on the beat no matter how bad your wifi might be, and I created a little Windows XP logo cutout on the bootscreen just as a nice little thing. The main difference you’ll notice immediately after it’s booted up is that there is now a taskbar! I always knew I was going to add this eventually I just wanted to implement it properly after I had gotten the apps and desktop working as I intended. There are three apps on the taskbar currently which are the notes, music and settings apps and the ones displayed on the taskbar differ slightly to the desktop icons, where the settings icon is not but there’s an extra app/game that I added there instead. When you click on app icons in the taskbar they pop down and back up, and when you hover over them the background behind them also lights up to show which app will open if you were to click now. I added my own custom right click/“context menu” which I also knew I was going to add at some point and currently it only has copy and paste (I say only but pasting was a pain to program, more than you’d initially think) however more options will be added to it in the future. Now inside the settings app I’ve began adding a side menu where if you click on each one it’ll take you to a different settings page, and the first one allows you to pick a different wallpaper from a selection of minimal Komi wallpapers which I’ll have save eventually in your browser when I implement user preferences. That about page is just there as a template currently just so I could test page switching but I’ll add to that in the future and also add more pages, one last thing for the settings app though is in the sidebar you can see little coloured icons to make it immediately more obvious when looking for a specific page. The last app I added since the last devlog was embedding eaglercraft into an app (which wasn’t as easy as I’d hoped it’d be) however I managed to get it working consistently enough to be able to keep it on my site, the corners of it are clipped to the window so that it doesn’t look out of place and it fits right in. I also added a ton of tiny tweaks, too many and too small to list but just things like changing the time to only show the time just to simplify any clutter in the top right, shadows were tweaked on the desktop icons as well as a dark black solid shadow was added to all of the text under the icons and I added a purple highlight colour when selecting text to match Komi’s haircolour. Other things I could remember were things like adding a favicon and moving some of my styling that had snuck into my HTML back into my CSS file but now I’m really reaching for stuff and this devlog is long enough anyway. Excited to continue working on this

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.

Komi OS devlog 2

Over the last two days I:

1. Got a heavy cold, not fun
2. Started working on my music player, much more fun :D

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.

Komi OS devlog 1

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.