Page 1 of 1

Having some trouble with vertical gauges

Posted: Sat Sep 05, 2015 9:24 pm
by tarkenton
Hey folks, been playing with this off and on for a few weeks and I'm stumped. So figured I'd appeal to the greater minds than mine to see what I'm doing wrong. Long and short of it, I've been working on a new UI after having learned a good bit from Akaya's layout template that they were nice enough to share. Here's a shot of how it is supposed to/was looking.

picpaste.com/pics/Screenshot_2015-07-25_18.59.48-sQQyxa6a.1441487117.png

Haven't touched any code that ought to effect the gauges, but lately, they've been doing this when I open the profile. I have to go into the scripts, click around a bit, and then they fix themselves.

picpaste.com/pics/Screenshot_2015-09-05_13.46.58-oF95tDis.1441487009.png

The other interesting thing is that the bars will continuously shrink if I click on the different scripts that I have, even those that are not related to the UI.

picpaste.com/pics/Screenshot_2015-09-05_14.08.26-b4K7Bfvu.1441487342.png

Any insight into what exactly is going on would be awesome.

Here's the relevant code for creating my layout, and then manipulating the bars around.

Portioning the screen
Code: [show] | [select all] lua
UI.Right = Geyser.Container:new({
	name = "UI.Right",
	x = "75%", y = 0,
	width = "25%",
	height = "100%",
})

UI.Bottom = Geyser.Container:new({
	name = "UI.Bottom",
	x = 0, y = "80%",
	width = "75%",
	height = "20%",
})

UI.Status = Geyser.Label:new({
	name = "UI.Status",
	x = 0, y = "75%",
	width = "75%",
	height = "1%",
})

UI.StatusBars = Geyser.Container:new({
	name = "UI.StatusBars",
	x = 0, y = "76%",
	width = "75%",
	height = "4%",
})
Creating the HBox for the gauges
Code: [show] | [select all] lua
UI.BarBox = Geyser.HBox:new({
	name = "UI.BarBox",
	x = "33%", y = 0,
	width = "33%",
	height = "100%",
}, UI.Bottom)
Creating the gauges, giving them a random value when they're first drawn
Code: [show] | [select all] lua
UI.HPBar = Geyser.Gauge:new({
	name = "UI.HPBar",
	x = 0, y = 0,
	width = "16%",
	height = "100%",
	orientation = "vertical",
}, UI.BarBox)
UI.HPBar.back:setStyleSheet(UI.GaugeBackCSS:getCSS())
UI.GaugeFrontCSS:set("background-color","red")
UI.HPBar.front:setStyleSheet(UI.GaugeFrontCSS:getCSS())
UI.HPBar:setValue(math.random(1,100),100)

UI.ManaBar = Geyser.Gauge:new({
	name = "UI.ManaBar",
	x = 0, y = 0,
	width = "16%",
	height = "100%",
	orientation = "vertical",
}, UI.BarBox)
UI.ManaBar.back:setStyleSheet(UI.GaugeBackCSS:getCSS())
UI.GaugeFrontCSS:set("background-color","blue")
UI.ManaBar.front:setStyleSheet(UI.GaugeFrontCSS:getCSS())
UI.ManaBar:setValue(math.random(1,100),100)

UI.EgoBar = Geyser.Gauge:new({
	name = "UI.EgoBar",
	x = 0, y = 0,
	width = "16%",
	height = "100%",
	orientation = "vertical",
}, UI.BarBox)
UI.EgoBar.back:setStyleSheet(UI.GaugeBackCSS:getCSS())
UI.GaugeFrontCSS:set("background-color","gold")
UI.EgoBar.front:setStyleSheet(UI.GaugeFrontCSS:getCSS())
UI.EgoBar:setValue(math.random(1,100),100)

UI.PowerBar = Geyser.Gauge:new({
	name = "UI.PowerBar",
	x = 0, y = 0,
	width = "16%",
	height = "100%",
	orientation = "vertical",
}, UI.BarBox)
UI.PowerBar.back:setStyleSheet(UI.GaugeBackCSS:getCSS())
UI.GaugeFrontCSS:set("background-color","green")
UI.PowerBar.front:setStyleSheet(UI.GaugeFrontCSS:getCSS())
UI.PowerBar:setValue(math.random(1,100),100)

UI.WillpowerBar = Geyser.Gauge:new({
	name = "UI.WillpowerBar",
	x = 0, y = 0,
	width = "16%",
	height = "100%",
	orientation = "vertical",
}, UI.BarBox)
UI.WillpowerBar.back:setStyleSheet(UI.GaugeBackCSS:getCSS())
UI.GaugeFrontCSS:set("background-color","purple")
UI.WillpowerBar.front:setStyleSheet(UI.GaugeFrontCSS:getCSS())
UI.WillpowerBar:setValue(math.random(1,100),100)

UI.EnduranceBar = Geyser.Gauge:new({
	name = "UI.EnduranceBar",
	x = 0, y = 0,
	width = "15%",
	height = "100%",
	orientation = "vertical",
}, UI.BarBox)
UI.EnduranceBar.back:setStyleSheet(UI.GaugeBackCSS:getCSS())
UI.GaugeFrontCSS:set("background-color","orange")
UI.EnduranceBar.front:setStyleSheet(UI.GaugeFrontCSS:getCSS())
UI.EnduranceBar:setValue(math.random(1,100),100)
Updating the gauges when the game sends new values
Code: [show] | [select all] lua
function gauge_updater()
  if (tonumber(gmcp.Char.Vitals.hp) <= tonumber(gmcp.Char.Vitals.maxhp)) then
    UI.HPBar:setValue(tonumber(gmcp.Char.Vitals.hp), tonumber(gmcp.Char.Vitals.maxhp))
    UI.HPBar.front:echo([[<span style = "color: white"><center>HP<br>]]  .. math.floor(((tonumber(gmcp.Char.Vitals.hp)*100)/tonumber(gmcp.Char.Vitals.maxhp)), .5) .. "%</span>")
  else
    UI.HPBar:setValue(tonumber(gmcp.Char.Vitals.maxhp), tonumber(gmcp.Char.Vitals.maxhp))
    UI.HPBar.front:echo([[<span style = "color: white"><center>HP<br>]]  .. math.floor(((tonumber(gmcp.Char.Vitals.hp)*100)/tonumber(gmcp.Char.Vitals.maxhp)), .5) .. "%</span>")
  end 

  if (tonumber(gmcp.Char.Vitals.mp) <= tonumber(gmcp.Char.Vitals.maxmp)) then
    UI.ManaBar:setValue(tonumber(gmcp.Char.Vitals.mp), tonumber(gmcp.Char.Vitals.maxmp))
    UI.ManaBar.front:echo([[<span style = "color: white"><center>MP<br>]]  .. math.floor(((tonumber(gmcp.Char.Vitals.mp)*100)/tonumber(gmcp.Char.Vitals.maxmp)), .5) .. "%</span>")
  else
    UI.ManaBar:setValue(tonumber(gmcp.Char.Vitals.maxmp), tonumber(gmcp.Char.Vitals.maxmp))
    UI.ManaBar.front:echo([[<span style = "color: white"><center>MP<br>]]  .. math.floor(((tonumber(gmcp.Char.Vitals.maxmp)*100)/tonumber(gmcp.Char.Vitals.maxmp)), .5) .. "%</span>")
  end 

  if (tonumber(gmcp.Char.Vitals.pow) <= tonumber(gmcp.Char.Vitals.maxpow)) then
    UI.PowerBar:setValue(tonumber(gmcp.Char.Vitals.pow), tonumber(gmcp.Char.Vitals.maxpow))
    UI.PowerBar.front:echo([[<span style = "color: white"><center>POW<br>]]  .. tonumber(gmcp.Char.Vitals.pow) .. "/" .. tonumber(gmcp.Char.Vitals.maxpow) .. "<br>" .. tonumber(gmcp.Char.Vitals.reserves) .. "%</span>")
  else
    UI.PowerBar:setValue(tonumber(gmcp.Char.Vitals.maxpow), tonumber(gmcp.Char.Vitals.maxpow))
    UI.PowerBar.front:echo([[<span style = "color: white"><center>POW<br>]]  .. tonumber(gmcp.Char.Vitals.maxpow) .. "/" .. tonumber(gmcp.Char.Vitals.maxpow) .. "<br>" .. tonumber(gmcp.Char.Vitals.reserves) .. "%</span>")
  end 

  if (tonumber(gmcp.Char.Vitals.ego) <= tonumber(gmcp.Char.Vitals.maxego)) then
    UI.EgoBar:setValue(tonumber(gmcp.Char.Vitals.ego), tonumber(gmcp.Char.Vitals.maxego))
    UI.EgoBar.front:echo([[<span style = "color: black"><center>EGO<br>]]  .. math.floor(((tonumber(gmcp.Char.Vitals.ego)*100)/tonumber(gmcp.Char.Vitals.maxego)), .5) .. "%</span>")
  else
    UI.EgoBar:setValue(tonumber(gmcp.Char.Vitals.maxego), tonumber(gmcp.Char.Vitals.maxego))
    UI.EgoBar.front:echo([[<span style = "color: black"><center>EGO<br>]]  .. math.floor(((tonumber(gmcp.Char.Vitals.maxego)*100)/tonumber(gmcp.Char.Vitals.maxego)), .5) .. "%</span>")
  end 

  if (tonumber(gmcp.Char.Vitals.wp) <= tonumber(gmcp.Char.Vitals.maxwp)) then
    UI.WillpowerBar:setValue(tonumber(gmcp.Char.Vitals.wp), tonumber(gmcp.Char.Vitals.maxwp))
    UI.WillpowerBar.front:echo([[<span style = "color: white"><center>WILL<br>]]  .. math.floor(((tonumber(gmcp.Char.Vitals.wp)*100)/tonumber(gmcp.Char.Vitals.maxwp)), .5) .. "%</span>")
  else
    UI.WillpowerBar:setValue(tonumber(gmcp.Char.Vitals.maxwp), tonumber(gmcp.Char.Vitals.maxwp))
    UI.WillpowerBar.front:echo([[<span style = "color: white"><center>WILL<br>]]  .. math.floor(((tonumber(gmcp.Char.Vitals.maxwp)*100)/tonumber(gmcp.Char.Vitals.maxwp)), .5) .. "%</span>")
  end 

  if (tonumber(gmcp.Char.Vitals.ep) <= tonumber(gmcp.Char.Vitals.maxep)) then
    UI.EnduranceBar:setValue(tonumber(gmcp.Char.Vitals.ep), tonumber(gmcp.Char.Vitals.maxep))
    UI.EnduranceBar.front:echo([[<span style = "color: black"><center>END<br>]]  .. math.floor(((tonumber(gmcp.Char.Vitals.ep)*100)/tonumber(gmcp.Char.Vitals.maxep)), .5) .. "%</span>")
  else
    UI.EnduranceBar:setValue(tonumber(gmcp.Char.Vitals.maxpep), tonumber(gmcp.Char.Vitals.maxep))
    UI.EnduranceBar.front:echo([[<span style = "color: black"><center>END<br>]]  .. math.floor(((tonumber(gmcp.Char.Vitals.maxep)*100)/tonumber(gmcp.Char.Vitals.maxep)), .5) .. "%</span>")
  end 

  if (tonumber(gmcp.Char.Vitals.nl)) then
  	UI.XPBar:setValue(tonumber(gmcp.Char.Vitals.nl), 100)
  	UI.XPBar.front:echo([[<span style = "color: white"><center>XP: ]] .. (100-tonumber(gmcp.Char.Vitals.nl)) .. "% TNL</span>")
  else
  	if UI.maxEssence then
  		UI.XPBar:setValue(tonumber(gmcp.Char.Vitals.essence),UI.maxEssence)
  		UI.XPBar.front:echo([[<span style = "color: white"><center>ESS: ]] .. tonumber(string.format("%.3f", (gmcp.Char.Vitals.essence/1000000))) .. "m/" .. tonumber(string.format("%.1f", (UI.maxEssence/1000000))) .. "m</span>")
  	else
  		UI.XPBar:setValue(tonumber(gmcp.Char.Vitals.essence),tonumber(gmcp.Char.Vitals.essence))
  		UI.XPBar.front:echo([[<span style = "color: white"><center>ESS: ]] .. tonumber(string.format("%.3f", (gmcp.Char.Vitals.essence/1000000))) .. "m/" .. tonumber(string.format("%.3f", (gmcp.Char.Vitals.essence/1000000))) .. "m</span>")
  	end
  end
end

Re: Having some trouble with vertical gauges

Posted: Wed Sep 09, 2015 4:18 am
by tarkenton
After some playing, and deciding to scrap that profile for a new one, I think the problem lies in using an HBox to contain the gauges in instead of just slapping them inside of a regular container and positioning them manually.