New UI plans and some QoL features

Features

Auto clamp 🗜️

It can be really frustrating if the output exceeds 255 and everything errors out. So I added a auto clamp checkbox, which just clamps the output to the expected range of 0 to 255.

Hot reload

I also added a check box for hot reloading. When you stop typing, the script will automatically run. No need to press the run button. Probably a bit annoying on larger resolutions so you can disable it.

New UI

I also started building the real UI. Initially I just did the layout:

• top bar with global settings
• middle part with editor and output
• console output, where print calls and errors will go.

The output part also has a tool bar with output specific settings.

An explanation of the app will go on the index and it will have a link to /app where the actual stuff is. This way I don’t have to give any screen space up for an introduction when not needed. Currently the index is just a redirect.

Initially I wanted to go with a windows 8 panel style UI, so nothing rounded and only big rectangular tiles. But during experimenting I made the tile only as big as its text and when the background color got highlighted it reminded me of a TUI button. So from that point on I decided to try and style my entire site like that.

I think I can pull this TUI look off, but the current styling is definitely not finished. I do however already like the checkboxes, which are styled like [ ] and [*], and the dropdown select. The select was way harder to do as you can’t really style the vanilla element, as it depends on os and browser styling. So you have to create your own.

I would say I learned a lot new things about css. Especially stuff like ::before and ::after are super handy for the look I am going for.