Differences

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

--- software:gui-designer:sliders [2013/03/22 01:42]
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).\\
-\\
+{{:sliderdemo2.mp4|236x90}}
 To implement a slider in guiDesigner:
   - Select the slider icon {{:software:gui-designer:slider_icon.png?nolink|}} on the tool bar.
@@ Line 18: / Line 20: @@
 === 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.
@@ Line 25: / Line 27: @@
 === 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.
@@ Line 52: / Line 53: @@
   * ''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.
+<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 ===
@@ Line 60: / Line 67: @@
   * Width 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 Tab - Hidden? ===
+=== 9 Inactive/Active Tabs ===
-<WRAP center round info 60%>
+<WRAP center round info 80%>
-Points 9 - 11 cover both the Inactive and Active tabs as they have the same configurable properties. Choose which tab you want to edit. Inactive will allow you to edit the slider in its non-pressed state. Active will allow you to edit the button in its pressed state.
+Points 9 - 11 cover both the Inactive and Active tabs as they have the same configurable properties. Choose which tab you want to edit.
 </WRAP>
+Inactive will allow you to edit the slider in its non-pressed state. Active will allow you to edit the button in its pressed state.
+=== 9 - Inactive/Active Tab - Hidden ===
+When checked, the indicator image and indicator text will both be hidden for the selected state.
 === 10 - Inactive/Active Tab - Indicator Image ===
+This is an image that will render at the point on the slider relating to the sliders current level. A good example of this is the volume slider used in software such as iTunes - the indicator image is the draggable knob in this case.
+The image will be centered at the slider level position by default, but can be offset using the available options.
+  * ''X Offset'': This allows you to enter a pixel offset from the left of the indicator rendering position that the indicator image 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.
+  * ''Y Offset'': This allows you to enter a pixel offset from the top of the indicator rendering position that the indicator image 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.
+  * ''Image'': You can use any image file as your indicator image. Click the browse button to locate your image of choice.
 === 11 - Inactive/Active Tab - Indicator Text ===
+This is text that will render above the [[#10-InactiveActive-Tab-indicator-image|Indicator Image]] at the point on the slider relating to the sliders current level.
-=== 12 - Preview Window ===
+The actual text value that is rendered will correspond to the sliders current value, within the ''Min'' and ''Max'' range defined in the [[#7-indicator-value|Indicator Value]] properties.
-This windows shows how the slider will look in your GUI, showing the value as set in the Preview Value.
+The text will be centered at the slider level position by default, but can be offset using the available options.
+  * ''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.
+  * ''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 ====
 {{:software:gui-designer:commandfusion_guidesigner_slider_properties_actions.png?nolink|}}
@@ Line 79: / Line 112: @@
 === 13 - System Commands ===
 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 ===
+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''.

CommandFusion Wiki

User Tools

Site Tools

Differences

Page Tools