Thread Tools Display Modes
06-28-10, 11:24 AM   #1
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,740
oUF tutorial layout for oUF 1.5

oUF_Simple, a oUF 1.5 tutorial layout.

HOW TO USE
In this tutorial I'm showing you step by step how I wrote the following layout. You can follow the steps by checking each Googlecode link under each step. You can even highlight the differences from each step to another by clicking on DIFF at the Googlecode pages. Try to analyse what I'm doing. Copy the code and try to edit it. Reload your UI and see what happens. This way you will gain knowledge on how to write your own oUF layout.

FINAL CODE
http://code.google.com/p/rothui/sour...unk/oUF_Simple for oUF 1.4.x
http://code.google.com/p/rothui/sour...nk/oUF_Simple2 for oUF 1.5.x

DOWNLOAD
http://www.wowinterface.com/download...oUFSimple.html

MAJOR FILES
- config
- lib (functions)
- core (layout)
- tags

The TOC-file calls the 3 LUA-files in the following order: config, library and core.
The config is the first file to be called. It can contains all your config variables. All the config variables will be saved in the namespace object (ns).
Next file is the library. It contains all the function that will be used by your layout files. Currently there is only one layout file (core.lua) but you could have more of them like party.lua, raid.lua and so on.
The last file is the core.lua which registers the styles and activates different styles for each unit.

FEATURES
- how to do outer glow with using SetBackDrop
- frames are moveable with SHIFT+ALT+DRAG
- spawns player/target and shows how you can copy the style function for any other unit you want to spawn
- how to add strings to frames
- how to apply color to self.Health and self.Power
- how to work with the namespace object (ns)

DEVELOPMENT STEPS
If you want to follow the development steps check out the links and click on DIFF!

1) Initial release with some basic files
http://code.google.com/p/rothui/source/detail?r=503




2) Some error fixes
http://code.google.com/p/rothui/source/detail?r=504
http://code.google.com/p/rothui/source/detail?r=505


3) Added focus and pet frame
http://code.google.com/p/rothui/source/detail?r=506




4) Added targettarget frame
http://code.google.com/p/rothui/source/detail?r=507




5) Added portraits and castbar and new statusbar texture (bling bling!)
http://code.google.com/p/rothui/source/detail?r=508
http://code.google.com/p/rothui/source/detail?r=509



6) Added aura icons, party and right-click menu
http://code.google.com/p/rothui/source/detail?r=510



7) Added a raid layout

http://code.google.com/p/rothui/source/detail?r=512

-------------------------------------------------

New version: oUF_Simple2 !!!

-------------------------------------------------

8) Update for oUF 1.5.x
Initial release with the files of the 1.4.x layout. What changed is the init function. It is not allowed to use init-width, height and scale anymore.
http://code.google.com/p/rothui/source/detail?r=718

9) Raid, oUF_MovableFrames and more
- now supports oUF_MovableFrames
- added raid frames
- 3 different raidframes are spawned depending on raid size to show how to do it and to have the opportunity to scale each raid individually with oUF_MovableFrames
- moved the init function to the core and splitted it into initHeader and init. (Unit spawned under header must be handled specially)
- removed the default movabilty, only castbars for player and target have the move function now (to make them dragable)
- new menu function (updated for cataclysm and removed focus selection from menu)
- added 3 attributes to the self object: hidename, hptag and nametag. Once those are given the text strings will be handled different. (Thus you can use specific tags just for one style or hide the name in anothers etc.)

http://code.google.com/p/rothui/source/detail?r=719

10) how to add personal tags
http://code.google.com/p/rothui/source/detail?r=720



11) How to add a module (oUF_DebuffHighlight in this case)
http://code.google.com/p/rothui/source/detail?r=721



12) How to add threat coloring



http://code.google.com/p/rothui/source/detail?r=723

13) Enhanced config

Adding more values to the config and using them in the spawn and style functions.

http://code.google.com/p/rothui/source/detail?r=724

.
.
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | Zork (WoW)

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Last edited by zork : 05-19-11 at 01:38 PM.
  Reply With Quote
06-28-10, 01:49 PM   #2
Dawn
A Molten Giant
 
Dawn's Avatar
AddOn Author - Click to view addons
Join Date: May 2006
Posts: 918
Nice work.

I wouldn't use another file for libs, though. But that's just me.
__________________
Rock: "We're sub-standard DPS. Nerf Paper, Scissors are fine."
Paper: "OMG, WTF, Scissors!"
Scissors: "Rock is OP and Paper are QQers. We need PvP buffs."

"neeh the game wont be remembered as the game who made blizz the most money, it will be remembered as the game who had the most QQ'ers that just couldnt quit the game for some reason..."

  Reply With Quote
06-28-10, 02:38 PM   #3
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,740
Makes sense when you are going to have different lua files for raid and party and all the other units.
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | Zork (WoW)

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)
  Reply With Quote
06-28-10, 02:46 PM   #4
Politig
A Chromatic Dragonspawn
AddOn Compiler - Click to view compilations
Join Date: May 2009
Posts: 176
Originally Posted by zork View Post
Makes sense when you are going to have different lua files for raid and party and all the other units.
So let me get this straight: This is a beginner's tool for create oUF frames with oUF 1.4?

...Sweet
  Reply With Quote
06-28-10, 04:07 PM   #5
Dawn
A Molten Giant
 
Dawn's Avatar
AddOn Author - Click to view addons
Join Date: May 2006
Posts: 918
Originally Posted by zork View Post
Makes sense when you are going to have different lua files for raid and party and all the other units.
Yeah, that's right. I didn't think of that.
__________________
Rock: "We're sub-standard DPS. Nerf Paper, Scissors are fine."
Paper: "OMG, WTF, Scissors!"
Scissors: "Rock is OP and Paper are QQers. We need PvP buffs."

"neeh the game wont be remembered as the game who made blizz the most money, it will be remembered as the game who had the most QQ'ers that just couldnt quit the game for some reason..."

  Reply With Quote
06-28-10, 05:30 PM   #6
xandora
A Chromatic Dragonspawn
 
xandora's Avatar
Join Date: Feb 2009
Posts: 188
Can you edit oUF layouts while WoW is open and then reloadui to see instant changes?
__________________

Last edited by xandora : 06-28-10 at 05:47 PM. Reason: Spellllllllllllllling
  Reply With Quote
06-28-10, 05:54 PM   #7
p3lim
A Pyroguard Emberseer
 
p3lim's Avatar
AddOn Author - Click to view addons
Join Date: Feb 2007
Posts: 1,710
Originally Posted by xandora View Post
Can you edit oUF layouts while WoW is open and then reloadui to see instant changes?
As long its not file remove/rename/add and toc changes, then yes.
  Reply With Quote
06-29-10, 12:06 AM   #8
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,740
You can even edit textures in your GFX program while being in the game, assuming that a texture of the same name already existed at the start of WoW.

/reload is probably my most used slash command ever.

*UPDATE*
Edited the first post.
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | Zork (WoW)

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Last edited by zork : 06-29-10 at 12:58 AM.
  Reply With Quote
06-29-10, 08:13 AM   #9
p3lim
A Pyroguard Emberseer
 
p3lim's Avatar
AddOn Author - Click to view addons
Join Date: Feb 2007
Posts: 1,710
Originally Posted by zork View Post
/reload is probably my most used slash command ever.
If you use it alot you should bind it to a distant key. I have mine on F12
  Reply With Quote
06-29-10, 06:18 PM   #10
Monolit
A Black Drake
AddOn Author - Click to view addons
Join Date: Jan 2006
Posts: 81
Great layout zork, thanks for your work!
I found it very smart the way you organize and build frames (i.e. separate style function for every frame type). This (and also upgrading to oUF1.4) actually inspired me to rebuild my own oUF layout using your code structure as base.

And so far so good, I managed to get like 70% of the features I had in my old layout to the new one.

Though I encountered a little problem:
I can't figure out how to properly implement PostUpdateHealth -like functions.
Basically I need this for stuff like gradient colored health bars, that need to be updated after creation. It'd be great if you could give me some advice concerning this issue.

Last edited by Monolit : 06-30-10 at 06:08 PM.
  Reply With Quote
06-29-10, 08:07 PM   #11
Werr
A Murloc Raider
Join Date: Dec 2009
Posts: 9
how does this addon show you HOW to do things? when i load this addon along with ouf 1.4, i get a tidy little layout. am i supposed to look at the previous versions and compare to see what changed? id love to learn ouf coding but im wondering how this teaches it.
  Reply With Quote
06-29-10, 10:27 PM   #12
Ferous
Sheer Sense of Doom
AddOn Author - Click to view addons
Join Date: Mar 2008
Posts: 863
Originally Posted by Werr View Post
how does this addon show you HOW to do things? when i load this addon along with ouf 1.4, i get a tidy little layout. am i supposed to look at the previous versions and compare to see what changed? id love to learn ouf coding but im wondering how this teaches it.
The Lua is probably very well commented. Other than that, it ain't a "For Dummies" thing
  Reply With Quote
06-29-10, 11:19 PM   #13
Werr
A Murloc Raider
Join Date: Dec 2009
Posts: 9
Originally Posted by Ferous View Post
The Lua is probably very well commented. Other than that, it ain't a "For Dummies" thing
its commented by section. i would like to know what things do (the functions and such) and how they work. its like wanting a fishing pole rather than a fish. ouf is a highly customizable framework, and other than playing with values, i cant make much of this (not that it isnt great, it helps a lot).
  Reply With Quote
06-29-10, 11:19 PM   #14
Ferous
Sheer Sense of Doom
AddOn Author - Click to view addons
Join Date: Mar 2008
Posts: 863
For some reason.... the buffs for oUF aren't being skinned by the code.. for some weird reason. Idk why, maybe an AddOn is conflicting... I'll have to dig deeper.

edit - does it have something to do with the new oUF release?

I posted this in the comments as well to oUF_Simple.
  Reply With Quote
06-29-10, 11:20 PM   #15
Ferous
Sheer Sense of Doom
AddOn Author - Click to view addons
Join Date: Mar 2008
Posts: 863
Originally Posted by Werr View Post
its commented by section. i would like to know what things do (the functions and such) and how they work. its like wanting a fishing pole rather than a fish. ouf is a highly customizable framework, and other than playing with values, i cant make much of this (not that it isnt great, it helps a lot).
You know, I got the World of Warcraft Programming guide, it helps a great deal and I got it from amazon Used for only 60 cents! And its brand new! I love it! That book, will help you indeed a great deal and explain everything in detail and what it does, etc.
  Reply With Quote
06-29-10, 11:27 PM   #16
Werr
A Murloc Raider
Join Date: Dec 2009
Posts: 9
Originally Posted by Ferous View Post
You know, I got the World of Warcraft Programming guide, it helps a great deal and I got it from amazon Used for only 60 cents! And its brand new! I love it! That book, will help you indeed a great deal and explain everything in detail and what it does, etc.
ouf included? i really have no idea what im doing here. currently, it shows curhp/perhp. i copied and pasted the code directly, changing hpval to ppval, f.Health to f.Power, etc. and nothing changed in game all i can do is move text, increase scale, and statusbar texture. im a sad panda
  Reply With Quote
06-29-10, 11:30 PM   #17
Ferous
Sheer Sense of Doom
AddOn Author - Click to view addons
Join Date: Mar 2008
Posts: 863
Originally Posted by Werr View Post
ouf included? i really have no idea what im doing here. currently, it shows curhp/perhp. i copied and pasted the code directly, changing hpval to ppval, f.Health to f.Power, etc. and nothing changed in game all i can do is move text, increase scale, and statusbar texture. im a sad panda
oUF is Lua, and the book covers on learning Lua, so once you get Lua, you'll get oUF. oUF will become clear if you learned a bit of Lua
  Reply With Quote
06-29-10, 11:36 PM   #18
Werr
A Murloc Raider
Join Date: Dec 2009
Posts: 9
Originally Posted by Ferous View Post
oUF is Lua, and the book covers on learning Lua, so once you get Lua, you'll get oUF. oUF will become clear if you learned a bit of Lua
i looked over some lua briefly over on http://lua-users.org/wiki/LuaDirectory but some of these ouf bits are way over my head. like in ouf lily everything doesnt look like anything but a jumbled mess. ouf simple and ouf alza are just to name a few that seem more organized. ouf lily still works though. i saw a ui post a while ago by Politig on the "post your ui" thread and i liked his frames so im trying to make ouf frames like that. ouf alza and ouf simple already start out kind of similar, im just trying to add the tiny little bits to make it how i want.
  Reply With Quote
06-30-10, 01:32 AM   #19
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,740
@Werr
Your first intention was correct. Follow the development steps in the tutorial step by step and look at what changed at every step. Thus you get an overview what part does what.

You can always download each version from googlecode. And see how every step behaves.

If you just download the last version its just a big mess of code. Start at step one and try to understand what I'm doing. Change stuff and hit "/reload" ingame. See what it does and try/error it out.

@Ferous
I answered in the addon comments. Just add some button.overlay code to the "ib.PostCreateIcon" function in lib.lua. You can even do "button.overlay.Hide = function() end" to make the overlay stay forever and not only appear for specific debuffs. You can apply SetTexture(), SetVertexColor() and so on. Whatever you like.
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | Zork (WoW)

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Last edited by zork : 06-30-10 at 01:46 AM.
  Reply With Quote
06-30-10, 08:49 AM   #20
Minerv
A Black Drake
 
Minerv's Avatar
AddOn Compiler - Click to view compilations
Join Date: May 2009
Posts: 89
Any link to some API stuff about health/name/power text ?

I wanna do something like this |[deficitmp] *playerframe* [curhp]|

|[name(on the border)]
|[curhp] *targetframe* [curmp]| and on ToT |[name]|

But as it is now i can only change on 2 things that changes all of the units tags together?

line 125-126 in lib.lua

f:Tag(name, "[name]")
f:Tag(hpval, "[curhp]")

Also i have like a big black border below my UF's atm, dunno what it is/how i got it there O.o.

http://img534.imageshack.us/img534/8509/trolololl.png dont mind the timer thar

Btw thx for this guide, i love oUF but im a lua noob so i cant do that much alone, great way to start for me.

Any help would be great! (and sry for any bad english)

(Have moved the powerbar to the top now also, and removed the portrait's/buffs/debuffs on everything else than Target/Party.) Just hope that it works now D:

Last edited by Minerv : 06-30-10 at 08:57 AM.
  Reply With Quote

WoWInterface » Featured Projects » oUF (Otravi Unit Frames) » oUF tutorial layout for oUF 1.4

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