Skinning
Perhaps the most powerful aspect of LiveCode is the ability to write a small tool or application in a matter of minutes. Even large scale projects can be completed in a fraction of the time it would take to write them in one of the traditional languages. But how can you make your tool or application different to all the others out there? Welcome to the world of 'skinning'! LiveCode makes it easy to transform your application into a rich, visually appealing tool in a few very simple steps.
Download stack and resources here:
Our Basic Application
So lets start off with the stack that we want to skin. A common application that is really lifted when skinned is a remote control.
Create a new stack called Remote Control and add Play, Prev, RW, Pause, FF and Next buttons. Resize these buttons to the the sizes you want. Align them if you wish using the Align Control tab in the Property Inspector - to do this you need to select all the controls together.
Skinning Buttons
First lets skin the buttons. LiveCode allows you to associate a number of images to a button. This is done using the properties palette of the button in the 'Icons' section (1). We will use two of these associations in this tutorial:
Icon (2) - The image displayed in the button's default state
Hover Icon (3) - The image displayed when the mouse is moved over the button
Importing Images
Next we need to choose two images, a standard state and a rollover state for each button. To associate them to a button, we have to import them as controls to the stack. A standard way to do this is to create another card, in this case a second card called images, onto which we import the images. Create a new card from the Object menu.
The images in this tutorial were produced in Photoshop, but there are many places where great icon sets can be purchased and even applications that let you build your own icons. Note: You must use images that have transparent edges for this tutorial to work, .png and .gif files are ideal.
Go to File > Import as control > Image File
and import all the images you will use in your stack.
Note: All the images used in this lesson are contained in the zip file associated with the lesson, the images can be found in the button images folder. Instead of importing them one by one, you can import them using "All Images in Folder..."
Associating Images
We can now return to the 'player' card and associate all of the images to the buttons. Open the properties palette of the first button and select 'Icons' (1).
* Click on the button to the left of the Icon field (2) which will open the image chooser.
* From the pull down menu, select 'This Stack' (3) which will display all images located anywhere within this stack, including our 'images' card.
* Then choose the image you want as the standard state for the button (4).
Repeat these steps for the hover state by clicking on the wand to the right of the 'Hover Icon' (5) field and then repeat the whole process for each button on the remote control.
Setting button properties
To make the buttons blend into the background we have to alter one or two of the buttons basic properties.
In the buttons properties palette, select the 'Basic' tab (1) and change the style of the button to 'Transparent Button' (2) and uncheck the 'Show name' (3) property.
Turn off the checkboxes for 3-D (4) and Show border (5) and set the Border Width to 0 (6). On the Icons pane, uncheck Hilite Border.
Then resize the buttons (7) so you can see the whole image and spread them out.
Skinning Stacks
Like buttons, it is possible to associate an image with a stack. We do this in a similar way to the skinning of buttons but the stack will take on the shape and transparency properties of the image.
* Import the image as a control, this time to the main card.
* Bring up the images property inspector and select 'size and position' from the menu.
* Set the layer of the image to 1
You may notice that your stack size is a bit small for the background image, lets fix that.
Open the stack inspector. Select Position, and change the width and height to a size that shows all of the image. Now select the 'Basic' tab. You will notice a property called Shape which has a button just like the icons for the buttons. Use it to select the image you have just imported.
Your stack should now be the same shape as the image. You may need to line up both the background image and your buttons to the new window shape.
You will notice that you no longer have access to the minimize and close stack buttons available in a normal window panel. Create two buttons, one to close the stack, the other to minimize it. Edit the properties to make the buttons transparent (1) turn off show name (2) and remove borders (3).
Open the code editor from the toolbar, and set the script of the close button to
on mouseUp
quit
end mouseUpthe script of the minimize button to
on mouseUp
set the iconic of this stack to true
end mouseUpAnd there you have your fully skinned remote control.
Ramiro Ernesto Crespo Melgar
how do you move the skinned app, there seems t be no area to move it around the screen
please help
Van Brollini
ok, where is the icon and borders section and how do you put the buttons on the stack. is it the same as the last lesson?
Elanor Buchanan
Hi Ramiro
If you look at the script of the "player.png" background image you can see how the stack is moved. It is not covered in the lesson but hopefully it makes sense. It just uses the location of the mouse to reset the location of the stack while the mouse is being held down and moved.
I hope that helps.
Elanor
Elanor Buchanan
Hi Val
You get to the Icons and Borders section by selecting a button using the Edit tool, opening the Property Inspector from the Tool Bar and then selecting "Icons and Borders" from the drop down menu in the Property Inspector.
You add the images you want to use for the buttons to the stack using "Import As Control" from the File menu as described in Step 3 - Importing Images. You can then assign these icons to the buttons as described in Step 4 - Associating Images.
I hope that helps.
Elanor
Tom J
Where do I get the button images file? Nothing came with this lesson.
Ben Beaumont
Hi Tom,
You'll find a link at the top of the lesson "remoteControl.zip" under the title "Attached Files".
I hope that helps.
Warm regards,
The RunRev Team
Mike Manley
Elanor,
Thank you for answering our questions. In the lesson above it states that a new card called images is required to which the images files are imported as controls. How is this new card created and named?
Ben Beaumont
Hi Mike,
There is lesson on adding a new card here:
http://lessons.runrev.com/s/lessons/m/4067/l/31933-How-do-I-add-another-card-to-my-stack-
If you right click / apple click on the card and open the 'property inspector', you can name change its name in the palette that pops up.
I hope that helps.
Warm regards,
The RunRev Team
Jerry
Hi, i created some nice button images. But whatever i do, on Android i still see a thin black square border around each button, and it looks like the size which you can pull to set it's size. I disabled: Show Focus Border, Three D, Border, Hilite border. Used Transparent Button as style type. Any other clou which could remove that unwanted border? I don't want to use Mobgui. I think it has to work right from Livecode itself. Thanks for any help on this. Kind regards, Jerry
Elanor Buchanan
Hi Jerry
Try setting the Border Width to 0 in the Icons & Borders pane of the Property Inspector, that's the only other relevant property I can think of that you haven't already set.
If that doesn't help you can email your stack to [email protected] and we'll take a look at it.
Kind regards
Elanor
Jerry
Hi Elanor, yes! that did the trick.
Thanks a lot! You're the best :)
Kind regards,
Jerry
noorizan mohd esa
hello sir,
i need your help. how to use image gif in skinny button?
Elanor Buchanan
Hi, to use a gif image you import it into your stack using File -> Import as Control -> Image Control. Then you set the icon property of your button to the ID of the imported image.
I hope that helps,
Elanor
Mark
Hi Elanor, I just looked at this to try and see how I could skin a checkbox control using SVG widget icons in a datagrid in iOS (so, 1 image for checked, another for unchecked, taken from the SVG widget options). Is this lesson applicable?
Mark
You can assume I have the checkbox working with the datagrid. Its the skinning it with an SVG icon I'm not sure about. Thanks
Elanor Buchanan
Hi Mark
What I would do is to use a SVG widget in place of the checkbox and change the hilited and iconPresetName properties when it is clicked.
on mouseUp
set the hilited of me to not(the hilited of me)
if the hilited of me then
set the iconPresetName of me to "check sign"
else
set the iconPresetName of me to "check empty"
end if
end mouseUp
If you want to use your own SVG paths you can set the iconPath property instead of the iconPresetName.
I hope that helps.
Kind regards
Elanor
Mark
Thanks Elanor. I get an error in this section of the dg now (FillInData pDataArray) set the hilite of button "Check 1" of me to pDataArray["check"]. It is trying to set the "icon" to true or false as appropriate but I don't know how to properly reference the new SVG control? Really lost here. Thanks
Elanor Buchanan
Hi Mark
Thats just because it is not a button now, it is a widget. Try
set the hilite of widget "Check 1" of me to pDataArray["check"]
I hope that helps, if thats not it please let, me know.
Elanor
Mark
Ok, it worked but not exactly the effect I was looking for. Right now I get unchecked blue squares for true and unchecked black squares for false. What I really wanted was checked squares for true and unchecked squares for false. That would involve using two different icons. I tired using the icon preset name set to "check sign" or "check empty" but it had no effect. Unless I am supposed to have two SVG Icons hanging around with those names? I've not done that.
Mark
set the hilite of widget "Check 1" of me to pDataArray["check"]
if the hilited of widget "Check 1" then
set the iconPresetName of me to "check sign"
else
set the iconPresetName of me to "check empty"
end if
set the text of field "Label 1" of me to pDataArray["comment"]
Mark
At present I just have 1 SVG Icon called "Check 1" and it's in the dg template. It is an unchecked square.
Elanor Buchanan
Hi Mark
You should only need one widget. I think there are a couple of things you need to change.
1. An SVG widget has a hiliteColor, by default this is a light blue which is why you are seeing that. Changing the hiliteColor of the SVG widget to black should resolve this.
2. There are a couple of "of me"s missing in the code. Try
set the hilite of widget "Check 1" of me to pDataArray["check"]
if the hilited of widget "Check 1" of me then
set the iconPresetName of widget "Check 1" of me to "check sign"
else
set the iconPresetName of widget "Check 1" of me to "check empty"
end if
set the text of field "Label 1" of me to pDataArray["comment"]
I hope that helps.
Elanor
Mark
Hi Elanor, big thanks. This worked perfectly in my POC stack. Separately I am having an issue migrating it into my todo stack, and it looks like this may take a little while to sort out. But many thanks for helping me to work out the basic mechanics of doing this. All good now.
Elanor Buchanan
Hi Mark, that's great, glad I could help.
Mark
Hi Elanor, just a point of clarification. When we are scripting objects in a DG template, do we ever put the code directly into the template object itself (ie. a mouseDown handler in the SVG Icon) or do we only put that in the row behaviour script. And then I guess, if its mouseDown you would use a Case statement with the short name of the target to sort out which object sent the message?
Elanor Buchanan
Hi Mark. You can do either but it is best to keep as much code as you can in the row behavior script because of how the Data Grid is structured. If you do decide to put some code in the controls I would keep it minimal, for example if you put a mouseUp in a control just call a handler in the row behavior from it.