You are browsing as a guest. Sign up (or log in) to start making projects!

CalcOS

  • 7 Devlogs
  • 16 Total hours

An OS that is themed around CALCULATORS!!! Who wouldn't love this...

Open comments for this post

1h 43m 1s logged

Devlog 07

So I might have gotten sidetracked from the settings app cause it’s such a boring app to work on. Instead, I started working on the unit circle/calendar app. I thought it would be a good idea to combine those two to make the calendar app interesting. However, since there are 365 days and only 360 degrees, I’m going to combine 6 days (probably the week of pi day) into one SUPER PI DAY or some other name. To draw the circle, I’m using an HTML canvas element. I’m learning that it’s actually a really cool element, but obviously not as cool as a div element.

0
0
7
Open comments for this post

2h 1m 36s logged

Devlog 06

Unfortunately, I couldn’t get the clipboard history to come up in the M+ panel. Instead, I made a system stats counter (image one). I know, it’s not as useful and it has some pretty lame stats right now. I can’t fix the useful part, but I will try to make the stats more fun/interesting by the next devlog (which hopefully won’t take a week this time).

Anyway, I also started working on the settings app (image two). The “update” buttons don’t do anything right now, but they will soon. Thank you for reading through this devlog and have a great day!!

0
0
11
Open comments for this post

53m 23s logged

Devlog 05

A pretty small devlog today. Just got the M+ button working with the currently open windows. The problem with the clipboard history is that I have to get website permission from the user to do that. I don’t really know how to do that, so I’ll work on that either later today or tomorrow.

0
0
13
Ship #1

Hi everyone!

I made a WebOS that is themed around calculators. From naming to what apps do, I tried to take inspiration from how calculators do it.

Features:

  • Ability to have multiple windows of the same app (done through IDs and cloning HTML)
  • The Operator: a calculator and search bar that controls the operating system (click the mouse-following calculator icon in the top left)
  • Live math evaluation in the Operator/calculator (thanks to math.js)
  • Ability to search for apps in the Operator
  • Window management through the four basic operator icons (+, -, ×, ÷) in the middle of the top bar
  • Calculation history storage via localStorage
  • The Root app: a file explorer for browsing calculation history and installed apps

For the second ship, I want to add functionality to the M+ button in the top bar, so that it shows clipboard history and current open windows.

Roadblocks:
Module scoping for the JavaScript files was probably the most annoying thing in the project. Functions defined in type=“module” scripts were invisible to onclick attributes in HTML, so a ReferenceError would occur every time a button was clicked. It took me so long to figure out that you had to expose functions via window.functionName. Another issue I had was with my window manager system. I had to add ID’s to every duplicated window (since apps can have multiple windows open). This got really frustrating because every time I wanted to edit attributes of a certain window using JavaScript, I needed that window ID. The logic for retrieving that ID took me a while to figure out.

Proud Of:
Though that window manager that caused me so many bugs, I am so proud of how it turned out. Figuring out the logic for it took a long time, but it was mostly fun. I’m also proud of how I handle new apps. Instead of having to add all that app’s code into index.html or having to change a ton of JavaScript to account for that new app, my project automatically accounts for new apps based on .html files in the “apps” folder.

Thank you for going through my ship and have a great day!!

Try project → See source code →
Open comments for this post

3h 11m 52s logged

Devlog 04 - Browse your FILES

Finished

I wrote instructions on how to use the operating system in the Welcome app. Also, as I said I will last time, I made an app. It’s called Root because “root directory” and the math term “root”. It’s not the best name ever, but it’s good enough. Speaking of names, for the calculator/search thingy, I picked the name Operator cause it controls a lot of the OS.

Next Up

Now, I’m going to ship this OS. Then, I’ll work on the M+ button (the clipboard manager and app switcher for the operating system), the math store idea where you can download apps for different math things, and a settings app for customization.

0
0
18
Open comments for this post

3h 34m 10s logged

Devlog 03 - FINALLY the MATH

Finished

Last time, I said I was going to make more apps before I do the calculator. However, the calculator seemed way more fun than random math-related apps, so that’s exactly what I worked on. As you can see in the images, you can now do math in the calculator searchbar thingy (still need a name for it), and you can search for apps.

Next

This time, for real, I’m going to make more apps. I’m probably going to start with a file explorer that shows previous math calculations as files.
After I’m done making a couple of apps, I’ll work on the clipboard (the M+ button from my previous devlogs).
Once both of those are done, the OS should be ready to ship, and for my second ship of the OS, I want to make the math store and add customization.

0
0
15
Open comments for this post

1h 12m 11s logged

Devlog 02 - All the windows you want

It’s been way too long since my previous devlog.

Finished

You can now create multiple windows of the same app (as you can see in the image) by clicking the × symbol at the top.

I created an “apps” folder in my project to store HTML files, and each file contains a single div that holds an entire app. This setup should simplify developing more apps in the future since all I have to do is create an html file in that folder. This new system of making apps meant that I had to change the loading app logic in script.js, but luckily, it wasn’t that different to the previous logic.

Selected windows now actually look different when compared to unselected windows. It took me a while to figure out how to do that CSS effect, so hopefully that was worth it.

Next

Now, I’m going to work on actually making good looking apps that have more than just text in them.

Then, I will on the calculator search menu that will eventually control the entire operating system. Still not completely sure how that’s going to work though.

0
0
7
Open comments for this post

3h 34m 31s logged

Devlog 01

Finished

  • A top bar (inspired by MacOS)
    • M+ will be the clipboard manager
  • Four operations (+/-/x/÷) at the center of the top bar; these control the selected window
    • +: maximizes the window
    • -: hides the window
    • x: creates a new window for the selected app
    • ÷: quits the selected app
  • Window manager logic that allows multiple windows of the same app (by duplication html and using IDs for each window)

Future Plans

  • The main calculator menu (like a search bar, but a calculator and everything in the operating system will be controlled from here)
  • A file explorer to look back at previous calculations (history files)
  • A math store (app store) to install higher levels of math; I don’t know what the higher levels of math will be used for in the OS, but yeah

Note

divs have to be the best component in html

0
0
38

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…