Before you start coding you need to take a moment to review the Smart graphics file structure, while there are scripts that will manage most of the file management it is still important that you understand how all these files fit together.

The default Smart Graphics install location is C:\Program Files (x86)\Crestron\Cresdb\Core3\SysCtrls. The important files to note here are:

This is the loader swf that will load the rest of your project on the panel, container.swf is flash based.

Same as container.swf but for AIR based platforms (TSX panels, Xpanel).

Same as container.swf but specifically designed for VTPro design time rendering.

This file defines the different properties that we can use to associate to our custom control (property grid).

SysCtrls has 2 important subdirectories:

This folder contains all the controls that we can drag from the VTPro control browser onto the stage, there are 5 fileTypes:

swf files are the compiled version of your control, in a clean install there will be 2 swf files in the controls directory BaseObjectsRSL.swf and BaseObjectsRSL_AIR.swf these 2 swf files contain all the Crestron made smart objects with the only difference being the platform they run on (Flash or AIR). When you make a custom smart object you will place your own swf file here.

These schema files tell VTPro what properties each control has, making changes here will make changes to the property grid.

The XML file contains all default values for each control, this is the file that will be read in by the control to set it up( like join numbers, position and size, styles, ...) The XML and XSD files work closely together.

The graphic that will be displayed in the VTPro control browser for your control.

This is an archive containing the XML/XSD/PNG and swf file of your control for easy distribution, when a new c3c file is placed in this folder VTPro will extract it on launch.

This folder contains all the themes that can be applied to a project, if you have a custom theme (".core3_theme" file) you can place it here to become available in VTPro.

A secondary location to install your controls is here: C:\ProgramData\Crestron\Core3 *Note, this is a hidden folder. This folder has a UserCtrls folder where you can place your custom controls, and a UserThemes folder where you can place your custom themes. Both the programFiles and programData locations will be read by VTPro upon launch.

So why 2 locations? Well, the sysCtrls folder we talked about earlier is the Smart Graphics installation folder, that means if we uninstall or update Smart Graphics this folder gets marked for cleanup. Basically this means we will loose any files that we place in the sysCtrls folder, so instead we need to deploy our objects in the programdata folder to make sure it sticks around.

When a Smart Graphics project gets compiled the result is a .VTZ file, this file can then be uploaded to a Crestron TouchScreen which will extract the file and run it. Because 1 of the 2 platforms for Smart Graphics is flash based we can make testing very easy for us, you can extract a VTZ file on your PC and use a flash player to launch it. All browsers have a flash player that you can use but I recommend getting a standalone player (especially if you want to develop objects). You can download a debugger version of Flash Player here: https://www.adobe.com/support/flashplayer/downloads.html

Take any VTZ (compiled visiontools project) and extract it to see it's contents. Don't worry about the files in root, go into the swf folder. The swf folder has 2 subfolders:

We can see BaseObjectsRSL.swf and BaseObjectsRSL_AIR.swf all the Crestron controls, one for flash based and the other for AIR based platforms. If any custom controls were added to the project they would also appear in the controls directory.

This folder simply contains all the themes that have been associated to the project but then in their extracted form.

In this folder are 2 swf files, container.swf and SmartGraphics.swf, as explained before these are the loaders that will load your project on the platform, if the platform is flash based container.swf will be called, if it is Air based SmartGraphics.swf will be called.

So basically both AIR and Flash files are loaded into any *.VTZ file, the code that runs for every smart graphics project is almost identical (some differences: resoution, hard keys). So most of the time they can easily be swapped out, in fact renaming a *.VTZ file to *.C3P(Core3xPanel) allows you to run a project designed for a panel to run as an Xpanel. You can go even further and associate *.VTZ files to your Xpanel application on your PC to always run in Xpanel when double clicked. (To do this right click the *.VTZ file -> Open with -> look for another App on this PC and browse to C:\Program Files (x86)\Crestron\XPanel\CrestronXPanel\CrestronXpanel.exe and hit open).

This is the most important file to be aware about as a developer, this file is your project. All the properties of all the controls you configure in VTPro get pushed into this XML(like position of the controls, join numbers, what page to load first, z-order, ...). Let's look at some important lines in this file:

<CNXConnection>

  `<Host><![CDATA[127.0.0.1]]></Host>`

  `<IPID><![CDATA[03]]></IPID>`

  `<Port></Port>`

</CNXConnection>

These lines are your connection settings for Xpanel (panels use IP tables). we can change the Host and IPID here for testing purposes.

For this test we are going to run our Smart graphics project locally on the computer in a flash player and manipulate it by directly modifying the environment file. So first of we need a flash player I suggest to get a debug player: https://www.adobe.com/support/flashplayer/downloads.html Next we will also need a control processor with a basic program loaded, start a new program and add a device to an IP-ID (it really doesn't matter what or where but for the purpose of this guide let's say a TSW-750 to IP-ID 03). Next start visiontools and create a new Smart Graphics project (TSW-750, Xpanel, DGE, ... again it doesn't matter what one). Add a Page and Add a button, now save and compile the project. Cancel the upload dialog and just navigate to the *.VTZ/C3P file on your computer.

First let's just see what happens when we launch the *.VTZ file, if you associated the extension to open with Xpanel it should now run Xpanel with your project in it.(To associate with Xpanel, right click the *.VTZ file -> Open with -> look for another App on this PC and browse to C:\Program Files (x86)\Crestron\XPanel\CrestronXPanel\CrestronXpanel.exe and hit open). It should also display the CNX Connection Disconnected message because we didn't (couldn't) configure the connection settings in VTPro.

Close the Xpanel and extract the *.VTZ file on your computer, now go into the swf folder. Run container.swf in your flash player

If it is the first time you do this container.swf will most likely get stuck in a loading state. This is because the swf file is attempting to make a socket connection but is waiting to get authorized. (more info: http://www.adobe.com/devnet/flashplayer/articles/socket_policy_files.html) You don't need to know the details, the bottom line is, the swf isn't secure so we don't allow to run it. As a developer you will need to specify that the objects you are testing are secure, please run them anyway, this can easily be done by right clicking anywhere in the flash player (where you see the crestron loading screen) and click on Global setting -> Advanced -> Scroll Down -> Trusted Location Settings -> Add... Now just enter a path that is the working directory for your smart graphics development, this will make all swf files that you try to launch in that folder automatically secure.

If you now close flash player and reopen container.swf you should see your project launching. A difference this time is that you will not see the CNX disconnection message, the reason for this is simple, the disconnect message is part of the Xpanel application itself. But there is another way we can see if we are actually connected to a control system. (prepare your mind to be blown) Press CTRL + ALT + A on your keyboard this will open up a debug application on top of your project. I'll make a separate entry on all the different facets of the debug application, suffice to say it is an extremely handy tool to test your custom objects with. In the top right of this application you can see a red or green circle, red meaning offline green meaning online.

Close the Flash player and edit the Environment.XML file in your text editor of choice (I recommend notepad++ if you are just starting out and don't have a preferred text editor yet: http://notepad-plus-plus.org/). Look for <CNXConnection>

  `<Host><![CDATA[127.0.0.1]]></Host>`

  `<IPID><![CDATA[03]]></IPID>`

  `<Port></Port>`

</CNXConnection> and change the IP address and IPID to link to the open socket on your processor. Save the file and relaunch container.swf.(The environment file is only read in at the start of the application). If you now press CTRL+ALT+A you will see that the circle became green and you are connected to the control system.

Go back to your environment file and look for <Children> <Child All "Children" are objects, such as the button we added to this project, lets scroll down to position and size and change this button to a different position. If you now save and relaunch the container.swf your button will be in the new position. As you can see this process becomes a lot faster than going via VTPro to change a property. I suggest anyone who starts to take a good amount of time to investigate the environment.XML file as this will greatly improve your development speed over time.

I'll finish off this post with a quick explanation of how I typically go about developing objects.

• Make sure you have Python3 installed: https://www.python.org/downloads/release/python-342/ Make sure to add the environment path variable for "Python" if you missed this step you will need to manually add that Path later.
• Create a new Flash develop project, the template provided by the Smart Graphics SDK is pretty good, but I modified the scripts to better fit my workflow.
• Open up your data\projectname.xml file and set up the initial nodes like , , , ...
• Place the scripts that you can find in the src\scripts folder of this repo inside the root of your project.
• Compile your project using F5 and run the local_deploy.py script. This script will take the XML, XSD and swf file and place it in the C:\ProgramData\crestron\Core3\UserCtrls\controls folder this makes the control ready for use in VTPRO.
• Create a test directory inside your projects root folder.
• Launch VTPRO, create a new project (I always choose TSW-750 because of the form factor, and it doesn't generate additional folders and files like Xpanel does.) add a page and add the control (the control will be empty, this is normal).
• Save the project test folder you just created and call the file "test".
• Compile the project and navigate to the test.VTZ file and extract it.
• go into this folder and into the swf folder, open up Environment.XML in your text editor(this remains open while you are working).

• Go to Project -> properties and then to build.
• In the Post-Build Command Line add the following statements (these statements will be executed after you hit F5 and Flash Develop is done compiling)

c:\windows\system32\cmd.exe /C cd "$(ProjectDir)" python test.py python local_deploy.py

**Note: it is possible that you get a message saying python is not recognized as a command this is because you missed adding Python as an environment variable, follow these steps to fix that: http://www.pythoncentral.io/add-python-to-path-python-is-not-recognized-as-an-internal-or-external-command/ Make sure to select the correct folder, at the time of this writing that would be "C:\Python34".

So with these scripts set up every time we hit F5 we will, place the swf/XML/XSD file in the programdata folder for use in VTPRO, and take the swf file and place it inside our test folder to quickly be able to test the updates we made.

We can even take it one step further and tell FlashDevelop to launch our Container.swf file after post-compile.

• Go to Project -> properties -> output -> Test Project.
• Set it to "Run Custom Command...
• Now hit the Edit... button.
• In here enter the command to launch Container.swf, you will need to change this for every project you make, here is an example: c:\windows\system32\cmd.exe /C "C:\Users\kim\Documents\GitHub\CrestronSmartGraphics\src\projects\Simple Analog Clock\test\test\swf\Container.swf"
• Now every time you hit F5 you will launch Container.swf including the newly compiled version of your custom object and reading in any changes you made in the environment file.

At this point you can just focus on coding in Flash Develop and adding/changing properties in the Environment.XML. Every so often I will add these properties to the project XSD/XML files so you can load/test the control in visiontools as well.