Discuss Scratch

TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

A Random Pen OS: Devlog


I'll be using this thread mainly as a logbook for myself, but you're welcome to check it out as well.

About:
On my alt, I've been working on the window manager for the OS I'm making.
The OS will be rendered 90% with pen and 10% with stamps, but I am trying to remove the use of the stamps.

Currently, I am working on mouse detection, resizing windows, and moving windows.

Coding:
The coding has been really enjoyable.

There are various custom blocks separated into categories. The names have emojis so I can easily tell the difference and also to force Scratch to organize them based on category.
  • Input
  • Widgets
  • Setup
  • WM (window manager)
  • Text engine
  • Data
  • Screen

I'm also quite proud of the organization XD. Each category takes up 1-2 columns of code.


Links



Please give feedback and check back here for updates. Thanks!

Last edited by TeenySpoon (Oct. 10, 2023 01:57:40)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Credits

All code by me (TeenySpoon/TeenyTea) unless otherwise noted.

I'd also like to give special thanks to eoeoeoeoeoeoeoeoe and 2D4eter for all their constant feedback.

Inspiration

Assets

Help:

Last edited by TeenySpoon (Feb. 9, 2024 21:33:45)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 1.1.1: Accurate Mouse Detection

Before, window/mouse collisions were inaccurate by roughly 5 pixels.
This wasn't good because the window border was super thin and could be misinterpreted as something else.

Now, it only detects right up to the edge—no further and no closer

Last edited by TeenySpoon (July 29, 2023 19:30:30)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 1.1.2: Window Border Detection

Currently, it only detects if the mouse is touching the app portion or the header.

Now, I'm working on border detection, so that windows can be easily resized.
However, it only detects the left and right borders, not the top and bottom.

I sent something in HwS in the hopes that someone might help me figure it out: https://scratch.mit.edu/discuss/topic/699081/

Last edited by TeenySpoon (July 29, 2023 19:30:38)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 1.1.3: Fixed Window Border Detection

Big thanks to @Zurdax for helping me with this! Thank you for figuring out the problem
Now I just need to detect which specific border is being touched, which I will work on tomorrow.

Last edited by TeenySpoon (July 29, 2023 19:30:47)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
2D4eter
Scratcher
100+ posts

A Random Pen OS: Devlog

Nice project!

(::#F80000) (::#F80000) (::#F89000) (::#F89000) (::#F8F800) (::#F8F800) (::#00F850) (::#00F850) (::#00F8F0) (::#00F8F0) (::#0038F0) (::#0038F0) (::#7800F0) (::#7800F0) (::#F800B0) (::#F800B0) :: #e0e0e0 reporter)
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

2D4eter wrote:

Nice project!
Thanks!
It's been fun working on it why o why did I choose a pen project

⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 1.1.4: Specific Window Border Detection

Today I added detection for each specific border.
Now, it detects whether the mouse is on the left, right, top, or bottom border and changes the mouse icon to match.

Next, I'll be working on actually resizing the windows based on this.

Last edited by TeenySpoon (July 29, 2023 19:32:05)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 1.2.1: Move Windows w/ Mouse

I added a crude system for moving windows around with the mouse. You can click the header and drag to change the window position.
There are a few drawbacks:
  • Window is not displayed moving around, it is only displayed at is original position, then “teleports” to the mouse
  • It uses the mouse position as it's center, not the header position as I wanted.

I originally intended to make a system without these drawbacks, using the difference between the previous mouse pos and the current pos added to the window position. However, that system proved…complicated and it didn't work as I wanted.

Later, I'll try to fix these problems. For problem 2, instead of rigging up a “previous mouse position” thing, I'll just factor in the length and width of the window into the movement so that it is moved from the header.
For problem 1, I really don't know how I'm going to fix it. I'll figure it out later.

Last edited by TeenySpoon (July 29, 2023 19:32:14)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 1.2.2: Move Windows w/ Mouse

I fixed problem 2!
Now, it subtracts half the length of the window from the mouse y. This aligns the header y at the mouse y. For the x, I just used the mouse x to keep the center of the header at the mouse x.

Now to figure out the cause of problem 1…

Last edited by TeenySpoon (July 29, 2023 19:32:23)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 1.2.3: Move Windows w/ Mouse

I fixed problem 1 now!
I had been nesting the if-statement for the movement in the wrong if-statement the entire time!
It only drew the window if the mouse action was None (never going to be true) or if the mouse was up.
I changed it so that it would move around as long as the mouse was down and the action was “change pos”.

Woohoo!!

Last edited by TeenySpoon (July 29, 2023 19:32:33)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 1.3.1: Resize Windows

I added resizing for the left border! If you press and hold, it slowly grows longer while the right corner appears to stay in the same place.
I did this by adding 1 to the width and subtracting -0.5 (half of 1) from the x position.

However, this is not exactly what I want. I want it to be resized as the mouse drags it, and stay in the same place if it is held down.
I'll be implementing this by using a “prev x” and “prev y” for the mouse and checking the difference between the two, then adding it to the width and subtracting half from the x.

I'll post an update later about how it went. I also plan to do the same for the other borders.

My project really is getting somewhere

Last edited by TeenySpoon (July 29, 2023 19:32:43)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 1.3.2: Resize Windows

I fixed the resizing for the left border.
Now the mouse can drag forwards and back to resize, and the other edges stay in the same place. I also prevented the window from becoming too small.

Time to add it onto the other borders.

Last edited by TeenySpoon (July 29, 2023 19:32:56)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 1.3.3: Resize Windows

I added resizing to the other borders!
I'm so happy

One thing I noticed, though, was that the mouse icon glitched a little when resizing. This is because resizing and other functions are based on the “mouse action” variable. This is to prevent errors when the mouse is resizing one window but hovers over another.
However, the mouse icon is based on the “mouse properties” list which holds the info about which window element it is currently hovering over.

This will be easy to fix since the mouse changes its icon based on the priority of the current action (using un-nested if-statements). I'll just add mouse action as a high priority. I just wanted to take note of it here.

Later, I will work on fullscreen, minimize, and if I have time, delete.

Last edited by TeenySpoon (July 29, 2023 19:33:30)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 1.4.1: Window Status: Fullscreen

I started working on the fullscreen button. The basic functionality is there, it immediately swells up to fill the screen.

However, the user can still move it around, at which point it looks odd because it looks too big. I added a part that automatically sets its position to 0,0 as a quick fix to this for now.
In addition, there is no way to exit fullscreen mode.

For optimization, I made it so that only the fullscreen window is rendered, not anything else.

I noticed a bug with my “mouse functions” block: it used the WM-specific data decoder instead of the general one in order to parse through the mouse action variable. It still worked, however the WM-specific one sets all the window variables based on the parsed data. This isn't causing any problems but I'm going to fix it to avoid confusion.
Another bug I noticed was that dragging windows around in a way that caused the mouse to hover over a header button on another window caused that button to highlight. This was because, like mouse icons (which I fixed), the buttons used the mouse properties list. I added an extra condition that said it should highlight only if the input action was “None”.

Whew, that's a lot of work for today.

Last edited by TeenySpoon (July 29, 2023 19:33:45)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 2.1.1: Pen Shapes

I decided to take a break from the window manager and start working on “pen shapes” to draw primitive shapes for different elements.
I plan on making custom blocks for:
  • Lines
  • Rectangles
  • Beziér curves
  • Circles/Ellipses

Last edited by TeenySpoon (July 29, 2023 19:34:22)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 2.1.2: Rectangles and Gradients

I finished a rectangle function with a simple shape fill option.
I also added a gradient border for things like outlining windows or buttons.

Click the link below to see my “Simple Pen Shapes” project:
https://scratch.mit.edu/projects/878485492/

Last edited by TeenySpoon (July 30, 2023 00:29:23)


⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 2.1.3: Quadratic Bezier Curves

I DID IT!!!
I've been trying to do the Bezier curves for a while now, but after looking around on the Scratch wiki I finally made a working lerp function for both the x and y.

Now I've got smooth curves for…whatever I want!

The link to my Bezier project is below:
https://scratch.mit.edu/projects/878500816/

The next thing to do is make cubic Bezier curves.

⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas
TeenySpoon
Scratcher
500+ posts

A Random Pen OS: Devlog

Update 2.1.4: Gradient Borders on Window

I replaced the white outline on windows with a gray gradient (to act as a shadow).
A small change, but it looks a lot cleaner.

⚜ TeenySpoon ⚜ Alt: TeenyTea
An absent-minded programmer/artist

A Random Pen Window Manager
⚜ Me ⚜ TeenyForkTeenyKnife

“We are pilgrims on the journey
We are travelers on the road
We are here to help each other
Walk the mile and bear the load”
- “The Servant Song”, David Haas

Powered by DjangoBB