My very own WebOS
- 4 Devlogs
- 3 Total hours
This is my very own OS that can be run in the web!
Ship #1
The last few features are up. I fixed a few bugs where the apps kept going down the screen instead of wrapping back to the next line, and added a few more apps of my choice. I believe the gallery is my best work yet.
Given that the last two projects I worked on had a space-themed, aesthetic UI, I decided to go with something of the opposite sort this time. So everything is badly mouse-drawn by yours truly this time. This is likely the last major change, other than finishing up and adding a few more apps.
Bugs fixed:
- apps didn’t move/didn’t snap to grid
- issues with weather app not actually finding weather
Top bar and clock were added. Pulled the clock out of the welcome screen and into a top bar that sits over everything, like a real menu bar. The bar shows the OS name on the left and a few menu items on the right (Welcome, Notes, Time). Moved all the styling into style.css and all the logic into script.js so the HTML stays readable. I also added windows you can drag. Each window has a little red close dot in the header. I kept moving the window by the absolute cursor position instead of the change since the last frame, so it would teleport under the mouse the instant I grabbed it. Icons were also added.
Bugs I hit:
Dragging windows off-screen - Nothing stopped a window from being dragged up under the top bar, and once the header was gone you couldn’t grab it back.
Click vs double-click on icons - The single-click select fires during a double-click too, so the icon flickers selected then deselected as the window opens.
The close dot starts a drag - The close button is in the header, which listens for mousedown to drag, so pressing close also arms a drag.“Time” in the top bar looks clickable but doesn’t do anything yet.
To Do:
- Clamp window dragging to the screen
- A dock or a way to reopen closed windows
- Maybe more apps (a little terminal, or a photo viewer)
- photo viewer
I’m starting on this WebOS project because I want to learn some new things in the later versions of the guide, which I might be able to then use to improve my personal website. For now, here is the basic webpage, I have! This first part took very little time to put up and was mostly bugless, as I have previously done similar things.
To Do:
- make the draggable windows
- personalize the site
- make the profile pic changeable (?)
