Generative UI Prototype #4
It was time to switch tools from Unity to web — wrote about my reasons the last time. First, I decided that I wouldn’t spend any time on the interface itself. Therefore the entire UI would be based on Bootstrap to begin with — I had a look at it a while time ago and seemed easy enough to use (remember, I’m not a programmer).
The initial idea was be to simply “copy” all elements and logic implemented Unity as native UI objects and C# code, into HTML, CSS, Javascript (+jQuery eventually). Afterwards, I’d move on and add functionality. Therefore I started by defining the main layout and a few basic components.
The layout is primitive at the moment: tools on the left, output on the right. If there would be any navigation, it might be on top, or maybe on the left as well ? …I’ll see that later.
The algorithm did not change — people enter horizontal and vertical paddings as min and max values and the programme generates a variety of buttons going through all combinations. Specifically:
- Strings from a field are passed into an array padding_horizontal, splitting the values by commas.
- A counter starts from the min value entered in this field and goes up to the max one.
- At each iteration the counter is increased and added to the padding_horizontal_values, an array of integers.
- This array is then incrementally used to change the padding-left: and padding-right: values in the CSS class of the button (see below)
Besides having to learn Javascript on the go, things seemed much more straightforward. I could use an existing grid, a large variety of flexible classes and easily change UI properties dynamically. At this point it all seemed to work pretty nicely, but I noticed an issue.
Vertical padding should’ve varied quite a lot, based on my inputs: 6 and 17, but it didn’t. I’ve got my first issue to look into.
Next steps:
- Solve vertical padding variation
- Add colour as variation. When the colour picker changes, all buttons rendered should change
- Add another function to reset the outputs
