Guages: a collection of styled "progress bars"
Posted: Wed Aug 07, 2013 6:22 pm
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.
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.
- barbox.png (91.88 KiB) Viewed 10585 times
