CSS Styling on Gauges

Geyser is an object oriented framework for creating, updating and organizing GUI elements within Mudlet.
Post Reply
conslo
Posts: 15
Joined: Fri Aug 20, 2010 7:47 pm

CSS Styling on Gauges

Post 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.

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

Re: CSS Styling on Gauges

Post by Vadi »

Geyser:setStyleSheet

conslo
Posts: 15
Joined: Fri Aug 20, 2010 7:47 pm

Re: CSS Styling on Gauges

Post by conslo »

>.>

Silvine
Posts: 142
Joined: Sat Oct 23, 2010 2:36 pm

Re: CSS Styling on Gauges

Post 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

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

Re: CSS Styling on Gauges

Post 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!

Silvine
Posts: 142
Joined: Sat Oct 23, 2010 2:36 pm

Re: CSS Styling on Gauges

Post by Silvine »

Great work

Thanks

Silv

Silvine
Posts: 142
Joined: Sat Oct 23, 2010 2:36 pm

Re: CSS Styling on Gauges

Post 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)

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

Re: CSS Styling on Gauges

Post 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", [[ ...

Silvine
Posts: 142
Joined: Sat Oct 23, 2010 2:36 pm

Re: CSS Styling on Gauges

Post by Silvine »

One word,
Magic!!!! :)
I'm to embarased to tell you what I was doing.

Post Reply