Color Changing Gauges

Post Reply
osmond
Posts: 2
Joined: Tue Apr 20, 2010 5:19 am

Color Changing Gauges

Post by osmond » Tue Mar 05, 2013 9:10 pm

Started playing around with GUI's in Mudlet, good stuff. Got some gauges together, health, willpower etc (this is in Aetolia), and they all work fine and dandy. Next I got the bright idea of a visual limb damage tracker, so I created a series of gauges to look like a head, torso, arms and legs and grouped them together to make this nice little stick figure type deal, all went fine. Next I went ahead and coded the damage tracker which is working marvelously, but here is the hitch in this giddy-up: I can't get the gauges to change color. Here is what I am using for the gauges:
Code: [show] | [select all] lua
function create_torso_green()
move_man_y = 550
move_man_x = 1200

 	 createGauge("opptorso", 0, 0, 0, 0, "", "green")
    moveGauge("opptorso", move_man_x,move_man_y+42)
    resizeGauge("opptorso", 40,60)
    setGaugeStyleSheet("opptorso", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #00ff00, stop: 0.1 #00ff00, stop: 0.49 #00ff00, stop: 0.5 #00ff00, stop: 1 #00ff00);
    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;]])

createLabel("oppparrytorso",50,50,10,10,0);
setTextFormat("oppparrytorso", 25,25,25, 255,255,255, 0,0,0 )
setBackgroundColor("oppparrytorso",0,0,0,0) 
echoUserWindow("oppparrytorso", "<center><font color=\"black\">Torso</font></center>")
moveWindow("oppparrytorso", move_man_x,move_man_y+42)
resizeWindow("oppparrytorso",40,60)

end

function create_torso_yellow()
move_man_y = 550
move_man_x = 1200

 	 createGauge("opptorso", 0, 0, 0, 0, "", "green")
    moveGauge("opptorso", move_man_x,move_man_y+42)
    resizeGauge("opptorso", 40,60)
    setGaugeStyleSheet("opptorso", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffff00, stop: 0.1 #ffff00, stop: 0.49 #ffff00, stop: 0.5 #ffff00, stop: 1 #ffff00);
    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;]])

createLabel("oppparrytorso",50,50,10,10,0);
setTextFormat("oppparrytorso", 25,25,25, 255,255,255, 0,0,0 )
setBackgroundColor("oppparrytorso",0,0,0,0) 
echoUserWindow("oppparrytorso", "<center><font color=\"black\">Torso</font></center>")
moveWindow("oppparrytorso", move_man_x,move_man_y+42)
resizeWindow("oppparrytorso",40,60)

end

function create_torso_orange()
move_man_y = 550
move_man_x = 1200

 	 createGauge("opptorso", 0, 0, 0, 0, "", "green")
    moveGauge("opptorso", move_man_x,move_man_y+42)
    resizeGauge("opptorso", 40,60)
    setGaugeStyleSheet("opptorso", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ff9900, stop: 0.1 #ff9900, stop: 0.49 #ff9900, stop: 0.5 #ff9900, stop: 1 #ff9900);
    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;]])

createLabel("oppparrytorso",50,50,10,10,0);
setTextFormat("oppparrytorso", 25,25,25, 255,255,255, 0,0,0 )
setBackgroundColor("oppparrytorso",0,0,0,0) 
echoUserWindow("oppparrytorso", "<center><font color=\"black\">Torso</font></center>")
moveWindow("oppparrytorso", move_man_x,move_man_y+42)
resizeWindow("oppparrytorso",40,60)

end

function create_torso_red()
move_man_y = 550
move_man_x = 1200

 	 createGauge("opptorso", 0, 0, 0, 0, "", "green")
    moveGauge("opptorso", move_man_x,move_man_y+42)
    resizeGauge("opptorso", 40,60)
    setGaugeStyleSheet("opptorso", [[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ff0000, stop: 0.1 #ff0000, stop: 0.49 #ff0000, stop: 0.5 #ff0000, stop: 1 #ff0000);
    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;]])

createLabel("oppparrytorso",50,50,10,10,0);
setTextFormat("oppparrytorso", 25,25,25, 255,255,255, 0,0,0 )
setBackgroundColor("oppparrytorso",0,0,0,0) 
echoUserWindow("oppparrytorso", "<center><font color=\"black\">Torso</font></center>")
moveWindow("oppparrytorso", move_man_x,move_man_y+42)
resizeWindow("oppparrytorso",40,60)

end
I know some of the names in there are weird, but originally it was going to track parrying, but seeing how you don't actually see someone parrying, it quickly became obsolete and is now my damage tracker. Now I have a separate script for each limb, and then in each script I am using the same function but four times, one for a green counter and one for yellow, orange and red. Green of course is a healthy limb, yellow is level 1 damage orange level 2 and red being critical damage. I worked everything in for the left arm just to get things going and it works, but it quits working after a while and sometimes it will make the torso yellow for a second and glitch out. What I am figuring is that I am actually layering gauges on top of each other since I am not deleting the previous gauge before the new one is called and mudlet doesn't like this. I've searched around but can't figure out how to make a single gauge that will just change colour based on the value of a variable. If anyone has any ideas how to do this, please let me know!

User avatar
kevutian
Posts: 217
Joined: Fri Aug 20, 2010 8:18 pm
Location: United Kingdom
Contact:

Re: Color Changing Gauges

Post by kevutian » Wed Mar 06, 2013 12:12 am

You can't have two gauges with the same name. Also, why are you using a gauge when a label would fit this job much better and simply?

osmond
Posts: 2
Joined: Tue Apr 20, 2010 5:19 am

Re: Color Changing Gauges

Post by osmond » Wed Mar 06, 2013 1:14 am

Because gauges are what I know?

Lucky24
Posts: 49
Joined: Sun Sep 12, 2010 1:50 am

Re: Color Changing Gauges

Post by Lucky24 » Sun Mar 10, 2013 7:36 am

You do probably want labels, instead.

If you only have one ore two labels you could probably simplify this a lot and just list them each seperately. The functions you'd want to call are createLabel() to create the label, resizeWindow() to set the size of the label, moveWindow() to set the position of the label, setFgColor() and setBackgroundColor() to set the colors, and echo(labelname,"some text") if you want to print text in the label. Labels also let you set a picture with setBackgroundImage()

However, I like a bit more modular setup so that I can move things around when I add a new label and when I resize the winow. This is how my gui is setup. I have labels with images (compass and cond), and labels with just a color background that can change (zlighting):
Code: [show] | [select all] lua
--INITIAL SETUP
WindowWidth = 0;
WindowHeight = 0;
WindowWidth, WindowHeight = getMainWindowSize();
gui = gui or {}
gui.gfxPath = [[/home/mudlet/images]]
gui.xOffset = 0 -- not real value, see prefs value below
gui.yOffset = 0 -- not real value, see prefs value below
gui.x = WindowWidth-gui.xOffset
gui.y = 0
-- global compass icon prefs
gui.compass = gui.compass or {}
gui.compass.width = 16 --icon size
gui.compass.height = 16 --icon size
gui.compass.gfxPath = gui.gfxPath
gui.compass.gfxExt = ".png" -- file extension
gui.compass.gfxDefault = "unlit" --filename
-- cond gfx bar icon prefs
gui.cond = gui.cond or {}
gui.cond.width = 10
gui.cond.height = 58
gui.cond.gfxPath = gui.gfxPath
gui.cond.gfxExt = ".png"
gui.cond.gfxDefault = "00"
--lighting (colored label) prefs
gui.zlighting = gui.zlighting or {}
gui.zlighting.width = 60
gui.zlighting.height = 25
gui.zlighting.fontSize = 7
--GUI LOCATION SETUP (must be below gui object size prefs)
--Note, these offsets push gui off the edge by the number of items i happen to have, so I currently have 4 compass icons and 5 condition toggle icons, and a zlighting:
gui.xOffset = gui.compass.width*4+gui.cond.width*5+gui.zlighting.width
gui.yOffset = 0
-- compass layout / defaults
gui.compass.north = gui.compass.north or {}
gui.compass.north.xOffset = gui.compass.width
gui.compass.north.yOffset = 0
gui.compass.north.gfxDefault = gui.compass.gfxDefault
gui.compass.northEast = gui.compass.northEast or {}
gui.compass.northEast.xOffset = gui.compass.width*2
gui.compass.northEast.yOffset = 0
gui.compass.northEast.gfxDefault = gui.compass.gfxDefault
gui.compass.east = gui.compass.east or {}
gui.compass.east.xOffset = gui.compass.width*2
gui.compass.east.yOffset = gui.compass.height
gui.compass.east.gfxDefault = gui.compass.gfxDefault
gui.compass.southEast = gui.compass.southEast or {}
gui.compass.southEast.xOffset = gui.compass.width*2
gui.compass.southEast.yOffset = gui.compass.height*2
gui.compass.southEast.gfxDefault = gui.compass.gfxDefault
gui.compass.south = gui.compass.south or {}
gui.compass.south.xOffset = gui.compass.width
gui.compass.south.yOffset = gui.compass.height*2
gui.compass.south.gfxDefault = gui.compass.gfxDefault
gui.compass.southWest = gui.compass.southWest or {}
gui.compass.southWest.xOffset = 0
gui.compass.southWest.yOffset = gui.compass.height*2
gui.compass.southWest.gfxDefault = gui.compass.gfxDefault
gui.compass.west = gui.compass.west or {}
gui.compass.west.xOffset = 0
gui.compass.west.yOffset = gui.compass.height
gui.compass.west.gfxDefault = gui.compass.gfxDefault
gui.compass.northWest = gui.compass.northWest or {}
gui.compass.northWest.xOffset = 0
gui.compass.northWest.yOffset = 0
gui.compass.northWest.gfxDefault = gui.compass.gfxDefault
gui.compass.up = gui.compass.up or {}
gui.compass.up.xOffset = gui.compass.width*3
gui.compass.up.yOffset = 0
gui.compass.up.gfxDefault = gui.compass.gfxDefault
gui.compass.down = gui.compass.down or {}
gui.compass.down.xOffset = gui.compass.width*3
gui.compass.down.yOffset = gui.compass.height*2
gui.compass.down.gfxDefault = gui.compass.gfxDefault
-- cond bars layout / defaults
gui.cond.health = gui.cond.health or {}
gui.cond.health.xOffset = gui.compass.width*4
gui.cond.health.yOffset = 0
gui.cond.health.gfxDefault = "bar1_"..gui.cond.gfxDefault --thus full default filename is "bar1_00.png"
gui.cond.fatigue = gui.cond.fatigue or {}
gui.cond.fatigue.xOffset = gui.compass.width*4+gui.cond.width
gui.cond.fatigue.yOffset = 0
gui.cond.fatigue.gfxDefault = "bar2_"..gui.cond.gfxDefault 
gui.cond.encumbrance = gui.cond.encumbrance or {}
gui.cond.encumbrance.xOffset = gui.compass.width*4+gui.cond.width*2
gui.cond.encumbrance.yOffset = 0
gui.cond.encumbrance.gfxDefault = "bar3_"..gui.cond.gfxDefault 
gui.cond.satiation = gui.cond.satiation or {}
gui.cond.satiation.xOffset = gui.compass.width*4+gui.cond.width*3
gui.cond.satiation.yOffset = 0
gui.cond.satiation.gfxDefault = "bar4_"..gui.cond.gfxDefault 
gui.cond.thirst = gui.cond.thirst or {}
gui.cond.thirst.xOffset = gui.compass.width*4+gui.cond.width*4
gui.cond.thirst.yOffset = 0
gui.cond.thirst.gfxDefault = "bar4_"..gui.cond.gfxDefault

--z lighting layout / defaults
gui.zlighting.xOffset = gui.compass.width*4+gui.cond.width*4+gui.zlighting.width
gui.zlighting.yOffset = 0
gui.zlighting.fgColor="0 255 255"
gui.zlighting.bgColor=255
gui.zlighting.text = "Lght:100"


function setGui(group,item,gfxName)
	if not type(group) == "table" or not type(item) == "table" then
		echo("\nsetGui() not passed valid table '"..tostring(group[1]).."', or item '"..tostring(item).."'. ")
		return false
	end
	if type(gfxName) == "string" then 
		item.gfx = group.gfxPath .. gfxName .. group.gfxExt
		echo("\nSet item gfx to new value "..item.gfx..". ")
	elseif not item.gfx then
		item.gfx = group.gfxPath .. tostring(item.gfxDefault) .. group.gfxExt
		echo("\nSet item gfx to existing "..item.gfx..". ")
	end
	item.label = tostring(item)
	echo("\nCreating Label: "..item.label..", with offsets '"..gui.x+item.xOffset.."' '"..gui.y+item.yOffset.."', with dimensions '"..group.width.."' '"..group.height.."', with background: '"..item.gfx.."'. ")
	createLabel(item.label,gui.x+item.xOffset,gui.y+item.yOffset,group.width,group.height,1)
	resizeWindow(item.label,group.width,group.height)	
	moveWindow(item.label,gui.x+item.xOffset,gui.y+item.yOffset)
	setBackgroundImage(item.label,item.gfx)
end

function setTextGui(group,item,text,fgColor,bgColor)
	local fr = 0; local fg = 0; local fb = 0;
	local br, bg, bb = 50, 50, 50
	if not type(group) == "table" or not type(item) == "table" then
		echo("\nsetTextGui() not passed valid table '"..tostring(group[1]).."', or item '"..tostring(item).."'. ")
		return false
	end
	if fgColor then
		item.fgColor = fgColor
	else
		fgColor = item.fgColor
	end
	if bgColor then
		item.bgColor = bgColor
	else
		bgColor = item.bgColor
	end
	if type(text) == "string" then 
		text = tostring(text)
		item.text = text
	else
		text = item.text
	end
	if type(fgColor) == "string" then --parse out rgb
		fr, fg, fb = stringToRGB(fgColor)
	elseif type(fgColor) == "number" then -- assume fgColor is a shade
		fr, fg, fb = fgColor, fgColor, fgColor
	else 
		echo("\nsetTextGui() passed unknown fgColor type")
	end
	if type(bgColor) == "string" then --parse rgb
		br, bg, bb = stringToRGB(bgColor)
	elseif type(bgColor) == "number" then --adume bgColor is a shade
		br, bg, bb = bgColor, bgColor, bgColor
	else
		echo("\nsetTextGui() passed unknown fgColor type")
	end
	item.label = tostring(item)
	echo("\nCreating Label: "..item.label..", with offsets '"..gui.x+item.xOffset.."' '"..gui.y+item.yOffset.."', with dimensions '"..group.width.."' '"..group.height.."', with text:'"..text.."', fgColor: '"..tostring(fgColor).."', bgColor:'"..tostring(bgColor).."'. ")
	createLabel(item.label,gui.x+item.xOffset,gui.y+item.yOffset,group.width,group.height,1)
	resizeWindow(item.label,group.width,group.height)
	moveWindow(item.label,gui.x+item.xOffset,gui.y+item.yOffset)
	setTextFormat(item.label,fr,fg,fb,br,bg,bb,0,0,0)
	setMiniConsoleFontSize(item.label, group.fontSize);
	setFgColor(item.label,fr,fg,fb)
	setBackgroundColor(item.label,br,bg,bb,255)
	echo(item.label, text )
end

--and a helper function to make specifying values easier e.g. converts string of "0 255 255" into multiple return value rgb e.g. 0,255,255
function stringToRGB(text)
	local numbers = {}
		for number in string.gmatch(text, "%d+") do 
			table.insert(numbers,string.sub(number,1,-1))
		end
	if #numbers == 3 then
		local r = tonumber(numbers[1])
		local g = tonumber(numbers[2])
		local b = tonumber(numbers[3])
		--echo("\nString:"..text..", rgb:"..tostring(r)..","..tostring(g)..","..tostring(b)..". ")
		return r, g, b
	elseif #numbers == 1 then
		local r = tonumber(numbers[1])
		local g = tonumber(numbers[1])
		local b = tonumber(numbers[1])
		--echo("\nstringToRGB passed only single color!")
		return r, g, b
	else
		echo("\nstringToRGB not passed known colors!")
		return 0, 0, 0
	end
end
Then I have the actual function that's called when the window is resized to move the gui around, it re-renders each gui item:
Code: [show] | [select all] lua
function handleWindowResizeEvent()
   WindowWidth, WindowHeight = getMainWindowSize();
	local SCROLL_BAR_WIDTH = 15
	gui.x = WindowWidth-(gui.xOffset+SCROLL_BAR_WIDTH) --anchors gui to the right-hand side of window
	gui.y = 0 --anchors gui to top
	setGui(gui.compass,gui.compass.north)
	setGui(gui.compass,gui.compass.northEast)
	setGui(gui.compass,gui.compass.east)
	setGui(gui.compass,gui.compass.southEast)
	setGui(gui.compass,gui.compass.south)
	setGui(gui.compass,gui.compass.southWest)
	setGui(gui.compass,gui.compass.west)
	setGui(gui.compass,gui.compass.northWest)
	setGui(gui.compass,gui.compass.up)
	setGui(gui.compass,gui.compass.down)
	setGui(gui.cond,gui.cond.health)
	setGui(gui.cond,gui.cond.fatigue)
	setGui(gui.cond,gui.cond.encumbrance)
	setGui(gui.cond,gui.cond.satiation)
	setGui(gui.cond,gui.cond.thirst)
	setGui(gui.condToggle,gui.condToggle.stunned)
	setTextGui(gui.zlighting,gui.zlighting)
end
handleWindowResizeEvent() --renders the gui when script is compiled
And finally an example of code to update the icon label compass and lighting (text with color) labels:

setGui(gui.compass,gui.compass.northEast,"on") --sets the image to "on.png"

setTextGui(gui.zlighting,gui.zlighting,"Lght: 100","0 255 255","100 100 100") --makes the lighting label read "Lght: 100" with yellow text and a grey background.

The final result is a compass and some on/off toggle icons and a label that changes color with the lighting level, all of which is anchored to the right of the window when the window resizes.

Post Reply

Who is online

Users browsing this forum: No registered users and 10 guests