Barbox is a collection of stylesheets for creating gradient "progress bars" that can be used in gauges. These are not functional gauges. This is merely a display rack to show off some bars that can be included in your own gauge constructor.
Here is some information from my experiments to create progress bars and the gradients and texts to fill them. There are many tools to help find codes for the chosen colors. One that I used was at color-hex. There are also online, Photoshop style, gradient editors that allow one to experiment with gradients and generate blocks of stylesheet information that can be edited to become QT stylesheets. One that I used was located at colorzilla. I specified information for the QT stylesheet gradients in both hexadecimal and rgba formats. It should be noted that there is a whitespace bug in the QT parsing routines. This has nothing to do with Mudlet. It occurs anywhere QT is used. Rgba color specifications suffer from this bug; while, hexadecimal color specifications do not. Thus, when using rgba, this code snippet works: “QLinearGradient(x1: 0, y1: 0, ....” While, this code snippet does not: “QLinearGradient( x1: 0, y1: 0, ....” (Note the space between the parenthesis and the x.) Once I had control of the whitespace bug, I was able to use rgba color specifications and control the opacity of my colors. Unfortunately, gumdrop style gradient bars and buttons required control of more than just the opacity. One must also control the shape of the reflections, and this was not possible with QT stylesheet gradients alone. Using x1 and y1, x2 and y2 one can turn the gradients 90° or flip them clear over. Last, I created some gradients that require three layers so as to give the illusion of liquid in glass.
Control of the textual element is available at different levels. Some levels supersede others making it difficult to see any results. I found that one could set the color and size of the text when one constructed the bar. I found that one could set some style elements like font-weight, font-family, bold and italics using the stylesheet, but these were not really as effective as other methods. Last, I found the most effective way to set text properties was to use XML font tags right at the point where one specified what text should be printed on the bar. Unfortunately, both QT stylesheet and XML font setting documentations seem to have features that have no effect. One thing I was unable to do was to set the text color of the back bar separately from the front bar. (For me, setting “color” in the style sheet had no effect on the text.) Since I am very green at this, perhaps there is a way, but I did not find it.
Below is an image (png) of the bars created by bar box. I would recommend creating a temporary profile and moving Mudlet's main window over 410 pixels. Then, you can look at and play with the bars, and extract the stylesheets and other information that create the bars for in your own constructions. I used several visual "tricks" that may be of interest to some, like liquid in glass tubes, no back bar, vertical bars. I've attached the script as a text file.
Guages: a collection of styled "progress bars"
Guages: a collection of styled "progress bars"
- Attachments
-
- BarBox.lua
- A text file of Lua for Mudlet
- (32.82 KiB) Downloaded 610 times
Re: Guages: a collection of styled "progress bars"
I made an update to the built in gauges that should be included in the next release that, among other things, allows for vertical gauges, as well as gauges that fill backward (from right to left, or top to bottom). Also, I added a third top layer in which the text for the gauge is displayed, so as to avoid the strange text issues that were showing up in the previous version. If you are interested in using the newer gauges now, here is the script:
Also, some of those look really slick.
Just paste it into a blank script and it will overwrite the old gauge functions with what should be coming in with the next update. If you have any questions or issues, just let me know.
Also, some of those look really slick.
Re: Guages: a collection of styled "progress bars"
3 Layers Eh? Sounds great! can a transparent gradient be put on there with the text?
Re: Guages: a collection of styled "progress bars"
Yes, you can style all three layers, including the one with the text. Just use it like this: setGaugeStyleSheet(gaugeName, cssfront, cssback, csstext)
Edit: I just looked at your script, and noticed you are using Geyser, which is where I got some of the ideas for functionality from. But Geyser builds its own gauges (rather than using the built in gauges). So there is something of a complication there from the perspective of your script as it is now.
Edit: I just looked at your script, and noticed you are using Geyser, which is where I got some of the ideas for functionality from. But Geyser builds its own gauges (rather than using the built in gauges). So there is something of a complication there from the perspective of your script as it is now.
Re: Guages: a collection of styled "progress bars"
Personally, though, I use this: http://forums.mudlet.org/viewtopic.php?f=6&t=3529 to manage my GUI elements. As I find it simpler to use, and more flexible. And, you can use all the built in functions to interact with things, instead of using special functions like when you are using Mudlet.
Re: Guages: a collection of styled "progress bars"
Love the style sheets!!! It took me forever to create something not nearly as pretty.
Re: Guages: a collection of styled "progress bars"
Very nice. It takes some amount of talent and/or skill to be able to use gauges. For me at least, it takes a completely different set of talent/skills to make something that ranks above stick-figure/crayon art (which is about the extent of my abilities, and even then I usually need to copy).
Re: Guages: a collection of styled "progress bars"
I use these for my gauges. More simplistic than what he has, but I still think it is a decent look.
I took a while coming up with a good set of color codes to make a complete color wheel that actually looked decent.