Custom Widgets
Entry posted by GorzenDev ·
1,596 views
Remember that a widget's behaviour is dictated by the script that is attached to it.
Well its that simple just use a custom script for your widget and your done.
I will show you how to create a simple ColorLabel.
First copy the default Label.lua script and rename it to Colorlabel.lua
Now lets make some changes in your Colorlabel.lua so open it up.
We will add 2 variables to the script called bordercolor and textcolor they will be of type Vec4().
Script.bordercolor = Vec4(0.2,0.2,0.2,1) Script.textcolor = Vec4(0.7,0.7,0.7,1)
Now lets change the draw function to use our color variables.
function Script:Draw(x,y,width,height) local gui = self.widget:GetGUI() local pos = self.widget:GetPosition(true) local sz = self.widget:GetSize(true) local scale = gui:GetScale() local text = self.widget:GetText() local indent=4 if self.border==true then --set border color gui:SetColor(self.bordercolor.r, self.bordercolor.g, self.bordercolor.b, self.bordercolor.a) gui:DrawRect(pos.x,pos.y,sz.width,sz.height,1) end --set text color gui:SetColor(self.textcolor.r,self.textcolor.g,self.textcolor.b,self.textcolor.a) if text~="" then local style=0 if self.align=="Left" then style = Text.Left end if self.align=="Center" then style = Text.Center end if self.align=="Right" then style = Text.Right end if self.valign=="Center" then style = style + Text.VCenter end if self.wordwrap==true then style = style + Text.WordWrap end if self.border==true then gui:DrawText(text,pos.x+scale*indent,pos.y+scale*indent,sz.width-scale*indent*2,sz.height-scale*indent*2,style) else gui:DrawText(text,pos.x,pos.y,sz.width,sz.height,style) end end end
Now lets change the label in our UI_Interface class to use our custom script.
Theres 2 ways to set a widget's script as i hinted earlier.
//option 1 label = Widget::Label("label", guiScale * 15, guiScale * 15, guiScale *80, guiScale * 20, panel); label->SetScript("Scripts/GUI/Colorlabel.lua"); //option 2 label = Widget::Create("label", guiScale * 15, guiScale * 15, guiScale * 80, guiScale * 20, panel, "Scripts/GUI/Colorlabel.lua");
Offcourse option 1 is quite silly when you have option 2 but it works.
Now lets set the text color for our newly created custom widget.
label->SetObject("textcolor", new Vec4(1.0, 0.0, 0.0, 1.0));
Notice the undocumented SetObject() function which basicly sets variables of type Leadwerks::Object.
Theres not much more i can say about custom widgets other than, "Your imagination is the limit".
This concludes the tutorial part.
I hope it is of some use to anybody.
-
1
1 Comment
Recommended Comments