Skip to content

Commit

Permalink
Merge pull request #1355 from FlowFuse/ui-button-hold
Browse files Browse the repository at this point in the history
Button: Add minor amendments to button config for click events & docs
  • Loading branch information
joepavitt authored Oct 12, 2024
2 parents 94bc139 + b624af7 commit 8cbcce5
Show file tree
Hide file tree
Showing 8 changed files with 341 additions and 24 deletions.
263 changes: 263 additions & 0 deletions docs/examples/ui-button-hold.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,263 @@
[
{
"id": "41af91ca7e2d0577",
"type": "ui-button",
"z": "9cb9bb3cd8e3faee",
"group": "4400cdcbaa768e57",
"name": "",
"label": "Hold Duration Test",
"order": 1,
"width": "3",
"height": "1",
"emulateClick": false,
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"iconPosition": "left",
"payload": "Click",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"buttonColor": "",
"textColor": "",
"iconColor": "",
"enableClick": false,
"enablePointerdown": true,
"pointerdownPayload": "",
"pointerdownPayloadType": "date",
"enablePointerup": true,
"pointerupPayload": "",
"pointerupPayloadType": "date",
"x": 1110,
"y": 4380,
"wires": [
[
"57e8b3025bda5b1b",
"c09876e76c45d7fb"
]
]
},
{
"id": "57e8b3025bda5b1b",
"type": "debug",
"z": "9cb9bb3cd8e3faee",
"name": "debug 2569",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 1290,
"y": 4340,
"wires": []
},
{
"id": "c09876e76c45d7fb",
"type": "join",
"z": "9cb9bb3cd8e3faee",
"name": "",
"mode": "custom",
"build": "object",
"property": "payload",
"propertyType": "msg",
"key": "_event.type",
"joiner": "\\n",
"joinerType": "str",
"accumulate": false,
"timeout": "",
"count": "2",
"reduceRight": false,
"reduceExp": "",
"reduceInit": "",
"reduceInitType": "",
"reduceFixup": "",
"x": 1270,
"y": 4380,
"wires": [
[
"9503bfb0e2713b08"
]
]
},
{
"id": "9503bfb0e2713b08",
"type": "change",
"z": "9cb9bb3cd8e3faee",
"name": "",
"rules": [
{
"t": "set",
"p": "payload.held",
"pt": "msg",
"to": "$number(msg.payload.pointerup) - $number(msg.payload.pointerdown)",
"tot": "jsonata"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1440,
"y": 4380,
"wires": [
[
"d289e0f09ddd90f9",
"6314f8f6c76cc4e5"
]
]
},
{
"id": "d289e0f09ddd90f9",
"type": "debug",
"z": "9cb9bb3cd8e3faee",
"name": "debug 2571",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 1630,
"y": 4380,
"wires": []
},
{
"id": "ac3f3589547ed27b",
"type": "ui-text",
"z": "9cb9bb3cd8e3faee",
"group": "4400cdcbaa768e57",
"order": 2,
"width": "3",
"height": "1",
"name": "",
"label": "Held For:",
"format": "{{msg.payload}}",
"layout": "row-spread",
"style": false,
"font": "",
"fontSize": 16,
"color": "#717171",
"className": "",
"x": 1840,
"y": 4340,
"wires": []
},
{
"id": "6314f8f6c76cc4e5",
"type": "change",
"z": "9cb9bb3cd8e3faee",
"name": "",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "msg.payload.held & \"ms\"",
"tot": "jsonata"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1660,
"y": 4340,
"wires": [
[
"ac3f3589547ed27b"
]
]
},
{
"id": "4400cdcbaa768e57",
"type": "ui-group",
"name": "Hold Duration Test",
"page": "ea42e606327de0a5",
"width": "6",
"height": "1",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "ea42e606327de0a5",
"type": "ui-page",
"name": "Demo Page",
"ui": "c2e1aa56f50f03bd",
"path": "/page2",
"icon": "",
"layout": "grid",
"theme": "afa24cae12543ca5",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "3"
},
{
"name": "Tablet",
"px": "576",
"cols": "6"
},
{
"name": "Small Desktop",
"px": "768",
"cols": "9"
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 23,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "c2e1aa56f50f03bd",
"type": "ui-base",
"name": "Dashboard",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-control",
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"navigationStyle": "icon",
"titleBarStyle": "default"
},
{
"id": "afa24cae12543ca5",
"type": "ui-theme",
"name": "Example Theme",
"colors": {
"surface": "#ffffff",
"primary": "#0094ce",
"bgPage": "#eeeeee",
"groupBg": "#fafdff",
"groupOutline": "#000000"
},
"sizes": {
"groupGap": "12px",
"widgetGap": "12px",
"pagePadding": "12px",
"groupBorderRadius": "0px",
"density": "default"
}
}
]
30 changes: 28 additions & 2 deletions docs/nodes/widgets/ui-button.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,13 @@ props:
description: Icon color. If not provided, will have the same color as text / label.
dynamic: true
Enable pointerup event:
description: Enables the capturing of pointerup events on the button
description: Enables the capturing of pointerup events on the button. The output will contain <code>msg._event</code> which details the <i>type</i> of interaction causing the event.
dynamic: false
Enable pointerdown event:
description: Enables the capturing of pointerdown events on the button
description: Enables the capturing of pointerdown events on the button. The output will contain <code>msg._event</code> which details the <i>type</i> of interaction causing the event.
dynamic: false
Enable click event:
description: Enables the capturing of click events on the button, i.e.g when both the pointerdown and pointerup events occur whilst the mouse stays inside the button. The output will contain <code>msg._event</code> which details the <i>type</i> of interaction causing the event.
dynamic: false
Emulate Button Click: If enabled, any received message will trigger a button click, emitting the relevant payload and topic.
controls:
Expand Down Expand Up @@ -57,7 +60,16 @@ dynamic:
---

<script setup>
import { ref } from 'vue'

import ExampleButtonHold from '../../examples/ui-button-hold.json'

import TryDemo from "./../../components/TryDemo.vue"
import FlowViewer from '../../components/FlowViewer.vue'

const examples = ref({
'hold': ExampleButtonHold
})
</script>


Expand All @@ -83,5 +95,19 @@ Adds a clickable button to your dashboard.

## Example

### Simple Button

![Example of a Button](/images/node-examples/ui-button.png "Example of a Button"){data-zoomable}
*Example of a rendered button in a Dashboard.*

### Measuring Hold Duration

It's possible to cofnigure a button to emit `pointerdown` and `pointerup` events. With this, it's possible to measure how long a button is held down for.

<video controls height="200px">
<source src="/videos/demo-button-hold.mp4" type="video/mp4">
</video>

The flow to achieve this demo is as follows:

<FlowViewer :flow="examples['hold']" height="200px"/>
Binary file added docs/public/videos/demo-button-hold.mp4
Binary file not shown.
8 changes: 5 additions & 3 deletions nodes/widgets/locales/en-US/ui_button.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,13 @@ <h3>Properties</h3>
<dt>Label <span class="property-type">string</span></dt>
<dd>The text shown within the button. If not provided, then the button will only render the icon. It supports HTML content</dd>
<dt>Enable pointerdown event <span class="property-type">bool</span></dt>
<dd>If enabled, the button will emit a message on pointerdown event with the given payload</dd>
<dd>If enabled, the button will emit a message on pointerdown event with the given payload. The output will contain <code>msg._event</code> which details the <i>type</i> of interaction causing the event.</dd>
<dt>Enable pointerup event <span class="property-type">bool</span></dt>
<dd>If enabled, the button will emit a message on pointerup event with the given payload</dd>
<dd>If enabled, the button will emit a message on pointerup event with the given payload. The output will contain <code>msg._event</code> which details the <i>type</i> of interaction causing the event.</dd>
<dt>Enable Click event <span class="property-type">bool</span></dt>
<dd>If enabled, the button will emit a click event, which fires when both the up and down events occur over the button. The output will contain <code>msg._event</code> which details the <i>type</i> of interaction causing the event.</dd>
<dt>Emulate Button Click <span class="property-type">bool</span></dt>
<dd>If enabled, any received message will trigger a button click, emitting the relevant payload and topic</dd>
<dd>If enabled, any received message will trigger a button click, emitting the relevant payload and topic. Note, requires the "Enable Click event" to be enabled</dd>
<dt>Background Color<span class="property-type">string</span></dt>
<dd>Background color for the button, valid values as <b>green</b>/<b>#a5a5a5</b>/<b>rgb(165,165,165)</b>/<b>green-darken-2</b>, check <a href="https://vuetifyjs.com/en/styles/colors/#material-colors"> Vuetify Colors</a> for help, send empty string to use default theme color</dd>
<dt>Text Color<span class="property-type">string</span></dt>
Expand Down
3 changes: 2 additions & 1 deletion nodes/widgets/locales/en-US/ui_button.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,11 @@
"optionalColor": "optional text/icon color",
"background": "Background",
"optionalBackgroundColor": "optional background color",
"whenClicked": "When clicked, send:",
"alwaysSend": "Always Send:",
"payload": "Payload",
"topic": "Topic",
"emulateClick": "If msg arrives on input, emulate a button click:",
"enableClick": "Enable click event",
"enablePointerup": "Enable pointerup event",
"enablePointerdown": "Enable pointerdown event",
"buttonColor": "Background",
Expand Down
Loading

0 comments on commit 8cbcce5

Please sign in to comment.