Thread Tools Display Modes
07-08-09, 01:55 PM   #1
Katae
A Cobalt Mageweaver
AddOn Author - Click to view addons
Join Date: Jun 2007
Posts: 208
LitePanels

This is the official discussion thread for LitePanels. Feel free to submit your own scripts, layouts, or general questions here. Please use the addon's comments for bug reporting and feature requests.

What is LitePanels exactly?
It's basically a framework for quickly building and editing panel art and scripts from a layout file. LitePanels has no GUI configuration. Full documentation is provided in the default layout.lua file.

Who should use it?
UI compilation authors, anyone who wants a more open way to edit layouts, or anyone with a slight programming background or willing to learn.

There's a slight learning curve, but once understood what a layout should look like, panels can be created quickly and shared easily.

Tutorials
» Getting Started
» Using Art Textures and Viewport
» Gradients, Text, and Script Examples

Plugins
» LiteStats - Conceptual data text addon.

User Scripts, UIs
» Skarj: Skaarj UI
» bluenjoy: BluenJoyUI
» Aesh: NeoClassic
» Minerv: KUI
» Dajova: Dajova UI mini
» Katae: Buff Watch

Please notify me to add your link to this list.

Development by myself has ceased, any interested individuals may fork me @ github to fix bugs or update patch compatibility.

Last edited by Katae : 11-25-11 at 09:31 PM.
  Reply With Quote
07-08-09, 07:29 PM   #2
Katae
A Cobalt Mageweaver
AddOn Author - Click to view addons
Join Date: Jun 2007
Posts: 208
Gradients with a stats display



I'll start with some scripts I've been using. This is the same layout code I used for the stats display, copy and paste this into the default or your character's profile. This also demonstrates the built-in class coloring.

If you want to only use the gradient box, you could remove the stats panel (name = "Stats") and tweak the dimensions, locations, and colors. (Font in the screenshot is 04B_03)

Code:
lpanels:CreateLayout("Stats", {
    -- Stat Container
    {    name = "Container",
        anchor_to = "TOP",
        width = 280, height = 20,
        x_off = 0, y_off = -30,
        bg_alpha = 0,
    },
    -- Left mid-section of the box
    {    name = "BoxL", parent = "Container",
        anchor_to = "LEFT",
        width = "50%", height = "100%",
        gradient = "H",
        bg_color = "CLASS", gradient_color = "CLASS",
        bg_alpha = 0, gradient_alpha = 0.2,
    },
    -- Right mid-section
    {    name = "BoxR", parent = "Container",
        anchor_to = "RIGHT",
        width = "50%", height = "100%",
        gradient = "H",
        bg_color = "CLASS", gradient_color = "CLASS",
        bg_alpha = 0.2, gradient_alpha = 0,
    },
    -- Top Left gradient line
    {    name = "LineTL",
        parent = "BoxL", anchor_to = "TOP",
        width = "100%", height = 1,
        gradient = "H",
        bg_color = "CLASS", gradient_color = "CLASS",
        bg_alpha = 0, gradient_alpha = 0.8,
    },
    -- Top right line
    {    name = "LineTR",
        parent = "BoxR", anchor_to = "TOP",
        width = "100%", height = 1,
        gradient = "H",
        bg_color = "CLASS", gradient_color = "CLASS",
        bg_alpha = 0.8, gradient_alpha = 0,
    },
    -- Bottom left line
    {    name = "LineBL",
        parent = "BoxL", anchor_to = "BOTTOM",
        width = "100%", height = 1,
        gradient = "H",
        bg_color = "CLASS", gradient_color = "CLASS",
        bg_alpha = 0, gradient_alpha = 0.8,
    },
    -- Bottom right line
    {    name = "LineBR",
        parent = "BoxR", anchor_to = "BOTTOM",
        width = "100%", height = 1,
        gradient = "H",
        bg_color = "CLASS", gradient_color = "CLASS",
        bg_alpha = 0.8, gradient_alpha = 0,
    },
    -- Text display
    {    name = "Stats", parent = "Container",
        anchor_to = "CENTER", anchor_from = "CENTER",
        text = {
            string = function()
                -- monies
                local gold = format("%.1f|cffffd700g|r",GetMoney()/10000)

                -- durability
                local durability = 100
                for i = 1, 11 do
                    if GetInventoryItemDurability(i) ~= nil then
                        local dur, max = GetInventoryItemDurability(i)
                        local perc = dur / max * 100
                        if perc < durability then
                            durability = floor(perc)
                        end
                    end
                end

                -- fps
                local fps = floor(GetFramerate())

                -- memory
                local memory = 0
                UpdateAddOnMemoryUsage()
                for i = 1, GetNumAddOns() do
                    if IsAddOnLoaded(i) then
                        memory = memory + GetAddOnMemoryUsage(i)
                    end
                end
                memory = format("%.1f", memory/1024)

                -- latency
                local latency = select(3,GetNetStats())

                return format(":: %s :: %s%%dur :: %sfps :: %smB :: %sms ::", gold, durability, fps, memory, latency)
            end, update = 1,
            size=10, shadow=1, font = "Fonts\\FRIZQT__.TTF",
        }
    }
}); lpanels:ApplyLayout(nil, "Stats")
Afker "mod"



If you're like me and you have auto-clear afk turned off, you may sometimes unintentionally spam your friends. This functionality is much like LazyAFK.

Whether this is useful for you or not, I'm hoping to demonstrate how simple addons can be created with relative ease using this framework. Also note that you may create multiple text objects per frame.

Code:
lpanels:CreateLayout("Afker", {
    {    name = "AFK", anchor_to = "TOP", y_off = -210,
        bg_alpha = 0.5, width = 200, height = 75,
        border = "SOLID", border_color = "1 1 0",
        text = {
        -- "YOU ARE AFK!"
            {    string = "You are AFK!", anchor_to = "TOP", y_off = -10,
                shadow=1, font = "Fonts\\FRIZQT__.TTF", size=14,
            },
            -- "0:00" TIMER
            {    string=function()
                    if afk_timer then
                        local secs = mod(time() - afk_timer, 60)
                        local mins = floor((time() - afk_timer) / 60)
                        return format("%s:%02.f", mins, secs)
                    end
                end, update=0.1,
                shadow=1, font = "Fonts\\FRIZQT__.TTF", size=16,
                anchor_to = "CENTER", color = "1 0.3 0.3"
            },
            -- "RIGHT CLICK TO HIDE"
            {    string="Right click to hide.", anchor_to="BOTTOM", y_off = 10,
                shadow=1, size=8, font = "Fonts\\FRIZQT__.TTF",
            }
        },
        OnLoad = function(self)
            self:RegisterEvent("PLAYER_FLAGS_CHANGED")
            self:Hide()
        end,
        OnEvent = function(self)
            if UnitIsAFK("player") and not afk_timer then
                self.text2:SetText("0:00")
                afk_timer = time()
                self:Show()
            elseif not UnitIsAFK("player") then
                self:Hide()
                afk_timer = nil
            end
        end,
        OnClick = function(self, b)
            self:Hide()
            if b == "LeftButton" then SendChatMessage("", "AFK") end
        end,
        OnEnter = function(self) self.bg:SetTexture(.1,.1,.1,.5) end,
        OnLeave = function(self) self.bg:SetTexture(0,0,0,.5) end
    }
}); lpanels:ApplyLayout(nil, "Afker")
Whether or not these "addons" are useful to you, I would hope you get the feel for how panel codes should be set up.

Last edited by Katae : 08-31-11 at 05:01 AM.
  Reply With Quote
07-08-09, 08:16 PM   #3
Cralor
Mmm... cookies!!!
 
Cralor's Avatar
AddOn Author - Click to view addons
Join Date: Jun 2007
Posts: 772
Nice addon here.

Your AFK example looks a lot like my LazyAFK. I like it!
__________________
Never be satisfied with satisfactory.
  Reply With Quote
07-08-09, 09:15 PM   #4
Katae
A Cobalt Mageweaver
AddOn Author - Click to view addons
Join Date: Jun 2007
Posts: 208
Originally Posted by Cralor View Post
Nice addon here.

Your AFK example looks a lot like my LazyAFK. I like it!
Thanks, I really like the idea behind LazyAFK, it gave me the inspiration
  Reply With Quote
07-10-09, 07:25 AM   #5
zerodark9
A Kobold Labourer
Join Date: Jul 2009
Posts: 1
I guess i'm too new to messing around with the UI to know how exactly to make this work. I have read the documentation but still am very lost.

Would it be possible for you to post your complete lua file so I may see what you did where. That way I have something to go one instead of being completely in the dark.
  Reply With Quote
07-10-09, 05:42 PM   #6
Katae
A Cobalt Mageweaver
AddOn Author - Click to view addons
Join Date: Jun 2007
Posts: 208
Originally Posted by zerodark9 View Post
I guess i'm too new to messing around with the UI to know how exactly to make this work. I have read the documentation but still am very lost.

Would it be possible for you to post your complete lua file so I may see what you did where. That way I have something to go one instead of being completely in the dark.
Hi zerodark! First, you'll need to create a layout. To create one, your layout.lua file will start out looking much like this:

Code:
lpanels:CreateLayout("LayoutName", {
     -- Panel code for this layout will go right here.
}, { bottom = 150, top = 10 }) -- Optional viewport config
This is what a basic layout code looks like. Creating a layout alone will not apply it, you'll need to add that. The first string is the profile, strings after the profile are the names of your layouts you want to apply to the profile. If the profile string is nil, the layouts will be applied to ALL characters. Here's a basic profile you can use for unique characters.
Code:
lpanels:ApplyLayout("n:yourchar r:yourrealm", "LayoutName", "AnotherLayout")
ApplyLayout can be used for as many profiles you need. The profile string is very flexible and NOT case-sensitive, please see the included docs for more examples. Note that all spaces in the realm name must be removed.

Next, you'll want to start making your panels. Lets say, for example, you want to make a black bar at the bottom of your UI. You would use something like this panel code inside of your layout, between the first set of {curly braces}:

Code:
{   name = "BlackBar",    -- names your panel "BlackBar"
    anchor_to = "BOTTOM",    -- positions it at the bottom of the UI
    y_off = 20,        -- moves the whole panel 5 pixels UP
    width = "100%",        -- sets the width to 100% of the UI
    height = 30,        -- sets the height to 30 pixels
    bg_color = "0 0 0",    -- sets the background color to black (r g b) 
    bg_alpha = 0.5,        -- sets the transparency to 50% opaque
},
Great, now maybe you'd like to put a 1 pixel border on the top and bottom of that panel, perhaps you want the color to be of your class. Now your layout will begin to start looking something like this:

Code:
-- Your original black bar panel
{   name = "BlackBar", 
    anchor_to = "BOTTOM", y_off = 20,
    width = "100%", height = 30,
    bg_color = "0 0 0", bg_alpha = 0.4,
},

-- Your new 1 pixel borders, first on the top, second on the bottom of BlackBar
{   name = "BorderTop", parent = "BlackBar",
    anchor_to = "TOP", -- Anchoring to the TOP of "BlackBar"
    width = "100%", height = 1,
    bg_color = "CLASS", bg_alpha = 0.75,
},
{   name = "BorderBottom", parent = "BlackBar",
    anchor_to = "BOTTOM", -- Anchoring to the BOTTOM of "BlackBar"
    width = "100%", height = 1,
    bg_color = "CLASS", bg_alpha = 0.75,
},
Reminder, always always always, put a comma after your closing brackets and attribute values like I have done in the examples. This is probably the top syntax error of all time.

If all was done correctly, you should now have a bar with 2 borders that looks like this.



You'll use other attributes from the documentation such as gradients and textures much the same way. You should also note that every single panel attribute has a default value, which are noted in the docs.

Hope this has cleared up some things for you!

Last edited by Katae : 08-31-11 at 05:01 AM.
  Reply With Quote
07-10-09, 08:43 PM   #7
Katae
A Cobalt Mageweaver
AddOn Author - Click to view addons
Join Date: Jun 2007
Posts: 208
Originally Posted by cbuck View Post
Might someone post an example of how to use textures in a panel? The code looks something like this:

Code:
["Player - Realm"] = {
	{	name = "BoxesRFun",
		width = 512, height = 512,
                tex_file ["texture.tga"],
	},
},
It should be tex_file="texture.tga" if texture.tga is in the media folder.
  Reply With Quote
07-10-09, 08:56 PM   #8
cbuck
A Defias Bandit
AddOn Author - Click to view addons
Join Date: Aug 2008
Posts: 2
Originally Posted by Katae View Post
It should be tex_file="texture.tga" if texture.tga is in the media folder.
Yeah, after looking around the lua website, I thought, "I. Am. Moron." Didn't get my original post down fast enough.

Thanks Working like a charm now. I will post my layouts when I finish converting them from KG. This is SO much easier to deal with than KG....

Again, thanks a ton for the quick reply.

/cbuck
  Reply With Quote
07-23-09, 07:51 PM   #9
Mugrax
A Murloc Raider
 
Mugrax's Avatar
Join Date: Nov 2008
Posts: 5
Intercept mouse clicks

Ive been searching for hours to find out how to get the panels to intercept mouse clicks to no avail. the code I'm using doesn't give any errors but doesn't intercept the mouse clicks either, its like its not even there. this is the part im trying to get to work:

{ name = "Right",
anchor_to = "BOTTOM", y_off = 300, x_off = 546.5,
mouse = false,
width = "272", height = 195,
bg_color = {0,0,0}, bg_alpha = 1,
},

am i using the right code is it in the right place?
thanks in advance for any information anyone can give me.
Mugs

ps: im trying to learn how to write the addons. ive found this a great learning experience. i would prefer for someone to point me in the right direction for finding the information myself through forums, etc instead of just "handing" to me, so to speak. thanks again
  Reply With Quote
07-23-09, 07:57 PM   #10
Katae
A Cobalt Mageweaver
AddOn Author - Click to view addons
Join Date: Jun 2007
Posts: 208
When you set `mouse = true`, this will set the frame to intercept clicks. The same behavior will be default if you give the frame an OnClick, OnEnter, or OnLeave script.
  Reply With Quote
07-23-09, 08:02 PM   #11
Mugrax
A Murloc Raider
 
Mugrax's Avatar
Join Date: Nov 2008
Posts: 5
Thank you

That was fast. thank you. works like a charm
  Reply With Quote
08-02-09, 05:01 PM   #12
Dajova
A Wyrmkin Dreamwalker
 
Dajova's Avatar
AddOn Author - Click to view addons
Join Date: Dec 2007
Posts: 58
I need some help, cause i can't get this to work >.<

I am trying to switch from Btex to LitePanels, but i'm stuck with the fact that i don't know how to use artwork to make it work with it. I wanna make it look like THIS.

Have a idea of how to do it and maybe even supply with the code (i'm a UI supplier, yes, will release this UI when it's done)?
__________________
Livestream | Twitter | YouTube
  Reply With Quote
08-02-09, 05:42 PM   #13
Katae
A Cobalt Mageweaver
AddOn Author - Click to view addons
Join Date: Jun 2007
Posts: 208
Originally Posted by richerich View Post
I wanna make it look like THIS.
I'm going to assume for a minute that it's one image and not three. From the screenshot, it looks like 1280x154 and slightly transparent, so here's what you may be looking for:

Code:
["Default"] = {
    { width=1280, height=154, tex_file="texture", bg_alpha=.95, level=0 }
}
You can use "100%" as the width as well. Also, tex_file is assuming filenames with no path ("texture.tga") are in "Interface\\AddOns\\LitePanels\\media\\".

Placing art with 3 sections +Viewport
The left and right images can both be set to a static width, and the middle image will be stretched to fit any resolution.
Code:
lpanels:CreateLayout("Viewport Art x3", {
    -- Art Container
    { name="Art", width="100%", height=154, bg_alpha=0, level=0 },
    -- Left Section
    { name="Art_L", parent="Art", anchor_to="LEFT", height="100%",
      tex_file="texture_left", width=400 },
    -- Right Section
    { name="Art_R", parent="Art", anchor_to="RIGHT", height="100%",
      tex_file="texture_right", width=400 },
    -- Middle Section
    { name="Art_M", parent="Art", anchor_to="CENTER", height="100%", 
      tex_file="texture_middle",
      OnLoad=function(self) self:SetWidth(self:GetParent():GetWidth() - LP_Art_L:GetWidth() - LP_Art_R:GetWidth()) end
    },
}, { bottom=154 }) -- Viewport (Optional)
lpanels:ApplyLayout(nil, "Viewport Art x3")
Placing art with 4 sections
This was a bit easier than 3 since they can all be 25% width.
Code:
lpanels:CreateLayout("Art x4", {
    -- Art Container
    { name="Art", width="100%", height=200, bg_alpha=0, level=0 },
    -- Texture #1
    { name="Art1", parent="Art", tex_file="texture-1", bg_alpha=.95,
      anchor_to="LEFT", width="25%", height="100%" },
    -- Texture #2
    { name="Art2", parent="Art", tex_file="texture-2", bg_alpha=.95,
      anchor_to="RIGHT", anchor_from="CENTER", width="25%", height="100%" },
    -- Texture #3
    { name="Art3", parent="Art", tex_file="texture-3", bg_alpha=.95,
      anchor_to="LEFT", anchor_from="CENTER", width="25%", height="100%" },
    -- Texture #4
    { name="Art4", parent="Art", tex_file="texture-4", bg_alpha=.95,
      anchor_to="RIGHT", width="25%", height="100%" }
})
lpanels:ApplyLayout(nil, "Art x4")
Viewport Only
Only want a simple viewport? This is all you need.
Code:
lpanels:CreateLayout("Viewport", nil, {bottom=20, top=20})
lpanels:ApplyLayout(nil, "Viewport")

Last edited by Katae : 11-24-09 at 03:32 AM. Reason: 1.5 changes
  Reply With Quote
08-02-09, 08:43 PM   #14
Dajova
A Wyrmkin Dreamwalker
 
Dajova's Avatar
AddOn Author - Click to view addons
Join Date: Dec 2007
Posts: 58
thx for the fast reply, but actually, it's 4 separated images provided from Btex.

Gonna test the code tomorrow, i'll give ya a shout if it works

EDIT: Did a quick testing, but no success... you know any program to merge those 4 images into 1? I have tried paint, but no luck xD
__________________
Livestream | Twitter | YouTube

Last edited by Dajova : 08-02-09 at 09:01 PM.
  Reply With Quote
08-03-09, 03:18 AM   #15
willgk
An Aku'mai Servant
AddOn Author - Click to view addons
Join Date: Dec 2005
Posts: 37
Great Addon!

Last edited by willgk : 08-03-09 at 03:28 AM.
  Reply With Quote
08-03-09, 03:22 AM   #16
Katae
A Cobalt Mageweaver
AddOn Author - Click to view addons
Join Date: Jun 2007
Posts: 208
If you want to put a panel behind its parent frame, you need to set 'level' to 0.
  Reply With Quote
08-03-09, 06:23 AM   #17
Dajova
A Wyrmkin Dreamwalker
 
Dajova's Avatar
AddOn Author - Click to view addons
Join Date: Dec 2007
Posts: 58
... nope, it doesnt work :/

[2009/08/03 14:29:32-435-x1]: LitePanels-1.3.1\layout.lua:1: unexpected symbol near '['

---
__________________
Livestream | Twitter | YouTube

Last edited by Dajova : 08-03-09 at 06:30 AM.
  Reply With Quote
08-03-09, 02:08 PM   #18
willgk
An Aku'mai Servant
AddOn Author - Click to view addons
Join Date: Dec 2005
Posts: 37
Katae,

Can you example doing an onupdate resize? One that follows the size of the ChatFrame.

Thanks either way!
  Reply With Quote
08-03-09, 03:15 PM   #19
xandora
A Chromatic Dragonspawn
 
xandora's Avatar
Join Date: Feb 2009
Posts: 188
Originally Posted by richerich View Post
... nope, it doesnt work :/
Go back and check your spelling around the [ at the start of the script. It could be that you've accidentally added something before or after it.
  Reply With Quote
08-03-09, 04:24 PM   #20
Dajova
A Wyrmkin Dreamwalker
 
Dajova's Avatar
AddOn Author - Click to view addons
Join Date: Dec 2007
Posts: 58
Originally Posted by xandora View Post
Go back and check your spelling around the [ at the start of the script. It could be that you've accidentally added something before or after it.
I used the exact code that Katae provided, so i dunno...
__________________
Livestream | Twitter | YouTube
  Reply With Quote

WoWInterface » AddOns, Compilations, Macros » Released AddOns » LitePanels - An art framework

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off