[Idea] Nicer Looking Formspecs
- v-rob
- Developer
- Posts: 971
- Joined: Thu Mar 24, 2016 03:19
- GitHub: v-rob
- IRC: v-rob
- Location: Right behind you.
[Idea] Nicer Looking Formspecs
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.
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
- Developer
- Posts: 4650
- Joined: Thu Oct 03, 2013 07:48
- GitHub: SmallJoker
- Location: Switzerland
- Contact:
Re: [Idea] Nicer Looking Formspecs
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)
GitHub issues:
Re-design formspecs format (closed)
Formspec replacement (attempt 2.0)
Look, I programmed a bug for you. >> Mod Search Engine << - Mods by Krock - DuckDuckGo mod search bang: !mtmod <keyword here>
- v-rob
- Developer
- Posts: 971
- Joined: Thu Mar 24, 2016 03:19
- GitHub: v-rob
- IRC: v-rob
- Location: Right behind you.
Re: [Idea] Nicer Looking Formspecs
Yes, but unfortunately, from what I've seen, no one can agree on anything.Krock wrote: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)
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
- Member
- Posts: 1847
- Joined: Fri Aug 26, 2016 15:36
- GitHub: sorcerykid
- In-game: Nemo
- Location: Illinois, USA
Re: [Idea] Nicer Looking Formspecs
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
- Member
- Posts: 252
- Joined: Sun Aug 02, 2015 05:43
Re: [Idea] Nicer Looking Formspecs
Thank goodness it's lua so we can easily tweak > test > tweak > test > tweak > test rapidly until everything looks okay.v-rob wrote: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.
-
- Member
- Posts: 818
- Joined: Tue Apr 14, 2015 01:59
- GitHub: raymoo
- IRC: Hijiri
- In-game: Raymoo + Clownpiece
Re: [Idea] Nicer Looking Formspecs
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 wrote:Yes, but unfortunately, from what I've seen, no one can agree on anything.Krock wrote: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)
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.
Every time a mod API is left undocumented, a koala dies.
- v-rob
- Developer
- Posts: 971
- Joined: Thu Mar 24, 2016 03:19
- GitHub: v-rob
- IRC: v-rob
- Location: Right behind you.
Re: [Idea] Nicer Looking Formspecs
*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!
(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.
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
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
- Developer
- Posts: 385
- Joined: Mon Jan 08, 2018 15:14
- GitHub: pyrollo
- In-game: Naj
- Location: Paris
Re: [Idea] Nicer Looking Formspecs
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.v-rob wrote:That darn wiki doesn't have it documented! From now on, I will always use lua_api.txt
[ Display Modpack ] - [ Digiterms ] - [ Crater MG ] - [ LATE ]
- texmex
- Member
- Posts: 1753
- Joined: Mon Jul 11, 2016 21:08
- GitHub: tacotexmex
- In-game: tacotexmex
Re: [Idea] Nicer Looking Formspecs
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!
Good find, v-rob!
- Linuxdirk
- Member
- Posts: 3219
- Joined: Wed Sep 17, 2014 11:21
- In-game: Linuxdirk
- Location: Germany
- Contact:
Re: [Idea] Nicer Looking Formspecs
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 wrote:Can we please get one source of API truth already (generate wiki pages from lua_api.txt automatically like normal people)
- texmex
- Member
- Posts: 1753
- Joined: Mon Jul 11, 2016 21:08
- GitHub: tacotexmex
- In-game: tacotexmex
Re: [Idea] Nicer Looking Formspecs
On that note, my issue on the subjectLinuxdirk wrote: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 wrote:Can we please get one source of API truth already (generate wiki pages from lua_api.txt automatically like normal people)
- ANAND
- Member
- Posts: 335
- Joined: Sun Jan 28, 2018 12:54
- GitHub: magnetar47
- IRC: MAGNETAR ANAND
- In-game: ANAND and all names with Tomato
- Location: India
- Contact:
Re: [Idea] Nicer Looking Formspecs
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
- Member
- Posts: 252
- Joined: Sat Aug 05, 2017 01:28
- GitHub: Grizzly-Adam
- Location: Lost in America
- Contact:
Re: [Idea] Nicer Looking Formspecs
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.
Check out my Mods: BBQ Mod Crops Plus
- Luka22r
- Member
- Posts: 12
- Joined: Tue Feb 13, 2024 16:19
- GitHub: luka_on_github
- IRC: Luka22r
- In-game: Luka22r
Re: [Idea] Nicer Looking Formspecs
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.
print("Luka has left the chat chat")
- ROllerozxa
- Member
- Posts: 158
- Joined: Sun Apr 25, 2021 12:25
- GitHub: ROllerozxa
- IRC: ROllerozxa
- In-game: ROllerozxa
- Location: Sweden
- Contact:
Re: [Idea] Nicer Looking Formspecs
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
- Member
- Posts: 12
- Joined: Tue Feb 13, 2024 16:19
- GitHub: luka_on_github
- IRC: Luka22r
- In-game: Luka22r
Re: [Idea] Nicer Looking Formspecs
Thanks, been making a crafting recipe book for my mod so this should help.ROllerozxa wrote: ↑Wed Feb 14, 2024 13:30Styling 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.
print("Luka has left the chat chat")
Who is online
Users browsing this forum: No registered users and 3 guests