CommandFusion Wiki

Documentation Resources

User Tools

Site Tools


software:gui-designer:sliders

Differences

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

Link to this comparison view

software:gui-designer:sliders [2013/03/22 02:30]
jarrod
software:gui-designer:sliders [2013/05/01 11:28] (current)
jarrod
Line 2: Line 2:
  
 Sliders are much like [[software:​gui-designer:​gauges|Gauges]],​ except they also allow for interaction by the user (rather than just showing a level).\\ Sliders are much like [[software:​gui-designer:​gauges|Gauges]],​ except they also allow for interaction by the user (rather than just showing a level).\\
-\\+ 
 +{{:​sliderdemo2.mp4|236x90}} 
 To implement a slider in guiDesigner: ​ To implement a slider in guiDesigner: ​
   - Select the slider icon {{:​software:​gui-designer:​slider_icon.png?​nolink|}} on the tool bar.    - Select the slider icon {{:​software:​gui-designer:​slider_icon.png?​nolink|}} on the tool bar. 
Line 18: Line 20:
  
 === 1 - Analog Join === === 1 - Analog Join ===
-The analog join assigned to a slider is used to adjust the slider level. Analog joins have a range of 0 to 65535, which is represented in a slider as 0 = slider empty, 65535 = slider full.+The [[software:​gui-designer:​joins|analog join]] assigned to a slider is used to adjust the slider level. Analog joins have a range of 0 to 65535, which is represented in a slider as 0 = slider empty, 65535 = slider full.
  
 If the slider is assigned an analog join above zero, the join value will also change when the slider level is changed, resulting in other GUI objects using the same analog join to reflect the new level also. If the slider is assigned an analog join above zero, the join value will also change when the slider level is changed, resulting in other GUI objects using the same analog join to reflect the new level also.
Line 25: Line 27:
  
 === 2 - Digital Press Join === === 2 - Digital Press Join ===
-By assigning a digital join to a slider, you can make it also act like a momentary button. The digital join will  +By assigning a [[software:​gui-designer:​joins|digital join]] to a slider, you can make it also act like a momentary button. The digital join will go high (1) when the slider is first pressed, then go low (0) again when released.
-go high (1) when the slider is first pressed, then go low (0) again when released.+
  
 If the slider is assigned a digital join above zero, the join state will also change when the slider is pressed/​released,​ resulting in other GUI objects using the same digital join to reflect the new state also. If the slider is assigned a digital join above zero, the join state will also change when the slider is pressed/​released,​ resulting in other GUI objects using the same digital join to reflect the new state also.
Line 52: Line 53:
   * ''​Max'':​ the maximum value of the slider range. Default is ''​100''​.   * ''​Max'':​ the maximum value of the slider range. Default is ''​100''​.
   * ''​Decimals'':​ the number of decimal values to include in the value. Defaults to ''​0''​ which means don't show any decimal values.   * ''​Decimals'':​ the number of decimal values to include in the value. Defaults to ''​0''​ which means don't show any decimal values.
 +
 +<WRAP center round important 80%>
 +It is VERY important to note that these ''​Min'',​ ''​Max''​ and ''​Decimals''​ properties only relate to outgoing data.\\
 +The range of 0-65535 is always required when SETTING a sliders level.
 +</​WRAP>​
 +
  
 === 8 - Position === === 8 - Position ===
Line 60: Line 67:
   * Width of the slider   * Width of the slider
   * Height of the slider   * Height of the slider
-The width and height of a gauge determines if the gauge is rendered in horizontal or vertical mode. When the height is greater than the width, the gauge will render in vertical mode (filling bottom to top). Otherwise, it will be deemed a horizontal ​gauge (filling left to right).+The width and height of a slider ​determines if the slider ​is rendered in horizontal or vertical mode. When the height is greater than the width, the slider ​will render in vertical mode (filling bottom to top). Otherwise, it will be deemed a horizontal ​slider ​(filling left to right).
  
 === 9 Inactive/​Active Tabs === === 9 Inactive/​Active Tabs ===
Line 88: Line 95:
 The text will be centered at the slider level position by default, but can be offset using the available options. The text will be centered at the slider level position by default, but can be offset using the available options.
  
-=== 12 - Preview Window === +  * ''​X Offset'':​ This allows you to enter a pixel offset from the left of the indicator rendering position that the indicator text will be rendered at. By default the text will be rendered at the center of this slider value position. Negative and positive whole number values are accepted. 
-This windows shows how the slider will look in your GUI, showing ​the value as set in the Preview Value.+  * ''​Y Offset'': ​This allows you to enter a pixel offset from the top of the indicator rendering position that the indicator text will be rendered at. By default the image will be rendered at the center of this slider ​value position. Negative and positive whole number values are accepted. 
 +  * ''​Width'':​ This defines the width of the area that the indicator text will be rendered within. 
 +  * ''​Height'':​ This defines the height of the area that the indicator text will be rendered within. 
 +  * ''​Theme'':​ This defines the theme that will be used to style the indicator text. Select the theme from the list of text themes defined ​in your theme within ​the [[software:​gui-designer:​theme-manager|Theme Manager]].
  
 +<WRAP center round important 80%>
 +When configuring the indicator text properties, you must enter a width and height large enough to fit in the largest value of the slider [[#​7-indicator-value|indicator value]] range, otherwise the indicator text will not be visible or may appear clipped.
 +</​WRAP>​
 +
 +=== 12 - Preview Window ===
 +This window shows how the slider will look in your GUI, showing the value as set in the Preview Value.
 ==== Slider Properties Actions Tab ==== ==== Slider Properties Actions Tab ====
 {{:​software:​gui-designer:​commandfusion_guidesigner_slider_properties_actions.png?​nolink|}} {{:​software:​gui-designer:​commandfusion_guidesigner_slider_properties_actions.png?​nolink|}}
Line 96: Line 112:
 === 13 - System Commands === === 13 - System Commands ===
 Choose a command that you have previously defined in the System Manager to each slider action. Choose a command that you have previously defined in the System Manager to each slider action.
 +
 +Any command attached to a slider can make use of the ''​[sliderval]''​ [[software:​gui-designer:​tokens#​attached-to-sliders|token]] within the command value. This token will be replaced with the current value of the slider, as per the min and max indicator value settings.
  
 === 14 - Slider Value === === 14 - Slider Value ===
 +The value that the ''​[sliderval]''​ [[software:​gui-designer:​tokens#​attached-to-sliders|token]] is replaced with can be forced into one of the following formats:
 +  * ''​Dec''​ (decimal): Send the value as a decimal value (within the range of min and max properties, with the specified number of decimal places).
 +  * ''​Hex''​ (hexadecimal):​ Send the value in hex format, using the minimum number of hex bytes required to represent the current slider value.
 +  * ''​Hex String''​ (hexadecimal string): Send the value in an ascii representation of hex format, using the minimum number of hex bytes required to represent the current slider value.
 +
 +The ''​[sliderval]''​ token can be further manipulated by using ''​Dec''​ mode, and [[software:​gui-designer:​math-expressions|math expressions]] within the command value. For example ''​%%{{[sliderval]::​%02.0f}}%%''​ would result in a slider value of ''​8''​ being sent as ''​08''​.
software/gui-designer/sliders.1363919401.txt.gz · Last modified: 2013/03/22 02:30 by jarrod