CommandFusion Wiki

Documentation Resources

User Tools

Site Tools


software:gui-designer:guidesigner-quick-start-guide

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

software:gui-designer:guidesigner-quick-start-guide [2012/09/03 03:49]
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 136: Line 137:
 Then right click on one of the buttons and click ''​Simulate Feedback''​. We have now assigned each button the properties they require.\\ Then right click on one of the buttons and click ''​Simulate Feedback''​. We have now assigned each button the properties they require.\\
  
 +==== Adding One Way Control ====
 +Now we need to tell the GUI how it is going to control the TV, and add some commands to assign to the buttons.\\
 +\\
 +In the System Manager window, click Add System {{:​software:​gui-designer:​add_system_icon.png?​nolink|}}. This brings up the System Properties Window where we define the communication properties for the device we want to connect and send commands too.\\
 +\\
 +In our case, we are using a CommandFusion LAN Bridge to control the TV via RS232 (serial port).\\
 +\\
 +We need to add a system name (LAN Bridge), we will use the TCP protocol and the IP address of our LAN Bridge 192.168.0.10. The default port of the LAN Bridge to route data straight to the on-board RS232 port is 10208. Leave all other settings as default.\\
 +{{:​software:​gui-designer:​system_properties_filled_in.png?​nolink|}}\\
  
 +In the system manager window, select the system you just added and click ''​Add Command''​{{:​software:​gui-designer:​add_command_icon.png?​nolink|}}.\\
 +In the command properties box, type in the command name, and the command value - which is obtained from your hardwares documentation. The command value is the data that will be sent to the system. Do this for the rest of the commands required.\\
 +{{:​software:​gui-designer:​command_properties.png?​nolink|}}
  
 +So we require the following commands (examples for the TV we are using, yours will be different):
 +  * Power Toggle ''​mc 1 8\x0D''​
 +  * Volume Up ''​mc 1 2\x0D''​
 +  * Volume Down ''​mc 1 3\x0D''​
  
 +{{:​software:​gui-designer:​system_manager_with_commands.png?​nolink|}}\\
  
 +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.\\
 +
 +==== Uploading to Your Device ====
 +In the file menu, click on ''​Upload Service''​.\\ ​
 +{{:​software:​gui-designer:​upload-service.png?​nolink|}}\\
 +
 +Click ''​Start''​ (or the ‘Enter’ key). This will start a web server that iViewer will use to download your GUI project onto your iOS device. Take note of the URL shown on screen.\\
 +{{:​software:​gui-designer:​upload_service_started.png?​nolink|}}\\
 +
 +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.\\
 +[[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.\\
 +{{:​software:​gui-designer:​iviewer_settings.png?​nolink&​300|}}
 +
 +Multitasking should also be off to ensure that the app is fully closed when not being used so that it will attempt to reload your GUI project on each launch. Once your GUI is tested and no more changes are required, you can change the settings back and it will load the GUI from cache on the device instead.\\
 +\\
 +Now close the settings app and launch iViewer - it will load the GUI onto your device and there you have it...the GUI you just designed.\\
 +{{:​software:​gui-designer:​finished_demo_gui.png?​nolink&​300|}}
 +\\
 +Now you can press the buttons and see if the commands are working as you intended.
 +===== Trouble Shooting =====
 +
 +For trouble shooting, you should first check your system properties in the system manager to ensure your communication settings and command values are all correct. If you are still having trouble, contact is via our support page here: http://​www.commandfusion.com/​support.html \\
 +
 +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
 +
 +===== 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.1346644187.txt.gz · Last modified: 2012/09/03 03:49 by aaron