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:35] aaron |
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\\ | |
| - | ^ August 31st 2012 - This page is under construction and is not yet finished. Please check back soon for the full guide and a video guide.^ | + | \\ |
| - | + | 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 49: | 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 57: | Line 58: | ||
| ==== Creating Your Projects ==== | ==== Creating Your Projects ==== | ||
| - | The first step is to create a new project. To do this, click on the new project button {{:software:gui-designer:new_project_icon.png?nolink|}} on the tool bar (or via the File menu). \\ | + | The first step is to create a new project. To do this, click on the ''New Project'' button {{:software:gui-designer:new_project_icon.png?nolink|}} on the tool bar (or via the File menu). \\ |
| \\ | \\ | ||
| Then type in your projects filename. The file will not actually be created until you first save your project.\\ | Then type in your projects filename. The file will not actually be created until you first save your project.\\ | ||
| - | Press Ok.\\ | + | Press ''Ok''.\\ |
| \\ | \\ | ||
| This will then bring up the project properties dialogue.\\ | This will then bring up the project properties dialogue.\\ | ||
| Line 73: | Line 74: | ||
| The control system, global token manager and script manager sections are not important for basic features and will be covered in another article. | The control system, global token manager and script manager sections are not important for basic features and will be covered in another article. | ||
| \\ | \\ | ||
| - | Click OK\\ | + | Click ''OK''\\ |
| \\ | \\ | ||
| Line 83: | Line 84: | ||
| \\ | \\ | ||
| - | To create a page, click the “create new page” button {{:software:gui-designer:create_new_page_icon.png?nolink|}}in the toolbar. \\ | + | To create a page, click the ''Create New Page'' button {{:software:gui-designer:create_new_page_icon.png?nolink|}}in the toolbar. \\ |
| This creates a page called “startup” by default in the project tree. Under the page you have each orientation for the page. You can edit the contents of each orientation by double clicking on the appropriate page.\\ | This creates a page called “startup” by default in the project tree. Under the page you have each orientation for the page. You can edit the contents of each orientation by double clicking on the appropriate page.\\ | ||
| If you leave one of the orientations empty, then the GUI will be locked in the orientation which contains GUI objects.\\ | If you leave one of the orientations empty, then the GUI will be locked in the orientation which contains GUI objects.\\ | ||
| \\ | \\ | ||
| - | We will be using only pages in this project, so go ahead and click the "create new page" button. | + | We will be using only pages in this project, so go ahead and click the ''Create New Page'' button. |
| \\ | \\ | ||
| - | To create a sub-page, click the create new subpage button {{:software:gui-designer:create_new_subpage_icon.png?nolink|}} on the toolbar. \\ | + | To create a sub-page, click the ''Create New Subpage'' button {{:software:gui-designer:create_new_subpage_icon.png?nolink|}} on the toolbar. \\ |
| This brings up the subpage properties dialogue. Give the subpage a name, a background theme if required - by default it will be transparent. Then choose the size required for the subpage. We won’t be using sub-pages in this guide - it will be covered in a future article.\\ | This brings up the subpage properties dialogue. Give the subpage a name, a background theme if required - by default it will be transparent. Then choose the size required for the subpage. We won’t be using sub-pages in this guide - it will be covered in a future article.\\ | ||
| \\ | \\ | ||
| Line 119: | 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 157: | 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 170: | 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 187: | Line 188: | ||
| For details on more advanced debugging of communications and commands, please see the documentation for debugging JavaScript - it includes an interface to remotely monitor the system connection states, and a log of events. | For details on more advanced debugging of communications and commands, please see the documentation for debugging JavaScript - it includes an interface to remotely monitor the system connection states, and a log of events. | ||
| http://www.commandfusion.com/docs/scripting/debug.html | http://www.commandfusion.com/docs/scripting/debug.html | ||
| + | |||
| + | ===== Video Guide ===== | ||
| + | |||
| + | 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.1346646900.txt.gz · Last modified: 2012/09/03 04:35 by aaron
