Ship #2

@ABN on MagnOS · 21 days ago

I made a magnet themed OS called MagnOS. This OS’s standout feature is the ability to flip the polarity of the windows to make them either attract or repel each other. The goal is to let people be able to organize related windows and put them where they want to. I added a switch which toggles window outlines between red and blue, and linked windows can be dragged together. Along with this feature, I also added a scientific calculator, a music player, and a search app. Windows are also scalable now by dragging the corners, allowing even more freedom to the user. So altogether, 5 new features. The most challenging part was getting the magnetism feature working; I couldn’t find any references online, and even after the core function was working, there were a bunch of number tweaks to be made. Generally speaking, I’m proud of making an HTML site that goes above and beyond, expanding on my previous ship for the more limited mission. I’m also proud of some of the intentional choices I made, like adding feedback to windows snapping and creating gradients on the magnetism switches. For anyone who wants to test my project, just head to the demo URL, since it is just a web page you can run in your browser. The magnetism stuff should be pretty intuitive to use, but it can be a bit janky if you spawn many windows on top of each other. Thanks for reading!

3 devlogs
10h
7.34x multiplier
71 Stardust
WebOS 2

Try project → See source code →

Open comments for this post

@ABN on MagnOS · 21 days ago

6h 49m 32s logged

Final Update

Scalable Windows

It wouldn’t really be useful for productivity if you couldn’t shrink the apps that can stay off to the side, so now they can be shrunk and still attached to other windows! This was definitely the hardest part, and I’m not 100% sure it works in all cases when windows are already magnetized.

Snapping Design

Previously, I was able to make the windows’ edges change to white when connected. After doing some more Googling, I was able to make a sort of pulse that acts as feedback when the super snaps the windows together (I’m very proud of this). If that’s not enough, it also plays a snap sound now.

Search Fix

I noticed that some OS’s make their search app replace the current tab, which makes the OS tab go away. I fixed mine to have it open a new tab with your query.

End of the Line

This will be the final devlog for MagnOS, at least before my first WebOS 2 ship. I’ve added 3 new apps and a big new feature, which I hope Stardancers will enjoy.

Open comments for this post

@ABN on MagnOS · about 1 month ago

2h 8m 18s logged

Big Update

Magnetism Features

Click a switch on a window to swap it between red mode and blue mode. Opposites attract, while like poles repel. The main feature of this OS.

Calculator

Not just a four-function one, but scientific with all the bells and whistles!

Music Player

Comes with all the basic features you’d expect (except maybe more than one song, but I feel like the song choice is self-explanatory).

Next Time

I have a search feature that I want to properly flesh out so that it’s actually usable. Also, I want to make scalable windows, but I’ve been having a lot of trouble getting that to be separate from the dragging functionality.

Open comments for this post

@ABN on MagnOS · 3 months ago

44m logged

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

@ABN on MagnOS · 3 months ago

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).

3 devlogs
5h
WebOS 1

Try project → See source code →

Open comments for this post

@ABN on MagnOS · 3 months ago

3h 9m 5s logged

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!

Open comments for this post

@ABN on MagnOS · 4 months ago

1h 23m 34s logged

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!

Open comments for this post

@ABN on MagnOS · 4 months ago

55m 55s logged

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!