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 [2013/02/18 04:08]
jarrod [Define The Feedback Items To Process The Commands]
software:gui-designer:gui-designer-basics [2015/06/20 06:46] (current)
jarrod
Line 14: Line 14:
 ==== 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 20: 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 36: Line 38:
  
 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 42: 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 51: 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 143: 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 162: 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 239: 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 289: 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