Devlog #9

New Apps!

• I added two new apps: a timer app and a simple browser.

• The timer app currently only supports 5 minutes. It has a start, pause, and reset button.

  • Initially, I got this funny glitch where the water height was decreasing upwards (see video) instead of downwards. I fixed this by giving the water div a position of absolute and setting bottom to 3px.
  • I also accidentally named id of the timer text to be the same as the id of the top-bar time, which caused the timer to display on the top-bar instead

• The browser was somewhat easier to implement. I set up a input box and a button, and programmed the button to open the link or search query that was inputted into the search box. I’m planning on adding an iframe to showcase the website directly on the OS instead of opening a new tab!

Some other changes

• I also split my css and js into separate files for each app to make future development more organized.
• PoseiOS now has a dock which you can run apps from!

Devlog #7

CSS and JS changes

• I rewrote some of my Javascript to make it more readable and understandable.
• I reworked the UI in PoseiOS to make it more blue-ish/sea themed.
  • The top-bar is more transparent and only has pill shaped background for the elements.
  • The apps have new highlight/hover aesthetics and selected notes/books will now have a blue shadow, giving it a comic-looking theme. The background of the apps was also changed, now having more of a greenish teal tone to it.
• The display or heading font for PoseiOS is now Zarathustra.

Devlog #6

Changes

• Restructure CSS to be more scalable by using classes and css root variables.
• I added a new app called Books which is essentially a library catalog of Poseidon/greek fantasy books that I thought was an interesting and great read.
• I added content to the books app.
• I spent around 15 minutes tweaking the color palette and finding colors to improve the UI of PoseiOS.
• I finished writing the first good version of my README.

Bug Fixes

Bug where selecting 3 app mean one will inevitably be opened and cant be unselected. Fix by allowing to only select one app at a time. So when an app is selected and another app is clicked on, the currently selected app would be deselected and the new app icon would be selected.

Fixed a bug where it said the title was undefined since when the loop finished, i = 2 which is more than the object index which had only 0 and 1 (before I added more to the object). To fix this, I changed “var” to “let” and it worked again. I learned that let allows i to have it own value every iteration. So I basically implemented the for loop wrong in Javascript (I thought that var and let would do the same thing, turns out it has its differences!).

PoseiOS V1 is finally complete!!!

Devlog #5

It’s been a while since my last devlog. Most of the time was spent trying to fix a bunch of bugs in the javascript code.

Bug Fixes

• Spent 2 hours trying to fix bug where you could drag windows out of frame and never see them back. Trying to limit the drag based on viewport was very confusing.
• I fixed this bug by creating a new function clampWindowPos() that would determine the max x and y offset that the windows could have in order to stay in the viewport. The function calculates this by calculating half of the width and height of the window (since the window has transform: translate(-50%, -50%); which causes the center to be at half the width/height). Then, it calculates the minimum left value and the maximum left value that the window could move to and did the same for the top value. Finally the function return those values.

Changes & More Fixes

• Added a feature where clicking on the desktop window deselects the currently selected app by letting the body listen for a mouse down event and deselecting the icon if the mouse-down location is not on an app icon.

Added poseidon.md, my first app!

• It took a whole 3 hours to style and get the app to function. Chrome dev tools was my best friend 🤩. It helped me spot few typos in variable names and find out javascript code that wasn’t working.
  • I first started by trying out the javascript code show in the hack club workshop. It didn’t really work so I browsed through other WebOS shipped projects to see how they made the app. A really useful project I found was Blackbird OS, which I took inspiration from for coding my poseidon.md notes app.
  • I began by implementing a local storage that didn’t really work so I left it for last and went to work on the other features like adding, deleting, and editing notes.
  • After finishing these features, I came back to fix the local storage bug. The issue was that I directly accessed the storedNotes object in my Javascript functions instead of the note objects stored in the local browser. To fix this, I created a variable content and set it to equal loadNotes() so that this new variable would be an updated object with all of the saved notes.

What’s Next

• I’m going to polish poseidon.md’s UI a bit and then start working on more apps for the WebOS.

Devlog #4

What I learned

• Learned how to use arrow functions and how to add classes to an HTML element via element.classList.add("...");
• Learned width: fit-content so that I don’t have to guess the width of my div.

Changes & Bug Fixes

Aesthetic tweak: Changed cursor grab to only show when hovering over handle instead of showing over the whole window).

• Reduced repetition and improved scalability by turning open/close window into a generalized function that works for all windows, so I can call the function for future apps.

• A lot of bugs and back-and-forth and commenting out code to add open-close function for the apps. I found out that I needed 2 parameters for the functions closeWindowOnClick and openWindowOnClick. First parameter is used for checking if the open button (app icon) or close button was selected/tapped, and second parameter is used for targeting the specific window that should be opened/closed. The parameters made me very confused because I would sometimes misinterpret the element as the button when the element parameter being passed was linked to the window.

• Added an icon and CSS styling for my first app: poseidon.md

• Added attributions to my README, for the bg image and the icons.

Programming Decisions

• Called addWindowTapHandler() on line 19 instead of calling addWindowTapHandler() for each window directly to reduce redundancy.

• Chose mousedown instead of click for event listener so that the window auto-focus when it is tapped immediately (if click is used then the window will only focus after mouse is up).

What’s Next?

• More README tweaks coming soon!
• More apps and content about Poseidon within each app.

Devlog #3

Some New Features!

Add open and close window functions. You can open by clicking “PoseiOS” in the topbar, and close by clicking the “x” button.

Add left & right padding on top bar.

Bug Fixes

Fix text being highlighted when dragging windows by using user-select: none; cursor: grab;

I encountered a bug where u can drag window by selecting any part of it. I fixed this by changing the id to include “-handle” so that the javascript could recognize it (before the javascript was looking for “handle” instead of “-handle” which created the bug).

Devlog #2

• Implement some JavaScript for draggable windows and a real-time clock on the top bar.
• I added a glass design for the windows and top-bar
  using backdrop-blur and
  background-color: rgba(255, 255, 255, 0.1);
• I learned how to center a div using position absolute and transform. At first, I ran into a problem where the top left corner of the welcome window was centered, but the window wasn’t centered correctly. I found out that this was because I didn’t use transform: translate(-50%, -50%);

Devlog #1:

I started off with some boilerplate code, creating and linking the HTML, CSS, and JS files.

I added some content on the webpage.

I added a background wallpaper for the WebOS.

I styled the site using CSS, but I haven’t added any Javascript yet.

I imported the Inter Font from Google fonts.

A new tag that I learned was using background-position in order to crop/position the background image so that it fit my preferences.