DemoPad.com

** Please note all current documentation is available here **

In this section we will be discussing the Demopad GUI Design software, its layout and where to start.

CLICK ON ANY OF THE THUMBNAILS TO ENLARGE.
When you first open the DemoPad Design program you will be greeted with a screen similar to the above.

• 1. Opens a new blank iPad project
• 2. Opens a new blank iPhone project
• 3. Clicking the main button will open a file browser to let you open a file in the software. Clicking the small arrow on the right will open a drop down box of recently open projects.
• 4. Sends you to our resource center to download graphics packs or templates.
• 5. These are the templates that are shipped with the software and more can be added by placing template files in the templates directory of the software install.
• 6. A screenshot will appear here when you roll over one of the templates.
• 7. Click this button to create the new project.

---

This is the main software panel that will appear first when you open project. It contains buttons relating to DemoPad and the software itself rather than a specific project. Note some menu options can be expanded with the icon in the lower right of the menu to reveal further options.

• 1. Opens the welcome screen to create a new project
• 2. Opens a previously created project and loads it into the side menu
• 3. Opens the DemoPad Designer manual
• 4. Opens the quick start guide online
• 5. Opens the resources webpage where sample resources can be downloaded
• 6. Opens the device store online
• 7. Opens the update notes for this version of the software
• 8. The Project Navigation pane is used to move between different pages and projects
• 9. This button opens up the Project Navigation pane
• 10. Clicking this button opens up the properties pane, this gives information about the project or the selected object
• 11. This panel changes depending on the type of object that is selected. For example, if a button is selected it will display a set of images, if text is selected it will allow the placement of text.

---

The project settings tab deals with the major areas of the project such as creating devices, adding removing pages and managing flags.

• 1. Clicking this button creates a new device and opens the device properties so that it can be configured
• 2. Creates a new folder in the Project Navigation pane, used for organizing your pages
• 3. Create a new page that objects can be placed on
• 4. Creates a new sub page
• 5. The edit and remove buttons can be used to edit and remove pages and subpages
• 6. This buttons opens up the flags panel which is used to create, order and delete flags
• 7. Shows the labels for the project
• 8. Shows the number variables for the project
• 9. Clicking this button brings up a menu to assign a password to the project. This means that in order for people to download the project file to a device they must enter a password first.
• 10. Adjust the height and width of the project pages.
• 11. Edit the project load actions of the project. This means that whenever the app is launched it will perform these actions first.
• 12. This panel shows the opened project with any devices, pages and sub pages associated with it.

---

• 1. Opens the image selection panel so that a button can be dragged onto a page
• 2. Opens the image panel so that a image can be dragged onto a page
• 3. Opens the text panel so that a text object can be dragged onto a page
• 4. Opens the project navigation panel so that a sub-page can be dragged onto a page
• 5. Opens the gauge panel so that a gauge can be dragged onto a page
• 6. Selecting the web view will let you draw a box which will contain the web view
• 7. Select an image as a page background
• 8. Set a colour as a page background
• 9. Change the border selection colour that objects go when selected
• 10. Mirror (copy) a page to the other orientation, this also means that all changes you make in one orientation affects both of them (e.g. change the size of a button in one the size of the button in the other will change)
• 11. Set the page load actions, which are executed when the page loads
• 12. Set a grid on the page to make laying out objects easier. From here you can also set snap to grid to on or off
• 13. The canvas area where you design your actual interface

---

This menu lets you adjust the properties of a page object, eg a button. Not all menu options will be enabled for certain page object types.

• 1. Clicking this button will give the option to re-size an object, for example to its original size, or change the image.
• 2. Gauge object properties
• 3. This changes how or when an object is shown (animation of objects on and off the screen)
• 4. This tab gives options about adding and editing text
• 5. Actions assigned here are performed when a user presses down a button
• 6. Actions assigned here are performed when a user releases a button
• 7. Change how an object is highlighted, and select the image
• 8. Change sound setting associated with this object
• 9. Tab with options for Crestron Integration
• 10. Tab with options for Lutron Integration
• 11. Tab with options for Rako Integration

What's Next?
Next we learn about how to create your first project
Next Step >>