CommandFusion Wiki

Documentation Resources

User Tools

Site Tools


software:gui-designer:gui-designer-basics

Differences

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

Link to this comparison view

software:gui-designer:gui-designer-basics [2012/09/04 01:49]
jarrod
software:gui-designer:gui-designer-basics [2015/06/20 06:46] (current)
jarrod
Line 4: Line 4:
 ===== Overview ===== ===== Overview =====
  
-A quick start video covering the basics of the guiDesigner and iViewer software is available ​here: http://​cmdf.us/​PC6I8d ​\\ +==== Quick Start Video Guide ==== 
-\\ + 
-text version of this guide is herehttp://cmdf.us/TOJQU5+<WRAP tip>A quick start video covering the basics of the guiDesigner and iViewer software is available ​[[http://​cmdf.us/​PC6I8d|here]].</​WRAP>​ 
 + 
 +==== Quick Start Guide Wiki Version ==== 
 + 
 +quick start guide in text wiki format ​is available [[software:gui-designer:guidesigner-quick-start-guide|here]].
  
 ==== Joins and Tokens ==== ==== Joins and Tokens ====
  
-CommandFusion understands three different types of data; digital, analog, and serial. Data can be stored in tokens which are assigned a name, and can hold any data type, but cannot be displayed on the GUI. Data that must be displayed on the GUI is stored in joins. Each data type has its own group of 100 joins which are referred to by number and can be used for any purpose. Joins are numbered consecutively from one. There are also some system defined joins which have much higher numbers, and cannot be changed.\\+CommandFusion understands three different types of data; digital, analog, and serial. Data can be stored in tokens which are assigned a name, and can hold any data type, but cannot be displayed on the GUI. Data that must be displayed on the GUI is stored in joins. Each data type has its own group of joins which are referred to by number and can be used for any purpose. Joins are numbered consecutively from 1 to 999999999.\\
 \\ \\
 Digital joins can hold only a 0 or a 1. They are useful for controlling button states and page flips. Digital joins can hold only a 0 or a 1. They are useful for controlling button states and page flips.
Line 16: Line 20:
 \\ \\
 Serial joins are used to hold text. They can be used to display text for the user, or to specify image paths or URLs for GUI objects.\\ Serial joins are used to hold text. They can be used to display text for the user, or to specify image paths or URLs for GUI objects.\\
 +
 +For more detailed information,​ see our [[software:​gui-designer:​joins|Joins page.]]
  
 ==== GUI Objects ==== ==== GUI Objects ====
Line 23: Line 29:
 ==== Pages ==== ==== Pages ====
  
-A page represents the display area of the device that is running the GUI. Multiple GUI objects can be positioned on a page. A project must contain at least one page, however a license is usually required for projects with more than one page. Pages can be switched in response to user interaction,​ or feedback from external systems.\\+A page represents the display area of the device that is running the GUI. Multiple GUI objects can be positioned on a page. A project must contain at least one page, however a [[software:​iviewer:​licensing|license]] is usually required for projects with more than one page. Pages can be switched in response to user interaction,​ or feedback from external systems.\\
  
 ==== Subpages ==== ==== Subpages ====
 Subpages are like pages, but they are smaller and can be displayed on top of other pages. Subpages are like pages, but they are smaller and can be displayed on top of other pages.
  
 +{{:​software:​gui-designer:​page-vs-subpage.png?​nolink&​750|}}
 ==== Buttons ==== ==== Buttons ====
  
 Buttons can be used to both show system state to the user, and receive feedback from the user. Buttons have two states; active and inactive. Each state is represented by an image and/or text. The states can be automatically toggled when the user interacts with the button, or they can be controlled by feedback from an external system. The button text can be controlled independently of the button state. Buttons can be used to both show system state to the user, and receive feedback from the user. Buttons have two states; active and inactive. Each state is represented by an image and/or text. The states can be automatically toggled when the user interacts with the button, or they can be controlled by feedback from an external system. The button text can be controlled independently of the button state.
 +
 +For a more in depth look at implementing buttons, [[software:​gui-designer:​buttons|see our buttons tool page.]]
  
 ==== Gauges & Sliders ==== ==== Gauges & Sliders ====
Line 37: Line 46:
 \\ \\
 Sliders are similar to gauges, but their value can be adjusted by the user. Sliders are similar to gauges, but their value can be adjusted by the user.
 +
 +For a more in depth look at implementing gauges and sliders, see our [[software:​gui-designer:​gauges|gauges tool page]] or our [[software:​gui-designer:​sliders|sliders tool page]].
  
 ==== Input fields ==== ==== Input fields ====
  
 Input fields provide somewhere for the user to enter text. Input fields provide somewhere for the user to enter text.
 +
 +For an in depth look at implementing input fields, [[software:​gui-designer:​input-field|see our input fields page.]]
  
 ==== Text ==== ==== Text ====
Line 46: Line 59:
 Displays static or dynamic text. Displays static or dynamic text.
  
 +For a more in depth look at implementing text, see our [[software:​gui-designer:​text-tool|text tool page.]]
 ==== Images ==== ==== Images ====
  
 Displays an image. The image can either be local to the project, or accessed via a URL (as long as a suitable network connection is available). Displays an image. The image can either be local to the project, or accessed via a URL (as long as a suitable network connection is available).
  
 +For a more in depth look at implementing images, [[software:​gui-designer:​images|see our images tool page.]]
 ==== Lists ==== ==== Lists ====
 +A list is a dynamic GUI object where the contents can be scrolled vertically or horizontally. List contents are built via stacking subpages which can contain any GUI object such as buttons, text etc.
  
 +For a more in depth look at implementing lists, [[software:​gui-designer:​lists|see our lists tool page.]]
 ==== Web Pages ==== ==== Web Pages ====
- 
 Provides a basic web browser for viewing web pages. Provides a basic web browser for viewing web pages.
  
 +For more information on implementing we pages, see our [[software:​gui-designer:​webpage-tool|web page tool page.]]
 ==== Control Systems ==== ==== Control Systems ====
  
Line 138: Line 155:
   - Click on Skip Wizard   - Click on Skip Wizard
   - In the Feedback Name box, type Message.   - In the Feedback Name box, type Message.
-  - In the Regex box, enter the following ​(without the quotes), "message=(.*)".+  - In the Regex box, enter the following ​''​message=(.*)''​
   - message= means match the exact text message=.   - message= means match the exact text message=.
   - . means match any single character.   - . means match any single character.
Line 157: Line 174:
   - Click on Skip Wizard.   - Click on Skip Wizard.
   - In the Feedback Name box, type Slider.   - In the Feedback Name box, type Slider.
-  - In the Regex box, enter the following ​(without the quotes), "slider=(\d*)".+  - In the Regex box, enter the following ​''​slider=(\d*)''​
   - slider= means match the exact text slider=.   - slider= means match the exact text slider=.
   - \d means match any digit (0-9).   - \d means match any digit (0-9).
Line 173: Line 190:
   - Set the target type to Analog.   - Set the target type to Analog.
   - Set the join to 2.   - Set the join to 2.
-  - Set the value to {{65535 - $slider$}}. +  - Set the value to ''​%%{{%%65535 - $slider$%%}}%%''​
-  - $slider$ refers to the value of the token named slider created by the capture group.+  - ''​$slider$'' ​refers to the value of the token named slider created by the capture group.
   - The double curly braces tell the veiwer that this is a mathematical expression which needs to be evaluated.   - The double curly braces tell the veiwer that this is a mathematical expression which needs to be evaluated.
   - Gauges use 0 as 0 % and 65535 as 100 %, so this expression will make the gauge track in the opposite direction to the slider.   - Gauges use 0 as 0 % and 65535 as 100 %, so this expression will make the gauge track in the opposite direction to the slider.
   - Click OK.   - Click OK.
- 
 ==== Add The GUI Objects ==== ==== Add The GUI Objects ====
  
Line 184: Line 200:
  
 The next step is to add the GUI objects that will send the commands, and display the joins. Before adding the GUI objects though, is a good idea to set up some themes. Themes can be configured later, but it is easier to position the objects if they already have a theme assigned. This tutorial will use themes provided with the GUI designer. The next step is to add the GUI objects that will send the commands, and display the joins. Before adding the GUI objects though, is a good idea to set up some themes. Themes can be configured later, but it is easier to position the objects if they already have a theme assigned. This tutorial will use themes provided with the GUI designer.
-  - Select Theme Library from the Themes menu.+  - Select ​[[software:​gui-designer:​theme-library|Theme Library]] from the Themes menu.
   - Drag CF Blue (iPad) into the theme manager.   - Drag CF Blue (iPad) into the theme manager.
  
Line 235: Line 251:
 === The Slider === === The Slider ===
  
-  - Click on the arrow to the right of the Sider Tool button on the toolbar.+  - Click on the arrow to the right of the Slider ​Tool button on the toolbar.
   - Select horizontal   - Select horizontal
   - Click on the page to add a slider.   - Click on the page to add a slider.
Line 285: Line 301:
 The design is now complete, so can be loaded onto an iPad. The design is now complete, so can be loaded onto an iPad.
   - Save the design.   - Save the design.
-  - Install the CF iViewer app on the iPad.+  - Install the iViewer ​app on the iPad.
   - Open the Settings app.   - Open the Settings app.
-  - Tap on CF iViewer in the Apps secton.+  - Tap on iViewer ​in the Apps section.
   - Enter the location of your project in the File URL field (the correct value depends on which method you use to distribute your project, see below).   - Enter the location of your project in the File URL field (the correct value depends on which method you use to distribute your project, see below).
   - Make sure that the Reload GUI File option is set to on.   - Make sure that the Reload GUI File option is set to on.
-  - Press the home button, and open the CF iViewer app.+  ​- Make sure the iViewer app is closed completely (double tap home button and close the app by swiping up) 
 +  ​- Press the home button, and open the iViewer app.
  
 === Choosing a Distribution Method === === Choosing a Distribution Method ===
software/gui-designer/gui-designer-basics.txt · Last modified: 2015/06/20 06:46 by jarrod