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.
The GUI Interface
- 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.
- 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.
- 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
- 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
Next we learn about how to create your first project
Next Step >>