Open comments for this post
Dev Log # 4
After approximately 6 hours, I finished another session of improving the OS. This session focused on refining LumiOS’s look and feel. I also added two new apps - Browser and Weather. Overall, this update took me lots of time to fix small details.
New Apps:
- Browser: A searching tool that allows you to search on the web (incomplete)
- Weather app: Real-time weather tracker using OpenWeather API, showing current and future temperature, visibility, wind, and so on.
Updates on Existing Apps:
- Widget: Added a weather widget; link the widget to the Weather app.
New Features:
- Visual & Design:
- Unified color system with accent glow effects.
- New glass morphism layers.
- Standardized spacing scale and border radius system.
- Defined consistent typography sizes, weights, and letter spacing.
- Added maximizing and minimizing animations.
- Components:
- Desktop icons now have a different lift and glow on hover.
- Buttons and menus use smooth transform feedback.
- Context menus show accent bars and slide‑in animations.
- Window controls have larger hit areas and ring hover effects.
- Start menu and quick settings redesigned with better padding and hover states.
- Lock Screen:
- New layout with large time display and username.
- Added unlock animation.
- Complete CSS and JS restructure for smoother motion.
- Taskbar:
- Added a search bar that lets you quickly find and open specific apps.
- Taskbar buttons have scale and glow animations.
Challenges solved:
When I tried adding new ideas to enhance the overall visual appeal, I encountered a serious issue: the overlay system and window management stopped working again. The wallpaper no longer aligned with the desktop, and the window dragging function broke as well. I started looking for the problem but couldn’t find the cause, so I decided to restore everything and proceed more carefully.
Bugs:
- The browser app is not working. It loaded external websites directly inside an iframe. Many sites block being embedded through CSP or X-Frame-Options, so the page often stayed blank, or the navigation controls stopped working. I tried loading external sites directly in an iframe, which does not work. I also tried routing page loads through the local proxy, but the app still depends on websites that often block embedding.
Future Plan:
Fixing the browser app will be the first thing I do in the future. I will also try to add micro-interactions such as window snapping.
Open comments for this post
Lock Screen Update
I just realized that my OS doesn’t have a lock screen yet, so I decided to make a simple one. But then, I had some problems. The blur effect on the background somehow doesn’t work at all. I had to test each part of my code to find an answer. Thankfully, I found the solution at the end. Anyways, I spent some time on the start screen; I hope you enjoy it!
Open comments for this post
Small update on Notes App
I improved some basic functions and also added some new features to the Notes app.
- Download as .txt: Replaced the old Save-to-filesystem button with a direct browser download that saves notes as plain
.txt files.
- Status bar: Added a status bar at the bottom of the app that indicates current cursor position (Ln/Col) and live word count.
- GUI cleanup: Removed placeholder text, increased the default window size, and cleaned up the toolbar.
Open comments for this post
Dev Log # 3
A brand new Dev Log! Over the past few days, I added a bunch of exciting new features, mainly focusing on user experience. I also fixed some tiny bugs that struggled me a lot.
New Apps
- Paint: A drawing canvas that allows the user to freely decorate things they want using tools, different colors, and shapes.
Updates on Existing Apps
- Notes: Notes now support markdown format and can be downloaded
- Calculator: Calculator now has an advanced mode that allows users to use a scientific calculator.
- Terminal: Terminal now supports more commands (even though they are still not fully functional)
- Clock: Clock now has a timer section that can be used to set a countdown timer.
New Features
- Draggable desktop icons
- Taskbar now has an entire tray allowing the user to change volume, brightness, Wi-Fi, and many other settings all in one place.
- Taskbar now shows battery status.
- New wallpapers are added to the settings.
- Change the UI of some apps.
Challenges
The right-click context menu somehow didn’t show up again. I tried different solutions, but none of them worked.
Solutions
I asked some AI agents and browsed for a long time, and finally found the solution. The “contextmenu” handler in main.js crashed from undefined “closeVolumePopup()” and “closeBatteryPopup()” calls; adding both to “taskbar.js” with the usual “.visible”‑toggle pattern fixed the crash and the related desktop‑click bug that blocked “showContextMenu()” and overlay dismissal.
In the next update, I will try to implement the Weather App, the animated wallpapers, also building a browser App.
In the next update, I will try to implement the Weather App, the animated wallpapers, also building a browser App.
Open comments for this post
Finally! After a long time of testing, I found where the bug is. I forgot that there is a layer on top of everything, so I added “pointer-events: none;” in #wlayer and “pointer-events: auto;” in .win. Also, I added a right click context menu.
Open comments for this post
Dev Log # 2
Another update! After hours spent fixing tiny bugs, the OS has received a lot of new features and apps, as well as a massive update to the GUI and the overall system! The OS is more complete and practical now.
New Apps
- Clock app: An app where you can check the current time, use a stopwatch, or set an alarm clock
- Calendar app: Built a new Calendar app from scratch, a month grid with event dots, a day-detail panel for adding and deleting color-tagged events, and an Agenda tab listing everything chronologically
- Widget app: You can add widgets to the desktop right now. Widgets, such as a small clock or calendar, can be added to the desktop
New Features
- Settings became more functional: transparency, dark mode, animations, accent color, and brightness are now available. Added a pinned app dock to the taskbar for quick launching. The volume tray icon now opens a real pop-up with a slider.
- Files app can now be used. It’s still incomplete, but some basic functions like opening folders and going back are implemented
- Taskbar opacity: You can change the taskbar’s opacity from 0% to 100%, which makes the OS look better
- Windows have been rebuilt. Now they are not only transparent, but also include a gradient color as background and a change in border line.
- The flowing particles effect has been added to the OS in the background.
Bugs
- The desktop icons are still not working, as they are not responding to clicks. Two likely causes are that ES module scoping hides “openApp()” from inline onclick handlers, or a full-screen overlay (like the widget layer) is missing “pointer-events: none” and silently blocking clicks before they reach the icons.
My next plan is to fix the bugs, add animated wallpapers, add a weather and AI app, and possibly add some online features (e.g., cloud sync).
Open comments for this post
Dev Log # 1
This is my first webOS. The reason I wanted to start something like this is that I have dreamed of creating an operating system of my own. I once created an OS based on Windows, but sadly failed. That’s why I found webOS is somewhere else for me to go. Even though I’m not good at frontend, with the help of YouTube and AI, I still managed to get a start. Currently, the OS features:
- Calculator APP: where you can do some simple calculations.
- Notes APP: where you can write some simple notes
- Settings APP: Basic settings (still in progress)
One of the biggest challenges should be window management. It’s pretty hard to make sure the windows work independently…
In the future, I will focus on aesthetics and add more effects and more apps to make the webOS both useful and visually appealing.