diff --git a/docs/nodes/widgets/ui-button.md b/docs/nodes/widgets/ui-button.md
index a96f17640..48d78ed31 100644
--- a/docs/nodes/widgets/ui-button.md
+++ b/docs/nodes/widgets/ui-button.md
@@ -12,6 +12,15 @@ props:
Label:
description: The text shown within the button. If not provided, then the button will only render the icon.
dynamic: true
+ Button Color:
+ description: Button Color. If not provided, default theme color will be used.
+ dynamic: true
+ Text Color:
+ description: Text (Label) color. If not provided calculated automatically based on Button color to be Black or White.
+ dynamic: true
+ Icon Color:
+ description: Icon color. If not provided, will have the same color as text / label.
+ dynamic: true
Emulate Button Click: If enabled, any received message will trigger a button click, emitting the relevant payload and topic.
controls:
enabled:
@@ -27,6 +36,15 @@ dynamic:
Label:
payload: msg.ui_update.label
structure: ["String"]
+ Button Color:
+ payload: msg.ui_update.buttonColor
+ structure: ["String"]
+ Text Color:
+ payload: msg.ui_update.textColor
+ structure: ["String"]
+ Icon Color:
+ payload: msg.ui_update.iconColor
+ structure: ["String"]
Class:
payload: msg.ui_update.class
structure: ["String"]
diff --git a/docs/user/migration/ui_button.json b/docs/user/migration/ui_button.json
index 78f4dba56..a25f157ef 100644
--- a/docs/user/migration/ui_button.json
+++ b/docs/user/migration/ui_button.json
@@ -33,13 +33,13 @@
},
{
"property": "color",
- "changes": -1,
- "notes": "Issue #375"
+ "changes": "improved",
+ "notes": "Separated property for text color and icon color"
},
{
"property": "background",
- "changes": -1,
- "notes": "Issue #375"
+ "changes": null,
+ "notes": null
},
{
"property": "payload",
diff --git a/nodes/widgets/locales/en-US/ui_button.html b/nodes/widgets/locales/en-US/ui_button.html
index 017f0884c..27f6a5cd9 100644
--- a/nodes/widgets/locales/en-US/ui_button.html
+++ b/nodes/widgets/locales/en-US/ui_button.html
@@ -4,6 +4,16 @@
Clicking the button generates a message with msg.payload
set to the Payload field, and msg.topic to the Topic field.
+ HTML Content
+
+ The text field can also be used to set HTML content in the user interface.
+ This can be done by setting the msg.ui_update.label to a string of HTML.
+ This can be useful for displaying images, links, or other HTML elements.
+
+
+ You can also use Node-RED's built-in "template" node to generate the HTML you want to display if
+ you want to render msg, flow or global content.
+
Properties
- Icon string
@@ -11,9 +21,15 @@ Properties
- Icon Positionleft | right
- If "Icon" is defined, this property controls which side of the "Label" the icon will render on
- Label string
- - The text shown within the button. If not provided, then the button will only render the icon
+ - The text shown within the button. If not provided, then the button will only render the icon. It supports HTML content
- Emulate Button Click bool
- If enabled, any received message will trigger a button click, emitting the relevant payload and topic
+ - Background Colorstring
+ - Background color for the button, valid values as green/#a5a5a5/rgb(165,165,165)/green-darken-2, check Vuetify Colors for help, send empty string to use default theme color
+ - Text Colorstring
+ - Color the text on the Button, valid values as green/#a5a5a5/rgb(165,165,165), send empty string to use default theme color.
+
- Icon Colorstring
+ - Color for the Icon on the Button (if Icon configured), valid values as green/#a5a5a5/rgb(165,165,165)/green-darken-2, check Vuetify Colors for help, send empty string to use default theme color
Dynamic Properties (Inputs)
Any of the following can be appended to a msg.ui_update in order to override or set properties on this node at runtime.
@@ -24,6 +40,12 @@ Dynamic Properties (Inputs)
Override the icon defined in the initial configuration
iconPosition 'left' | 'right'
Change which side of the label the icon renders
+ buttonColor string
+ Override the default button color
+ textColor string
+ Override the button text default color
+ iconColor string
+ Override the icon (if present) default color
class string
Add a CSS class, or more, to the Button at runtime.
diff --git a/nodes/widgets/locales/en-US/ui_button.json b/nodes/widgets/locales/en-US/ui_button.json
index 701048d4b..5e3442eea 100644
--- a/nodes/widgets/locales/en-US/ui_button.json
+++ b/nodes/widgets/locales/en-US/ui_button.json
@@ -22,7 +22,13 @@
"whenClicked": "When clicked, send:",
"payload": "Payload",
"topic": "Topic",
- "emulateClick": "If msg arrives on input, emulate a button click:"
+ "emulateClick": "If msg arrives on input, emulate a button click:",
+ "buttonColor": "Background",
+ "optionalButtonColor": "(Optional) e.g. 'green'/'#a5a5a5'",
+ "textColor": "Text",
+ "optionalTextColor": "(Optional) e.g. 'green'/'#a5a5a5'",
+ "iconColor": "Icon",
+ "optionalIconColor": "(Optional) e.g. 'green'/'#a5a5a5'"
}
}
}
\ No newline at end of file
diff --git a/nodes/widgets/ui_button.html b/nodes/widgets/ui_button.html
index b79f40172..898e94c4f 100644
--- a/nodes/widgets/ui_button.html
+++ b/nodes/widgets/ui_button.html
@@ -33,7 +33,10 @@
payload: { value: '', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('payloadType') : function (v) { return true }) },
payloadType: { value: 'str' },
topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
- topicType: { value: 'msg' }
+ topicType: { value: 'msg' },
+ buttonColor: { value: '' },
+ textColor: { value: '' },
+ iconColor: { value: '' }
},
inputs: 1,
outputs: 1,
@@ -97,6 +100,10 @@
\ No newline at end of file
diff --git a/nodes/widgets/ui_button.js b/nodes/widgets/ui_button.js
index 4dcbdeecb..7e99a6af0 100644
--- a/nodes/widgets/ui_button.js
+++ b/nodes/widgets/ui_button.js
@@ -55,13 +55,25 @@ module.exports = function (RED) {
statestore.set(group.getBase(), node, msg, 'label', updates.label)
}
if (typeof updates.icon !== 'undefined') {
- // dynamically set "label" property
+ // dynamically set "icon" property
statestore.set(group.getBase(), node, msg, 'icon', updates.icon)
}
if (typeof updates.iconPosition !== 'undefined') {
- // dynamically set "label" property
+ // dynamically set "iconPosition" property
statestore.set(group.getBase(), node, msg, 'iconPosition', updates.iconPosition)
}
+ if (typeof updates.buttonColor !== 'undefined') {
+ // dynamically set "buttonColor" property
+ statestore.set(group.getBase(), node, msg, 'buttonColor', updates.buttonColor)
+ }
+ if (typeof updates.textColor !== 'undefined') {
+ // dynamically set "textColor" property
+ statestore.set(group.getBase(), node, msg, 'textColor', updates.textColor)
+ }
+ if (typeof updates.iconColor !== 'undefined') {
+ // dynamically set "iconColor" property
+ statestore.set(group.getBase(), node, msg, 'iconColor', updates.iconColor)
+ }
}
if (!error) {
diff --git a/ui/src/widgets/ui-button/UIButton.vue b/ui/src/widgets/ui-button/UIButton.vue
index ec6af2d3d..6df928bd7 100644
--- a/ui/src/widgets/ui-button/UIButton.vue
+++ b/ui/src/widgets/ui-button/UIButton.vue
@@ -1,10 +1,16 @@
- {{ label }}
+
+
+
+
+
+
+
@@ -25,6 +31,9 @@ export default {
dynamic: {
label: null,
icon: null,
+ buttonColor: null,
+ textColor: null,
+ iconColor: null,
iconPosition: null
}
}
@@ -49,6 +58,15 @@ export default {
},
iconOnly () {
return this.getPropertyValue('icon') && !this.getPropertyValue('label')
+ },
+ buttonColor () {
+ return this.getPropertyValue('buttonColor')
+ },
+ iconColor () {
+ return this.getPropertyValue('iconColor')
+ },
+ textColor () {
+ return this.getPropertyValue('textColor')
}
},
created () {
@@ -83,6 +101,15 @@ export default {
if (typeof updates.iconPosition !== 'undefined') {
this.dynamic.iconPosition = updates.iconPosition
}
+ if (typeof updates.buttonColor !== 'undefined') {
+ this.dynamic.buttonColor = updates.buttonColor
+ }
+ if (typeof updates.textColor !== 'undefined') {
+ this.dynamic.textColor = updates.textColor
+ }
+ if (typeof updates.iconColor !== 'undefined') {
+ this.dynamic.iconColor = updates.iconColor
+ }
},
getPropertyValue (property) {
return this.dynamic[property] !== null ? this.dynamic[property] : this.props[property]
@@ -94,14 +121,18 @@ export default {