MagnOS
By
@ABN
- 4 Devlogs
- 6 Total hours
Like it's magnetic!🎶
Looks pretty sketchy…
Introducing the MagSketch app, which comes with different colours, pen sizes, and even a colour picker (I’m pretty proud of that one).
Getting the canvas to work was pretty challenging, but there are plenty of guides online that really helped speed things up.
Ship #1
I made a magnet-themed OS, with a red and blue design. I added a welcome window and a notes app, both of which can be dragged around. For some bonus features, I added the ability to drag the app icon, as well as an editable taskbar "To Do" item. The most challenging part of designing this was getting the icon for the app to be draggable without having the app open when dragged. I am proud of this OS, since I have limited experience with HTML, and almost no experience in combining it with JavaScript. To test it out, just head to the attached link (it's hosted using Github pages).
What a drag…
I’ve updated quite a bit since the last devlog, so the windows are now draggable, closable, openable, all that jazz.
We also have some editability: the MagNotes app is up and working as a simple notepad, and the to-do list in the taskbar can be updated.
One app is a little boring, though, so I think we can step things up in the coming days. The end of WebOS 1 is in sight!
Are we sure we’re on task right now?
The bottom bar is ready, except for that to-do button in the centre. That can be made inputtable and working once I get a bit more in-depth on my JavaScript.
Right now, we have a window of content, the taskbar, and a nice screensaver background (this might be a placeholder, but I kind of like it).
Moving on to some clickability!
Welcome!
I’ve made the welcome page for MagnOS, including the basics on what it does, and a little introduction to how magnets work. That’s the basic HTML and CSS, but JavaScript (a.k.a. the hard stuff) is yet to come.
If this pans out how I hope, I think the OS can really be a cool thing to mess around with, and I might even use the code for my personal productivity!
