Skip to main content

Stepper

Control the value of a KSP ui_value_edit

Stepper Screenshot

import { Stepper } from kontakt_controls

export var main = Stepper(
    control_id: "my_value_edit"
)

Synopsis​

export component Stepper {
    @property control_id: String
    @property label: String
    @property default_value: Int
    @property text_previous: String? = nil
    @property text_next: String? = nil
    @property step_count: Int? = nil
    @property fine_step_count: Int = 2
    @property sensitivity: Float = 0.1
    @property style: StepperStyle = StepperStyle()
    @property value_to_string: ValueFormatter = default_value_formatter
    @property disabled: Bool = false
    @property on_editing_changed: (Bool) -> () = fun (editing: Bool) {}
    @property policy: TriggerPolicy = TriggerPolicy.on_down
}

Constructor​

control_id: String Required​

The name of the KSP control.

label: String Required​

The label to display when the control is resting.

default_value: Int Required​

The default value to reset to with CTRL/CMD+Tap (temp, until we can fetch it from ui_value_edit).

text_previous: String? = nil​

Text for the previous button, if any.

text_next: String? = nil​

Text for the next, if any.

step_count: Int? = nil​

Determines the number of steps it takes from min to max.

Uses the finest resolution when set to nil.

fine_step_count: Int = 2​

Divides the steps further for fine tuning when "shift" is pressed. 1 means no fine-tuning.

sensitivity: Float = 0.1​

How sensitive the control response is.

When set to 1 one can move over the entire value range by moving from the leading edge to the trailing edge in the drag axis.

style: StepperStyle = StepperStyle()​

Customizes the appearance of the Stepper.

value_to_string: ValueFormatter = default_value_formatter​

Converts the value to a string to be displayed in the label when the user interacts with the control.

By default simply shows the raw integer value of the control.

disabled: Bool = false​

Disables all user interaction when true.

on_editing_changed: (Bool) -> () = fun (editing: Bool) ​

Called when the user starts or ends interacting with the control.

policy: TriggerPolicy = TriggerPolicy.on_down​

Stepping on pointer down or up with the up and down buttons. For more details, refer to TriggerPolicy.

StepperStyle​

export class StepperStyle {
    width: Float? = nil
    height: Float? = nil
    buttons_position: ButtonsPosition = ButtonsPosition.left_right
    spacing: Float = 2
    buttons_style: PrevNextButtonsStyle = default_previous_next_buttons_style
    value_padding: EdgeInsets = EdgeInsets(5)
    value_style: LabelStyle = default_value_style
    label_style: LabelStyle = default_label_style
    disabled_opacity: Float = 0.24
}

Properties​

width: Float? = nil​

The width of the control.

height: Float? = nil​

The height of the control.

buttons_position: ButtonsPosition = ButtonsPosition.left_right​

The position of the arrows relative to the value. See ButtonsPosition for more details.

spacing: Float = 2​

The space between the arrows and the value display.

buttons_style: PrevNextButtonsStyle = PrevNextButtonsStyle()​

The style for the double arrows.

value_padding: EdgeInsets = EdgeInsets(5)​

Extra space to add around the image that still counts as interactive area.

value_style: LabelStyle = default_value_style​

Customization for the value appearance.

label_style: LabelStyle = default_label_style​

Customization for the label appearance.

disabled_opacity: Float = 0.24​

The opacity to use when the control is disabled.

Methods​

copy() -> (StepperStyle)​

Returns a shallow copy (nested reference objects aren't copied).

deep_copy() -> (StepperStyle)​

Returns a deep copy (includes copies of inner_padding and label_style).

overriding(_ modify: (StepperStyle) -> ()) -> (StepperStyle)​

Returns a modified copy of the style. Modify the copy inside the modify funtion.

var modified = (StepperStyle()).overriding(fun (style) {
    style.spacing = 8
})

PrevNextButtonsStyle​

Customizes the appearance of the previous and next buttons.

export class PrevNextButtonsStyle {
    previous_style: ButtonStyle = default_button_style
    next_style: ButtonStyle = default_button_style
    axis: Axis = Axis.horizontal
    spacing: Float = 5

    copy() -> (PrevNextButtonsStyle)
    deep_copy() -> (PrevNextButtonsStyle)
    overriding(_ modify: (PrevNextButtonsStyle) -> ()) -> (PrevNextButtonsStyle)
}

ButtonStyle​

Customizes the appearance of buttons.

export class ButtonStyle {
    image: ImageAsset? = nil
    width: Float? = nil
    height: Float? = nil
    padding: EdgeInsets = EdgeInsets(0)
    font_family: ui.FontFamilyName = default_font
    font_weight: Int = ui.font_weights.normal
    italic: Bool = false
    text_size: Int = 12
    text_colors: ButtonStateColors = ButtonStateColors(
        resting: Color(0x99EEEEEE),
        hovered: Color(0xBBEEEEEE),
        pressed: Color(0xFFEEEEEE),
        disabled: Color(0x3DEEEEEE),
    )
    text_alignment: ui.Alignment = ui.Alignment.center

    copy() -> (ButtonStyle)
    deep_copy() -> (ButtonStyle)
    overriding(_ modify: (ButtonStyle) -> ()) -> (ButtonStyle)
}

ButtonStateColors​

export class ButtonStateColors {
    resting: Color
    hovered: Color
    pressed: Color
    disabled: Color

    copy() -> (ButtonStateColors)
    overriding(_ modify: (ButtonStateColors)->()) -> (ButtonStateColors)
}

ButtonsPosition​

export enum ButtonsPosition {
    left,
    right,
    left_right,
    top_bottom
}