User Tools
software:gui-designer:buttons
Differences
This shows you the differences between two versions of the page.
|
software:gui-designer:buttons [2013/03/20 03:31] jarrod |
software:gui-designer:buttons [2013/04/04 04:09] (current) aaron |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Button ====== | + | ====== Button Tool====== |
| - | Buttons in [[software:gui-designer|guiDesigner]] can be placed on any page or subpage. | + | Buttons in [[software:gui-designer|guiDesigner]] can be placed on any page or subpage.\\ |
| + | \\ | ||
| + | To implement a button in guiDesigner: | ||
| + | - Select the button icon {{:software:gui-designer:button_icon.png?nolink|}}on the tool bar. | ||
| + | - Then draw a box roughly the size of the button you wish to use. This size can be edited later on.\\ | ||
| + | - You will then need to add a theme to the button. To do this, select a button theme from the [[software:gui-designer:theme-library|Theme Library]] and drag it onto the button you just added. | ||
| + | |||
| + | You can also drag a button theme directly from the [[software:gui-designer:theme-manager|Theme Manager]] or [[software:gui-designer:theme-library|Theme Library]] onto an empty spot on an open page, and the button will be automatically created at the drop point and assigned the theme you dragged. | ||
| ===== Button Properties ===== | ===== Button Properties ===== | ||
| Line 11: | Line 18: | ||
| === 1 - Digital Join === | === 1 - Digital Join === | ||
| - | Enter a join number to assign to the button. The digital join controls the state of the button. When the join is low (0) the button will render it's inactive state. When the join is high (1) it will render it's active state. | + | Enter a join number to assign to the button. The digital join controls the [[#state-details-inactiveactive|state]] of the button. When the join is low (0) the button will render it's inactive state. When the join is high (1) it will render it's active state. |
| By default the button will be assigned a digital join of zero, which basically means it cannot change state other than via [[#simulate-feedback|momentary simulation]]. | By default the button will be assigned a digital join of zero, which basically means it cannot change state other than via [[#simulate-feedback|momentary simulation]]. | ||
| Line 23: | Line 30: | ||
| When [[#simulate-feedback|Simulate Feedback]] is enabled, these two options will be available. Momentary means the button will remain in active state as long as the button is being pressed, then return to inactive state when released. Toggle means the button will change to active state when pressed the first time, then back to inactive state when pressed a second time (and so on), toggling between active and inactive state each time the button is pressed. | When [[#simulate-feedback|Simulate Feedback]] is enabled, these two options will be available. Momentary means the button will remain in active state as long as the button is being pressed, then return to inactive state when released. Toggle means the button will change to active state when pressed the first time, then back to inactive state when pressed a second time (and so on), toggling between active and inactive state each time the button is pressed. | ||
| - | Toggle mode is only available when the button is assigned a digital join above zero. | + | Toggle mode is only available when the button is assigned a [[#digital-join|digital join]] above zero. |
| === 4 - Theme === | === 4 - Theme === | ||
| - | Select the button theme you would like to use. This choice is derived from the themes you have defined in the Theme Manager. | + | Select the button theme you would like to use. This choice is derived from the button themes you have defined in your project within the [[software:gui-designer:theme-manager|Theme Manager]]. |
| === 5 - Position === | === 5 - Position === | ||
| This option allows for manual entry of the position and size of the button. | This option allows for manual entry of the position and size of the button. | ||
| - | * X Position | + | * X Position (left of button) |
| - | * Y Position | + | * Y Position (top of button) |
| * Width of the button | * Width of the button | ||
| * Height of the button | * Height of the button | ||
| Line 47: | Line 54: | ||
| === 9 - State Details - Serial Join === | === 9 - State Details - Serial Join === | ||
| + | This [[software:gui-designer:joins|serial join]] allows you to dynamically change the text value shown on each button state. By assigning a serial join above zero, when that serial join text value changes, any button assigned the same serial join will be updated to show the new text value. | ||
| === 10 - Overlay Image - Overlay Browser === | === 10 - Overlay Image - Overlay Browser === | ||
| Opens the overlay browser window which allows you to select an image from a library to overlay on the button.\\ | Opens the overlay browser window which allows you to select an image from a library to overlay on the button.\\ | ||
| + | The contents of the overlay library are taken from the guiDesigner installation location, within an ''overlays'' folder. You can add your own overlay images to the library by placing them within this folder. | ||
| + | |||
| {{:software:gui-designer:commandfusion_guidesigner_button_properties_overlay_browser.png?nolink|}} | {{:software:gui-designer:commandfusion_guidesigner_button_properties_overlay_browser.png?nolink|}} | ||
| + | |||
| == A - Overlay Set == | == A - Overlay Set == | ||
| Select the overlay set to choose from. | Select the overlay set to choose from. | ||
| Line 65: | Line 75: | ||
| === 12 - Overlay Image - Choose File === | === 12 - Overlay Image - Choose File === | ||
| - | Choose an image file to use an an overlay image. | + | Choose a custom image file to use as an overlay image. |
| === 13 - Overlay Image - Position and Size === | === 13 - Overlay Image - Position and Size === | ||
| This option allows for manual entry of the position and size of the overlay image. | This option allows for manual entry of the position and size of the overlay image. | ||
| - | * X Position | + | * X Position (left of the image, relative to the button left edge) |
| - | * Y Position | + | * Y Position (top of the image, relative to the button top edge) |
| * Width of the overlay image | * Width of the overlay image | ||
| * Height of the overlay image | * Height of the overlay image | ||
| Line 81: | Line 91: | ||
| === A - Common Settings === | === A - Common Settings === | ||
| - | For information on these settings, see the Button Properties Design Tab info. | + | For information on these settings, see the [[#button-properties-design-tab|Button Properties Design Tab]] info above. |
| === 1 - Page Flip === | === 1 - Page Flip === | ||
| + | Select a page to navigate to in your GUI when the button is pressed. Page flips will only work if your [[software:iviewer:licensing|device is licensed]] to run the GUI. | ||
| === 2 - URL === | === 2 - URL === | ||
| Set the URL property of a button to launch a web browser on the device to a specific website. | Set the URL property of a button to launch a web browser on the device to a specific website. | ||
| On iOS devices, you can also launch other apps by using their [[software:gui-designer:url-scheme|URL Schema]] as the URL. | On iOS devices, you can also launch other apps by using their [[software:gui-designer:url-scheme|URL Schema]] as the URL. | ||
| + | |||
| + | You can also force iViewer to load another GUI by entering the URL of the GUI file to load, replacing ''http:%%//%%'' with ''cf:%%//%%''. | ||
| === 3 - Link GUI File === | === 3 - Link GUI File === | ||
| + | When clicked, this will bring up documentation on how to use GUI File linking. | ||
| === 4 - Basic Actions/Advanced Actions === | === 4 - Basic Actions/Advanced Actions === | ||
| Line 101: | Line 113: | ||
| == Basic Actions == | == Basic Actions == | ||
| - | With basic actions, you can assign any Command and/or Macro to a button. This covers most needs for users. | + | With basic actions, you can assign any [[software:gui-designer:system-manager:commands|Command]] and/or [[software:gui-designer:system-manager:macros|Macro]] to a button. This covers most needs for users. |
| There is also a repeat delay option which controls how often the command and/or macro is sent whilst the button is held down. | There is also a repeat delay option which controls how often the command and/or macro is sent whilst the button is held down. | ||
| - | |||
| == Advanced Actions == | == Advanced Actions == | ||
| Line 113: | Line 124: | ||
| === 6 - Press Command === | === 6 - Press Command === | ||
| - | Choose a command that you have previously defined in the System Manager to assign to the button. | + | Choose a [[software:gui-designer:system-manager:commands|command]] that you have previously defined in the [[software:gui-designer:system-manager|System Manager]] to assign to the button. |
| === 7 - Press Macro === | === 7 - Press Macro === | ||
| - | Choose a macro that you have previously defined in the System Manager to assign to the button. | + | Choose a [[software:gui-designer:system-manager:macros|macro]] that you have previously defined in the [[software:gui-designer:system-manager|System Manager]] to assign to the button. |
| === 8 - JavaScript === | === 8 - JavaScript === | ||
| + | Enter a line of [[software:iviewer:iviewer-javascript-api|JavaScript]] code to execute when the button is pressed. The repeat delay will also cause this code to be executed repeatedly whilst held. | ||
| - | === 9 - Repeat Delay === | + | JavaScript as a language allows you to enter even long functions as a single line of text. |
| - | Enter the time in milliseconds that you want iViewer to wait until repeating the command if the button is held down. Enter 0 to disable repeating. | + | |
| + | For mor information on JavaScript support in iViewer, see the [[software:iviewer:iviewer-javascript-api|JavaScript API Documentation]]. | ||
| + | === 9 - Repeat Delay === | ||
| + | Enter the time in milliseconds that you want iViewer to wait until repeating the command if the button is held down. Enter 0 to disable repeating. For example, 1000 means "repeat every second". | ||
software/gui-designer/buttons.1363750298.txt.gz · Last modified: 2013/03/20 03:31 by jarrod
