Remote Edition: Remote Skinning Tutorial

What it is:

• Function to have the ability to upload your own icons over the existing default set.
• Ability to load icons from the community or from your own web server.

Prerequisites:

• Version 1.5
• Either send us your icons to post in community or setup your own web server to upload icons to the app.

Introduction Video

Don't see video?   or

How it works:

Section 1: Setup

• The Setup section for the remote skinning can be found in the 'Admin' section of the application.
  •  
• At the bottom of Admin section at 'Additional Settings:' you will see
  • Total Control Server - on/off toggle to use TC server or your own for skins
  • Skin - selection option to go to skin selection page.
• If you want to use your own web server that is hosting the skin toggle Total Control Server to OFF.  You will then see an input box below.  Type your http://ip_address:port/skins directory url to grab the skin from your own webserver.  After doing this you will need to select the Skin option to have the application connect and pull down the skin into the application.
• If you just want to use the Total Control Community Skins option click Skin option while Total Control Server option is toggle to ON.  This will take you to the TC Skins page.  On this page wait a few minutes as the list needs to contact the server to populate the list.
  •  
• Once you see the list you will also see small image icons on the left side along with skin descriptions on the right side.  To preview a skin without having to download the whole skin just click the small icon image on the left side to bring up the full preview image.  When done click the Close button on top left to go back to skin list page.
• Once you have found the skin you want select it and give it a couple of minutes for the skin to download into the application.  When it is done you will be brought back to the main Admin section screen with your choosen skin show in the Skin selection field.
• To finalize your selection click the red Update button at the bottom of the Admin page.  Give it a minute for the changes to be applied.  When it is complete you will have a notification pop up let you know.
• Select the Profiles button at the top left of the Admin page and go into your devices.  They will now use the new skin for all devices.

Section 2: Skin API:

• Below you can find the skin api so you can make your own remote skins.
• If you want them listed on the Community Total Control Server so everyone can use it please email the finished files in a .zip format as shown in the API below.
  • Disclaimer:  We are not responsible for any skins uploaded to the Community Server.

• The Skins API consists of 3 main types of files.
  • a skin.xml file listing the button names and filenames for each button
  • the button icons (.png format)
  • the .zip file containing the skin.xml and icons.
• If you are hosting your own webserver you will need to provide an additional skins.xml file on the root directory where the .zip file resides with the following format.  add each line for as many skins as you have.  in this example we show 2 skins to be listed.
  
  • 
     
    
• skin.xml - this xml file resides within the .zip file itself and describes the icon buttons you will use for the skin.  There are 100 buttons that can be used in the app along with a replica of each button with another image overlayed for when you are learning a button to show a graphical change once learned.  All that is required for the app if to put the button image along with the name of the button you want to override in the skin.xml.  Whichever ones you don't include will use the regular global button that comes with the application.
  • Here is the link to the skin.xml template file.  Save this file to your local computer.  Then open in Notepad or any text editor to read/change it.
    • http://totalcontrolapp.com/images/skinstutorial/skinTemplate.xml
    • Do NOT change button action =
    • If you want to change anything only change the image="imagename.png" to match what you call your icons when you make them.
• So to create your own skin you will need to:
  • create the skin.xml
  • create your icons with the same buttons name you have in the skin.xml
  • save them all together in a .zip file
  • either email to use to add to the Community Server or upload to your own web server and point the app to use your web server to grab the skin.
    • if you use your own web server you will need to create your own skins.xml as shown above and place that in the root directory where the skins will be stored on your web server.  This is outside of the .zip files as this skins.xml file is used strictly to provide a listing format in the app before downloading the actual skin.
• Button Sizes: The buttons sizes are hard coded so no matter what size buttons you make the application will squeeze them to fit in the predefined button sizes.  For best results use the sizes below for the button types so the application will not have to readjust the sizes.  Here are the basics:
  • PNG picture format
  • Backgroung Image:
    • older iphone/itouch: 320x480
    • iphone 4: 640x960
    • ipad: 1024x768
  • most of the images are 50x50
  • others are 40x40 (previous and mute buttons are examples of this)
  • the macro button is 65x30
  • the menu select button (enter in between directional arrows) is 74x74
  • the left, right directional arrow buttons are 36x94
  • the up, down directional arrow buttons are 94x36
  • the channel/volume buttons are 70x70
• Ipad Button Sizes: Double every size listed above for best results.
• Sample button set to demo your own icons after
  • db.tt/qflAF3S