Minimalistic Text oUF

Jonisaurus · 10-20-13, 09:24 PM

I don't have much programming ability and can't really figure this out myself...

I need some oUF code to make a super minimalistic player and target frame. It should not consist of any bars or pictures, only the following in that order and arrangement:

playerHP%, playerPower% ----- targetHP%, targetPower%
playerName, playerLevel ------- targetLevel, targetName

With distinct colours for HP, level, different power types, class.

That's it. I would be immensely grateful if you could help. I don't know how to to do this properly.

It would be nice to simply inject this into another small oUF layout lua file I already have to combine the two (the one I have has 0 font/text at the moment).

Thanks for the help!

zork · 10-21-13, 03:23 AM

First set yourself up some color functions that you can use in tags later on.

Color functions

Lua Code:

--------------------------------------
--VARIABLES
--------------------------------------
 
local PowerBarColor = PowerBarColor
local RAID_CLASS_COLORS = RAID_CLASS_COLORS
local FACTION_BAR_COLORS = FACTION_BAR_COLORS
local abs, floor, format = abs, floor, format
 
--------------------------------------
--COLOR LIB
--------------------------------------
 
--gradient color lib
local CS = CreateFrame("ColorSelect")
 
--get HSV from RGB color
function CS:GetHSVColor(color)
  self:SetColorRGB(color.r, color.g, color.b)
  local h,s,v = self:GetColorHSV()
  return {h=h,s=s,v=v}
end
 
--get RGB from HSV color
function CS:GetRGBColor(color)
  self:SetColorHSV(color.h, color.s, color.v)
  local r,g,b = self:GetColorRGB()
  return {r=r,g=g,b=b}
end
 
--input two HSV colors and a percentage
--returns new HSV color
function CS:GetSmudgeColorHSV(colorA,colorB,percentage)
  local colorC = {}
  --check if the angle between the two H values is > 180
  if abs(colorA.h-colorB.h) > 180 then
    local angle = (360-abs(colorA.h-colorB.h))*percentage
    if colorA.h < colorB.h then
      colorC.h = floor(colorA.h-angle)
      if colorC.h < 0 then
        colorC.h = 360+colorC.h
      end
    else
      colorC.h = floor(colorA.h+angle)
      if colorC.h > 360 then
        colorC.h = colorC.h-360
      end
    end
  else
    colorC.h = floor(colorA.h-(colorA.h-colorB.h)*percentage)
  end    
  colorC.s = colorA.s-(colorA.s-colorB.s)*percentage
  colorC.v = colorA.v-(colorA.v-colorB.v)*percentage
  return colorC
end
 
local redColor = CS:GetHSVColor({r=1,g=0,b=0})
local greenColor = CS:GetHSVColor({r=0,g=1,b=0})
 
--------------------------------------
--GET RGB as HEX-Color
--------------------------------------
 
local function GetHexColor(color)
  return format("%02x%02x%02x", color.r*255, color.g*255, color.b*255)
end
 
--------------------------------------
--COLOR FUNCTIONS
--------------------------------------
 
--GetPowerTypeColor func
local function GetPowerTypeColor(unit)
  if not unit then return end
  local id, power, r, g, b = UnitPowerType(unit)
  local color = PowerBarColor[power]
  if color then
    r, g, b = color.r, color.g, color.b
  end
  return {r=r,g=g,b=b}
end
 
--GetLevelColor func
local function GetLevelColor(unit)
  if not unit then return end
  return GetQuestDifficultyColor(unit)
end
 
--GetUnitColor func
local function GetUnitColor(unit)
  if not unit then return end
  local color
  if UnitIsDeadOrGhost(unit) or not UnitIsConnected(unit) then
    color = {r = 0.5, g = 0.5, b = 0.5}
  elseif UnitIsTapped(unit) and not UnitIsTappedByPlayer(unit) then
    color = {r = 0.5, g = 0.5, b = 0.5}
  elseif UnitIsPlayer(unit) then
    color = RAID_CLASS_COLORS[select(2, UnitClass(unit))]
  else
    color = FACTION_BAR_COLORS[UnitReaction(unit, "player")]
  end
  return color
end
 
--GetHealthColor func  
local function GetHealthColor(unit)
  if not unit then return end
  local hcur, hmax = UnitHealth(unit), UnitHealthMax(unit)
  local hper = 0
  if hmax > 0 then hper = hcur/hmax end
  --you may need to swap red and green color
  return CS:GetRGBColor(CS:GetSmudgeColorHSV(redColor,greenColor,hper))
end

After that you set up 4 tags for UnitLevel, UnitName, UnitPower and UnitHealth coloring.

Lua Code:

--------------------------------------
--TAGS
--------------------------------------
 
--unit name tag
oUF.Tags.Methods["unit:name"] = function(unit)
  local name = oUF.Tags.Methods["name"](unit)
  local color GetUnitColor(unit)
  if color then
    return "|cff"..GetHexColor(color)..name.."|r"
  else
    return "|cffff00ff"..name.."|r"
  end
end
oUF.Tags.Events["unit:name"] = "UNIT_NAME_UPDATE UNIT_CONNECTION"
 
--unit level tag
oUF.Tags.Methods["unit:level"] = function(unit)
  local level = oUF.Tags.Methods["level"](unit)
  local color GetLevelColor(unit)
  if color then
    return "|cff"..GetHexColor(color)..level.."|r"
  else
    return "|cffff00ff"..level.."|r"
  end
end
oUF.Tags.Events["unit:level"] = "UNIT_NAME_UPDATE UNIT_CONNECTION"
 
--unit health tag
oUF.Tags.Methods["unit:health"] = function(unit)
  local perhp = oUF.Tags.Methods["perhp"](unit)
  local color GetHealthColor(unit)
  if color then
    return "|cff"..GetHexColor(color)..perhp.."|r"
  else
    return "|cffff00ff"..perhp.."|r"
  end
end
oUF.Tags.Events["unit:health"] = "UNIT_HEALTH_FREQUENT UNIT_MAXHEALTH"
 
--unit power tag
oUF.Tags.Methods["unit:power"] = function(unit)
  local perpp = oUF.Tags.Methods["perpp"](unit)
  local color GetPowerColor(unit)
  if color then
    return "|cff"..GetHexColor(color)..perpp.."|r"
  else
    return "|cffff00ff"..perpp.."|r"
  end
end
oUF.Tags.Events["unit:power"] = "UNIT_DISPLAYPOWER UNIT_POWER_FREQUENT UNIT_MAXPOWER"

Once you have the tags set up you can easily bind them to any font string. So in your unit style you set up 4 font strings.

Lua Code:

--------------------------------------
  --FONT STRINGS
  --------------------------------------
   
  --fontstring func
  local function NewFontString(parent,family,size,outline,layer)
    local fs = parent:CreateFontString(nil, layer or "OVERLAY")
    fs:SetFont(family,size,outline)
    fs:SetShadowColor(0,0,0,1)
    return fs
  end
  
  local function CreateUnitStrings(self)
     
    local name = NewFontString(self, STANDARD_TEXT_FONT, 12, "THINOUTLINE")
    name:SetPoint("CENTER", self, 0, 10)
    self:Tag(name, "[unit:name]")
     
    local hpval = NewFontString(self, STANDARD_TEXT_FONT, 12, "THINOUTLINE")
    hpval:SetPoint("RIGHT", name, 5,0)
    self:Tag(hpval, "[unit:health]")
     
    local level = NewFontString(self, STANDARD_TEXT_FONT, 12, "THINOUTLINE")
    level:SetPoint("CENTER", self, 0, -10)
    self:Tag(level, "[unit:level]")
     
    local ppval = NewFontString(self, STANDARD_TEXT_FONT, 12, "THINOUTLINE")
    ppval:SetPoint("RIGHT", level, 5,0)
    self:Tag(ppval, "[unit:power]")
    
  end

Last part is to set up a unit template function and spawn your two units:

Lua Code:

--------------------------------------
  --STYLE TEMPLATE FUNC
  --------------------------------------
    
  --style func
  local function CreateUnitTemplate(self)
    --create the unit strings
    CreateUnitStrings(self)
  end
 
  --------------------------------------
  --UNIT SPAWN
  --------------------------------------
  
  --register the style function
  oUF:RegisterStyle("DefaultTemplate", CreateUnitTemplate)
  oUF:SetActiveStyle("DefaultTemplate")
  
  --spawn player
  oUF:Spawn("player","DefaultTemplate"):SetPoint("CENTER", UIParent, -100, 0)
  
  --spawn target
  oUF:Spawn("target","DefaultTemplate"):SetPoint("CENTER", UIParent, 100, 0)

-- Bringing everything together --------------------

Thus the final result would be the following. Careful though I drycoded the whole thing. There may be typos.

Lua Code:

--------------------------------------
  --VARIABLES
  --------------------------------------
   
  local PowerBarColor = PowerBarColor
  local RAID_CLASS_COLORS = RAID_CLASS_COLORS
  local FACTION_BAR_COLORS = FACTION_BAR_COLORS
  local abs, floor, format = abs, floor, format
   
  --------------------------------------
  --COLOR LIB
  --------------------------------------
   
  --gradient color lib
  local CS = CreateFrame("ColorSelect")
   
  --get HSV from RGB color
  function CS:GetHSVColor(color)
    self:SetColorRGB(color.r, color.g, color.b)
    local h,s,v = self:GetColorHSV()
    return {h=h,s=s,v=v}
  end
   
  --get RGB from HSV color
  function CS:GetRGBColor(color)
    self:SetColorHSV(color.h, color.s, color.v)
    local r,g,b = self:GetColorRGB()
    return {r=r,g=g,b=b}
  end
   
  --input two HSV colors and a percentage
  --returns new HSV color
  function CS:GetSmudgeColorHSV(colorA,colorB,percentage)
    local colorC = {}
    --check if the angle between the two H values is > 180
    if abs(colorA.h-colorB.h) > 180 then
      local angle = (360-abs(colorA.h-colorB.h))*percentage
      if colorA.h < colorB.h then
        colorC.h = floor(colorA.h-angle)
        if colorC.h < 0 then
          colorC.h = 360+colorC.h
        end
      else
        colorC.h = floor(colorA.h+angle)
        if colorC.h > 360 then
          colorC.h = colorC.h-360
        end
      end
    else
      colorC.h = floor(colorA.h-(colorA.h-colorB.h)*percentage)
    end    
    colorC.s = colorA.s-(colorA.s-colorB.s)*percentage
    colorC.v = colorA.v-(colorA.v-colorB.v)*percentage
    return colorC
  end
   
  local redColor = CS:GetHSVColor({r=1,g=0,b=0})
  local greenColor = CS:GetHSVColor({r=0,g=1,b=0})
   
  --------------------------------------
  --GET RGB as HEX-Color
  --------------------------------------
   
  local function GetHexColor(color)
    return format("%02x%02x%02x", color.r*255, color.g*255, color.b*255)
  end
   
  --------------------------------------
  --COLOR FUNCTIONS
  --------------------------------------
   
  --GetPowerTypeColor func
  local function GetPowerTypeColor(unit)
    if not unit then return end
    local id, power, r, g, b = UnitPowerType(unit)
    local color = PowerBarColor[power]
    if color then
      r, g, b = color.r, color.g, color.b
    end
    return {r=r,g=g,b=b}
  end
   
  --GetLevelColor func
  local function GetLevelColor(unit)
    if not unit then return end
    return GetQuestDifficultyColor(unit)
  end
   
  --GetUnitColor func
  local function GetUnitColor(unit)
    if not unit then return end
    local color
    if UnitIsDeadOrGhost(unit) or not UnitIsConnected(unit) then
      color = {r = 0.5, g = 0.5, b = 0.5}
    elseif UnitIsTapped(unit) and not UnitIsTappedByPlayer(unit) then
      color = {r = 0.5, g = 0.5, b = 0.5}
    elseif UnitIsPlayer(unit) then
      color = RAID_CLASS_COLORS[select(2, UnitClass(unit))]
    else
      color = FACTION_BAR_COLORS[UnitReaction(unit, "player")]
    end
    return color
  end
   
  --GetHealthColor func  
  local function GetHealthColor(unit)
    if not unit then return end
    local hcur, hmax = UnitHealth(unit), UnitHealthMax(unit)
    local hper = 0
    if hmax > 0 then hper = hcur/hmax end
    --you may need to swap red and green color
    return CS:GetRGBColor(CS:GetSmudgeColorHSV(redColor,greenColor,hper))
  end
  
  --------------------------------------
  --TAGS
  --------------------------------------
   
  --unit name tag
  oUF.Tags.Methods["unit:name"] = function(unit)
    local name = oUF.Tags.Methods["name"](unit)
    local color GetUnitColor(unit)
    if color then
      return "|cff"..GetHexColor(color)..name.."|r"
    else
      return "|cffff00ff"..name.."|r"
    end
  end
  oUF.Tags.Events["unit:name"] = "UNIT_NAME_UPDATE UNIT_CONNECTION"
   
  --unit level tag
  oUF.Tags.Methods["unit:level"] = function(unit)
    local level = oUF.Tags.Methods["level"](unit)
    local color GetLevelColor(unit)
    if color then
      return "|cff"..GetHexColor(color)..level.."|r"
    else
      return "|cffff00ff"..level.."|r"
    end
  end
  oUF.Tags.Events["unit:level"] = "UNIT_NAME_UPDATE UNIT_CONNECTION"
   
  --unit health tag
  oUF.Tags.Methods["unit:health"] = function(unit)
    local perhp = oUF.Tags.Methods["perhp"](unit)
    local color GetHealthColor(unit)
    if color then
      return "|cff"..GetHexColor(color)..perhp.."|r"
    else
      return "|cffff00ff"..perhp.."|r"
    end
  end
  oUF.Tags.Events["unit:health"] = "UNIT_HEALTH_FREQUENT UNIT_MAXHEALTH"
   
  --unit power tag
  oUF.Tags.Methods["unit:power"] = function(unit)
    local perpp = oUF.Tags.Methods["perpp"](unit)
    local color GetPowerColor(unit)
    if color then
      return "|cff"..GetHexColor(color)..perpp.."|r"
    else
      return "|cffff00ff"..perpp.."|r"
    end
  end
  oUF.Tags.Events["unit:power"] = "UNIT_DISPLAYPOWER UNIT_POWER_FREQUENT UNIT_MAXPOWER"
  
  
  --------------------------------------
  --FONT STRINGS
  --------------------------------------
   
  --fontstring func
  local function NewFontString(parent,family,size,outline,layer)
    local fs = parent:CreateFontString(nil, layer or "OVERLAY")
    fs:SetFont(family,size,outline)
    fs:SetShadowColor(0,0,0,1)
    return fs
  end
  
  local function CreateUnitStrings(self)
     
    local name = NewFontString(self, STANDARD_TEXT_FONT, 12, "THINOUTLINE")
    name:SetPoint("CENTER", self, 0, 10)
    self:Tag(name, "[unit:name]")
     
    local hpval = NewFontString(self, STANDARD_TEXT_FONT, 12, "THINOUTLINE")
    hpval:SetPoint("RIGHT", name, 5,0)
    self:Tag(hpval, "[unit:health]")
     
    local level = NewFontString(self, STANDARD_TEXT_FONT, 12, "THINOUTLINE")
    level:SetPoint("CENTER", self, 0, -10)
    self:Tag(level, "[unit:level]")
     
    local ppval = NewFontString(self, STANDARD_TEXT_FONT, 12, "THINOUTLINE")
    ppval:SetPoint("RIGHT", level, 5,0)
    self:Tag(ppval, "[unit:power]")
    
  end
  
  
  --------------------------------------
  --STYLE TEMPLATE FUNC
  --------------------------------------
    
  --style func
  local function CreateUnitTemplate(self)
    --create the unit strings
    CreateUnitStrings(self)
  end
 
  --------------------------------------
  --UNIT SPAWN
  --------------------------------------
  
  --register the style function
  oUF:RegisterStyle("DefaultTemplate", CreateUnitTemplate)
  oUF:SetActiveStyle("DefaultTemplate")
  
  --spawn player
  oUF:Spawn("player","DefaultTemplate"):SetPoint("CENTER", UIParent, -100, 0)
  
  --spawn target
  oUF:Spawn("target","DefaultTemplate"):SetPoint("CENTER", UIParent, 100, 0)

Jonisaurus · 10-21-13, 07:57 AM

Hey Zork,

thanks so much for taking time and coding all of that!
I read through it and I thought I understood it.

We create tag functions to attain information about HP, PP through the oUF functions and then return values. We then have a basic font string creation function which we use to create 4 font strings that themselves get information from the tag functions. Then we turn all of that into a template and spawn units with that template.

I still can't get it to work, though. Nothing happens when I try to load it up, except that the game becomes really choppy whenever I cast a spell. :/
I feel stupid!

zork · 10-21-13, 08:26 AM

I will try to translate it into a layout when I get home.

When you are coding make sure you go to your interface settings under help/others and enable "show lua errors". All lua errors have to be fixed in first place.

Jonisaurus · 10-21-13, 10:20 AM

That would be great, I could see what I did wrong then.

zork · 10-21-13, 11:01 AM

Ok, I fixed the bugs.

Addon: http://www.wowinterface.com/download...oUF_Ascii.html
SVN: http://code.google.com/p/rothui/sour...5.0/oUF_Ascii/

*edit*
Added template functions and a targettarget unit.

Jonisaurus · 10-22-13, 07:56 AM

Your layout works wonderfully.
I edited it according to my needs (for my own textures).
I have a few questions. :P

The Power font colours, are those the standard WoW resource type colours? I think so. Is there a good way I can customise them? For this layout specifically or generally?
If I do it for the layout I would have to add lots of code I think, right? Is there a way to just easily edit the resource type colours for all of WoW?
And connecting to that, I'd like to assign a static colour to the HP fontstrings. Can I just substitute a fixed r,g,b colour into the GetHealthColour function or is that brutalist? Haha.
The other thing I would like to do is make the position of each fontstring static so that for example the mana perPP fontstring doesn't jump to the right if the perHP fontstring becomes shorter (99 instead of 100 for example). I think I knew how to do this, but I forgot. It's done with the tags I think?

I'm also experimenting with your oUF_Donut ring addon. It is pretty cool. Compliments.

zork · 10-22-13, 08:45 AM

1.) instead of

Lua Code:

local PowerBarColor  = PowerBarColor

do

Lua Code:

local PowerBarColor = {}
PowerBarColor["MANA"] = { r = 0.00, g = 0.00, b = 1.00 }
PowerBarColor["RAGE"] = { r = 1.00, g = 0.00, b = 0.00 }
PowerBarColor["FOCUS"] = { r = 1.00, g = 0.50, b = 0.25 }
PowerBarColor["ENERGY"] = { r = 1.00, g = 1.00, b = 0.00 }
PowerBarColor["CHI"] = { r = 0.71, g = 1.0, b = 0.92 }
PowerBarColor["RUNES"] = { r = 0.50, g = 0.50, b = 0.50 }
PowerBarColor["RUNIC_POWER"] = { r = 0.00, g = 0.82, b = 1.00 }
PowerBarColor["SOUL_SHARDS"] = { r = 0.50, g = 0.32, b = 0.55 }
PowerBarColor["ECLIPSE"] = { negative = { r = 0.30, g = 0.52, b = 0.90 },  positive = { r = 0.80, g = 0.82, b = 0.60 }}
PowerBarColor["HOLY_POWER"] = { r = 0.95, g = 0.90, b = 0.60 }
-- vehicle colors
PowerBarColor["AMMOSLOT"] = { r = 0.80, g = 0.60, b = 0.00 }
PowerBarColor["FUEL"] = { r = 0.0, g = 0.55, b = 0.5 }
PowerBarColor["STAGGER"] = { {r = 0.52, g = 1.0, b = 0.52}, {r = 1.0, g = 0.98, b = 0.72}, {r = 1.0, g = 0.42, b = 0.42},}
 
-- these are mostly needed for a fallback case (in case the code tries to index a power token that is missing from the table,
-- it will try to index by power type instead)
PowerBarColor[0] = PowerBarColor["MANA"]
PowerBarColor[1] = PowerBarColor["RAGE"]
PowerBarColor[2] = PowerBarColor["FOCUS"]
PowerBarColor[3] = PowerBarColor["ENERGY"]
PowerBarColor[4] = PowerBarColor["CHI"] 
PowerBarColor[5] = PowerBarColor["RUNES"]
PowerBarColor[6] = PowerBarColor["RUNIC_POWER"]
PowerBarColor[7] = PowerBarColor["SOUL_SHARDS"]
PowerBarColor[8] = PowerBarColor["ECLIPSE"]
PowerBarColor[9] = PowerBarColor["HOLY_POWER"]

Adjust the colors accordingly.

2.) Yes you can. Just replace that with GetHealthColor(unit) with {r=1,g=0,b=0}. It makes me feel sad for the HSV color calc function though.

3.) You can do that easily. Just give your fontstrings a size, like: name:SetSize(64,32). You may need to experiment a bit with the sizes. You do that where you have your fontstring setpoints. Not instead, you do it additionally. As a hint...when you are doing such a thing make use of some textures. Like:

Lua Code:

local texture = self:CreateTexture(nil, "BACKGROUND", nil, -8)
texture:SetTexture(1,1,1)
texture:SetVertexColor(1,0,0,0.2)
texture:SetAllPoints(name)--variable of the fontstring name

That way you can check sizes more easily.

Gonna test some statusbar ideas in the next days.

Torhal · 10-22-13, 09:29 AM

Or, if you want a more concise syntax:

Lua Code:

local PowerBarColor = {
    MANA = { r = 0.00, g = 0.00, b = 1.00 },
    RAGE = { r = 1.00, g = 0.00, b = 0.00 },
    FOCUS = { r = 1.00, g = 0.50, b = 0.25 },
    ENERGY = { r = 1.00, g = 1.00, b = 0.00 },
    CHI = { r = 0.71, g = 1.0, b = 0.92 },
    RUNES = { r = 0.50, g = 0.50, b = 0.50 },
    RUNIC_POWER = { r = 0.00, g = 0.82, b = 1.00 },
    SOUL_SHARDS = { r = 0.50, g = 0.32, b = 0.55 },
    ECLIPSE = { negative = { r = 0.30, g = 0.52, b = 0.90 }, positive = { r = 0.80, g = 0.82, b = 0.60 } },
    HOLY_POWER = { r = 0.95, g = 0.90, b = 0.60 },
    -- vehicle colors
    AMMOSLOT = { r = 0.80, g = 0.60, b = 0.00 },
    FUEL = { r = 0.0, g = 0.55, b = 0.5 },
    STAGGER = { { r = 0.52, g = 1.0, b = 0.52 }, { r = 1.0, g = 0.98, b = 0.72 }, { r = 1.0, g = 0.42, b = 0.42 }, },
}

Jonisaurus · 10-22-13, 12:00 PM

I wanted to give a kind of conceptual sample of what I'm working on.

I'm building a paintbrush themed minimalistic interface. Inspired a bit by Guild Wars 2.

Those are my own textures but they are still very rough. As you can see the player frame texture is already further than the target one. By the way, Illustrator sucks for .tga exportation. <.<

And Zork, that is your oUF_Donut layout. I experimented a bit with it, added some templates and edited the Alpha Channels of your texture to allow me to isolate one ring per frame that is transparent in the middle.

You built an amazing ring layout! It's a bit rough in animation and texture, but it works. It's far above my newbie coding knowledge but if you know how to smoothen up the circle edge texture and/or animation... But don't do it if you don't want to. :P

zork · 10-23-13, 07:09 AM

That is where the spark comes into play. A spark is a blend texture that will overlay harsh edges. The ring itself will by nice and shiny, but if you rotate the texture the former good looking ring edge will become harsh and bad looking. Using a spark can overlay that issue and give a nice effect as a bonus.

If you have a very small final ring make your ring texture small aswell. This can reduce fragments introduced by resizing.

Nice work btw.