https://github.com/tve/node-red-fd-svg
Node-RED Node with SVG Widget for the FlexDash dashboard
https://github.com/tve/node-red-fd-svg
Last synced: 10 months ago
JSON representation
Node-RED Node with SVG Widget for the FlexDash dashboard
- Host: GitHub
- URL: https://github.com/tve/node-red-fd-svg
- Owner: tve
- Created: 2023-01-10T07:13:42.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-29T01:40:01.000Z (over 3 years ago)
- Last Synced: 2025-04-08T09:53:05.248Z (over 1 year ago)
- Language: JavaScript
- Size: 1.19 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Node-RED FlexDash SVG
## FlexDash HTML widget
This node & widget displays raw HTML in FlexDash and allows a Node-RED flow to alter the
HTML via messages.
Messages may have the following fields:
- `payload` - a string containing HTML to replace the entire contents of the widget
- `selector` - a CSS selector to select elements to operate on
- `command` - a string containing a command to execute on the selected elements, see below
- `args` - an array of arguments to pass to the command
- `commands` - an array of commands to execute, each element must contain a `command` an
`args` field and optionally a `selector` field (the latter defaults to the HTML root!)
The fields are processed in the following order: first `html`, then `selector`, `command`
and `args`, then `commands`.
### Selectors
Standard selectors for ID (`#id`), class (`.class`) and attribute (`[attr]` or `[attr=value]`)
are supported. The ` ` (space) combinator is supported, other combinators are not.
When an array of commands is specified, the `selector` field may have the value `.` to refer to
the same elements as the previous command in the same message.
### HTML elements in arguments
Some commands, such as `append` and `prepend`, take HTML elements as arguments.
These must be Javascript objects with fields `tag` (the tag name), `attrs` (the
attributes including `id` and `class` if desired) and optionally `children` (an array of child
elements) or `text` (the text content of the element).
Elements with `text` must have a tag of `span` and no children.
### Command list
The commands are loosely patterned after JQuery.
**Commands that return something should output a message but currently don't**
- `id` - set the ID of the element to `args[0]`
- `addClass` - add `args[...]` to the classes of the element
- `hasClass` - check whether any of the elements has class `args[0]`, returns a boolean
- `removeClass` - remove `args[...]` from the classes of the element
- `attr` - if `args.length==1` return an array with the values of the attribute `args[0]` for
each selected element, if `args.length==2` set the attribute `args[0]` to the value `args[1]`
for each element
- `hasAttr` - check whether any of the elements has attribute `args[0]`, returns a boolean
(doesn't exist in JQuery)
- `text` - if `args.length==0` get the "inner text" of the selected elements (concatenated),
else set the "inner text" of the selected elements to `args[0]` creating span elements,
which is equivalent to bare text in HTML
(currently there is no escaping done of `<`, but that will be added...)
- `html` - set the "inner HTML" of the selected elements to `args[0]`, i.e., parse the HTML and
set the resulting elements as children of the selected elements
- `append` - append elements `args[0...]` to each of the selected elements
- `prepend` - prepend elements `args[0...]` to each of the selected elements
- `empty` - remove all children of the selected elements
- `remove` - remove the selected elements
- `replaceWith` - replace the selected elements with elements `args[0...]`