Fancy gauges

Share your scripts and packages with other Mudlet users.
User avatar
Vadi
Posts: 5035
Joined: Sat Mar 14, 2009 3:13 pm

Fancy gauges

Post by Vadi »

Small demo of what you can do with CSS-styled labels (example done on the gauges here, which are essentially 2 labels)
Image
Code: [show] | [select all] lua
function create_hp_bar(x,y)
    createGauge("hp_bar", 0, 0, 0, 0, nil, "red")
    moveGauge("hp_bar", x,y)
    resizeGauge("hp_bar", 100, 20)
    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);
    border-top: 1px black solid;
    border-left: 1px black solid;
    border-bottom: 1px black solid;
    border-radius: 7;
    padding: 3px;]],
    [[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);
    border-width: 1px;
    border-color: black;
    border-style: solid;
    border-radius: 7;
    padding: 3px;]])
end

function create_end_bar(x,y)
    createGauge("end_bar", 0, 0, 0, 0, nil, "green")
    moveGauge("end_bar", x,y)
    resizeGauge("end_bar", 100, 20)
    setGaugeStyleSheet("end_bar", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #98f041, stop: 0.1 #8cf029, stop: 0.49 #66cc00, stop: 0.5 #52a300, stop: 1 #66cc00);
    border-top: 1px black solid;
    border-left: 1px black solid;
    border-bottom: 1px black solid;
    border-radius: 7;
    padding: 3px;]],
    [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #78bd33, stop: 0.1 #6ebd20, stop: 0.49 #4c9900, stop: 0.5 #387000, stop: 1 #4c9900);
    border-width: 1px;
    border-color: black;
    border-style: solid;
    border-radius: 7;
    padding: 3px;]])

end

create_hp_bar(0,0)
create_end_bar(100,20)
and these calls to update them:
Code: [show] | [select all] lua
setGauge("hp_bar", myHealth, maxHealth)
setGauge("end_bar", myEndurance, maxEndurance)
Oh, and for the QLinearGradient magic, you either a) find the code to use on the internet, or b) tinker with the values yourself, or c) use the gradient maker in the Qt Designer program... I found a to be easiest so far.

User avatar
Alexander Divine
Posts: 65
Joined: Mon Dec 21, 2009 7:01 pm

Re: Fancy gauges

Post by Alexander Divine »

Am I just plain doing it wrong, or does the stylesheet not support any sort of action with fonts?

I have this:
Code: [show] | [select all] lua
setGaugeStyleSheet("healthBar", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #41c1f0, stop: 0.1 #29a9ef, stop: 0.49 #0080cc, stop: 0.5 #0080a4, stop: 1 #0080cc);
    padding: 3px;
    font-family: Lucida Console;
    font-size: 12px;
    font-color: #FFFFFF;
    text-shadow: 0.1em 0.1em #333;]],
    [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #3373bd, stop: 0.1 #2060bd, stop: 0.49 #004099, stop: 0.5 #004070, stop: 1 #004099);
    padding: 3px;
    font-family: Lucida Console;
    font-size: 12px;
    font-color: #FFFFFF;
    text-shadow: 0.1em 0.1em #333;]])

User avatar
Vadi
Posts: 5035
Joined: Sat Mar 14, 2009 3:13 pm

Re: Fancy gauges

Post by Vadi »

Umm... looks different to me?

Image

versus

Image

http://qt.nokia.com/doc/4.6/stylesheet-reference.html is the list of all things different qt widgets support - you're looking at qlabel here, which as I understand supports all the relevant ones.

User avatar
Alexander Divine
Posts: 65
Joined: Mon Dec 21, 2009 7:01 pm

Re: Fancy gauges

Post by Alexander Divine »

The font didn't change. :(

User avatar
Vadi
Posts: 5035
Joined: Sat Mar 14, 2009 3:13 pm

Re: Fancy gauges

Post by Vadi »

Yeah. No idea then, you'd have to do some googling to see what's up with QLabels not accepting a font change via css.

Knute
Posts: 87
Joined: Fri Mar 05, 2010 12:08 am

Re: Fancy gauges

Post by Knute »

Do you have the "Lucida Console" font installed?

Are you sure that it's "Lucida Console" rather than just "Lucida"?

If you are in a linux environment, please keep in mind that caps do matter.

User avatar
Alexander Divine
Posts: 65
Joined: Mon Dec 21, 2009 7:01 pm

Re: Fancy gauges

Post by Alexander Divine »

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

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.

User avatar
Alexander Divine
Posts: 65
Joined: Mon Dec 21, 2009 7:01 pm

Re: Fancy gauges

Post by Alexander Divine »

Ooookay, seems if you just change font-color: to simply color: it works. I hate when the solution is so easy.

Stay tuned for next time, when attempt to make text-shadow and glow work!

Aeonex
Posts: 1
Joined: Mon Mar 22, 2010 1:30 am

Re: Fancy gauges

Post by Aeonex »

Code: Select all

function create_guile_bar(x,y)
    createGauge("guile_bar", 0, 0, 0, 0, nil, "orange")
    moveGauge("guile_bar", x,y)
    resizeGauge("guile_bar", 150, 30)
    setGaugeStyleSheet("guile_bar", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FFFF33, stop: 0.1 #FFFF00, stop: 0.49 #FFB700, stop: 0.5 #F6A500, stop: 1 #FF7E00);
    border-top: 1px black solid;
    border-left: 1px black solid;
    border-bottom: 1px black solid;
    border-radius: 7;
    padding: 3px;]],
    [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FFFF00, stop: 0.1 #bd2020, stop: 0.49 #FFFF00, stop: 0.5 #FF4800, stop: 1 #FFFF00);
    border-width: 1px;
    border-color: black;
    border-style: solid;
    border-radius: 7;
    padding: 3px;]])

end

Code: Select all

setGauge("guile_bar", myHealth, maxHealth)
Here's a little colour change I made, an orange gauge bar for those who want it. Switch it up or replace with the current "green" one for endurance, or make a third bar to record something else like guile. It's what I did. =)

Also, this positioning will place the guage to the bottom of the screen and over to the right a bit.
And don't forget to update your bars by using the second code listed.
Last edited by Aeonex on Wed Mar 31, 2010 5:50 am, edited 1 time in total.

User avatar
tsuujin
Posts: 695
Joined: Fri Feb 26, 2010 12:59 am
Location: California
Contact:

Re: Fancy gauges

Post by tsuujin »

Good idea to show ideas for alternate colors!

Here's my XP bar, which shows on the bottom of the screen. The filled in part is also flat on the right edge, because it just looks better to me that way. My format is slightly different, hope this doesn't confuse the issue.

note: you'll have to change vitals:Get("xp") to however you want to store your xp numerical value. I pull it from atcp and store it using a vitals manager.

[syntax=lua]ui = ui or {}
ui.xp = ui.xp or {}

function ui.xp:Create()
-- Set up bar size
local bh = 15 -- bar height
self.height = bh

-- grab screen metrics and set x,y positions
local w,h = getMainWindowSize()
self.y = h - bh
self.x = 0

-- Move the lower margin up to compensate for bar
setBorderBottom(bh)
-- Create the gauge and set position
createGauge("xpbar",0,0,0,0,nil,"blue")
moveGauge("xpbar",self.x,self.y)
resizeGauge("xpbar",w,bh)

-- Set the stylesheet for the guage. This is lengthy...
setGaugeStyleSheet("xpbar",
[[
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #000000, stop: 0.1 #0044ff, stop: 0.49 #0044ee, stop: 0.5 #004499, stop: 1 #0044df);
border-top: 1px black solid;
border-left: 1px black solid;
border-bottom: 1px black solid;
border-top-left-radius: 7;
border-bottom-left-radius: 7;
padding: 3px;
]],
[[
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #000000, stop: 0.1 #000077, stop: 0.49 #000099, stop: 0.5 #000070, stop: 1 #000099);
border-width: 1px;
border-color: black;
border-style: solid;
border-radius: 7;
padding: 3px;
]]
)
end

function ui.xp:Update()
-- Change the gauge to current value.
setGauge("xpbar",vitals:Get("xp"),100)
end

function ui.xp:Reposition()
local w,h = getMainWindowSize()
local bh = self.height
self.y = h - bh
moveGauge("xpbar",self.x,self.y)
resizeGauge("xpbar",w,bh)
ui.xp:Update()
end

ui.xp:Create()
ui.xp:Update()[/syntax]

Post Reply