Class: BgImgTouchButton

Defined in: garminsdk/components/touchbutton/BgImgTouchButton.tsx:24

A touchscreen button which uses different images for its "up" state and "down" state backgrounds and displays an optional label.

The root element of the button contains the bg-img-touch-button CSS class by default, in addition to all root-element classes used by TouchButton, with the exception of touch-button itself.

The root element contains optional child <img> elements with the CSS classes bg-img-touch-button-up-img and bg-img-touch-button-down-img as well as an optional label element with the CSS class bg-img-touch-button-label.

Extends

• TouchButton<BgImgTouchButtonProps>

Constructors

Constructor

new BgImgTouchButton(props): BgImgTouchButton

Defined in: sdk/components/FSComponent.ts:76

Creates an instance of a DisplayComponent.

Parameters

Parameter	Type	Description
props	BgImgTouchButtonProps	The propertis of the component.

Returns

BgImgTouchButton

Inherited from

TouchButton.constructor

Properties

context?

optional context: [] = undefined

Defined in: sdk/components/FSComponent.ts:67

The context on this component, if any.

Inherited from

TouchButton.context

---

contextType?

readonly optional contextType: readonly [] = undefined

Defined in: sdk/components/FSComponent.ts:70

The type of context for this component, if any.

Inherited from

TouchButton.contextType

---

cssClassSet

protected readonly cssClassSet: SetSubject<string>

Defined in: garminsdk/components/touchbutton/BgImgTouchButton.tsx:34

Overrides

TouchButton.cssClassSet

---

cssClassSub?

protected optional cssClassSub: Subscription

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:242

Inherited from

TouchButton.cssClassSub

---

currentMousePosition

protected readonly currentMousePosition: Vec2

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:245

Inherited from

TouchButton.currentMousePosition

---

downImgSrc

protected readonly downImgSrc: MappedSubscribable<string> | undefined

Defined in: garminsdk/components/touchbutton/BgImgTouchButton.tsx:39

---

dragThresholdPxActual

protected readonly dragThresholdPxActual: number

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:249

Inherited from

TouchButton.dragThresholdPxActual

---

focusOnDrag

protected readonly focusOnDrag: boolean

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:247

Inherited from

TouchButton.focusOnDrag

---

holdTickInterval

protected holdTickInterval: Timeout | null = null

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:211

Inherited from

TouchButton.holdTickInterval

---

holdTimeSinceLastPress

protected holdTimeSinceLastPress: number = 0

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:214

Inherited from

TouchButton.holdTimeSinceLastPress

---

inhibitOnDrag

protected readonly inhibitOnDrag: boolean

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:248

Inherited from

TouchButton.inhibitOnDrag

---

inhibitOnDragAxisActual

protected readonly inhibitOnDragAxisActual: "x" | "y" | "both"

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:250

Inherited from

TouchButton.inhibitOnDragAxisActual

---

isEnabled

protected readonly isEnabled: Subscribable<boolean> | Subscribable<false> | Subscribable<true>

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:200

Inherited from

TouchButton.isEnabled

---

isEnabledSub?

protected optional isEnabledSub: Subscription

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:239

Inherited from

TouchButton.isEnabledSub

---

isHeld

protected isHeld: boolean = false

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:209

Inherited from

TouchButton.isHeld

---

isHighlighted

protected readonly isHighlighted: Subscribable<boolean> | Subscribable<false> | Subscribable<true>

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:201

Inherited from

TouchButton.isHighlighted

---

isHighlightedSub?

protected optional isHighlightedSub: Subscription

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:240

Inherited from

TouchButton.isHighlightedSub

---

isPrimed

protected isPrimed: boolean = false

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:208

Inherited from

TouchButton.isPrimed

---

isVisible

protected readonly isVisible: Subscribable<boolean> | Subscribable<false> | Subscribable<true>

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:202

Inherited from

TouchButton.isVisible

---

isVisibleSub?

protected optional isVisibleSub: Subscription

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:241

Inherited from

TouchButton.isVisibleSub

---

labelContent

protected readonly labelContent: string | VNode | MappedSubscribable<string> | undefined

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:204

Inherited from

TouchButton.labelContent

---

lastHoldTickTime

protected lastHoldTickTime: number | undefined = undefined

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:212

Inherited from

TouchButton.lastHoldTickTime

---

mouseClickPosition

protected readonly mouseClickPosition: Vec2

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:244

Inherited from

TouchButton.mouseClickPosition

---

mouseDownListener()

protected readonly mouseDownListener: (e) => void

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:195

Responds to mouse down events on this button's root element.

Parameters

Parameter	Type	Description
e	MouseEvent	The mouse event.

Returns

void

Inherited from

TouchButton.mouseDownListener

---

mouseLeaveListener()

protected readonly mouseLeaveListener: (e) => void

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:197

Responds to mouse leave events on this button's root element.

Parameters

Parameter	Type	Description
e	MouseEvent	The mouse event.

Returns

void

Inherited from

TouchButton.mouseLeaveListener

---

mouseMoveListener()

protected readonly mouseMoveListener: (e) => void

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:198

Handle mouse moving after clicking.

Parameters

Parameter	Type	Description
e	MouseEvent	The mouse event.

Returns

void

Inherited from

TouchButton.mouseMoveListener

---

mouseUpListener()

protected readonly mouseUpListener: () => void

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:196

Responds to mouse up events on this button's root element.

Returns

void

Inherited from

TouchButton.mouseUpListener

---

props

props: BgImgTouchButtonProps & ComponentProps

Defined in: sdk/components/FSComponent.ts:64

The properties of the component.

Inherited from

TouchButton.props

---

rootRef

protected readonly rootRef: NodeReference<HTMLDivElement>

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:191

Inherited from

TouchButton.rootRef

---

totalHoldTime

protected totalHoldTime: number = 0

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:213

Inherited from

TouchButton.totalHoldTime

---

upImgSrc

protected readonly upImgSrc: MappedSubscribable<string> | undefined

Defined in: garminsdk/components/touchbutton/BgImgTouchButton.tsx:36

---

RESERVED_CSS_CLASSES

protected readonly static RESERVED_CSS_CLASSES: Set<string>

Defined in: garminsdk/components/touchbutton/BgImgTouchButton.tsx:25

Overrides

TouchButton.RESERVED_CSS_CLASSES

Methods

destroy()

destroy(): void

Defined in: garminsdk/components/touchbutton/BgImgTouchButton.tsx:68

Destroys this component.

Returns

void

Overrides

TouchButton.destroy

---

getContext()

protected getContext(context): never

Defined in: sdk/components/FSComponent.ts:109

Gets a context data subscription from the context collection.

Parameters

Parameter	Type	Description
context	never	The context to get the subscription for.

Returns

never

The requested context.

Throws

An error if no data for the specified context type could be found.

Inherited from

TouchButton.getContext

---

getDragDistance()

protected getDragDistance(): number

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:488

Get the distance that the mouse has been dragged on the correct axis.

Returns

number

The distance.

Inherited from

TouchButton.getDragDistance

---

getReservedCssClasses()

protected getReservedCssClasses(): ReadonlySet<string>

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:541

Gets the CSS classes that are reserved for this button's root element.

Returns

ReadonlySet<string>

The CSS classes that are reserved for this button's root element.

Inherited from

TouchButton.getReservedCssClasses

---

getRootElement()

getRootElement(): HTMLElement

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:294

Gets this button's root HTML element.

Returns

HTMLElement

This button's root HTML element.

Throws

Error if this button has not yet been rendered.

Inherited from

TouchButton.getRootElement

---

holdTickFunc()

protected readonly holdTickFunc(): void

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:216

Returns

void

Inherited from

TouchButton.holdTickFunc

---

onAfterRender()

onAfterRender(node): void

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:254

A callback that is called after the component is rendered.

Parameters

Parameter	Type	Description
node	VNode	The component's VNode.

Returns

void

Inherited from

TouchButton.onAfterRender

---

onBeforeRender()

onBeforeRender(): void

Defined in: sdk/components/FSComponent.ts:83

A callback that is called before the component is rendered.

Returns

void

Inherited from

TouchButton.onBeforeRender

---

onMouseDown()

protected onMouseDown(e): void

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:391

Responds to mouse down events on this button's root element.

Parameters

Parameter	Type	Description
e	MouseEvent	The mouse event.

Returns

void

Inherited from

TouchButton.onMouseDown

---

onMouseLeave()

protected onMouseLeave(e): void

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:440

Responds to mouse leave events on this button's root element.

Parameters

Parameter	Type	Description
e	MouseEvent	The mouse event.

Returns

void

Inherited from

TouchButton.onMouseLeave

---

onMouseMove()

protected onMouseMove(e): void

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:461

Handle mouse moving after clicking.

Parameters

Parameter	Type	Description
e	MouseEvent	The mouse event.

Returns

void

Inherited from

TouchButton.onMouseMove

---

onMouseUp()

protected onMouseUp(): void

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:427

Responds to mouse up events on this button's root element.

Returns

void

Inherited from

TouchButton.onMouseUp

---

onPressed()

protected onPressed(): void

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:499

Responds to when this button is pressed.

Returns

void

Inherited from

TouchButton.onPressed

---

render()

render(): VNode

Defined in: garminsdk/components/touchbutton/BgImgTouchButton.tsx:43

Renders the component.

Returns

VNode

A JSX element to be rendered.

Overrides

TouchButton.render

---

renderLabel()

protected renderLabel(): VNode | null

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:527

Renders this button's label.

Returns

VNode | null

This button's rendered label, or null if this button does not have a label.

Inherited from

TouchButton.renderLabel

---

setHeld()

protected setHeld(isHeld, endReason): void

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:343

Sets the held state of this button.

Parameters

Parameter	Type	Default value	Description
isHeld	boolean	undefined	The new held state.
endReason	TouchButtonHoldEndReason	TouchButtonHoldEndReason.Unknown	The reason that the held state is set to false. Ignored if isHeld is true. Defaults to TouchButtonHoldEndReason.Unknown.

Returns

void

Inherited from

TouchButton.setHeld

---

setPrimed()

protected setPrimed(isPrimed): void

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:313

Sets the primed state of this button.

Parameters

Parameter	Type	Description
isPrimed	boolean	The new primed state.

Returns

void

Inherited from

TouchButton.setPrimed

---

simulatePressed()

simulatePressed(ignoreDisabled): void

Defined in: garminsdk/components/touchbutton/TouchButton.tsx:303

Simulates this button being pressed. This will execute the onPressed() callback if one is defined.

Parameters

Parameter	Type	Default value	Description
ignoreDisabled	boolean	false	Whether to simulate the button being pressed regardless of whether the button is disabled. Defaults to false.

Returns

void

Inherited from

TouchButton.simulatePressed