[Idea] Nicer Looking Formspecs

[v-rob]

Formspecs aren't the greatest looking things in the world, as we all know. When I designed the laptop mod's UI textures, I realized how hard it is to actually make it look better with image buttons and the like. Image buttons are limited and don't look good is almost all situations. I have a solution in mind that I think can help formspecs look better.

Concept 1: Image scroll bars, fields, textareas, tabs, dropdowns, sliders, etc.

There are image buttons, which are useful when trying to make things look better. But these won't fit in if everything else is the same dull grey gradient theme. So I think the answer to this is image elements for everything.

Concept 2: Hovering over elements like buttons, scroll bars, etc.

When you have an image button, the pressed state and non-pressed state look exactly the same unless the texture doesn't cover the whole button. This is definitely not ideal. Also, hovering the cursor over any element does absolutely nothing. So, I propose a three texture element for image buttons, scroll bars, dropdowns, tabs, sliders, checkboxes, and the like.

Texture 1: The normal texture of the element.
Texture 2: The texture of the element when the mouse is hovering over it.
Texture 3: The texture of the element when the mouse clicks on it and/or holds it down.

Note that for tabs, a texture for the active tab is a good idea as well, or else the texture will have to be stretched slighty, and it will have the same texture as the inactive tabs, which wouldn't look the best.

Concept 3: Invisible image buttons.

Image buttons with textures that don't cover the whole button have the grey gradient behind them. This might not be good, depending on the situation. One such example is the desktop icons in the laptop mod. I had to put the button textures behind them so that the grey isn't visible. Seeing the desktop background behind them instead of the button textures would have been much better. So, I suggest that image buttons have the ability to become invisible while the image on top of them stays visible.

Concept 4: Scrollbars that change size depending on how big the list of words is.

Scrollbars in Minetest are always really short, no matter how many lines there are in a textarea, dropdown, or textlist. The length of the scrollbar should depend on how many lines there are. Of course, the shortness will top off eventually so that the scrollbar doesn't get too short.

Concept 5: Better dropdown menu alignment.

The down arrow on the top of the dropdown menu is not aligned with the scroll bar when it's opened. It doesn't look very good.

While I'm talking about formspecs, I want to ask what the element APIs are for sliders (The thing the sound volume uses) and checkboxes (I've seen them in the advanced settings and change keys). They aren't recorded in the Developer Wiki.

I hope you consider my proposals. I think they would make formspecs have the capability to look much nicer.

[Krock]

Most likely we won't add any big features to our formspecs. Instead, we need a library that already offers all these GUI elements plus callbacks for our scripting.

GitHub issues:
Re-design formspecs format (closed)
Formspec replacement (attempt 2.0)

[v-rob]

Most likely we won't add any big features to our formspecs. Instead, we need a library that already offers all these GUI elements plus callbacks for our scripting.

GitHub issues:
Re-design formspecs format (closed)
Formspec replacement (attempt 2.0)

Yes, but unfortunately, from what I've seen, no one can agree on anything.

Personally, I don't see too much wrong with the current system. The main problem is the coordinate system. It's messed up and takes a long time to get everything lined up. But it works, even if it takes a while, and that's fine with me. What's not fine with me is how ugly formspecs look. A modder takes the time to make everything line up, but the result still doesn't look good. That's the thing that needs to be fixed.

[sorcerykid]

If I had to really pick two major improvements to the formspecs, from both a developer and end-user standpoint, I would hope for a) custom alignment and font-size of label elements and b) better working textarea elements with optional scrollbars. The above suggestions are good too, but dare I say these are probably at the top of the frustration scale for me :).

[AccidentallyRhine]

Personally, I don't see too much wrong with the current system. The main problem is the coordinate system. It's messed up and takes a long time to get everything lined up. But it works, even if it takes a while, and that's fine with me. What's not fine with me is how ugly formspecs look. A modder takes the time to make everything line up, but the result still doesn't look good. That's the thing that needs to be fixed.

Thank goodness it's lua so we can easily tweak > test > tweak > test > tweak > test rapidly until everything looks okay.

[Byakuren]

Most likely we won't add any big features to our formspecs. Instead, we need a library that already offers all these GUI elements plus callbacks for our scripting.

GitHub issues:
Re-design formspecs format (closed)
Formspec replacement (attempt 2.0)

Yes, but unfortunately, from what I've seen, no one can agree on anything.

Personally, I don't see too much wrong with the current system. The main problem is the coordinate system. It's messed up and takes a long time to get everything lined up. But it works, even if it takes a while, and that's fine with me. What's not fine with me is how ugly formspecs look. A modder takes the time to make everything line up, but the result still doesn't look good. That's the thing that needs to be fixed.

There's no agreement because there are many different possibilities. If someone PRs a solution then there will be three possibilities, yes, no, or "change this thing".

[v-rob]

*Gasp!*

I was looking through lua_api.txt, and I found that you can make image buttons transparent, and you can make a pressed button image!

Code: Select all

#### `image_button[<X>,<Y>;<W>,<H>;<texture name>;<name>;<label>;<noclip>;<drawborder>;<pressed texture name>]`
* `x`, `y`, `w`, `h`, and `name` work as per button
* `texture name` is the filename of an image
* Position and size units are inventory slots
* `noclip=true` means the image button doesn't need to be within specified formsize
* `drawborder`: draw button border or not
* `pressed texture name` is the filename of an image on pressed state

(Drawborder is the transparency)

That darn wiki doesn't have it documented! From now on, I will always use lua_api.txt

Now we just need a hover image and image elements for all elements.

This makes me extremely happy.

[Pyrollo]

That darn wiki doesn't have it documented! From now on, I will always use lua_api.txt

Please, do not hesitate to update the wiki with your findings in lua_api.txt. This is the best way to get the wiki up to date.

[texmex]

Can we please get one source of API truth already (generate wiki pages from lua_api.txt automatically like normal people)

Good find, v-rob!

[Linuxdirk]

Can we please get one source of API truth already (generate wiki pages from lua_api.txt automatically like normal people)

I ditched the dev wiki completely and rely on the lua_api.txt exclusively. The file is unusable when used as readme but works well as resource for searching keywords in it.

[texmex]

Can we please get one source of API truth already (generate wiki pages from lua_api.txt automatically like normal people)

I ditched the dev wiki completely and rely on the lua_api.txt exclusively. The file is unusable when used as readme but works well as resource for searching keywords in it.

On that note, my issue on the subject

[ANAND]

Speaking of nicer looking formspecs, the feature which I'd love to see the most, is word-wrap - not too difficult to implement, but would definitely make the formspecs a little more easier and reliable to use IMHO...

[Grizzly Adam]

Two features that I would really like to see: support of a monospace font and being aboe to customise font/background text areas in the same fashion as other elements. If I had two more wishes it would be for bold and italic text.

[Luka22r]

How would you change the size of labels? E.g One label being the title for the form spec and being bigger than a description which is smaller.

[ROllerozxa]

How would you change the size of labels? E.g One label being the title for the form spec and being bigger than a description which is smaller.

Styling apply in the order of elements they come from top to bottom, so if you have a formspec like such (simplified for demonstration):

- label Hello! (this text will have player's default font size)
- style_type label font_size 18
- label Hello! (this text will be 18)
- style_type label font_size 24
- label Hello! (this text will be 24)

For accessibility/adapting to larger screen densities you may want to use relative font sizes which are relative to the player's configured font size.

[Luka22r]

How would you change the size of labels? E.g One label being the title for the form spec and being bigger than a description which is smaller.

Styling apply in the order of elements they come from top to bottom, so if you have a formspec like such (simplified for demonstration):

- label Hello! (this text will have player's default font size)
- style_type label font_size 18
- label Hello! (this text will be 18)
- style_type label font_size 24
- label Hello! (this text will be 24)

For accessibility/adapting to larger screen densities you may want to use relative font sizes which are relative to the player's configured font size.

Thanks, been making a crafting recipe book for my mod so this should help.