[WIP!] Let's build an UI engine

My biggest personal hurdle to writing pretty projects that I can work on it routinely without losing motivation is UI. Unfortunately, boredom also applies to this UI engine I am trying to work on. If you have devised any ideas, fear sharing not.


Blocks

$list display $turtle::rgb(78,132,159)

($list menu title: [{}] items: @:> ::rgb(78,132,159))

(menu item title: [{}] action: ({} @>) ::rgb(78,132,159))

($poster dialog title: [{}] body: [] buttons: @:> ::rgb(78,132,159))

$gears set UI setting [ V] to []::rgb(78,132,159)

I would recommend using sprites for UI elements. You can clone the turtle sprite, change its scripts with “my scripts” (so you can add interaction) and set that as a variable (or in a list). Then, just clone THAT sprite for each new UI element. Snap! already provides a couple sprite features you can use for this (anchoring, parenting, etc) that’ll help. I might make a mockup when I get home.

I made a small proof-of-concept reimplementation of Morphic.js in Snap a few months ago

Link, please? Sounds great.

Yes, I was considering that. I just need to draw the costumes of the sprites first, using the write () size () block because the EDC library does not like emojis for some reason.

How much?

Oh, yeah! Canvas API by owlsss | Snap! Build Your Own Blocks
Fair warning: The code is held up by duct-tape and is mostly written in smoke and mirrors.
I tried to make this recreation as faithful as possible to the original. I don’t really see a real or practical use for this; I just did it because I wanted to see if I could. It’s not really finished or in a state that I’m incredibly satisfied with, but it’s a working proof-of-concept nonetheless.

Not much. It is expandable, though.

I was wondering, why does the block turn on your camera?

It could be because the “set __ to __“ block has video capture as it’s default option. If this is the case then please fix the issue, because it is kind of out of place for a UI engine block to turn on your camera.

Fixed. I meant to toggle “flat line ends”. I did not realize I forgot to set the dropdown.

I also plan on making this engine highly customizable. There will be progressively more and more advanced options in the future if there interest in developing this persists stably, like menu textures.

$gears set UI setting [dialogBGColor V] to (color [rgb(220,220,220)])::rgb(78,132,149)

Reviving this…

Another update:

If your keen eyes see any logic mistakes that I have not caught, just inform me!