Fancy gauges

[Vadi]

Oh no, I'm sorry. I'm on Windows so yeah, I do have the Lucida font.

What I mean is that I want the text to be white, and if possible, and to use a shadow effect (and a glow when my health is low!). But actually Vadi brings up a good point -- I was just using good ol' fashioned CSS, didn't think to look into that Q-mumbo jumbo.

I'm guessing you got this working? Would be great if you posted the css code, as this is all new territory

[Alexander Divine]

Actually yeah, I can post that. This is pretty much word-for-word how it appears in my system, so of course you'll need to run the function.

As an interesting note, for some reason the font doesn't change color until the bar is changed with setGauge. No clue why!


Edit: Link to the font. I think it's fantastic! (http://www.urbanfonts.com/fonts/BigNoodleTitling.htm)

Code: [show] | [select all] lua

function drawUIGauges()
  createGauge("healthBar", 246, 21, 802, 92, "1234/1234", "white")
  setGaugeStyleSheet("healthBar", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #3880a7, stop: 1 #7dbfe2);
    padding-left: 175px;
    font-family: BigNoodleTitling;
    font-size: 18px;
    color: #ffffff;]],
    [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232f35, stop: 1 #4b5e68);
    padding-left: 175px;
    font-family: BigNoodleTitling;
    font-size: 18px;
    color: #ffffff;]])

  createGauge("manaBar", 246, 21, 785, 127, "1234/1234", "blue")
  setGaugeStyleSheet("manaBar", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #5c38a7, stop: 1 #9676d8);
    padding-left: 175px;
    font-family: BigNoodleTitling;
    font-size: 18px;
    color: #ffffff;]],
    [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #292335, stop: 1 #564c69);
    padding-left: 175px;
    font-family: BigNoodleTitling;
    font-size: 18px;
    color: #ffffff;]])

  createGauge("enduranceBar", 246, 21, 768, 162, "1234/1234", "blue")
  setGaugeStyleSheet("enduranceBar", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #5ea738, stop: 1 #95da72);
    padding-left: 175px;
    font-family: BigNoodleTitling;
    font-size: 18px;
    color: #ffffff;]],
    [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #293523, stop: 1 #4d6044);
    padding-left: 175px;
    font-family: BigNoodleTitling;
    font-size: 18px;
    color: #ffffff;]])

  createGauge("willpowerBar", 246, 21, 751, 197, "1234/1234", "blue")
  setGaugeStyleSheet("willpowerBar", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #a78038, stop: 1 #caa765);
    padding-left: 175px;
    font-family: BigNoodleTitling;
    font-size: 18px;
    color: #ffffff;]],
    [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #352f23, stop: 1 #645b48);
    padding-left: 175px;
    font-family: BigNoodleTitling;
    font-size: 18px;
    color: #ffffff;]])
end

[Carid]

Now once again forgive my ignorance but if I just copy this script and import it so to speak, will it work? Or will I need to config it somewhat??

[Vadi]

It's meant to be used in coding an interface, so this is for scripters.

[DanaLea73]

can someone explain some of this code to me? here are 2 lines from the code for these gauges..

setGaugeStyleSheet("hp_bar", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f04141, stop: 0.1 #ef2929, stop: 0.49 #cc0000, stop: 0.5 #a40000, stop: 1 #cc0000);

[[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #bd3333, stop: 0.1 #bd2020, stop: 0.49 #990000, stop: 0.5 #700000, stop: 1 #990000);

The first has 5 color codes, the second also have 5 color codes. what are each of these colors? One of them has to be when it's maxed, one for depleted.. and it has to do with the stop numbers.. I need plain english. also, why is there a second line of code, also seemingly called "background color", but with different colors. If I can understand the code I can tweek it.

Thanks in advance.

-Cera

p.p.s. so far, I hate Lau. understanding breeds love. right?

[tsuujin]

Frankly, this is something you don't need to understand. The QT SDK will generate this code for you by simply navigating a couple of easy to use menus.

[DanaLea73]

ooooaaaaaaaaaaaky.

First of all, I don't know what QT SDK is.

And I want to make a third button, and I need to know what each color code does so I can chose colors for the third button.

I'm still confused. I'm a newbie and I need help.

-Cera

[tsuujin]

http://forums.mudlet.org/viewtopic.php?f=8&t=1524

[Vadi]

Code: [show] | [select all] lua

setGaugeStyleSheet("hp_bar", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f04141, stop: 0.1 #ef2929, stop: 0.49 #cc0000, stop: 0.5 #a40000, stop: 1 #cc0000);

[[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #bd3333, stop: 0.1 #bd2020, stop: 0.49 #990000, stop: 0.5 #700000, stop: 1 #990000);

Well, firstly this isn't valid Lua. Maybe you meant this:

Code: [show] | [select all] lua

setGaugeStyleSheet("hp_bar", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f04141, stop: 0.1 #ef2929, stop: 0.49 #cc0000, stop: 0.5 #a40000, stop: 1 #cc0000);]])

setGaugeStyleSheet("hp_bar", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #bd3333, stop: 0.1 #bd2020, stop: 0.49 #990000, stop: 0.5 #700000, stop: 1 #990000);]])

The CSS that does the coloring is:

background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f04141, stop: 0.1 #ef2929, stop: 0.49 #cc0000, stop: 0.5 #a40000, stop: 1 #cc0000);

... and I myself didn't really bother yet decyphering how did it generate that, but in essence - background-color tells it to set the whole background color to a:

QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f04141, stop: 0.1 #ef2929, stop: 0.49 #cc0000, stop: 0.5 #a40000, stop: 1 #cc0000)

,

Paste QLinearGradient into Google and you get this page: http://doc.qt.nokia.com/4.6/qlineargradient.html doesn't tell you much, but http://doc.qt.nokia.com/4.6/stylesheet-reference.html gives a bit more info. In essence, you can see that it makes the gradient by specifying some points and what to do in between them. So in this one, I guess... there are 5 points? While I'm noy sure what the initial x1, y1, x2, y2 exactly imply, it seems that the "stop <number> <hex color number>" mean that the stop number is a % of the whole thing. Like stop 0 is right at the start, stop 1 is at the end, stop 0.5 was in the middle.

Although, I'd just use the designer as tsujinn posted to make this stuff. To make it more confusing for you, this is Qt that we're using for the GUI, Lua is only for the scripting. So a Lua command here is working with Qt things.

[Knute]

can someone explain some of this code to me? here are 2 lines from the code for these gauges..

Sure thing. The reason for this is that for these gauges you have 2 sets of backgrounds. One is the background that will be shown when the gauge is empty or partially full.
The other is for the color of the gauge itself. So, if the gauge is 100%, the gauge color will show. If the gauge is 0%, then the background will show, and if the gauge is partial, then the amount will be shown by the gauge color, and the rest wil show the background color.

setGaugeStyleSheet("hp_bar", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f04141, stop: 0.1 #ef2929, stop: 0.49 #cc0000, stop: 0.5 #a40000, stop: 1 #cc0000);

Ok, some of this information is in the QTdocs, and other you can see just from reading the code, so I'm not sure why everyone is so uptight about explaining it.

Basically, You are seeing the discription of, in this case, a Linear Gradient. What that means is that you have a gradual shift of colors going from left to right. The docs give other options, but what this is saying is that you want a linear gradient, one color top to bottom (x1 and x2 are both zero), and the gradient along the horizontal goes all the way across (y1 is zero and y2 is one (it uses a range of 0 to 1 to set position)). The next annotations are places where the colors change.
stop: 0 #f04141 is the notation that says that the stop is (in this case) the left hand side of the bar -- position zero, and the color is in standard rrggbb hex notation for colors.
So you have (in hex notation) f0 of red, 41 of green, and 41 of blue.
The next notation of stop: 0.1 #ef2929 gives the same info. New color different place to put it. And it continues until you reach the 1.0 (or just simply 1) position on the right of the bar.

[[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #bd3333, stop: 0.1 #bd2020, stop: 0.49 #990000, stop: 0.5 #700000, stop: 1 #990000);

The first has 5 color codes, the second also have 5 color codes. what are each of these colors? One of them has to be when it's maxed, one for depleted.. and it has to do with the stop numbers.. I need plain english. also, why is there a second line of code, also seemingly called "background color", but with different colors. If I can understand the code I can tweek it.

Thanks in advance.

-Cera

p.p.s. so far, I hate Lau. understanding breeds love. right?

I hope that I have helped your understanding of this.

As for lua, well, it has it's quirks like any other programming language. And there is a learning curve involved. Keep in mind that lua stores everything in tables, and that you are manipulating those tables whenever you have information to save, retrieve, or process.

HTH,
Knute