User Tools
software:gui-designer:guidesigner-quick-start-guide
Differences
This shows you the differences between two versions of the page.
|
software:gui-designer:guidesigner-quick-start-guide [2012/09/03 04:47] aaron [Pages & Sub-pages] |
software:gui-designer:guidesigner-quick-start-guide [2013/05/15 01:28] (current) aaron [Quick Start Guide - guiDesigner & iViewer] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== guiDesigner Quick Start Guide ====== | + | ====== Quick Start Guide - guiDesigner & iViewer ====== |
| - | + | guiDesigner & iViewer Quick Start Guide / Tutorial\\ | |
| - | A video version of this guide is available here: http://cmdf.us/PC6I8d | + | \\ |
| + | A video version of this guide is available here: http://cmdf.us/PC6I8d \\ | ||
| + | {{url>http://www.youtube.com/embed/FXxH_b1oht4 560px,315px noscroll noborder alignment|iViewer and guiDesigner Quick Start Guide}} | ||
| + | \\ | ||
| + | While this guide is not a manual, it serves as a good tutorial to learn the basics of guiDesigner and iViewer. | ||
| ===== What is guiDesigner ===== | ===== What is guiDesigner ===== | ||
| guiDesigner is a windows application that we use to develop graphical user interfaces for our iViewer application. \\ | guiDesigner is a windows application that we use to develop graphical user interfaces for our iViewer application. \\ | ||
| Line 47: | Line 51: | ||
| ==== Workspace ==== | ==== Workspace ==== | ||
| - | The workspace allows for quick selection of some of the most commonly used tools in guiDesigner. | + | The workspace is where all pages are designed. |
| ===== Creating Your First User Interface ===== | ===== Creating Your First User Interface ===== | ||
| For this guide, we are going to create a very simple GUI on an iPhone, it will control a TV with a power button and volume up and down buttons.\\ | For this guide, we are going to create a very simple GUI on an iPhone, it will control a TV with a power button and volume up and down buttons.\\ | ||
| Line 117: | Line 120: | ||
| {{:software:gui-designer:portrait_buttons_added.png?nolink|}}\\ | {{:software:gui-designer:portrait_buttons_added.png?nolink|}}\\ | ||
| - | We want the buttons to be neatly aligned, so click the marquee tool {{:software:gui-designer:marquee_icon.png?nolink|}}from the toolbar (shortcut key ‘M’), and select the three buttons. \\ | + | We want the buttons to be neatly aligned, so click the ''Marquee Tool'' {{:software:gui-designer:marquee_icon.png?nolink|}}from the toolbar (shortcut key ‘M’), and select the three buttons. \\ |
| - | Then click the Align Horizontal Centres Tool{{:software:gui-designer:align_horizontal_centres_icon.png?nolink|}} and the align horizontal centre of page tool{{:software:gui-designer:align_horizontal_centre_of_page_icon.png?nolink|}}. \\ | + | Then click the ''Align Horizontal Centres'' Tool{{:software:gui-designer:align_horizontal_centres_icon.png?nolink|}} and the ''Align Horizontal Centre of Page'' tool{{:software:gui-designer:align_horizontal_centre_of_page_icon.png?nolink|}}. \\ |
| - | To space our buttons evenly, we can also click the distribute evenly vertically tool{{:software:gui-designer:distribute_evenly_vertically_icon.png?nolink|}}. \\ | + | To space our buttons evenly, we can also click the ''Distribute Evenly vertically'' tool{{:software:gui-designer:distribute_evenly_vertically_icon.png?nolink|}}. \\ |
| Now our buttons are neatly placed on the page.\\ | Now our buttons are neatly placed on the page.\\ | ||
| {{:software:gui-designer:buttons_neatly_aligned.png?nolink|}}\\ | {{:software:gui-designer:buttons_neatly_aligned.png?nolink|}}\\ | ||
| Line 155: | Line 158: | ||
| {{:software:gui-designer:system_manager_with_commands.png?nolink|}}\\ | {{:software:gui-designer:system_manager_with_commands.png?nolink|}}\\ | ||
| - | When you have entered the remaining commands, simply drag each command from the System Commander to its relevant button.\\ | + | When you have entered the remaining commands, simply drag each command from the System Manager to its relevant button.\\ |
| Now we are ready to upload the GUI to our device.\\ | Now we are ready to upload the GUI to our device.\\ | ||
| Line 168: | Line 171: | ||
| Next, make sure that your device is on the same network as the guiDesigner software is running on.\\ | Next, make sure that your device is on the same network as the guiDesigner software is running on.\\ | ||
| Now we need to go into the settings on our device.\\ | Now we need to go into the settings on our device.\\ | ||
| - | Navigate to iViewer settings.\\ | + | [[software:iviewer:how-to-access-iviewer-settings|Navigate to iViewer settings]].\\ |
| \\ | \\ | ||
| Enter the GUI File URL as shown in your guiDesigner Upload service window, including the IP address and the port number. Make sure that Reload GUI Layout and Reload GUI Assets are both on - this forces iViewer to attempt a GUI reload, making sure that the new GUI is loaded onto the device.\\ | Enter the GUI File URL as shown in your guiDesigner Upload service window, including the IP address and the port number. Make sure that Reload GUI Layout and Reload GUI Assets are both on - this forces iViewer to attempt a GUI reload, making sure that the new GUI is loaded onto the device.\\ | ||
| Line 189: | Line 192: | ||
| A video version of this guide is available here: http://cmdf.us/PC6I8d | A video version of this guide is available here: http://cmdf.us/PC6I8d | ||
| + | |||
| + | {{tag>guiDesigner, iviewer, manual, guide}} | ||
software/gui-designer/guidesigner-quick-start-guide.1346647634.txt.gz · Last modified: 2012/09/03 04:47 by aaron
