Page 1 of 1

CSS Styling on Gauges

Posted: Thu Jun 02, 2011 10:08 am
by conslo
Is there any way I'm not aware of to attach CSS styles to gauges made with Geyser? Because I'd very much like to do something like Vadi's fancy gauges.

Re: CSS Styling on Gauges

Posted: Thu Jun 02, 2011 12:23 pm
by Vadi
Geyser:setStyleSheet

Re: CSS Styling on Gauges

Posted: Fri Jun 03, 2011 12:05 am
by conslo
>.>

Re: CSS Styling on Gauges

Posted: Thu Aug 16, 2012 8:37 pm
by Silvine
Vadi wrote:Geyser:setStyleSheet
Care to expand on this please, a simple example would be great
for instance how do you go about setting a radius?

border-radius:5px

thanks
Silv

Re: CSS Styling on Gauges

Posted: Thu Aug 16, 2012 9:00 pm
by Vadi
Oh certainly. Conslo was just looking for a setLabelStyleSheet() equivalent for Geyser :)

Say you make a new Label:
Code: [show] | [select all] lua
HelloWorld = Geyser.Label:new({
	name="HelloWorld",
	x=50, y=50,
	width=200, height=50,
})
and you get a box top-left of the screen. Then you add the border to it, so the code becomes:
Code: [show] | [select all] lua
HelloWorld = Geyser.Label:new({
	name="HelloWorld",
	x=50, y=50,
	width=200, height=50,
})

HelloWorld:setStyleSheet([[
  border-radius: 5px;
]])
... and the box goes away. Well, it went away because your label is transparent now that we've applied some CSS without giving it any colours. Your border also while having a curvy corner, does not have a border drawn to begin with to be showing. So we add a 2px wide red border:
Code: [show] | [select all] lua
HelloWorld = Geyser.Label:new({
	name="HelloWorld",
	x=50, y=50,
	width=200, height=50,
})

HelloWorld:setStyleSheet([[
  border: 2px solid red;
  border-radius: 5px;
]])
and voila, you get a pretty box.

We can add a background colour do it and echo some text inside:
Code: [show] | [select all] lua
HelloWorld = Geyser.Label:new({
	name="HelloWorld",
	x=50, y=50,
	width=200, height=50,
})

HelloWorld:setStyleSheet([[
  border: 2px solid red;
  border-radius: 5px;
  background-color: blue;
]])

HelloWorld:echo("<center>whoa</center>")
Hope that helps!

Re: CSS Styling on Gauges

Posted: Thu Aug 16, 2012 9:17 pm
by Silvine
Great work

Thanks

Silv

Re: CSS Styling on Gauges

Posted: Thu Aug 16, 2012 9:28 pm
by Silvine
Should have tested it first :)

Does the same apply for guages?

I used
healthBar:setStyleSheet([[
border: 2px solid red;
border-radius: 5px;
]])

and got error
attempt to index global 'healthbar' (a nil value)

Re: CSS Styling on Gauges

Posted: Thu Aug 16, 2012 9:45 pm
by Vadi
Yes the same applies to gauges - but you need to make it with Geyser to happen, so if you didn't do the healthBar = Geyser... business but createGauge, then you use setLabelStyleSheet("healthbar", [[ ...

Re: CSS Styling on Gauges

Posted: Thu Aug 16, 2012 9:54 pm
by Silvine
One word,
Magic!!!! :)
I'm to embarased to tell you what I was doing.