Dia antes primera install

node_modules/node-red-dashboard/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

node_modules/node-red-dashboard/.jscsrc

@@ -0,0 +1,24 @@
+{
+    "fileExtensions": [ ".js", "jscs" ],
+    "excludeFiles": [ "node_modules/**" ],
+    "validateIndentation": 4,
+    "disallowKeywordsOnNewLine": [],
+    "disallowMixedSpacesAndTabs": true,
+    "disallowMultipleSpaces": {"allowEOLComments": true},
+    "disallowNewlineBeforeBlockStatements": true,
+    "disallowTabs": true,
+    "disallowTrailingWhitespace": true,
+    "requireCurlyBraces": true,
+    //"requireKeywordsOnNewLine": ["else", "catch"],
+    //"requireSemicolons": true,
+    //"requireSpaceAfterBinaryOperators": true,
+    //"requireSpaceAfterComma": {"allExcept": ["trailing"]},
+    "requireSpaceAfterKeywords": ["do","for","if","else","switch","case","try","while"],
+    "requireSpaceBeforeBlockStatements": 1,
+    "requireSpaceBeforeObjectValues": false,
+    "requireSpacesInForStatement": true,
+    "requireSpacesInFunction": { "beforeOpeningCurlyBrace": true },
+    //"validateParameterSeparator": ", ",
+    //"validateQuoteMarks": false,
+    "maximumLineLength": 300
+}

node_modules/node-red-dashboard/.jshintignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

node_modules/node-red-dashboard/.jshintrc

@@ -0,0 +1,19 @@
+{
+    "asi": true,        // allow missing semicolons
+    "curly": true,      // require braces
+    "eqnull": true,     // ignore ==null
+    //"eqeqeq": true,   // enforce ===
+    "freeze": true,     // don't allow override
+    "indent": 4,        // default indent of 4
+    "forin": true,      // require property filtering in "for in" loops
+    "immed": true,      // require immediate functions to be wrapped in ( )
+    "nonbsp": true,     // warn on unexpected whitespace breaking chars
+    //"strict": true,   // commented out for now as it causes 100s of warnings, but want to get there eventually
+    //"unused": true,   // Check for unused functions and variables
+    "loopfunc": true,   // allow functions to be defined in loops
+    //"expr": true,     // allow ternery operator syntax...
+    "shadow": true,     // allow variable shadowing (re-use of names...)
+    "sub": true,        // don't warn that foo['bar'] should be written as foo.bar
+    "proto": true,      // allow setting of __proto__ in node < v0.12,
+    "esversion": 11     // allow es11(ES2020)
+}

node_modules/node-red-dashboard/CONTRIBUTING.md

@@ -0,0 +1,60 @@
+# Contributing to Node-RED-Dashboard
+
+We welcome contributions, but request you follow these guidelines.
+
+ - [Raising issues](#raising-issues)
+ - [Feature requests](#feature-requests)
+ - [Pull-Requests](#pull-requests)
+   - [Contributor License Agreement](#contributor-license-agreement)
+
+This project adheres to the [Contributor Covenant 1.4](http://contributor-covenant.org/version/1/4/).
+By participating, you are expected to uphold this code. Please report unacceptable
+behaviour to any of the [project's core team](https://github.com/orgs/node-red/teams/core).
+
+## Raising issues
+
+Please raise any bug reports on the relevant project's issue tracker. Be sure to
+search the list to see if your issue has already been raised.
+
+A good bug report is one that make it easy for us to understand what you were
+trying to do and what went wrong.
+
+Provide as much context as possible so we can try to recreate the issue.
+If possible, include the relevant part of your flow. To do this, select the
+relevant nodes, press Ctrl-E and copy the flow data from the Export dialog.
+
+At a minimum, please include:
+
+- Version of Node-RED-Dashboard - either release number if you downloaded a zip, or the first few lines of `git log` if you are cloning the repository directly.
+ - Version of Node-RED - either release number if you downloaded a zip, or the first few lines of `git log` if you are cloning the repository directly.
+ - Version of node.js - what does `node -v` say?
+
+## Feature requests
+
+For feature requests, please raise them on the [mailing list](https://groups.google.com/forum/#!forum/node-red).
+
+## Pull-Requests
+
+If you want to raise a pull-request with a new feature, or a refactoring
+of existing code, it may well get rejected if you haven't discussed it on
+the [mailing list](https://groups.google.com/forum/#!forum/node-red) first.
+
+### Contributor License Agreement
+
+All contributors need to sign the JS Foundation's Contributor License Agreement.
+It is an online process and quick to do. You can read the details of the agreement
+here: https://cla.js.foundation/node-red/node-red.
+
+If you raise a pull-request without having signed the CLA, you will be prompted
+to do so automatically.
+
+### Coding standards
+
+Please ensure you follow the coding standards used through-out the existing
+code base. Some basic rules include:
+
+ - indent with 4-spaces, no tabs. No arguments.
+ - opening brace on same line as `if`/`for`/`function` and so on, closing brace
+ on its own line.
+ - There are **.jshintrc** and **.jscsrc** files included in the project which
+ should be used to help formatting.

node_modules/node-red-dashboard/ISSUE_TEMPLATE.md

@@ -0,0 +1,34 @@
+<!--
+## Before you hit that Submit button....
+
+This issue tracker is for problems with the Node-RED-Dashboard only.
+
+If your issue is:
+  - a general 'how-to' type question,
+  - a feature request or suggestion for a change
+
+please use the Dashboard category in the [Node-RED Forum](https://discourse.nodered.org) or [slack team](https://nodered.org/slack).
+
+You could also consider asking a question on [Stack Overflow](https://stackoverflow.com/questions/tagged/node-red) and tag it `node-red`.
+
+That way the whole Node-RED user community can help, rather than rely on the core development team.
+
+## So you have a real issue to raise...
+
+To help us understand the issue, please fill-in as much of the following information as you can:
+-->
+
+### What are the steps to reproduce?
+
+### What happens?
+
+### What do you expect to happen?
+
+### Please tell us about your environment:
+
+- [ ] Node-RED-Dashboard version:
+- [ ] Node-RED version:
+- [ ] node.js version:
+- [ ] npm version:
+- [ ] Platform/OS:
+- [ ] Browser:

node_modules/node-red-dashboard/LICENSE

@@ -0,0 +1,15 @@
+Copyright 2016,2020 JS Foundation and other contributors, https://js.foundation/
+Copyright 2016 IBM Corp.
+Copyright 2015 Andrei Tatar
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

node_modules/node-red-dashboard/README.md

@@ -0,0 +1,306 @@
+# node-red-dashboard
+
+[![platform](https://img.shields.io/badge/platform-Node--RED-red)](https://nodered.org)
+![NPM version](https://badge.fury.io/js/node-red-dashboard.svg)
+![NPM](https://img.shields.io/npm/l/node-red-dashboard)
+
+**ANNOUNCEMENT** - As of 27th June 2024 this project should be considered deprecated. We will leave it here so it can still be installed if necessary, but no new development will take place. For production use you should consider one of the other alternatives The most direct replacement is the [Flowfuse Dashboard](https://github.com/FlowFuse/node-red-dashboard) - but [UIBUILDER](https://flows.nodered.org/node/node-red-contrib-uibuilder) may also be a good alternative.
+
+This module provides a set of nodes in Node-RED to quickly create a live data dashboard.
+
+These nodes require node.js version 12 or more recent. The last version to support node v8 was 2.30.0.
+
+From version 2.10.0 you can create and install widget nodes like other Node-RED nodes.
+See the [Wiki](https://github.com/node-red/node-red-dashboard/wiki/Creating-New-Dashboard-Widgets) for more information.
+
+For the latest updates see the [CHANGELOG.md](https://github.com/node-red/node-red-dashboard/blob/master/CHANGELOG.md)
+
+**NOTE:** - This project is based on Angular v1 - As that is now no longer maintained, this project should be considered to be on "life support". Small patches will be applied on a best can do basis, but there will be no major feature upgrades, and underlying security breakage may occur.
+
+![Dashboard example](http://nodered.org/images/dashboarde.png)
+
+## Pre-requisites
+
+The Node-RED-Dashboard requires [Node-RED](https://nodered.org) to be installed.
+
+## Install
+
+To install the stable version use the `Menu - Manage palette` option and search for `node-red-dashboard`, or run the following command in your Node-RED user directory - typically `~/.node-red`:
+
+    npm i node-red-dashboard
+
+Restart your Node-RED instance and you should have UI nodes available in the palette and a new `dashboard` tab in the
+right side panel. The UI interface is available at <http://localhost:1880/ui> (if the default settings are used).
+
+If you want to try the latest version from github, you can install it by
+
+    npm i node-red/node-red-dashboard
+
+## Settings
+
+The default url for the dashboard is based off your existing Node-RED httpRoot path with /ui added. This can be changed in your Node-RED settings.js file.
+
+```
+ui: { path: "ui" },
+```
+
+You can also add your own express middleware to handle the http requests by using the `ui: { middleware: your_function }` property in settings.js. For example
+
+```
+ui: { middleware: function (req, res, next) {
+            // Do something more interesting here.
+            console.log('LOGGED')
+            next()
+        }
+    },
+```
+
+You can also add middleware to the websocket connection using
+
+```
+ui: { ioMiddleware: function (socket, next) {
+            // Do something more interesting here.
+            console.log('HELLO')
+            next()
+        }
+    },
+```
+
+**Note**: both of these also accept an array of functions if you need to pass in multiple middleware actions.
+
+Setting your own ioMiddleware will disable the default cross domain origin check.
+
+You can also set the dashboard to be read only by `ui: { readOnly: true }`. This does not stop the user interacting with the dashboard but does ignore all updates coming from the dashboard.
+
+Finally you can customise the default Group name (for i18n) by setting
+```
+ui: { defaultGroup: "Better Default" }
+```
+
+You can of course combine any combination of these properties
+
+## Layout
+
+The dashboard layout should be considered as a grid.
+
+Each **group** element has a width - by default 6 'units' (a unit is 48px wide by default with a 6px gap).
+
+Each **widget** in the group also has a width - by default, 'auto' which means it will fill the width of the group it is in, but you can set it to a fixed number of units.
+
+The layout algorithm of the dashboard always tries to place items as high and to the left as they can within their container - this applies to how groups are positioned on the page, as well as how widgets are positioned in a group.
+
+Given a group with width 6, if you add six widgets, each with a width of 2, then they will be laid out in two rows - three widgets in each.
+
+If you add two groups of width 6, as long as your browser window is wide enough, they will sit alongside each other. If you shrink the browser, at some point the second group will shift to be below the first, in a column.
+
+It is advisable to use multiple groups if possible, rather than one big group, so that the page can dynamically resize on smaller screens.
+
+## Features
+
+#### Dashboard sidebar
+
+The widget layout is managed by a `dashboard` tab in the sidebar of the Node-RED editor.
+
+##### Layout
+
+ - **Tabs** - From here you can re-order the tabs, groups and widgets, and add and edit their properties. You can also open the layout tools that may help you organise the widgets more easily than via the sidebar.
+
+ - **Links** - to other web pages can also be added to the menu. They can optionally be opened in an iframe - if allowed by the target page.
+
+##### Site
+
+ - **Title** - the `title` of the UI page can be set.
+
+ - **Options** - optionally hide the title bar, and allow swiping sideways between tabs on a touch screen. You can also set whether the template uses the selected theme or uses the underlying Angular Material theme. You can also choose to use the Angular Material theme everywhere.
+
+ - **Date Format** - sets the default date format for chart and other labels.
+
+ - **Sizes** - sets the basic geometry of the grid layout in pixels. The **width** and **height** of widgets can be set, as can the width of *groups*. These are the basic definitions of the "units' used elsewhere within the dashboard.
+
+##### Theme
+
+  - **Style** - the theme and font of the UI is set in the dashboard sidebar. You can select a default Light, Dark or Custom Theme. You cannot have different themes for each tab.
+
+You can also choose to use the basic Angular Material themes instead if you like, either just within any ui_templates or for the whole Dashboard. This will only affect angular components so some of the charts and so on may need extra work.
+
+**Note**: For users creating their own templates the following CSS variable names are available
+to help pick up the theme colours.
+
+ - --nr-dashboard-pageBackgroundColor
+ - --nr-dashboard-pageTitlebarBackgroundColor
+ - --nr-dashboard-pageSidebarBackgroundColor
+ - --nr-dashboard-groupBackgroundColor
+ - --nr-dashboard-groupTextColor
+ - --nr-dashboard-groupBorderColor
+ - --nr-dashboard-widgetColor
+ - --nr-dashboard-widgetTextColor
+ - --nr-dashboard-widgetBgndColor
+
+#### Widgets
+
+Don't forget there are also extra ui widgets available on the [Node-RED flows](http://flows.nodered.org) website. Search for node-ui- or contrib-ui- .
+
+Group labels are optional.
+
+Most widgets can have a label and value - both of these can be specified by properties of the incoming msg if required, and modified by angular filters. For example the label can be set to `{{msg.topic}}`, or the value could be set to `{{value | number:1}}%` to round the value to one decimal place and append a % sign.
+
+Each node may parse the `msg.payload` to make it suitable for display. This converted version is exposed as the variable called `value`, (see example above).
+
+Any widget can be disabled by passing in a `msg.enabled` property set to `false;`. *Note:* this doesn't stop the widget receiving messages but does stop inputs being active and does re-style the widget.
+
+Most widgets and the ui **group** can have a CSS class or multiple CSS class names. This permits the user to override styles one or more widgets and their inner contents. e.g to colourise a warning toast, add the CSS class `notification-warn` to the **notification** widget and add a **ui-template** (set to "Add to site head section")...
+```html
+<style>
+  md-toast.notification-warn {
+    border-width: 10px;
+    border-color: darkorange;
+  }
+  md-toast.notification-warn > h3 {
+    background-color: orange;
+  }
+  md-toast.notification-warn > div {
+    background: rgba(245, 173, 66, 0.5);
+    color: darkorange;
+  }
+</style>
+```
+Additionally, any widget that has a Class field can be dynamically updated by passing in a `msg.className` string property set to one or more class names.
+
+Most ui widgets can also be configured by using a `msg.ui_control` message - see **[config-fields.md](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md)**
+for further details.
+
+  - **Audio out** - a widget that will let you play audio (wav or mp3) or send Text to Speech (TTS) to the client.
+  - **Button** - the icon can be set using either Material or fa-icons - the colour and background colour may also be set. If the widget is sized to 1 wide the icon has precedence.
+  - **Chart** - has both line, bar and pie chart modes. Also the X-Axis labels can be customised using a date formatter string. See **[this document](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md)** for more information on the chart data formats accepted.
+  - **Colour Picker** - a colour picker widget.
+  - **Date Picker** - a date picker widget. The displayed Date format can be specified in the Site tab using moment.js formatting.
+  - **Dropdown** - a dropdown select widget has been added. Multiple label, value pairs can be specified. The choices can also be set via `msg.options` containing an array of objects. If just text then the value will be the same as the label, otherwise you can specify both by using an object of "label":"value" pairs :
+
+        [ "Choice 1", "Choice 2", {"Choice 3": 3} ]
+
+     Setting `msg.payload` will pre-select the value in the dropdown.
+  - **Form** - a widget that can be composed of several sub-widgets. When submitted all values are submitted as a single message.
+  - **Gauge** - has 4 modes - *standard* (simple gauge), *donut* (complete 360&deg;), *compass*, and *wave*. You can also specify the colour range of the standard and donut gauges.
+  - **Notification** - creates alerts to the user - can either be a toast popup, or a dismissable alert box. The alert may be targeted to a single user.
+  - **Numeric** - a Numeric input widget with up/down buttons.
+  - **Slider** - a simple horizontal slider, with variable step size.
+  - **Switch** - can also set two icons and/or colours depending on state.
+  - **Template** - the template node allows the user to specify and create their own widgets within the framework using HTML, Javascript. This is an Angular.js widget. You may also use this to override the built in CSS styles.
+  - **Text** - A read only widget, the layout of the `label`, and `value` can be configured.
+  - **Text input** - text input box, with optional label, can also support password, email and colour modes.
+  - **UI-Control** - allows some dynamic control of the dashboard. Sending a `msg.payload` of the tab number (from 0) or tab_name will switch to that tab. Tabs can be enabled/disabled/hide/show via msg like `{"tabs":{"hide":["tab_name_with_underscores"],"show":["another_tab_name"],"disable":["unused_tab_name"]}}`.
+  Groups can be hidden and made visible via a msg like `{"group":{"hide":["tab_name_group_name_with_underscores"],"show":["tab_name_another_group"],"focus":true}}`. Outputs a `msg.payload` for every browser *connect* and *loss*, and every tab *change*. This can be used to trigger other actions like resetting the visibility of tabs and groups.
+
+**Tip:** The *Text* widget will accept html - so you can use it together with the *fa-icons* we
+already use to create indicator type widgets.
+
+## Icons
+
+The dashboard has 4 sets of icons built in. They are
+
+ - [Angular Material icons](https://klarsys.github.io/angular-material-icons/) : e.g. `send`
+ - [Font Awesome 4.7](https://fontawesome.com/v4.7.0/icons/) : e.g. `fa-fire fa-2x`
+ - [Weather Icons Lite](https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md) : e.g. `wi-wu-sunny`
+ - [Material Design Iconfont](https://jossef.github.io/material-design-icons-iconfont/) ; e.g. `mi-alarm_on` - note add mi- to the icon name in the iconset.
+
+And one that can only be used if you have a permanent connection to the internet
+
+ - [Iconify](https://iconify.design/icon-sets/) : e.g. `iconify-mdi:car-battery 48px`
+
+Again note you have to add `iconify-` to the icon name in the icon set of your choice. You may also optionally specify a size in standard px or em notation. Default is 24px. You must also add a **ui_template** node that loads the necessary iconify library into the header of the dashboard. It should contain
+
+```
+<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
+```
+
+Once you have done that then you can also use them more generally, for example
+```
+<span class="iconify icon:wi:sunset icon-inline:false"></span>
+```
+
+You may also create your own set of icons using [Icofont](https://icofont.com/icons). Once downloaded you can serve them locally via Node-RED and add them to the head of the dashboard page by using a ui_template node : e.g.
+
+```
+<link rel="stylesheet" href="myserver/path/icofont.css">
+```
+then you can use then as per above by adding the icofont- prefix e.g. `icofont-badge`
+
+Or just use them in a template
+
+```
+<link rel="stylesheet" href="/css/icofont.css">
+<div style="display: flex;height: 100%;justify-content: center;align-items: center;">
+<i class="icofont icofont-4x icofont-hail"></i>
+</div>
+```
+
+ And finally via an image - https://{myserver/path/image.png}
+
+You can use them in any of the Icon fields. You may also be able to use some of them for example in labels via their inline style eg `<i class="fa fa-flag"></i>`
+
+
+## Loading the Dashboard
+
+Due to the size of the dashboard libraries it can take a long time to load if you are running on wireless network. It is possible add a custom loading page if you wish. To do so add a file called `loading.html` to the `node_modules/node-red-dashboard/dist/` folder. A simple example could be
+
+```
+ <div><i class="fa fa-spin fa-5x fa-spinner"></i></div>
+ ```
+
+## Securing the Dashboard
+
+You can use the `httpNodeAuth` property in your Node-RED settings.js file to secure the Dashboard as it is
+created the same way as other HTTP nodes are. The details can be found at the bottom of this page in the
+docs <http://nodered.org/docs/security>
+
+## Multiple Users
+
+This Dashboard does NOT support multiple individual users. It is a view of the status of the underlying
+Node-RED flow, which itself is single user. If the state of the flow changes then all clients will get
+notified of that change.
+
+Messages coming from the dashboard **do** have a `msg.socketid`, and updates like change of tab,
+notifications, and audio alerts will be directed only to that session. Delete the `msg.sessionid` to send
+to all sessions.
+
+## Discussions and suggestions
+
+Use the Node-RED Discourse Forum: https://discourse.nodered.org/c/dashboard
+or the Dashboard-ui channel in <a href="http://nodered.org/slack/">Slack</a> to ask
+questions or to discuss new features.
+
+The current work in progress list is shown in the
+<a href="https://github.com/node-red/node-red-dashboard/projects/1" target="_blank"> Github Project</a>.
+
+## Contributing
+
+Before raising a pull-request, please read our
+[contributing guide](https://github.com/node-red/node-red-dashboard/blob/master/CONTRIBUTING.md).
+
+This project adheres to the [Contributor Covenant 1.4](http://contributor-covenant.org/version/1/4/).
+By participating, you are expected to uphold this code. Please report unacceptable
+behavior to any of the [project's core team](https://github.com/orgs/node-red/teams/core).
+
+## Developers
+
+```
+cd ~\.node-red\node_modules
+git clone https://github.com/node-red/node-red-dashboard.git
+cd node-red-dashboard
+npm install
+```
+The plugin uses the ```dist``` folder if it exists. Make sure it has been deleted if you want to use the non-minified version while developing.
+After finishing changes to the front-end code in the src folder, you can use ```gulp``` to update and rebuild the minified files and update the *appcache* manifest.
+
+    gulp
+
+We also have suggested *lint* and *js* styles that can be checked with:
+
+    gulp lint
+    gulp jscs
+
+If submitting a Pull Request (PR) please do NOT include the minified `/dist` files.
+
+Thank you.
+
+<img src="http://nodered.org/images/dashboardl.png"/>

node_modules/node-red-dashboard/config-fields.md

@@ -0,0 +1,91 @@
+
+## UI Widget configuration via msg.ui_control
+
+The following configuration properties of ui widget nodes can be set by using a `msg.ui_control` property on a msg.
+Multiple properties of the node can be set at the same time. For example you can use a change
+node to set msg.ui_control to JSON `{ "min":10, "max":50 }`
+
+**Note**: It is still recommended that nodes are configured via the editor in order to preset the default values.
+
+|widget                 |property           |type       | notes / example
+|---                    |---                |---        |---
+|ui_button              |color              |string     | not needed
+|                       |bgcolor            |string     | not needed
+|                       |icon               |string     | on refresh
+|                       |format             |string     | not needed
+|                       |tooltip            |string     | on refresh
+|                       |className          |string     | (Note 4)
+|ui_chart               |look               |string     |"line","bar","horizontalBar","pie","polar-area","radar"
+|                       |legend             |boolean    | 
+|                       |interpolate        |string     |"linear","step","bezier"
+|                       |nodata             |string     | 
+|                       |ymin               |number     | 
+|                       |ymax               |number     | 
+|                       |dot                |boolean    | 
+|                       |xformat            |string     |"HH:mm:ss"
+|                       |cutout             |number     | 
+|                       |colors             |object     | n/a
+|                       |useOneColor        |boolean    | n/a
+|                       |spanGaps           |boolean    | n/a
+|                       |animation          |string     | (Note 1), {duration:1000, easing:"easeInOutSine"}
+|                       |options            |object     | (Note 2), {scales: {yAxes: [{ticks: {fontSize: 20}}]}}
+|                       |className          |string     | (Note 4)
+|ui_colour_picker       |format             |string     | on refresh
+|                       |showPicker         |boolean    | on refresh
+|                       |showSwatch         |boolean    | on refresh
+|                       |showValue          |boolean    | on refresh
+|                       |showAlpha          |boolean    | on refresh
+|                       |showLightness      |boolean    | on refresh
+|                       |className          |string     | (Note 4)
+|ui_dropdown            |place              |string     |"placeholder text"
+|                       |options            |array      |[{"label":"foo","value":"0","type":"str"}]
+|                       |className          |string     | (Note 4)
+|ui_gauge               |gtype              |string     |"gage", "donut", "compass", "wave"
+|                       |min                |number     | 
+|                       |seg1               |number     |segment 1 limit
+|                       |seg2               |number     |segment 2 limit
+|                       |max                |number     | 
+|                       |colors             |array      |["blue","#00ff00","#f00"]
+|                       |options            |object     |(see Note 3 below)
+|                       |className          |string     | (Note 4)
+|ui_numeric             |min                |number     | 
+|                       |max                |number     | 
+|                       |step               |number     | 
+|                       |format             |string     |"{{value}}"
+|                       |className          |string     | (Note 4)
+|ui_slider              |min                |number     | 
+|                       |max                |number     | 
+|                       |step               |number     | 
+|                       |className          |string     | (Note 4)
+|ui_switch              |onicon             |string     | all or nothing
+|                       |officon            |string     | all or nothing
+|                       |oncolor            |string     | all or nothing
+|                       |offcolor           |string     | all or nothing
+|                       |className          |string     | (Note 4)
+|ui_template            |format             |string     | the script
+|                       |templateScope      |string     | "local" or "global"
+|                       |className          |string     | (Note 4)
+|ui_text                |format             |string     |"{{value}}"
+|                       |layout             |string     | "row-left", "row-right", etc
+|                       |className          |string     | (Note 4)
+|ui_text_input          |mode               |string     | "text", "email", "password", "color"
+|                       |delay              |number     | 
+|                       |className          |string     | (Note 4)
+
+**Notes**:
+
+ 1. See http://easings.net/ for examples of easings for chart animation.
+
+ 2. The chart can take many of the angular-chartjs options for changing axes label, scales etc
+
+ 3. The gauge options can accept any of the [Justgage parameters](https://github.com/toorshia/justgage/blob/master/justgage.js#L42) for example:
+
+         {"options":{"pointer":false,"gaugeWidthScale":1.5}}
+         {"options":{"pointer":true,"gaugeWidthScale":0.4,"reverse":true}}
+
+4. when a className is specified, it is added to the parent element. E.g for a button, the class is added to the `md-card`
+    This permits overriding of styles in all sub elements e.g. `md-card.my-button button { color: red }`
+
+Likewise the Wave type gauge can accept [liquidfillgauge config](http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6) options for example:
+
+        {options:{circleColor:"#FF7777", textColor:"#FF4444", waveTextColor:"#FFAAAA", waveColor:"#FFDDDD", circleThickness:0.3, textVertPosition:0.2, waveHeight:0.05, waveCount:8}}

node_modules/node-red-dashboard/dist/css/app.min.less

@@ -0,0 +1,890 @@
+/* */
+/* Copyright 2016,2020 JS Foundation and other contributors, https://js.foundation/ */
+/* Copyright 2016 IBM Corp.                                                 */
+/* Copyright 2015 Andrei Tatar                                              */
+/* */
+/* Licensed under the Apache License, Version 2.0 (the "License");          */
+/* you may not use this file except in compliance with the License.         */
+/* You may obtain a copy of the License at                                  */
+/* */
+/* http://www.apache.org/licenses/LICENSE-2.0                               */
+/* */
+/* Unless required by applicable law or agreed to in writing, software      */
+/* distributed under the License is distributed on an "AS IS" BASIS,        */
+/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. */
+/* See the License for the specific language governing permissions and      */
+/* limitations under the License. */
+/* */
+
+@media(max-width: 959px) {
+    .md-sidenav-left, md-sidenav {
+        top: 48px !important;
+        z-index: 80;
+    }
+}
+@media (max-width: 959px) and (min-width: 0) and (orientation: portrait) {
+    md-toolbar {
+        min-height: 48px;
+        height: 48px;
+        max-height: 48px;
+    }
+}
+@media(min-width: 960px) {
+    .md-sidenav-left, md-sidenav {
+        top: 64px;
+        z-index: 80;
+    }
+}
+@media(max-width: 660px) {
+    md-sidenav,
+    md-sidenav.md-locked-open,
+    md-sidenav.md-closed.md-locked-open-add-active {
+    	min-width: 64px !important;
+        width: auto;
+    	max-width: 200px !important;
+    }
+}
+@media(min-width: 661px) {
+    md-sidenav,
+    md-sidenav.md-locked-open,
+    md-sidenav.md-closed.md-locked-open-add-active {
+    	min-width: 64px !important;
+        width: auto;
+    	max-width: 320px !important;
+    }
+}
+md-sidenav ng-md-icon {
+    padding-right: 4px;
+}
+md-sidenav i {
+    padding-right: 4px;
+}
+md-sidenav md-list-item .md-list-item-inner>p {
+    line-height: 20px;
+}
+md-card > md-list > md-list-item > div > md-icon > ui-icon > ng-md-icon {
+    vertical-align:unset !important;
+}
+
+md-toast .md-toast-content {
+	height: auto;
+}
+md-toast .md-toast-error {
+	color: rgba(255, 64, 41, 0.84);
+    font-weight: 500;
+    font-size: large;
+}
+md-backdrop.md-sidenav-backdrop  {
+    z-index: 80;
+}
+md-card {
+    box-shadow: none;
+}
+
+.md-button {
+    min-width: 64px;
+}
+.md-tooltip {
+    background-color: #888 !important;
+    color: #fff !important;
+    border-radius: 3px;
+    opacity: 1 !important;
+}
+.md-tooltip.md-origin-bottom {
+    margin-top: -6px;
+    margin-left: -8px;
+}
+
+.node-red-ui--notabs {
+    color: #888;
+    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+	opacity: 1;
+	animation-name: fadeInOpacity;
+	animation-iteration-count: 1;
+	animation-timing-function: ease-in;
+	animation-duration: 2.5s;
+}
+
+.node-red-ui--loading {
+    color: #888;
+    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.node-red-ui--inline-link {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+}
+.node-red-ui--inline-link iframe {
+	width: 100%;
+	height: 100%;
+    overflow: hidden;
+}
+
+.material-icons {
+    vertical-align: middle;
+}
+
+.ie9 img[src$=".svg"] {
+    width: 100%;
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    img[src$=".svg"] {
+        width: 100%;
+    }
+}
+
+@keyframes fadeInOpacity {
+    0% {
+		opacity: 0;
+	}
+    30% {
+        opacity: 0;
+    }
+	100% {
+		opacity: 1;
+	}
+}
+
+.flip-icon {
+    animation: flip-icon 0.3s linear both;
+}
+
+@keyframes flip-icon {
+    0% {
+        transform: rotateY(180deg);
+    }
+    100% {
+        transform: rotateY(0deg);
+    }
+}
+
+@supports (-ms-overflow-style: none) {
+    overflow:auto !important;
+}
+
+/*
+    ALL COMPONENTS/CONTENT
+*/
+@baseFont: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
+@baseColor: #fff;
+@pageBackgroundColor: #eee;
+@pageSidebarBackgroundColor: #eee;
+@pageTitlebarBackgroundColor: #0094CE;
+@groupBackgroundColor: #fff;
+@groupTextColor: #00A4DE;
+@groupBorderColor: #fff;
+@widgetTextColor: #000;
+@widgetBackgroundColor: #4FBAE4;
+@widgetBorderColor: #fff;
+@nrTheme: true;
+@nrTemplateTheme: true;
+@nrUnitHeight: 24px;
+@wtc-light: boolean(luma(@widgetTextColor) > 50%);
+@wbc-light: boolean(luma(@widgetBackgroundColor) > 50%);
+
+// define some CSS variables for user usage
+:root {
+    --nr-dashboard-pageBackgroundColor: @pageBackgroundColor;
+    --nr-dashboard-pageTitlebarBackgroundColor: @pageTitlebarBackgroundColor;
+    --nr-dashboard-pageSidebarBackgroundColor: @pageSidebarBackgroundColor;
+    --nr-dashboard-groupTextColor: @groupTextColor;
+    --nr-dashboard-groupBackgroundColor: @groupBackgroundColor;
+    --nr-dashboard-groupBorderColor: @groupBorderColor;
+    --nr-dashboard-widgetTextColor: @widgetTextColor;
+    --nr-dashboard-widgetBackgroundColor: @widgetBackgroundColor; // deprecated - will be removed at some point
+    --nr-dashboard-widgetBorderColor: @widgetBorderColor; // deprecated - will be removed at some point
+    --nr-dashboard-widgetColor: @widgetBackgroundColor;
+    --nr-dashboard-widgetBgndColor: @widgetBorderColor;
+}
+
+.nr-dashboard-disabled {
+    opacity: 0.4 !important;
+    pointer-events: none !important;
+}
+
+& when (@nrTheme = false) {
+    .nr-menu-item-active div button {
+        border-right: 4px solid #888;
+    }
+}
+
+& when (@nrTheme = true) {
+
+body.nr-dashboard-theme {
+    background-color: @pageBackgroundColor;
+    font-family: @baseFont;
+}
+
+body.nr-dashboard-theme md-content {
+    background: transparent;
+    height: 100%;
+    & when (@nrTemplateTheme = true) {
+        color: @groupTextColor;
+    }
+}
+
+// body.nr-dashboard-theme md-select-menu md-content {
+//     max-height: 80%;
+// }
+
+body.nr-dashboard-theme md-input-container.md-input-focused:not([md-no-float]) .md-select-placeholder span:first-child {
+    -webkit-transform: translateY(-28px) scale(.75);
+    transform: translateY(-28px) scale(.75);
+}
+body.nr-dashboard-theme md-input-container.md-input-focused:not(.md-input-has-value) md-select .md-select-value.md-select-placeholder {
+    color: @widgetTextColor;
+}
+
+body.nr-dashboard-theme md-content md-card {
+    background-color: @widgetBorderColor;
+    color: @widgetTextColor;
+}
+
+/* Some colour classes */
+body.nr-dashboard-theme .nr-dashboard-color { color: @groupTextColor; }
+body.nr-dashboard-theme .nr-dashboard-error { color: #ff2929; }
+body.nr-dashboard-theme .nr-dashboard-warning { color: #eaf42f; }
+body.nr-dashboard-theme .nr-dashboard-ok { color: #49db3c; }
+body.nr-dashboard-theme .nr-dashboard-dim { opacity: 0.5 !important; }
+
+
+/*
+    DASHBOARD HEADER
+*/
+body.nr-dashboard-theme md-toolbar {
+    background-color: @pageTitlebarBackgroundColor;
+    color: #fff;
+}
+body.nr-dashboard-theme md-toolbar .md-toolbar-tools {
+    color: #fff;
+    filter: invert(if(@wbc-light, 100%, 0%));
+}
+
+/*
+    DASHBOARD SIDEBAR
+*/
+body.nr-dashboard-theme md-sidenav {
+    color: @groupTextColor;
+    background-color: @pageSidebarBackgroundColor;
+}
+body.nr-dashboard-theme md-sidenav md-list-item._md-button-wrap > div.md-button:first-child {
+    background-color: transparent;
+}
+body.nr-dashboard-theme md-sidenav div.md-list-item-inner {
+    color: @groupTextColor;
+    background-color: transparent;
+}
+a.md-no-style, button.md-no-style {
+    background-color: transparent;
+}
+.nr-menu-item-active div button {
+    border-right: 4px solid @groupTextColor;
+}
+
+
+/*
+    GROUP SPECIFIC
+*/
+.nr-dashboard-theme ui-card-panel {
+    background-color: @groupBackgroundColor;
+    border: 1px solid @groupBorderColor;
+    & p.nr-dashboard-cardtitle {
+        color: @groupTextColor;
+    }
+}
+
+/*
+    COMPONENT-SPECIFIC
+*/
+
+.nr-dashboard-theme .nr-dashboard-spacer {
+    opacity: 0;
+}
+
+.md-button.md-default-theme.md-primary, .md-button.md-primary {
+    background-color: @widgetBackgroundColor !important;
+    color: white;
+}
+// .md-button.md-default-theme:not([disabled]):hover, .md-button:not([disabled]):hover {
+//     filter: grayscale(75%);
+// }
+// .nr-dashboard-theme .md-button.md-primary {
+//     color: lighten(@widgetBackgroundColor, 8);
+// }
+.nr-dashboard-theme .md-button[disabled] {
+    color: rgba(0,0,0,0.38);
+    cursor: default;
+}
+
+/* Button */
+.nr-dashboard-theme .nr-dashboard-button .md-button {
+    background-color: @widgetBackgroundColor;
+    color: white;
+}
+.nr-dashboard-theme .nr-dashboard-button .md-button:hover {
+    background-color: lighten(@widgetBackgroundColor, 6);
+}
+.nr-dashboard-theme .nr-dashboard-template .md-button[disabled] {
+    color: #888;
+}
+.nr-dashboard-theme .nr-dashboard-button .md-button.md-primary {
+    color: white;
+    background-color: lighten(@widgetBackgroundColor, 4);
+}
+.nr-dashboard-theme .nr-dashboard-button .md-button.md-raised:not([disabled]).md-focused {
+    background-color: @widgetBackgroundColor;
+}
+
+/* Date picker */
+.nr-dashboard-theme .nr-dashboard-date-picker md-input-container .md-input {
+    color: @widgetTextColor;
+    border-bottom-color: @widgetBackgroundColor;
+    font-family: inherit;
+}
+.nr-dashboard-theme .nr-dashboard-date-picker md-input-container .md-input::-webkit-input-placeholder {
+    color: @widgetTextColor;
+}
+.nr-dashboard-theme .nr-dashboard-date-picker .md-button.md-icon-button {
+    /* background-color: @widgetBackgroundColor; */
+}
+.nr-dashboard-theme .nr-dashboard-date-picker .md-button.md-icon-button md-icon {
+    color: @widgetBackgroundColor;
+}
+.nr-dashboard-theme .nr-dashboard-date-picker .md-datepicker-triangle-button .md-datepicker-expand-triangle {
+    border-top-color: @widgetTextColor;
+}
+
+.md-default-theme .md-calendar-day-header, .md-calendar-day-header {
+    color: contrast(@pageTitlebarBackgroundColor);
+    background-color: @pageTitlebarBackgroundColor;
+}
+.md-default-theme .md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator, .md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator, .md-default-theme .md-calendar-date.md-focus.md-calendar-selected-date .md-calendar-date-selection-indicator, .md-calendar-date.md-focus.md-calendar-selected-date .md-calendar-date-selection-indicator {
+    background: @widgetBackgroundColor;
+    color: contrast(@widgetBackgroundColor);
+    border-color: transparent;
+}
+.md-default-theme .md-calendar-date.md-calendar-date-today .md-calendar-date-selection-indicator, .md-calendar-date.md-calendar-date-today .md-calendar-date-selection-indicator {
+    border: 1px solid @widgetBackgroundColor;
+}
+.md-datepicker-calendar-pane.md-pane-open {
+    width: 345px;
+    background-color: @groupBackgroundColor;
+}
+
+/* Chart */
+.nr-dashboard-theme .nr-dashboard-chart-title {
+}
+.nr-dashboard-theme .nr-dashboard-chart-titlel {
+    font-size: larger;
+    font-weight: 500;
+}
+
+/* Colour Picker */
+.nr-dashboard-theme .color-picker-panel {
+    background-color: @groupBackgroundColor;
+    border-color: @groupBorderColor;
+    box-shadow: 0 0 1px rgba(255,255,255,.5);
+}
+.nr-dashboard-theme .color-picker-input-wrapper > input {
+    color: @widgetTextColor;
+    background-color: @widgetBorderColor;
+    font-family: inherit;
+}
+.nr-dashboard-theme .color-picker-wrapper .color-picker-panel.color-picker-panel-round .color-picker-grid-wrapper .color-picker-row .color-picker-grid .color-picker-grid-inner {
+    background-color: @widgetBorderColor;
+}
+
+/* Dropdown */
+
+.nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value,
+.nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value.md-select-placeholder {
+    color: @widgetTextColor;
+    border-color: @widgetTextColor;
+    border-bottom-width: 1px;
+    padding: 0px 2px;
+}
+.nr-dashboard-theme .nr-dashboard-dropdown .md-select-icon {
+    color: @widgetTextColor;
+}
+.nr-dashboard-theme .md-select-menu-container {
+    max-height: 85%;
+    overflow-y: auto;
+    border: 1px solid @pageTitlebarBackgroundColor;
+    z-index: 99;
+}
+.nr-dashboard-theme md-select-menu {
+    margin-left: -2px;
+    max-height: 85%;
+}
+.nr-dashboard-theme md-select-menu md-content {
+    padding: 0px;
+    max-height: 85%;
+}
+.nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu md-option {
+    background-color: @groupBackgroundColor;
+    color: @widgetTextColor;
+}
+.nr-dashboard-theme md-select-menu md-option[selected] {
+    color: @groupTextColor !important;
+    background-color: @groupBackgroundColor !important;
+}
+.nr-dashboard-theme md-select-menu[multiple] md-option.md-checkbox-enabled[selected] .md-icon {
+    background-color: lighten(@widgetBackgroundColor, 10) !important;
+    border-color: transparent !important;
+}
+.nr-dashboard-theme md-select-menu[multiple] md-option.md-checkbox-enabled .md-icon {
+    border-color: @widgetBackgroundColor !important;
+}
+.nr-dashboard-theme md-select-menu.md-default-theme md-option:focus:not([disabled]):not([selected]),
+md-select-menu md-option:focus:not([disabled]):not([selected]) {
+    background-color: @groupBackgroundColor;
+}
+.nr-dashboard-theme md-select-menu md-option:hover {
+    background-color: lighten(@widgetBackgroundColor, 4) !important;
+}
+.nr-dashboard-theme md-menu-content {
+    background-color: @groupBackgroundColor;
+    color: @widgetTextColor;
+}
+.nr-dashboard-theme md-menu-content md-menu-item {
+    background-color: @groupBackgroundColor;
+    color: @widgetTextColor;
+}
+
+
+/* Gauge */
+.nr-dashboard-theme .nr-dashboard-gauge {}
+.nr-dashboard-theme .nr-dashboard-gauge text {
+    fill: @widgetTextColor;
+    margin: 8px;
+}
+.nr-dashboard-theme .nr-dashboard-gauge-title {
+    margin: 6px 0px 20px 0px;
+    z-index: 1;
+}
+.nr-dashboard-theme .nr-dashboard-gauge-titlel {
+    font-size: larger;
+    font-weight: 500;
+    z-index: 1;
+}
+.nr-dashboard-theme .nr-dashboard-gauge-titlem {
+    font-weight: 500;
+    margin: 2px 0px 14px 0px;
+    z-index: 1;
+}
+.nr-dashboard-theme .nr-dashboard-gauge-titles {
+    font-size: x-small;
+    margin-top: 2px;
+    height: 10px;
+    padding-bottom: 14px;
+    z-index: 1;
+}
+
+/* Numeric */
+.nr-dashboard-theme .nr-dashboard-numeric .value {
+    background-color: @widgetBorderColor;
+    color: @widgetTextColor;
+}
+
+/* Slider */
+.nr-dashboard-theme .nr-dashboard-slider {}
+.nr-dashboard-theme .nr-dashboard-slider .md-track {
+    background-color: rgba(111, 111, 111, 0.5);
+}
+.nr-dashboard-theme .nr-dashboard-slider .md-track-fill {
+    background-color: @widgetBackgroundColor;
+}
+.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {
+    background-color: @widgetBackgroundColor;
+    border-color: @widgetBackgroundColor;
+}
+.nr-dashboard-theme .nr-dashboard-slider .md-focus-ring {
+    background-color: @widgetBackgroundColor;
+    transform: scale(.4);
+    opacity: 1;
+}
+.nr-dashboard-theme .nr-dashboard-slider .md-sign {
+    background-color: @widgetBackgroundColor;
+}
+.nr-dashboard-theme .nr-dashboard-slider .md-sign:after {
+    border-top-color: @widgetBackgroundColor !important;
+}
+.nr-dashboard-theme .nr-dashboard-slider .md-min[md-discrete] .md-sign {
+    background-color: @widgetBackgroundColor;
+}
+.nr-dashboard-theme .nr-dashboard-slider  md-slider[md-discrete] .md-sign,
+.nr-dashboard-theme .nr-dashboard-slider  md-slider[md-discrete] .md-sign:after {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+    transform: translate3d(0, 0, 0) scale(1);
+}
+.nr-dashboard-theme .nr-dashboard-slider .md-sign:after {
+    border-top-color: @widgetBackgroundColor;
+}
+.nr-dashboard-theme md-slider.md-default-theme[md-vertical] .md-sign:after, .nr-dashboard-theme md-slider[md-vertical] .md-sign:after {
+    content: none;;
+}
+.nr-dashboard-theme .nr-dashboard-slider md-slider.md-default-theme.md-min[md-discrete] .md-thumb:after, md-slider.md-min[md-discrete] .md-thumb:after {
+    background-color: @widgetBackgroundColor;
+    border-color: transparent;
+}
+.nr-dashboard-theme .nr-dashboard-slider md-slider .md-track-ticks {
+    color: transparent;
+}
+.nr-dashboard-theme .nr-dashboard-slider md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-focus-ring {
+    transform: scale(0.4);
+    animation: unset;
+}
+.nr-dashboard-theme .nr-dashboard-slider .md-thumb-text {
+    color: white;
+    filter: invert(if(@wbc-light, 100%, 0%));
+}
+
+/* Switch */
+.nr-dashboard-theme .nr-dashboard-switch {}
+.nr-dashboard-theme .nr-dashboard-switch md-switch .md-bar {
+    background-color: rgba(111, 111, 111, 0.5);
+}
+.nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-bar {
+    background-color: rgba(red(@widgetBackgroundColor), green(@widgetBackgroundColor), blue(@widgetBackgroundColor), 0.5);
+}
+.nr-dashboard-theme .nr-dashboard-switch md-switch .md-thumb {
+    background-color: rgb(148, 148, 148);
+}
+.nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-thumb {
+    background-color: rgba(red(@widgetBackgroundColor), green(@widgetBackgroundColor), blue(@widgetBackgroundColor), 1);
+}
+
+/* Template */
+& when (@nrTemplateTheme = true) {
+    md-list {
+        padding: unset;
+    }
+    md-list-item[disabled] {
+        color: #888;
+        // text-decoration: line-through;
+    }
+    md-list-item {
+        min-height: @nrUnitHeight * 2;
+        height: @nrUnitHeight * 2;
+    }
+    md-list-item._md-button-wrap>div.md-button:first-child {
+        background-color: @widgetBorderColor;
+        height: inherit;
+        padding: 0 6px;
+    }
+    md-list-item.md-2-line {
+        height: @nrUnitHeight * 2;
+        min-height: @nrUnitHeight * 2;
+    }
+    md-list-item.md-3-line {
+        height: @nrUnitHeight * 3;
+        min-height: @nrUnitHeight * 3;
+    }
+    md-list-item .md-list-item-inner {
+        background: @widgetBorderColor;
+        //color: @widgetTextColor;
+        padding-left: 8px;
+        width: 100%;
+        height: 100%;
+    }
+    div > md-list-item.md-2-line, md-list-item.md-2-line>.md-no-style {
+        height: 48px;
+        min-height: 48px;
+        width: 100px;
+    }
+
+    md-progress-linear {
+        padding-top: 4px !important;
+    }
+    md-progress-linear .md-container {
+        margin-top: @nrUnitHeight / 2;
+        background-color: @pageBackgroundColor;
+    }
+    md-progress-linear .md-container .md-bar {
+        background-color: lighten(@widgetBackgroundColor, 5);
+    }
+
+    md-checkbox {
+        min-height: @nrUnitHeight * 2;
+        margin-left: 6px;
+        margin-bottom: 0px;
+        width: 100%;
+    }
+    md-checkbox .md-icon {
+        border-color: @widgetBackgroundColor !important;
+    }
+    md-checkbox[disabled] .md-icon {
+        border-color: #888 !important;
+    }
+    md-checkbox.md-checked .md-icon {
+        background-color: lighten(@widgetBackgroundColor, 5);
+        border-color: transparent !important;
+    }
+    md-checkbox .md-label {
+        position: absolute;
+        top: 32%;
+    }
+    md-checkbox[disabled] .md-label {
+        color: #888;
+    }
+    md-checkbox:last-of-type {
+        margin-left: 6px;
+    }
+
+    .nr-dashboard-theme .nr-dashboard-template {
+        // padding: 0;
+        background-color: @widgetBorderColor;
+    }
+    .nr-dashboard-theme .nr-dashboard-template md-switch .md-thumb {
+        background-color: rgb(148, 148, 148);
+    }
+    .nr-dashboard-theme .nr-dashboard-template md-switch .md-bar {
+        background-color: rgba(111, 111, 111, 0.5);
+    }
+    .nr-dashboard-theme .nr-dashboard-template md-switch.md-checked:not([disabled]) .md-thumb {
+        background-color: lighten(@widgetBackgroundColor, 5);
+    }
+    .nr-dashboard-theme .nr-dashboard-template md-switch.md-checked:not([disabled]) .md-bar {
+        background-color: rgba(red(@widgetBackgroundColor), green(@widgetBackgroundColor), blue(@widgetBackgroundColor), 0.5);
+    }
+
+    md-radio-button {
+        min-height: @nrUnitHeight * 2;
+        margin-left: 6px;
+        margin-bottom: 0px;
+    }
+    md-radio-button .md-off, md-radio-button .md-on {
+        border-color: @widgetBackgroundColor !important;
+    }
+    md-radio-button[disabled] .md-off, md-radio-button[disabled] .md-on {
+        border-color: #888 !important;
+    }
+    md-radio-button.md-checked .md-on {
+        background-color: @widgetBackgroundColor !important;
+    }
+    md-radio-button .md-label {
+        position: absolute;
+        top: 32%;
+    }
+    md-radio-button[disabled] .md-label {
+        color: #888;
+    }
+    md-divider {
+        border-color: @widgetBackgroundColor !important;
+    }
+    .nr-dashboard-theme .nr-dashboard-template path {
+        fill: @widgetBackgroundColor;
+    }
+    .nr-dashboard-template {
+        padding: (@nrUnitHeight / 8) 6px;
+        p, h1, h2, h3, h4 {
+            color: @widgetTextColor !important;
+            background-color : @widgetBorderColor !important;
+        }
+    }
+    .nr-dashboard-theme .nr-dashboard-template .md-button .md-no-style {
+        background: initial !important;
+        color: initial !important;
+    }
+    .nr-dashboard-theme .nr-dashboard-template .md-button[disabled] {
+        color: #ccc;
+    }
+    .nr-dashboard-theme .nr-dashboard-template .md-button.md-primary:not([disabled]) {
+        color: @widgetTextColor;
+        background-color: lighten(@widgetBackgroundColor, 5);
+    }
+    .nr-dashboard-theme .nr-dashboard-template .md-button .ng-scope {
+        color: unset;
+    }
+    .nr-dashboard-template .md-button {
+        color: white;
+    }
+    .nr-dashboard-theme .nr-dashboard-template .md-button:not(:first-of-type) {
+        margin-top: @nrUnitHeight * 3 / 4;
+    }
+    .nr-dashboard-theme .nr-dashboard-template .md-button {
+        background-color: @widgetBackgroundColor;
+    	margin: 0;
+    	// padding: 0px 12px;
+    	min-height: @nrUnitHeight * 3 / 2;
+    	min-width: unset;
+    	line-height: unset;
+    	&.md-fab.md-mini {
+    		padding: unset;
+    	}
+    }
+    .nr-dashboard-theme .nr-dashboard-template .md-button:not([disabled]):hover {
+    	background-color: lighten(@widgetBackgroundColor, 4);
+    }
+    .nr-dashboard-theme .nr-dashboard-template .md-button.md-primary:not([disabled]):hover {
+        background-color: lighten(@widgetBackgroundColor, 4);
+    }
+    .nr-dashboard-theme .nr-dashboard-template .md-button.md-primary.md-raised:not([disabled]) {
+        background-color: lighten(@widgetBackgroundColor, 2);
+    }
+    .nr-dashboard-theme .nr-dashboard-template .md-button.md-primary.md-raised:not([disabled]):hover {
+        background-color: lighten(@widgetBackgroundColor, 4);
+    }
+
+    // .md-button:disabled {
+    //     background-color: @widgetBackgroundColor;
+    // }
+
+    .nr-dashboard-theme .nr-dashboard-template {
+        ::-webkit-scrollbar {
+            height: 12px;
+            width: 12px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background-color: @baseColor;
+            -webkit-border-radius: 1ex;
+            -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
+        }
+        ::-webkit-scrollbar-track {
+            background-color: @pageBackgroundColor;
+        }
+    }
+}
+
+/* Text-Input */
+.nr-dashboard-theme .nr-dashboard-textinput {}
+.nr-dashboard-theme .nr-dashboard-textinput label {
+    color: @widgetTextColor;
+}
+.nr-dashboard-theme .nr-dashboard-textinput md-input-container.md-input-has-value label {
+    color: @widgetTextColor;
+}
+.nr-dashboard-theme .nr-dashboard-textinput md-input-container.md-input-focused label {
+    color: @groupTextColor;
+}
+.nr-dashboard-theme .nr-dashboard-textinput md-input-container.md-input-focused input {
+    border-color: @groupTextColor;
+    font-family: inherit;
+}
+.nr-dashboard-theme .nr-dashboard-textinput md-input-container .md-input:invalid {
+    color: #DA5252;
+}
+.nr-dashboard-theme .nr-dashboard-textinput input {
+    border-color: @widgetTextColor;
+    color: @widgetTextColor;
+    font-family: inherit;
+}
+.nr-dashboard-theme input[type="time"]::-webkit-calendar-picker-indicator {
+    filter: invert(if(@wtc-light, 100%, 0%));
+}
+.nr-dashboard-theme input[type="date"]::-webkit-calendar-picker-indicator {
+    filter: invert(if(@wtc-light, 100%, 0%));
+}
+
+/* Text */
+.nr-dashboard-theme .nr-dashboard-text {}
+
+/* Dialog */
+.nr-dashboard-theme md-dialog {
+    color: @widgetTextColor;
+    background-color: @groupBackgroundColor;
+    border: 3px solid @groupBorderColor;
+}
+.nr-dashboard-theme .md-dialog-content {
+    padding: 24px;
+}
+.nr-dashboard-theme md-input-container.md-default-theme .md-input, md-input-container .md-input {
+    color: @widgetTextColor;
+    border-color: @pageTitlebarBackgroundColor !important;
+}
+
+
+/* Form */
+.nr-dashboard-theme .nr-dashboard-form md-input-container {
+    display: block;
+}
+.nr-dashboard-theme .nr-dashboard-form-button {
+    background-color: @widgetBackgroundColor;
+    color: white;
+}
+.nr-dashboard-theme .nr-dashboard-form-button:hover {
+    background-color: lighten(@widgetBackgroundColor, 10) !important;
+}
+.nr-dashboard-theme .nr-dashboard-form-button:focus {
+    background-color: lighten(@widgetBackgroundColor, 10) !important;
+}
+.nr-dashboard-theme .nr-dashboard-form {
+    color: @widgetTextColor;
+}
+.nr-dashboard-theme .nr-dashboard-form form md-input-container input {
+    border-color: @widgetTextColor;
+    color: @widgetTextColor;
+    font-family: inherit;
+}
+.nr-dashboard-theme .nr-dashboard-form form md-input-container label {
+    color: @widgetTextColor;;
+}
+.nr-dashboard-theme .nr-dashboard-form form md-input-container.md-input-has-value:not(.md-input-invalid) label {
+    color: @widgetTextColor;;
+}
+.nr-dashboard-theme .nr-dashboard-form form md-input-container:not(.md-input-invalid).md-input-focused input {
+    border-color: @groupTextColor ;
+}
+.nr-dashboard-theme .nr-dashboard-form form md-input-container:not(.md-input-invalid).md-input-focused label {
+    color: @groupTextColor ;
+}
+.nr-dashboard-theme .nr-dashboard-form form .md-input-invalid input {
+    border-color: #d00 !important;
+}
+.nr-dashboard-theme md-content .nr-dashboard-form form .md-input-invalid label {
+    color: #d00 !important;
+}
+.nr-dashboard-theme md-content .nr-dashboard-form form md-input-container md-checkbox.md-checked .md-icon {
+    background-color: lighten(@widgetBackgroundColor, 10);
+}
+.nr-dashboard-theme md-content .nr-dashboard-form form md-input-container md-checkbox .md-icon {
+    border-color: @widgetTextColor;
+}
+.nr-dashboard-theme md-content .nr-dashboard-form form md-input-container md-switch .md-bar {
+    background-color: rgba(111, 111, 111, 0.5);
+}
+.nr-dashboard-theme md-content .nr-dashboard-form form md-input-container md-switch .md-thumb {
+    background-color: rgb(148, 148, 148);
+}
+.nr-dashboard-theme md-content .nr-dashboard-form form md-input-container md-switch.md-checked .md-bar {
+    background-color: lighten(@widgetBackgroundColor, 10);
+}
+.nr-dashboard-theme md-content .nr-dashboard-form form md-input-container md-switch.md-checked .md-thumb {
+    background-color: @widgetBackgroundColor;
+}
+.nr-dashboard-theme md-content .nr-dashboard-form form md-datepicker {
+    background-color: inherit;
+}
+.nr-dashboard-theme md-content .nr-dashboard-form form .md-datepicker-calendar-icon {
+    fill: @groupTextColor;
+}
+.nr-dashboard-theme md-content .nr-dashboard-form form .md-datepicker-open .md-datepicker-calendar-icon {
+    fill: @widgetBackgroundColor ;
+}
+.nr-dashboard-theme md-content .nr-dashboard-form form .md-datepicker-input {
+    color: @widgetTextColor;
+}
+.nr-dashboard-theme md-content .nr-dashboard-form form .md-datepicker-input-container {
+    border-color: @widgetTextColor;;
+}
+.nr-dashboard-theme md-content .nr-dashboard-form form .md-datepicker-expand-triangle{
+    border-top-color: @widgetBackgroundColor ;
+}
+.nr-dashboard-theme md-content .nr-dashboard-form form md-input-container .md-input {
+    color: @widgetTextColor;
+}
+
+}

node_modules/node-red-dashboard/dist/dashboard.appcache

@@ -0,0 +1,29 @@
+CACHE MANIFEST
+# Time: Thu Aug 07 2025 18:59:57 GMT+0100 (British Summer Time)
+
+CACHE:
+i18n.js
+icon120x120.png
+icon192x192.png
+icon64x64.png
+css/app.min.css
+css/app.min.less
+css/gridstack-extra.min.css
+js/app.min.js
+js/tinycolor-min.js
+socket.io/socket.io.js
+fonts/MaterialIcons-Regular.woff
+fonts/MaterialIcons-Regular.woff2
+fonts/fontawesome-webfont.woff
+fonts/fontawesome-webfont.woff2
+fonts/weather-icons-lite.woff
+fonts/weather-icons-lite.woff2
+gs/gridstack.jQueryUI.min.js
+gs/gridstack.min.css
+gs/gridstack.min.js
+loading.html
+
+NETWORK:
+*
+
+# hash: eda70ca2b4f842bf646ceeb31d3a966fcd26dce400c46ba3b295b7a013a3c719

node_modules/node-red-dashboard/dist/i18n.js

@@ -0,0 +1,4 @@
+// Placeholder only - This is NOT a sustainable solution to i18n localisation
+// Replace/overwrite this file with an angular-locale_... file of your choice from the npm angular-i18n project
+// Then edit dashboard.appcache - (for example add a digit to the hash)
+// Stop, start Node-RED and refresh the browser page twice to flush the cache.

node_modules/node-red-dashboard/dist/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html> <!--
+  Copyright 2016,2019 JS Foundation and other contributors, https://js.foundation/
+  Copyright 2016 IBM Corp.
+  Copyright 2015 Andrei Tatar
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+  https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+--> <!--  <html> --> <html> <!-- manifest="dashboard.appcache"> --> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-title" content="Node-RED"> <meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#097479"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="manifest" href="manifest.json" crossorigin="use-credentials"> <link rel="icon" sizes="192x192" href="icon192x192.png"> <link rel="shortcut icon" type="image/png" href="icon64x64.png"> <link rel="apple-touch-icon" href="icon120x120.png"> <link rel="stylesheet" href="css/app.min.css"> <link rel="stylesheet/less" href="css/app.min.less"> <title></title> </head> <body id="nr-dashboard" ng-app="ui" ng-controller="MainController as main" ng-cloak layout="column" style="background: {{main.backgroundColor}}" class="nr-dashboard-theme" ng-swipe-right="onSwipeRight();" ng-swipe-left="onSwipeLeft();" ng-attr-ng-swipe-disable-mouse="{{main.allowSwipe !== 'mouse' ? '' : undefined}}"> <md-content ng-if="main.loaded" ng-include="'partials/main.html'" layout="column" flex></md-content> <div ng-if="!main.loaded && !main.nothing" ng-include="'loading.html'" class="node-red-ui--loading"></div> <div ng-if="main.nothing" class="node-red-ui--notabs"> <table><tr><td><center><img src="icon120x120.png"></center></td></tr> <tr><td><center><h2>Welcome to the Node-RED Dashboard</h2></center></td></tr> <tr><td><center>Please add some UI nodes to your flow and redeploy.</center></td></tr></table> </div> <script src="socket.io/socket.io.js"></script> <script src="js/app.min.js"></script> <script src="i18n.js"></script> </body> </html> 

node_modules/node-red-dashboard/fixfa.js

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+// Patch to fix Font-Awesome urls for loading font
+// and to add in fa-sm(all) and fa-xs(extra small) modifiers
+var fs = require("fs");
+fs.readFile("node_modules/font-awesome/css/font-awesome.css", 'utf8', function (err, file) {
+    if (err) { return; }
+    else {
+        console.log("Fixing up Font-Awesome css");
+        var res1 = file.replace(/\?v=4\.7\../g, '');
+        var res2 = res1.replace(/\&v=4\.7\../g, '');
+        var res3;
+        if (res2.indexOf("fa-sm ") === -1) {
+            res3 = res2.replace(/fa-lg/, 'fa-sm {font-size:0.875em;}\n.fa-xs {font-size:0.75em;}\n.fa-lg');
+        }
+        else { res3 = res2; }
+        fs.writeFile("node_modules/font-awesome/css/font-awesome.css", res3, 'utf8', function (err) {
+            if (err) { console.log("Failed to re-write file."); }
+            else {
+                console.log("Fixed  up Font-Awesome css");
+            }
+        });
+    }
+});
+
+// Google-Material-Font
+// Fix relative path of fonts from `./fonts/` to `../fonts/` in css file.
+fs.readFile('node_modules/material-design-icons-iconfont/dist/material-design-icons.css', 'utf8', function (err, file) {
+    if (err) { return; }
+    else {
+        console.log('Fixing up Google-Material-Font css');
+        const res1 = file
+            .replace(/"\.\/fonts\//g, '"../fonts/')
+            .replace(/'\.\/fonts\//g, '\'../fonts/');
+        fs.writeFile('node_modules/material-design-icons-iconfont/dist/material-design-icons.css', res1, 'utf8', function (err) {
+            if (err) {
+                console.log('Failed to re-write file.');
+            } else {
+                console.log('Fixed  up Google-Material-Font css');
+            }
+        });
+    }
+});
+
+// GridStack layout css patches for sass
+fs.readFile('src/gridstack-extra.scss', 'utf8', function (err, file) {
+    if (err) { return; }
+    else {
+        console.log('Fixing up GridStack scss');
+        const res1 = file
+            .replace(/ \(100% \/ \$columns\)/g, ' calc(100% \/ \$columns)')
+        fs.writeFile('src/gridstack-extra.scss', res1, 'utf8', function (err) {
+            if (err) {
+                console.log('Failed to re-write file.');
+            } else {
+                console.log('Fixed  up GridStack scss');
+            }
+        });
+    }
+});

node_modules/node-red-dashboard/fixgrid.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+var fs = require("fs");
+
+// Remove jquery old versions from gridstack dist
+try { fs.rmSync('../gridstack/dist/jquery-ui.js'); }
+catch(e) { console.log("unable to delete jquery-ui.js") };
+try { fs.rmSync('../gridstack/dist/jquery-ui.min.js');}
+catch(e) { console.log("unable to delete jquery-ui.min.js") };
+try { fs.rmSync('../gridstack/dist/jquery.js'); }
+catch(e) { console.log("unable to delete jquery.js") };
+try { fs.rmSync('../gridstack/dist/jquery.min.js'); }
+catch(e) { console.log("unable to delete jquery.min.js") };

node_modules/node-red-dashboard/gulpfile.old

@@ -0,0 +1,161 @@
+
+var
+    gulp = require('gulp'),
+    concat = require('gulp-concat'),
+    eol = require('gulp-eol'),
+    exec = require('child_process').exec,
+    fs = require('fs'),
+    ghtmlSrc = require('gulp-html-src'),
+    gulpif = require('gulp-if'),
+    gutil = require('gulp-util'),
+    header = require("gulp-header"),
+    htmlreplace = require('gulp-html-replace'),
+    jscs = require('gulp-jscs'),
+    jshint = require('gulp-jshint'),
+    manifest = require('gulp-manifest'),
+    minifyCss = require('gulp-clean-css'),
+    minifyHTML = require('gulp-htmlmin'),
+    path = require('path'),
+    replace = require('gulp-replace'),
+    streamqueue = require('streamqueue'),
+    templateCache = require('gulp-angular-templatecache'),
+    uglify = require('gulp-uglify'),
+    sass = require('gulp-sass'),
+    rename = require('gulp-rename');
+
+//gulp.task('default', ['manifest']);
+gulp.task('default', ['lint','jscs'], function() {
+    gulp.start('manifest');
+    //gulp.start('build');
+});
+
+gulp.task('build', ['icon', 'js', 'css', 'less', 'index', 'fonts', 'gridstack']);
+
+gulp.task('manifest', ['build'], function() {
+    gulp.src(['dist/*','dist/css/*','dist/js/*','dist/fonts/*'], { base: 'dist/' })
+    .pipe(manifest({
+        hash: true,
+        //preferOnline: true,
+        network: ['*'],
+        filename: 'dashboard.appcache',
+        // exclude: 'dashboard.appcache'
+        exclude: ['dashboard.appcache','index.html']
+    }))
+    .pipe(replace('tinycolor-min.js', 'tinycolor-min.js\nsocket.io/socket.io.js'))
+    .pipe(eol('\n'))
+    .pipe(gulp.dest('dist/'));
+});
+
+gulp.task('lint', function() {
+    return gulp.src('**/*.js')
+    .pipe(jshint('.jshintrc'))
+    .pipe(jshint.reporter('default'))
+    .pipe(jshint.reporter('fail'));
+});
+
+gulp.task('jscs', function() {
+    return gulp.src(['*.js','nodes/*.js','src/*.js','src/*/*.js','src/*/*/*.js'])
+        .pipe(jscs())
+        //.pipe(jscs({fix: true}))
+        .pipe(jscs.reporter("inline"))
+});
+
+gulp.task('index', function() {
+    return gulp.src('src/index.html')
+    .pipe(htmlreplace({
+        'css': 'css/app.min.css',
+        'js': 'js/app.min.js',
+        'less': '<link rel="stylesheet/less" href="css/app.min.less" />'
+    }))
+    .pipe(minifyHTML({collapseWhitespace:true, conservativeCollapse:true}))
+    .pipe(eol('\n'))
+    .pipe(gulp.dest('dist/'));
+});
+
+gulp.task('icon', function() {
+    // gulp.src('src/wheel.png').pipe(gulp.dest('dist/css/'));
+    gulp.src('src/icon192x192.png').pipe(gulp.dest('dist/'));
+    gulp.src('src/icon120x120.png').pipe(gulp.dest('dist/'));
+    return gulp.src('src/icon64x64.png').pipe(gulp.dest('dist/'));
+});
+
+gulp.task('fonts', function() {
+    //return gulp.src('node_modules/font-awesome/fonts/*').pipe(gulp.dest('dist/fonts/'));
+    gulp.src('node_modules/font-awesome/fonts/fontawesome-webfont.woff').pipe(gulp.dest('dist/fonts/'));
+    gulp.src('node_modules/weather-icons-lite/fonts/weather-icons-lite.woff').pipe(gulp.dest('dist/fonts/'));
+    gulp.src('node_modules/font-awesome/fonts/fontawesome-webfont.woff2').pipe(gulp.dest('dist/fonts/'));
+    gulp.src('node_modules/weather-icons-lite/fonts/weather-icons-lite.woff2').pipe(gulp.dest('dist/fonts/'));
+    return;
+});
+
+gulp.task('js', function () {
+    var scripts = gulp.src('src/index.html')
+    .pipe(ghtmlSrc({getFileName:getFileName.bind(this, 'src')}));
+
+    var templates = gulp.src(['src/**/*.html', '!src/index.html'])
+    .pipe(minifyHTML({collapseWhitespace:true, conservativeCollapse:true}))
+    .pipe(templateCache('templates.js', {root:'', module:'ui'}));
+
+    var tiny = gulp.src('node_modules/tinycolor2/dist/tinycolor-min.js')
+    .pipe(eol('\n'))
+    .pipe(gulp.dest('./dist/js'));
+
+    var i18n = gulp.src('src/i18n.js')
+    .pipe(eol('\n'))
+    .pipe(gulp.dest('dist/'));
+
+    return streamqueue({ objectMode:true }, scripts, templates)
+    .pipe(gulpif(/[.]min[.]js$/, gutil.noop(), uglify()))
+    .pipe(concat('app.min.js'))
+    .pipe(header(fs.readFileSync('license.js')))
+    .pipe(eol('\n'))
+    .pipe(gulp.dest('dist/js/'));
+});
+
+gulp.task('css', function () {
+    exec('node fixfa.js', function (err, stdout, stderr) {
+        if (err) {
+            console.log(stdout);
+            console.log(stderr);
+        }
+    });
+
+    return gulp.src('src/index.html')
+    .pipe(ghtmlSrc({getFileName:getFileName.bind(this, 'href'), presets:'css'}))
+    .pipe(minifyCss({compatibility:'ie8'}))
+    .pipe(concat('app.min.css'))
+    .pipe(header(fs.readFileSync('license.js')))
+    .pipe(eol('\n'))
+    .pipe(gulp.dest('dist/css/'));
+});
+
+gulp.task('less', function() {
+    return gulp.src(['src/*.less'])
+    .pipe(concat('app.min.less'))
+    .pipe(header(fs.readFileSync('license.js')))
+    .pipe(eol('\n'))
+    .pipe(gulp.dest('./dist/css'));
+});
+
+gulp.task('gridstack', function() {
+    gulp.src('node_modules/gridstack/dist/gridstack.min.css').pipe(gulp.dest('dist/css/'));
+    gulp.src('node_modules/gridstack/dist/gridstack.jQueryUI.min.js').pipe(gulp.dest('dist/js/'));
+    gulp.src('node_modules/gridstack/dist/gridstack.min.js').pipe(gulp.dest('dist/js/'));
+    gulp.src('node_modules/gridstack/dist/gridstack.min.map').pipe(gulp.dest('dist/js/'));
+    gulp.src('node_modules/lodash/lodash.min.js').pipe(gulp.dest('dist/js/'));
+    gulp.src('node_modules/gridstack/src/gridstack-extra.scss')
+    .pipe(replace('$gridstack-columns: 12 !default;','$gridstack-columns: 30;'))
+    .pipe(sass({outputStyle: 'compressed'}))
+    .pipe(rename({extname: '.min.css'}))
+    .pipe(gulp.dest('dist/css'))
+    return;
+});
+
+var vendorPrefix = "vendor/";
+function getFileName(attr, node) {
+    var file = node.attr(attr);
+    if (file.indexOf(vendorPrefix) === 0) {
+        file = path.join("..", "node_modules", file.substr(vendorPrefix.length));
+    }
+    return file;
+}

node_modules/node-red-dashboard/index.js

@@ -0,0 +1,143 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+var ui = null;
+
+function init(RED) {
+    if (!ui) {
+        ui = require("./ui")(RED);
+    }
+}
+
+/* addWidget:
+   - options
+     - RED: RED object
+     - options: options to create dashboard widget
+       * [node] - the node that represents the control on a flow
+       * format - HTML code of widget
+       * [group] - group name (optional if templateScope = 'global')
+       * [width] - width of widget (default automatic)
+       * [height] - height of widget (default automatic)
+       * [order] - property to hold the placement order of the widget (default 0)
+       * [templateScope] - scope of widget/global or local (default local)
+       * [emitOnlyNewValues] - boolean (default true).
+             If true, it checks if the payload changed before sending it
+             to the front-end. If the payload is the same no message is sent.
+       * [forwardInputMessages] - boolean (default true).
+             If true, forwards input messages to the output
+       * [storeFrontEndInputAsState] - boolean (default true).
+             If true, any message received from front-end is stored as state
+        [persistantFrontEndValue] - boolean (default true).
+             If true, last received message is send again when front end reconnect.
+       * [convert] - callback to convert the value before sending it to the front-end
+       * [beforeEmit] - callback to prepare the message that is emitted to the front-end
+       * [convertBack] - callback to convert the message from front-end before sending it to the next connected node
+       * [beforeSend] - callback to prepare the message that is sent to the output
+       * [initController] - callback to initialize in controller
+*/
+
+function addWidget(RED, options) {
+    var is_local = (options.templateScope !== "global");
+    var group = null;
+    var tab = null;
+    init(RED);
+
+    var ui_control = {
+        type: "template",
+        order: options.order,
+        format: options.format,
+        class: "nr-dashboard-"+(options.node.type || "template-blank")
+    };
+
+    var node = options.node;
+
+    if (isNaN(options.order)) {
+        node.warn("*** Order property not set. Please contact developer. ***");
+    }
+
+    if (is_local) {
+        group = RED.nodes.getNode(options.group);
+        if (group === null) { return; }
+        tab = RED.nodes.getNode(group.config.tab);
+        ui_control.width = options.hasOwnProperty("width") ? options.width : group.config.width;
+        ui_control.height = options.hasOwnProperty("height") ? options.height : 0;
+    }
+    else {
+        node = {
+            id: "-dummy-",
+            on: function() {}
+        };
+    }
+    ui_control.templateScope = options.hasOwnProperty("templateScope") ? options.templateScope : "local";
+    var ui_options = {
+        node: node,
+        control: ui_control
+    }
+    if (is_local) {
+        ui_options.group = group;
+        ui_options.tab = tab;
+    }
+    if (options.hasOwnProperty("emitOnlyNewValues")) {
+        ui_options.emitOnlyNewValues = options.emitOnlyNewValues;
+    }
+    if (options.hasOwnProperty("forwardInputMessages")) {
+        ui_options.forwardInputMessages = options.forwardInputMessages;
+    }
+    if (options.hasOwnProperty("storeFrontEndInputAsState")) {
+        ui_options.storeFrontEndInputAsState = options.storeFrontEndInputAsState;
+    }
+    if (options.hasOwnProperty("persistantFrontEndValue")) {
+        ui_options.persistantFrontEndValue = options.persistantFrontEndValue;
+    }
+    if (options.hasOwnProperty("convert")) {
+        ui_options.convert = options.convert;
+    }
+    if (options.hasOwnProperty("beforeEmit")) {
+        ui_options.beforeEmit = options.beforeEmit;
+    }
+    if (options.hasOwnProperty("convertBack")) {
+        ui_options.convertBack = options.convertBack;
+    }
+    if (options.hasOwnProperty("beforeSend")) {
+        ui_options.beforeSend = options.beforeSend;
+    }
+    if (options.hasOwnProperty("initController")) {
+        ui_control.initController = options.initController.toString();
+    }
+    return ui.add(ui_options);
+}
+
+/* getSizes:
+    returns the grid size in pixels
+    default - { sx: 48, sy: 48, gx: 6, gy: 6, cx: 6, cy: 6, px: 0, py: 0 }
+*/
+
+/* getTheme:
+    returns the current theme object
+*/
+
+/* isDark:
+    returns true or false if the dahsboard theme background is dark or light.
+*/
+
+module.exports = function (RED) {
+    return {
+        addWidget: function (options) { return addWidget(RED, options); },
+        getSizes: function() { return require("./ui")(RED).getSizes(); },
+        getTheme: function() { return require("./ui")(RED).getTheme(); },
+        isDark: function() { return require("./ui")(RED).isDark(); }
+    };
+};

node_modules/node-red-dashboard/license.js

@@ -0,0 +1,17 @@
+/* */
+/* Copyright 2016,2020 JS Foundation and other contributors, https://js.foundation/ */
+/* Copyright 2016 IBM Corp.                                                 */
+/* Copyright 2015 Andrei Tatar                                              */
+/* */
+/* Licensed under the Apache License, Version 2.0 (the "License");          */
+/* you may not use this file except in compliance with the License.         */
+/* You may obtain a copy of the License at                                  */
+/* */
+/* http://www.apache.org/licenses/LICENSE-2.0                               */
+/* */
+/* Unless required by applicable law or agreed to in writing, software      */
+/* distributed under the License is distributed on an "AS IS" BASIS,        */
+/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. */
+/* See the License for the specific language governing permissions and      */
+/* limitations under the License. */
+/* */

node_modules/node-red-dashboard/nodes/locales/de/ui_base.json

@@ -0,0 +1,100 @@
+{
+    "ui_base": {
+        "label": {
+            "dashboard": "Dashboard",
+            "category": "Dashboard",
+            "title": "Titel",
+            "options": "Optionen",
+            "date-format": "Datumsformat",
+            "sizes": "Größen",
+            "horizontal": "Horizontal",
+            "vertical": "Vertikal",
+            "widget-size": "1x1 Widget-Größe",
+            "widget-spacing": "Widget-Abstände",
+            "group-padding": "Gruppenabstände innen",
+            "group-spacing": "Gruppenabstände außen",
+            "layout": "Layout",
+            "angular": "Angular",
+            "theme": "Theme",
+            "site": "Site"
+        },
+        "auto": "Auto",
+        "title": "Node-RED Dashboard",
+        "layout": {
+            "tab-and-link": "Tabs & Links",
+            "tab": "Tab",
+            "link": "Link",
+            "group": "Gruppe",
+            "edit": "Bearbeiten",
+            "spacer": "Abstand",
+            "layout": "Layout",
+            "layout-editor": "Dashboard Layout-Editor",
+            "width": "Breite",
+            "auto": "Automatische Größenanpassung",
+            "manual": "Manuelle Größenanpassung"
+        },
+        "theme": {
+            "style": "Stil",
+            "custom-profile": "Benutzerdefiniertes Profil",
+            "custom-profile-name": "Erscheinungsbild ohne Titel 1",
+            "base-settings": "Basiseinstellungen",
+            "page-settings": "Seiteneinstellungen",
+            "page": {
+                "title": "Hintergrund Titelleiste",
+                "page": "Hintergrund Seite",
+                "side": "Hintergrund Seitenleiste"
+            },
+            "group-settings": "Gruppeneinstellungen",
+            "group": {
+                "text": "Gruppentext",
+                "border": "Gruppenrand",
+                "background": "Gruppenhintergrund"
+            },
+            "widget-settings": "Widget-Einstellungen",
+            "widget": {
+                "text": "Widget-Text",
+                "colour": "Widget-Farbe",
+                "background": "Widget-Hintergrund"
+            }
+        },
+        "style": {
+            "light": "Hell (Standard)",
+            "dark": "Dunkel",
+            "custom": "Benutzerdefiniert",
+            "primary": "Primär",
+            "accents": "Akzente",
+            "background": "Hintergrund",
+            "warnings": "Warnungen",
+            "palette": "Hell / Dunkel"
+        },
+        "base": {
+            "colour": "Farbe",
+            "font": "Schriftart"
+        },
+        "font": {
+            "system": "System-Schriftart (Standard)"
+        },
+        "site": {
+            "title": "Node-RED Dashboard",
+            "date-format": "DD.MM.YYYY"
+        },
+        "title-bar": {
+            "show": "Titelleiste anzeigen",
+            "hide": "Titelleiste verbergen"
+        },
+        "swipe": {
+            "no-swipe": "Kein Wischen zwischen Tabs",
+            "allow-swipe": "Wischen zwischen Tabs zulassen"
+        },
+        "lock": {
+            "clicked": "Klicken, um das Seitenmenü anzuzeigen",
+            "locked": "Seitenmenü immer anzeigen",
+            "locked-icon": "Nur Icons anzeigen"
+        },
+        "temp": {
+            "allow-theme": "Node-RED-Erscheinungsbild",
+            "no-theme": "Angular-Erscheinungsbild in ui_template",
+            "none": "Angular-Erscheinungsbild"
+        }
+    }
+}

node_modules/node-red-dashboard/nodes/locales/de/ui_button.json

@@ -0,0 +1,24 @@
+{
+  "ui_button": {
+    "label": {
+      "group": "Gruppe",
+      "size": "Größe",
+      "icon": "Icon",
+      "optionalIcon": "Optionales Icon",
+      "label": "Beschriftung",
+      "optionalLabel": "Optionale Beschriftung",
+      "tooltip": "Tooltipp",
+      "optionalTooltip": "Optionaler Tooltipp",
+      "color": "Farbe",
+      "optionalColor": "Optionale Text/Icon-Farbe",
+      "background": "Hintergrund",
+      "optionalBackgroundColor": "Optionale Hintergrundfarbe",
+      "whenClicked": "Sende beim Klicken:",
+      "payload": "Payload",
+      "topic": "Topic",
+      "emulateClick": "Emuliere einen Klick bei einer eingehenden Nachricht:",
+      "className": "Klasse",
+      "classNamePlaceholder": "Optionale(r) CSS-Klassenname(n) für das Widget"
+    }
+  }
+}

node_modules/node-red-dashboard/nodes/locales/de/ui_chart.html

@@ -0,0 +1,25 @@
+<script type="text/html" data-help-name="ui_chart">
+  <p>Zeichnet Eingangswerte in ein Diagramm, welches entweder ein zeitbasiertes Liniendiagramm,
+    ein Balkendiagramm (vertikal oder horizontal) oder ein Kreisdiagramm sein kann.</p>
+  <p>Jede eingehende <code>msg.payload</code>-Nachricht wird in einen Zahlenwert konvertiert.
+    Wenn die Konvertierung fehlschlägt, wird die Nachricht ignoriert.</p>
+  <p>Die Minimum- und Maximum-Werte für die <b>Y-Achse</b> sind optional.
+    Ohne diese wird das Diagramm automatisch anhand aller empfangenen Werte skaliert.</p>
+  <p>Mehrere Serien können im gleichen Diagramm angezeigt werden,
+    indem für jede Eingangsnachricht andere <code>msg.topic</code>-Werte verwendet werden.
+    Mit der Eigenschaft <code>msg.label</code> können mehrere Balken der selben Serie angezeigt werden.</p>
+  <p>Der Wertebereich der <b>X-Achse</b> wird durch ein Zeitfenster oder eine maximale Anzahl anzuzeigender Punkte vorgegeben.
+    Ältere Daten werden automatisch aus dem Diagramm entfernt.
+    Die Achsenbeschriftung kann mittels einer <a href="https://momentjs.com/docs/#/displaying/format/" target="_blank">
+    Moment.js-zeitformatierten</a> Zeichenfolge benutzerdefiniert werden (z.B. D.M.Y für 21.3.2021).</p>
+  <p>Wird eine <code>msg.payload</code>-Nachricht mit einem leeren Array <code>[]</code> an den Eingang gesendet,
+    so wird das Diagramm gelöscht.</p>
+  <p><b><a href="https://github.com/node-red/node-red-dashboard/blob/master/Charts.md" target="_new">Hier</a></b>
+    sind weitere Informationen zum Vorformatieren von Daten verfügbar, um sie als vollständiges Diagramm zu übergeben.</p>
+  <p>Das <b>Leer-Text</b>-Feld kann verwendet werden, um den Text im Diagramm anzuzeigen, bevor gültige Daten empfangen wurden.
+  <p>Der <b>Beschriftung</b> kann auch durch eine Nachrichteneigenschaft festgelegt werden.
+    Dazu muss der Name der Eigenschaft in das Feld eingetragen werden, zum Beispiel <code>{{msg.topic}}</code>.</p>
+  <p>Der Node-Ausgang enthält ein Array des Diagrammstatus, das bei Bedarf gespeichert werden kann.
+    Wird dieses zum <code>ui_chart</code>-Node gesendet, so werden die gespeicherten Daten erneut angezeigt.</p>
+  <p>Wenn eine <b>Klasse</b> angegeben ist, wird sie der übergeordneten Karte hinzugefügt. Auf diese Weise können Sie CSS-Stile auf die ui-card und ihre untergeordneten Elemente anwenden. Die Klasse kann zur Laufzeit festgelegt werden, indem eine Zeichenfolgeneigenschaft <code>msg.className</code> festgelegt wird.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/de/ui_chart.json

@@ -0,0 +1,56 @@
+{
+  "ui_chart": {
+    "label": {
+      "group": "Gruppe",
+      "size": "Größe",
+      "label": "Beschriftung",
+      "optionalChartTitle": "Optionaler Diagrammtitel",
+      "type": "Typ",
+      "lineChart": "  Liniendiagramm",
+      "barChart": "  Balkendiagramm",
+      "barChartH": "  Balkendiagramm (H)",
+      "pieChart": "  Kreisdiagramm",
+      "polarAreaChart": "  Polargebietskarte",
+      "radarChart": "  Radarkarte",
+      "enlargePoints": "Punkte vergrößern",
+      "xAxis": "X-Achse",
+      "last": "Letzten",
+      "seconds": "Sekunden",
+      "minutes": "Minuten",
+      "hours": "Stunden",
+      "days": "Tage",
+      "weeks": "Wochen",
+      "or": "oder",
+      "points": "Punkte",
+      "xAxisLabel": "X-Beschriftung",
+      "HHmmss": "HH:mm:ss",
+      "HHmm": "HH:mm",
+      "yearMonthDate": "Jahr-Monat-Tag",
+      "dateMonth": "Tag/Monat",
+      "dayHHmm": "Wochentag HH:mm",
+      "custom": "benutzerdefiniert",
+      "automatic": "automatisch",
+      "asUTC": "als UTC",
+      "yAxis": "Y-Achse",
+      "min": "min",
+      "max": "max",
+      "legend": "Legende",
+      "none": "Keine",
+      "show": "Anzeigen",
+      "interpolate": "Interpolation",
+      "linear": "Linear",
+      "step": "Stufen",
+      "bezier": "Bezier",
+      "cubic": "Kubisch",
+      "cubicMono": "Kubisch-Mono",
+      "cutout": "Ausschnitt",
+      "useFirstColourForAllBars": "Erste Farbe für alle Balken verwenden",
+      "seriesColours": "Serienfarben",
+      "blankLabel": "Leer-Text",
+      "displayThisTextBeforeValidDataArrives": "Anzuzeigender Text bevor gültige Daten eintreffen",
+      "useDifferentColor": "Unterschiedliche Farben für Datenserie verwenden",
+      "className": "Klasse",
+      "classNamePlaceholder": "Optionale(r) CSS-Klassenname(n) für das Widget"
+    }
+  }
+}

node_modules/node-red-dashboard/nodes/locales/de/ui_form.html

@@ -0,0 +1,18 @@
+<script type="text/html" data-help-name="ui_form">
+  <p>Fügt dem Dashboard ein Eingabeformular hinzu.</p>
+  <p>Der <code>ui_form</code>-Node ermöglicht die Eingabe mehrerer Werte durch den Benutzer.
+    Beim Klicken auf die Schaltfläche <b>Senden</b> wird ein Objekt als <code>msg.payload</code> versendet.</p>
+  <p>Über die Schaltfläche <b>+Element</b> können Eingabeelemente hinzugefügt werden.</p>
+  <p>Jedes Element enthält folgende Einstellmöglichkeiten:</p>
+  <ul>
+    <li><b>Beschriftung:</b> Beschriftung des Elements in der Benutzeroberfläche</li>
+    <li><b>Name:</b> Schlüssel (Variablennamen), mit dem der Eingabewert in <code>msg.payload</code> abgelegt wird</li>
+    <li><b>Typ:</b> Typ des Eingabeelements</li>
+    <li><b>Erforderlich:</b> Markierund des Eingabefeldes als erfolderliche Benutzereingabe</li>
+    <li><b>Zeilen:</b> Zeilenanzahl bei mehrzeiligen Texteingabefeldern</li>
+    <li><b>Entfernen:</b> Entfernung des Elements aus dem Formular</li>
+  </ul>
+  <p>Über <b>Topic</b> kann die Eigenschaft <code>msg.topic</code> optional festgelegt werden.</p>
+  <p>Die Schaltfläche <b>Abbrechen</b> kann ausgeblendet werden, indem sein Feld leer gelassen wird.</p>
+  <p>Wenn eine <b>Klasse</b> angegeben ist, wird sie der übergeordneten Karte hinzugefügt. Auf diese Weise können Sie CSS-Stile auf die ui-card und ihre untergeordneten Elemente anwenden. Die Klasse kann zur Laufzeit festgelegt werden, indem eine Zeichenfolgeneigenschaft <code>msg.className</code> festgelegt wird.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/de/ui_form.json

@@ -0,0 +1,35 @@
+{
+  "ui_form": {
+    "label": {
+      "group": "Gruppe",
+      "size": "Größe",
+      "label": "Beschriftung",
+      "optionalLabel": "Optionale Beschriftung",
+      "formElements": "Formular- elemente",
+      "type": "Typ",
+      "required": "Erforderlich",
+      "rows": "UiZeilen",
+      "remove": "Entfernen",
+      "egName": "z.B. Name",
+      "egName2": "z.B. Name",
+      "text": "Text",
+      "multiline": "Mehrzeilig",
+      "number": "Zahl",
+      "email": "E-Mail",
+      "password": "Kennwort",
+      "checkbox": "Auswahlkästchen",
+      "switch": "Schalter",
+      "date": "Datum",
+      "time": "Zeit",
+      "element": "Element",
+      "buttons": "Schaltflächen",
+      "submitButtonText": "Text Absenden-Schaltfläche",
+      "cancelButtonText": "Text Abbrechen-Schaltfläche",
+      "topic": "Topic",
+      "optionalMsgTopic": "Optionaler msg.topic",
+      "splitLayout": "Platzieren sie die formularelemente in 2 spalten",
+      "className": "Klasse",
+      "classNamePlaceholder": "Optionale(r) CSS-Klassenname(n) für das Widget"
+    }
+  }
+}

node_modules/node-red-dashboard/nodes/locales/de/ui_group.json

@@ -0,0 +1,16 @@
+{
+    "ui_group": {
+        "label": {
+            "name": "Name",
+            "tab": "Tab",
+            "width": "Breite",
+            "default": "Standard",
+            "group": "Gruppe",
+            "unassigned": "nicht zugewiesen",
+            "className": "Klasse",
+      "classNamePlaceholder": "Optionale(r) CSS-Klassenname(n) für das Widget"
+        },
+        "display-name": "Gruppenname anzeigen",
+        "collapse-name": "Gruppenreduzierung zulassen"
+    }
+}

node_modules/node-red-dashboard/nodes/locales/de/ui_link.json

@@ -0,0 +1,16 @@
+{
+    "ui_link": {
+        "label": {
+            "name": "Name",
+            "link": "Link",
+            "icon": "Icon",
+            "open-in": "Öffnen im",
+            "new-tab": "neuen Tab",
+            "this-tab": "selben Tab",
+            "iframe": "iframe",
+            "className": "Klasse",
+      "classNamePlaceholder": "Optionale(r) CSS-Klassenname(n) für das Widget"
+        },
+    "tip": "Das <b>Icon</b> kann entweder ein <a href=\"https://klarsys.github.io/angular-material-icons/\" target=\"_blank\">Material-Design-Icon</a> (z.B. <code>check</code> oder <code>close</code>), ein <a href=\"https://fontawesome.com/v4.7.0/icons/\" target=\"_blank\">Font-Awesome-Icon</a> (z.B. <code>fa-fire</code>) oder ein <a href=\"https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md\" target=\"_blank\">Wetter-Icon</a> (z.B. <code>wi-wu-sunny</code>) sein.</p><p>Des Weiteren können alle Google-Material-Icons verwendet werden, indem dem Icon-Namen <code>mi-</code> vorangestellt wird (z.B. <code>mi-videogame_asset</code>).</p>"
+    }
+}

node_modules/node-red-dashboard/nodes/locales/de/ui_tab.json

@@ -0,0 +1,21 @@
+{
+    "ui_tab": {
+        "label": {
+            "home": "Home",
+            "tab": "Tab",
+            "name": "Name",
+            "icon": "Icon",
+            "state": "Status",
+            "navmenu": "Nav. Menü",
+            "enabled": "Aktiviert",
+            "disabled": "Deaktivert",
+            "visible": "Sichtbar",
+            "hidden": "Versteckt"
+        },
+        "info": {
+            "disabled": " Tab im Dashboard deaktiviert.",
+            "hidden": " Tab im Nav.-Menü versteckt."
+        },
+    "tip": "Das <b>Icon</b> kann entweder ein <a href=\"https://klarsys.github.io/angular-material-icons/\" target=\"_blank\">Material-Design-Icon</a> (z.B. <code>check</code> oder <code>close</code>), ein <a href=\"https://fontawesome.com/v4.7.0/icons/\" target=\"_blank\">Font-Awesome-Icon</a> (z.B. <code>fa-fire</code>) oder ein <a href=\"https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md\" target=\"_blank\">Wetter-Icon</a> (z.B. <code>wi-wu-sunny</code>) sein.</p><p>Des Weiteren können alle Google-Material-Icons verwendet werden, indem dem Icon-Namen <code>mi-</code> vorangestellt wird (z.B. <code>mi-videogame_asset</code>).</p>"
+    }
+}

node_modules/node-red-dashboard/nodes/locales/de/ui_template.html

@@ -0,0 +1,48 @@
+<script type="text/html" data-help-name="ui_template">
+  <p>Das template-Widget kann alle gültigen HTML- und Angular/Angular-Material-Anweisungen enthalten.</p>
+  <p>Dieser Node kann verwendet werden, um ein dynamisches Benutzeroberflächenelement zu erstellen, dessen Erscheinungsbild
+    basierend auf der Eingangsnachricht geändert wird, und kann Nachrichten an Node-RED zurücksenden.</p>
+  <p><b>Zum Beispiel:</b><br>
+    <pre style="font-size:smaller;">
+&lt;div layout=&quot;row&quot; layout-align=&quot;space-between&quot;&gt;
+  &lt;p&gt;The number is&lt;/p&gt;
+  &lt;font color=&quot;{{((msg.payload || 0) % 2 === 0) ? 'green' : 'red'}}&quot;&gt;
+    {{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}}
+  &lt;/font&gt;
+&lt;/div&gt;</pre>
+    Wird angezeigt, wenn die als <code>msg.payload</code> empfangene Zahl gerade oder ungerade ist.
+    Es wird auch die Farbe des Textes zu grün geändert, wenn die Zahl gerade ist, oder rot, wenn ungerade.</p>
+  <p>Das nächste Beispiel zeigt, wie eine eindeutige ID für Ihre Vorlage erstellt werden kann,
+    die Standardfarbe fürs Erscheinungsbild ausgewählt wird und wie auf eingehende Nachrichten geprüft werden kann.
+    <pre style="font-size:smaller;">
+&lt;div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}"&gt;Some text&lt;/div&gt;
+&lt;script&gt;
+(function(scope) {
+  scope.$watch('msg', function(msg) {
+    if (msg) {
+      // Do something when msg arrives
+      $("#my_"+scope.$id).html(msg.payload);
+    }
+  });
+})(scope);
+&lt;/script&gt;</pre>
+    Auf diese Weise erstellte Vorlagen können kopiert werden und bleiben unabhängig voneinander.</p>
+  <p><b>Senden einer Nachricht:</b><br>
+    <pre style="font-size:smaller;">
+&lt;script&gt;
+var value = "hello world";
+// or overwrite value in your callback function ...
+this.scope.action = function() { return value; }
+&lt;/script&gt;
+&lt;md-button ng-click=&quot;send({payload:action()})&quot;&gt;
+  Click me to send a hello world
+&lt;/md-button&gt;</pre>
+    Zeigt einen Button an, welcher beim Klicken eine Nachricht mit Payload <code>'Hello world'</code> sendet.</p>
+  <p><b>Verwenden von <code>msg.template</code>:</b><br>
+    Der Vorlageninhalt kann auch über <code>msg.template</code> definiert werden.
+    So können beispielsweise externe Dateien verwendet werden.<br>
+    Die Vorlage wird bei eingehenden Nachrichten neu geladen, wenn sie verändert wurde.<br>
+    In das Vorlagefeld geschriebener Code wird ignoriert, wenn <code>msg.template</code> vorhanden ist.</p>
+  <p>Die folgenden Icon-Schriftarten sind verfügbar: <a href=\"https://klarsys.github.io/angular-material-icons/\" target=\"_blank\">Material-Design-Icon</a> (z.B. <code>check</code> oder <code>close</code>), ein <a href=\"https://fontawesome.com/v4.7.0/icons/\" target=\"_blank\">Font-Awesome-Icon</a> (z.B. <code>fa-fire</code>) oder ein <a href=\"https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md\" target=\"_blank\">Wetter-Icon</a> (z.B. <code>wi-wu-sunny</code>) sein.</p><p>Des Weiteren können alle Google-Material-Icons verwendet werden, indem dem Icon-Namen <code>mi-</code> vorangestellt wird (z.B. <code>mi-videogame_asset</code>).</p>
+  <p>Wenn eine <b>Klasse</b> angegeben ist, wird sie der übergeordneten Karte hinzugefügt. Auf diese Weise können Sie CSS-Stile auf die ui-card und ihre untergeordneten Elemente anwenden. Die Klasse kann zur Laufzeit festgelegt werden, indem eine Zeichenfolgeneigenschaft <code>msg.className</code> festgelegt wird.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/de/ui_template.json

@@ -0,0 +1,19 @@
+{
+    "ui_template": {
+        "label": {
+            "type": "Vorlagentyp",
+            "local": "Widget in Gruppe",
+            "global": "Hinzugefügt zur <head>-Sektion der Seite",
+            "group": "Gruppe",
+            "size": "Größe",
+            "name": "Name",
+            "pass-through": "Nachrichten vom Eingang weiterleiten",
+            "store-state": "Ausgehende Nachrichten speichern",
+            "template": "Vorlage",
+            "expand": "Erweitern",
+            "resend": "Letzten Wert beim Aktualisieren neuladen",
+            "className": "Klasse",
+      "classNamePlaceholder": "Optionale(r) CSS-Klassenname(n) für das Widget"
+        }
+    }
+}

node_modules/node-red-dashboard/nodes/locales/de/ui_ui_control.html

@@ -0,0 +1,29 @@
+<script type="text/html" data-help-name="ui_ui_control">
+  <p>Ermöglicht die dynamische Steuerung des Dashboards.</p>
+  <p>Die Standardfunktion besteht darin, den aktuell angezeigten Tab zu ändern.
+    <code>msg.payload</code> sollte entweder ein Objekt der Form <code>{"tab":"my_tab_name"}</code> sein,
+    oder einfach der <b>Tab-Name</b> oder ein <b>numerischer Index</b> (ab 0) vom Tab oder Link, der angezeigt werden soll.</p>
+  <p>Das Senden eines leeren Namens "" aktualisiert die aktuell angezeigte Seite.
+    Es kann auch "+1" für den nächsten und "-1" für den vorherigen Tab gesendet werden.</p>
+  <p>Dashboard Seiten (also Tabs) können durch Senden eines <code>msg.payload</code>-Objektes im Format
+    <pre>{"tabs": {"hide": "tab_name_to_hide", "disable": ["secret_tab", "unused_stuff"]}}</pre> gesteuert werden.
+    Es sind zwei Zustände verfügbar: <b>show</b>/<b>hide</b> und <b>enable</b>/<b>disable</b></p>
+  <p>Die Sichtbarkeit von individuellen Widget-Gruppen können durch folgenden Payload gesteuert werden:
+    <pre>{"group": {"hide": ["tab_name_group_name_with_underscores"], "show": ["reveal_another_group"], "focus": true}}</pre>
+    <b>focus</b> ist optional und sorgt dafür, dass zu der richtigen Gruppe gescrollt wird. 
+    Es können auch folgende Eigenschafen wie `open` und `close` verwendet werden, um den Status einer Gruppe zu setzen.
+    Die Gruppennamen sind die IDs der Gruppen und setzen sich aus <i>tab name</i> plus <i>group name</i> zusammen,
+    zusammengeschrieben mittels Leerzeichen-ersetzender Unterstriche.</p>
+  <p>Wenn ein Browser die Verbindung aufbaut oder verliert, den Tab wechselt oder eine Gruppe auf- bzw. zuklappt,
+    sendet dieser Node eine <code>msg</code> mit folgendem Inhalt:</p>
+  <ul>
+    <li><code>payload</code> - <i>connect</i>, <i>lost</i>, <i>change</i> oder <i>group</i>
+    <li><code>socketid</code> - die ID des Sockets (dies ändert sich jedes Mal, wenn der Browser die Seite neu lädt)
+    <li><code>socketip</code> - die IP-Adresse, von der die Verbindung stammt
+    <li><code>tab</code> - die Nummer des Tabs (nur für 'change' Ereignisse)
+    <li><code>name</code> - der Name des Tabs (nur für 'change' Ereignisse)
+    <li><code>group</code> - der Name der Gruppe (nur für 'group' Ereignisse)
+    <li><code>open</code> - der Status der Gruppe (nur für 'group' Ereignisse)
+  </ul>
+  <p>Optional - Nur neue Verbindungen melden - nützlich, um ein erneutes Senden von Daten an einen neuen Client auszulösen, ohne dass andere Ereignisse herausgefiltert werden müssen.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/de/ui_ui_control.json

@@ -0,0 +1,10 @@
+{
+    "ui_ui_control": {
+        "label": {
+            "name": "Name"
+        },
+        "placeholder": {
+            "name": "Name"
+        }
+    }
+}

node_modules/node-red-dashboard/nodes/locales/en-US/ui_audio.html

@@ -0,0 +1,16 @@
+<script type="text/html" data-help-name="ui_audio">
+    <p>Plays audio or text to speech (TTS) in the dashboard.</p>
+    <p>To work the dashboard web page must be open.</p>
+    <p>Expects <code>msg.payload</code> to contain a buffer of a <b>wav</b> or <b>mp3</b> file.</p>
+    <p>If your browser has native support for Text-to-Speech then a <code>msg.payload</code>
+    can also be a <b>string</b> to be read aloud.</p>
+    <p>Optionally setting <code>msg.level</code> from 0 to 100 will change the volume from 0 to 100%. Default is 100%.
+    In audio mode you can go up to 300, but you may get distortion.</p>
+    <p>When a <code>msg.reset</code> is available with value <code>true</code>, then playback of the current audio fragment will be stopped.</p>
+    <p>The <b>node status</b> reflects the current playback status:
+    <ul>
+        <li><b>started:</b> the audio fragment playback has been started.</li>
+        <li><b>reset:</b> the audio fragment playback has been reset (i.e. stopped before completed).</li>
+    </ul>
+    As soon as the audio fragment playback is completed, the node status will be cleared automatically.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_base.html

@@ -0,0 +1,2 @@
+<script type="text/html" data-help-name="ui_base">
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_base.json

@@ -0,0 +1,102 @@
+{
+    "ui_base": {
+        "label": {
+            "dashboard": "dashboard",
+            "category": "dashboard",
+            "title": "Title",
+            "options": "Options",
+            "date-format": "Date Format",
+            "sizes": "Sizes",
+            "horizontal": "Horizontal",
+            "vertical": "Vertical",
+            "widget-size": "1x1 Widget Size",
+            "widget-spacing": "Widget Spacing",
+            "group-padding": "Group Padding",
+            "group-spacing": "Group Spacing",
+            "layout": "Layout",
+            "angular": "Angular",
+            "theme": "Theme",
+            "site": "Site"
+        },
+        "auto": "auto",
+        "title": "Node-RED Dashboard",
+        "layout": {
+            "tab-and-link": "Tabs & Links",
+            "tab": "tab",
+            "link": "link",
+            "group": "group",
+            "edit": "edit",
+            "spacer": "spacer",
+            "layout": "layout",
+            "layout-editor": "Dashboard layout editor",
+            "width": "Width",
+            "auto": "auto-sizing",
+            "manual": "manual resize"
+        },
+        "theme": {
+            "style": "Style",
+            "custom-profile": "Custom Profile",
+            "custom-profile-name": "Untitled Theme 1",
+            "base-settings": "Base Settings",
+            "page-settings": "Page Settings",
+            "page": {
+                "title": "Title Bar Background",
+                "page": "Page Background",
+                "side": "Side Bar Background"
+            },
+            "group-settings": "Group Settings",
+            "group": {
+                "text": "Group Text",
+                "border": "Group Border",
+                "background": "Group Background"
+            },
+            "widget-settings": "Widget Settings",
+            "widget": {
+                "text": "Widget Text",
+                "colour": "Widget Colour",
+                "background": "Widget Background"
+            }
+        },
+        "style": {
+            "light": "Light (default)",
+            "dark": "Dark",
+            "custom": "Custom",
+            "primary": "Primary",
+            "accents": "Accents",
+            "background": "Background",
+            "warnings": "Warnings",
+            "palette": "Light / Dark"
+        },
+        "base": {
+            "colour": "Colour",
+            "font": "Font"
+        },
+        "font": {
+            "system": "System Font (default)"
+        },
+        "site": {
+            "title": "Node-RED Dashboard",
+            "date-format": "DD/MM/YYYY"
+        },
+        "title-bar": {
+            "show": "Show the title bar",
+            "hide": "Hide the title bar"
+        },
+        "swipe": {
+            "no-swipe": "No swipe between tabs",
+            "allow-swipe": "Allow swipe between tabs",
+            "allow-swipe-mouse": "Allow swipe (+mouse) between tabs",
+            "show-menu": "Swipe to open/close menu"
+        },
+        "lock": {
+            "clicked": "Click to show side menu",
+            "locked": "Always show side menu",
+            "locked-icon": "Always show icons only"
+        },
+        "temp": {
+            "allow-theme": "Node-RED theme everywhere",
+            "no-theme": "Use Angular theme in ui_template",
+            "none": "Angular theme everywhere"
+        }
+    }
+}

node_modules/node-red-dashboard/nodes/locales/en-US/ui_button.html

@@ -0,0 +1,20 @@
+<script type="text/html" data-help-name="ui_button">
+    <p>Adds a button to the user interface.</p>
+    <p>Clicking the button generates a message with <code>msg.payload</code> set to the <b>Payload</b> field.
+    If no payload is specified, the node id is used.</p>
+	<p>The <b>Size</b> defaults to  3 by 1.</p>
+    <p>The <b>Icon</b> can be defined, as either a <a href="https://klarsys.github.io/angular-material-icons/" target="_blank">Material Design icon</a>
+    <i>(e.g. 'check', 'close')</i> or a <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesome icon</a>
+    <i>(e.g. 'fa-fire')</i>, or a <a href="https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md">Weather icon</a>.
+    You can use the full set of google material icons if you add 'mi-' to the icon name. e.g. 'mi-videogame_asset'.</p>
+    <p>The colours of the text and background may be set. They can also be set by a message property by setting
+    the field to the name of the property, for example <code>{{background}}</code>.
+    You don't need to prepend the <i>msg.</i> part of the property name.</p>
+    <p>The label and icon can also be set by a message property by setting
+    the field to the name of the property, for example <code>{{topic}}</code> or <code>{{myicon}}</code>.</p>
+    <p>If set to pass through mode a message arriving on the input will act like pressing the button.
+    The output payload will be as defined in the node configuration.</p>
+    <p>The incoming <b>topic</b> field can be used to set the <code>msg.topic</code> property that is output.</p>
+    <p>Setting <code>msg.enabled</code> to <code>false</code> will disable the button.</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_button.json

@@ -0,0 +1,24 @@
+{
+  "ui_button": {
+    "label": {
+      "group": "Group",
+      "size": "Size",
+      "icon": "Icon",
+      "optionalIcon": "optional icon",
+      "label": "Label",
+      "optionalLabel": "optional label",
+      "tooltip": "Tooltip",
+      "optionalTooltip": "optional tooltip",
+      "color": "Color",
+      "optionalColor": "optional text/icon color",
+      "background": "Background",
+      "optionalBackgroundColor": "optional background color",
+      "whenClicked": "When clicked, send:",
+      "payload": "Payload",
+      "topic": "Topic",
+      "emulateClick": "If msg arrives on input, emulate a button click:",
+      "className": "Class",
+      "classNamePlaceholder": "Optional CSS class name(s) for widget"
+    }
+  }
+}

node_modules/node-red-dashboard/nodes/locales/en-US/ui_chart.html

@@ -0,0 +1,21 @@
+<script type="text/html" data-help-name="ui_chart">
+    <p>Plots the input values on a chart. This can either be a time based line chart, a bar chart (vertical or horizontal),
+    or a pie chart.</p>
+    <p>Each input <code>msg.payload</code> value will be converted to a number. If the
+    conversion fails, the message is ignored.</p>
+    <p>Minimum and Maximum <b>Y</b> axis values are optional. The graph will auto-scale to any values received.</p>
+    <p>Multiple series can be shown on the same chart by using a different <code>msg.topic</code>
+    value on each input message. Multiple bars of the same series can be shown by using the <code>msg.label</code> property.</p>
+    <p>The <b>X</b> axis defines a time window or a maximum number of points to display. Older data will be automatically removed from the graph.
+    The axis labels can be formatted using a <a href="https://momentjs.com/docs/#/displaying/format/" target="_blank">
+    Moment.js time formatted</a> string.</p>
+    <p>Inputting a <code>msg.payload</code> containing a blank array <code>[]</code> will clear the chart.</p>
+    <p>See <b><a href="https://github.com/node-red/node-red-dashboard/blob/master/Charts.md" target="_new">this information</a></b>
+    for how to pre-format data to be passed in as a complete chart.</p>
+    <p>The <b>Blank label</b> field can be used to display some text before any valid data is received.</p>
+    <p>The label can also be set by a message property by setting
+    the field to the name of the property, for example <code>{{msg.topic}}</code>.</p>
+    <p>The node output contains an array of the chart state that can be persisted if needed. This can be passed
+    into the chart node to re-display the persisted data.</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_chart.json

@@ -0,0 +1,56 @@
+{
+  "ui_chart": {
+    "label": {
+      "group": "Group",
+      "size": "Size",
+      "label": "Label",
+      "optionalChartTitle": "optional chart title",
+      "type": "Type",
+      "lineChart": "  Line chart",
+      "barChart": "  Bar chart",
+      "barChartH": "  Bar chart (H)",
+      "pieChart": "  Pie chart",
+      "polarAreaChart": "  Polar area chart",
+      "radarChart": "  Radar chart",
+      "enlargePoints": "enlarge points",
+      "xAxis": "X-axis",
+      "last": "last",
+      "seconds": "seconds",
+      "minutes": "minutes",
+      "hours": "hours",
+      "days": "days",
+      "weeks": "weeks",
+      "or": "OR",
+      "points": "points",
+      "xAxisLabel": "X-axis Label",
+      "HHmmss": "HH:mm:ss",
+      "HHmm": "HH:mm",
+      "yearMonthDate": "Year-Month-Date",
+      "dateMonth": "Date/Month",
+      "dayHHmm": "Day HH:mm",
+      "custom": "custom",
+      "automatic": "automatic",
+      "asUTC": "as UTC",
+      "yAxis": "Y-axis",
+      "min": "min",
+      "max": "max",
+      "legend": "Legend",
+      "none": "None",
+      "show": "Show",
+      "interpolate": "Interpolate",
+      "linear": "linear",
+      "step": "step",
+      "bezier": "bezier",
+      "cubic": "cubic",
+      "cubicMono": "cubic-mono",
+      "cutout": "Cutout",
+      "useFirstColourForAllBars": "Use first colour for all bars",
+      "seriesColours": "Series Colours",
+      "blankLabel": "Blank label",
+      "displayThisTextBeforeValidDataArrives": "display this text before valid data arrives",
+      "useDifferentColor": "Use different colour for series data",
+      "className": "Class",
+      "classNamePlaceholder": "Optional CSS class name(s) for widget"
+    }
+  }
+}

node_modules/node-red-dashboard/nodes/locales/en-US/ui_colour_picker.html

@@ -0,0 +1,10 @@
+<script type="text/html" data-help-name="ui_colour_picker">
+    <p>Adds a colour picker to the dashboard.</p>
+    <p>If the group width is 4 or greater then the picker can be set to be visible at all times.</p>
+    <p><b>Format</b> can be rgb, hex, hex8, hsv, or hsl. Transparency is supported for all except hex.</p>
+    <p>If a <b>Topic</b> is specified, it will be added as <code>msg.topic</code>.</p>
+    <p>Setting <code>msg.enabled</code> to <code>false</code> will disable the input.</p>
+    <p>If set to ‘pass through mode’ a message arriving on the input will be evaluated for any colour format available
+        as Format. If the conversion fails #000000 will be used.</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_date_picker.html

@@ -0,0 +1,7 @@
+<script type="text/html" data-help-name="ui_date_picker">
+    <p>Adds a date picker widget to the user interface.</p>
+    <p>The date display can be formatted in the Dashboard - Site tab using <a href="https://momentjs.com/docs/#/displaying/">
+    moment.js</a> formatting. For example <code>MM/DD/YYYY</code>, <code>Do MMM YYYY</code> or <code>YYYY-MM-DD</code>.</p>
+    <p>Setting <code>msg.enabled</code> to <code>false</code> will disable the input.</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_dropdown.html

@@ -0,0 +1,17 @@
+<script type="text/html" data-help-name="ui_dropdown">
+    <p>Adds a dropdown select box to the user interface.</p>
+    <p>Multiple value / label pairs can be added as required. If the label is not specified the
+    value will be used for both.</p>
+    <p>The configured value of the selected item will be returned as <code>msg.payload</code>.</p>
+    <p>Setting <code>msg.payload</code> to one of the item values will preset the choice in the dropdown.
+    If using the multi-select option then the payload should be an array of values.</p>
+    <p>Optionally the user search term can deleted if the <code>msg.resetSearch</code> property is present and set to <i>true</i>.</p>
+    <p>Optionally the <b>Topic</b> field can be used to set the <code>msg.topic</code> property.</p>
+    <p>The Options may be configured by inputting <code>msg.options</code> containing an array.
+    If just text then the value will be the same as the label, otherwise you can specify both by
+    using an object of <code>"label":"value"</code> pairs :</p>
+    <code>[ "Choice 1", "Choice 2", {"Choice 3":"3"} ]</code>
+    <p></p>
+    <p>If the "Allow multiple selections" output option is enabled - the result will be returned as an array instead of a string.</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_form.html

@@ -0,0 +1,17 @@
+<script type="text/html" data-help-name="ui_form">
+    <p>Adds a form to user interface.</p>
+    <p>Helps to collect multiple value from the user on submit button click as an object in <code>msg.payload</code> </p>
+    <p>Multiple input elements can be added using add elements button</p>
+    <p>Each element contains following components:</p>
+    <ul>
+        <li> <b>Label</b> : Value that will be the label of the element in the user interface</li>
+        <li> <b>Name</b> : Represents the key (variable name) in the <code>msg.payload</code> in which the value of the corresponding element present</li>
+        <li> <b>Type</b> : Drop down option to select the type of input element</li>
+        <li> <b>Required</b> : On switching on the user has to supply the value before submitting</li>
+        <li> <b>Rows</b> : number of UI rows for multiline text input</li>
+        <li> <b>Delete</b> : To remove the current element from the form</li>
+    </ul>
+    <p>Optionally the <b>Topic</b> field can be used to set the <code>msg.topic</code> property.</p>
+    <p>The Cancel button can be hidden by setting it's value to be blank "".</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_form.json

@@ -0,0 +1,35 @@
+{
+  "ui_form": {
+    "label": {
+      "group": "Group",
+      "size": "Size",
+      "label": "Label",
+      "optionalLabel": "optional label",
+      "formElements": "Form elements",
+      "type": "Type",
+      "required": "Required",
+      "rows": "UiRows",
+      "remove": "Remove",
+      "egName": "e.g. Name",
+      "egName2": "e.g. name",
+      "text": "Text",
+      "multiline": "Multiline",
+      "number": "Number",
+      "email": "E-mail",
+      "password": "Password",
+      "checkbox": "Checkbox",
+      "switch": "Switch",
+      "date": "Date",
+      "time": "Time",
+      "element": "element",
+      "buttons": "Buttons",
+      "submitButtonText": "submit button text",
+      "cancelButtonText": "cancel button text",
+      "topic": "Topic",
+      "optionalMsgTopic": "optional msg.topic",
+      "splitLayout":"Place the form elements in two columns",
+      "className": "Class",
+      "classNamePlaceholder": "Optional CSS class name(s) for widget"
+    }
+  }
+}

node_modules/node-red-dashboard/nodes/locales/en-US/ui_gauge.html

@@ -0,0 +1,15 @@
+<script type="text/html" data-help-name="ui_gauge">
+    <p>Adds a gauge type widget to the user interface.</p>
+    <p>The <code>msg.payload</code> is searched for a numeric <i>value</i> and is formatted in accordance with
+    the defined <b>Value Format</b>, which can then be formatted using
+    <a href="https://docs.angularjs.org/api/ng/filter" target="_blank">Angular filters</a>.</p>
+    <p>For example : <code>{{value | number:1}}%</code> will round the value to one decimal place and append a % sign.</p>
+    <p>The colours of each of 3 sectors can be specified and the gauge will blend between them.
+    The colours should be specified in hex (#rrggbb) format.</p>
+    <p>If you specify numbers for the sectors then the colours changes per sector.
+    If not specified the colours are blended across the total range.</p>
+    <p>The gauge has several modes. Regular gauge, donut, compass and wave.</p>
+    <p>The label can also be set by a message property by setting
+    the field to the name of the property, for example <code>{{msg.topic}}</code>.</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_group.html

@@ -0,0 +1,4 @@
+<script type="text/html" data-help-name="ui_group">
+    <p>Group</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_group.json

@@ -0,0 +1,16 @@
+{
+    "ui_group" : {
+        "label" : {
+            "name" : "Name",
+            "tab" : "Tab",
+            "width" : "Width",
+            "default" : "Default",
+            "group" : "Group",
+            "unassigned" : "unassigned",
+            "className": "Class",
+            "classNamePlaceholder": "Optional CSS class name(s) for widget"
+        },
+        "display-name" : "Display group name",
+        "collapse-name" : "Allow group to be collapsed"
+    }
+}

node_modules/node-red-dashboard/nodes/locales/en-US/ui_link.html

@@ -0,0 +1,8 @@
+<script type="text/html" data-help-name="ui_link">
+    <p>The <b>Icon</b> can be defined, as either a <a href="https://klarsys.github.io/angular-material-icons/" target="_blank">Material Design icon</a>
+    <i>(e.g. 'check', 'close')</i> or a <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesome icon</a>
+    <i>(e.g. 'fa-fire')</i>, or a <a href="https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md">Weather icon</a>.
+    You can use the full set of google material icons if you add 'mi-' to the icon name. e.g. 'mi-videogame_asset'.</p>
+    <p>The <b>Open in</b> field controls whether the link opens in a <i>New Tab</i>, or if the link is opened within an <i>iframe</i> on the same page. Some sites, including Google, do not allow the rendering of their page inside an iframe. If you select the <i>iframe</i> option and the site does not show, this is simply because that site forbids the use of it inside an iframe.</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_link.json

@@ -0,0 +1,16 @@
+{
+    "ui_link" : {
+        "label" : {
+            "name" : "Name",
+            "link" : "Link",
+            "icon" : "Icon",
+            "open-in" : "Open in",
+            "new-tab" : "New Tab",
+            "this-tab" : "This Tab",
+            "iframe" : "iframe",
+            "className": "Class",
+            "classNamePlaceholder": "Optional CSS class name(s) for widget"
+        },
+        "tip" : "The <b>Icon</b> field can be either a <a href=\"https://klarsys.github.io/angular-material-icons/\" target=\"_blank\">Material Design icon</a> <i>(e.g. 'check', 'close')</i> or a <a href=\"https://fontawesome.com/v4.7.0/icons/\" target=\"_blank\">Font Awesome icon</a> <i>(e.g. 'fa-fire')</i>, or a <a href=\"https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md\" target=\"_blank\">Weather icon</a> <i>(e.g. 'wi-wu-sunny')</i>.</p><p>You can use the full set of google material icons if you add 'mi-' to the icon name. e.g. 'mi-videogame_asset'.</p>"
+    }
+}

node_modules/node-red-dashboard/nodes/locales/en-US/ui_numeric.html

@@ -0,0 +1,17 @@
+<script type="text/html" data-help-name="ui_numeric">
+    <p>Adds a numeric input widget to the user interface.</p>
+	<p>The user can set the value between
+    the limits (<b>min</b> and <b>max</b>). Each value change will generate a <code>msg.payload</code>.</p>
+    <p>If <b>Topic</b> is specified, it will be added as <code>msg.topic</code>.<p>
+    <p>Any input <code>msg.payload</code> will be converted to a number, the <b>min</b> value will be used if conversion fails,
+    and it will update the user interface. If the value changes, it will also be passed to the output.</p>
+    <p>The <b>Value Format</b> field can be used to change the displayed format. For example, a <b>Value Format</b>
+    of <code>{{value}} %</code>
+    with a value of <b>23</b> will show <b>23 %</b> on the user interface. The <b>Value Format</b> field can contain
+    HTML or Angular filters to format the output (eg: <code>&amp;deg;</code> will show the degree symbol).</p>
+    <p>Setting the Value Format field to <code>{{msg.payload}}</code> will make the input field editable so you can type in a number.</p>
+    <p>The label can also be set by a message property by setting
+    the field to the name of the property, for example <code>{{msg.topic}}</code>.</p>
+    <p>Setting <code>msg.enabled</code> to <code>false</code> will disable the widget output.</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_slider.html

@@ -0,0 +1,15 @@
+<script type="text/html" data-help-name="ui_slider">
+    <p>Adds a slider widget to the user interface.</p>
+	<p>The user can change its value between the limits (<b>min</b> and <b>max</b>). Each value change
+    will generate a message with the value set as <b>payload</b>.</p>
+    <p>A vertical slider can be created by setting the size so that the height is greater than the width.</p>
+    <p>The slider can be reversed by setting the min value larger than the max value. e.g. min 100, max 0.</p>
+    <p>If a <b>Topic</b> is specified, it will be added as <code>msg.topic</code>.</p>
+    <p>An input <code>msg.payload</code> will be converted to a number, and used to preset a value.
+    The <b>min</b> value will be used if conversion fails,
+    and it will update the user interface. If the value changes, it will also be passed to the output.</p>
+    <p>The label can also be set by a message property by setting
+    the field to the name of the property, for example <code>{{msg.topic}}</code>.</p>
+    <p>Setting <code>msg.enabled</code> to <code>false</code> will disable the slider output.</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_spacer.html

@@ -0,0 +1,3 @@
+<script type="text/html" data-help-name="ui_spacer">
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_switch.html

@@ -0,0 +1,19 @@
+<script type="text/html" data-help-name="ui_switch">
+    <p>Adds a switch to the user interface.</p>
+	<p>Each change in the state of the switch will generate
+    a <code>msg.payload</code> with the specified <b>On</b> and <b>Off</b> values.</p>
+    <p>The <b>On/Off Color</b> and <b>On/Off Icon</b> are optional fields. If they are all present, the default
+    toggle switch will be replaced with the relevant icons and their respective colors.</p>
+    <p>The <b>On/Off Icon</b> field can be either a <a href="https://klarsys.github.io/angular-material-icons/" target="_blank">Material Design icon</a>
+    <i>(e.g. 'check', 'close')</i> or a <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesome icon</a>
+    <i>(e.g. 'fa-fire')</i>, or a <a href="https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md">Weather icon</a>.
+    You can use the full set of google material icons if you add 'mi-' to the icon name. e.g. 'mi-videogame_asset'.</p>
+    <p>In pass through mode the switch state can be updated by an incoming <code>msg.payload</code> with the specified values,
+    that must also match the specified type (number, string, etc). When not in passthrough mode then the icon can either
+    track the state of the output - or the input msg.payload, in order to provide a closed loop feedback.</p>
+    <p>The label can also be set by a message property by setting
+    the field to the name of the property, for example <code>{{msg.topic}}</code>.</p>
+    <p>If a <b>Topic</b> is specified, it will be added to the output as <code>msg.topic</code>.</p>
+    <p>Setting <code>msg.enabled</code> to <code>false</code> will disable the switch widget.</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_tab.html

@@ -0,0 +1,13 @@
+<script type="text/html" data-help-name="ui_tab">
+    <p>Tab configuration for Dashboard</p>
+    <p><b>Disabled</b> pages are not included in the Dashboard app, and are therefore not functional.
+       The tab name still appears in the Navigation Menu (unless it is also hidden).
+    </p>
+    <p><b>Hidden</b> pages are not listed in the Left-hand Navigation Menu.
+       However, they are still active in the Dashboard, and can be shown by using a `ui_control` msg.
+    </p>
+    <p>The <b>Icon</b> field can be either a <a href="https://klarsys.github.io/angular-material-icons/" target="_blank">Material Design icon</a>
+    <i>(e.g. 'check', 'close')</i> or a <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesome icon</a>
+    <i>(e.g. 'fa-fire')</i>, or a <a href="https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md">Weather icon</a>.
+    You can use the full set of google material icons if you add 'mi-' to the icon name. e.g. 'mi-videogame_asset'.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_tab.json

@@ -0,0 +1,21 @@
+{
+    "ui_tab" : {
+        "label" : {
+            "home" : "Home",
+            "tab" : "Tab",
+            "name" : "Name",
+            "icon" : "Icon",
+            "state" : "State",
+            "navmenu" : "Nav. Menu",
+            "enabled" : "Enabled",
+            "disabled" : "Disabled",
+            "visible" : "Visible",
+            "hidden" : "Hidden"
+        },
+        "info": {
+            "disabled": " Tab is inactive in Dashboard.",
+            "hidden": " Tab is not shown in Navigation Menu."
+        },
+        "tip" : "The <b>Icon</b> field can be either a <a href=\"https://klarsys.github.io/angular-material-icons/\" target=\"_blank\">Material Design icon</a> <i>(e.g. 'check', 'close')</i> or a <a href=\"https://fontawesome.com/v4.7.0/icons/\" target=\"_blank\">Font Awesome icon</a> <i>(e.g. 'fa-fire')</i>, or a <a href=\"https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md\" target=\"_blank\">Weather icon</a> <i>(e.g. 'wi-wu-sunny')</i>.</p><p>You can use the full set of google material icons if you add 'mi-' to the icon name. e.g. 'mi-videogame_asset'.</p>"
+    }
+}

node_modules/node-red-dashboard/nodes/locales/en-US/ui_template.html

@@ -0,0 +1,49 @@
+<script type="text/html" data-help-name="ui_template">
+    <p>The template widget can contain any valid html and Angular/Angular-Material directives.</p>
+    <p>This node can be used to create a dynamic user interface element that changes its appearance
+    based on the input message and can send back messages to Node-RED.</p>
+    <p><b>For example:</b><br>
+    <pre style="font-size:smaller;">&lt;div layout=&quot;row&quot; layout-align=&quot;space-between&quot;&gt;
+  &lt;p&gt;The number is&lt;/p&gt;
+  &lt;font color=&quot;{{((msg.payload || 0) % 2 === 0) ? 'green' : 'red'}}&quot;&gt;
+    {{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}}
+  &lt;/font&gt;
+&lt;/div&gt;</pre>
+    Will display if the number received as <code>msg.payload</code> is even or odd. It will also
+    change the color of the text to green if the number is even or red if odd.<br/>
+    The next example shows how to set a unique id for your template, pick up the default theme colour,
+    and watch for any incoming message.</p>
+    <pre style="font-size:smaller;">
+&lt;div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}"&gt;Some text&lt;/div&gt;
+&lt;script&gt;
+(function(scope) {
+  scope.$watch('msg', function(msg) {
+    if (msg) {
+      // Do something when msg arrives
+      $("#my_"+scope.$id).html(msg.payload);
+    }
+  });
+})(scope);
+&lt;/script&gt;</pre>
+    <p>Templates made in this way can be copied and remain independent of each other.</p>
+    <p><b>Sending a message:</b><br>
+    <pre style="font-size:smaller;">
+&lt;script&gt;
+var value = "hello world";
+// or overwrite value in your callback function ...
+this.scope.action = function() { return value; }
+&lt;/script&gt;
+&lt;md-button ng-click=&quot;send({payload:action()})&quot;&gt;
+    Click me to send a hello world
+&lt;/md-button&gt;</pre>
+    Will display a button that when clicked will send a message with the payload <code>'Hello world'</code>.</p>
+    <p><b>Using <code>msg.template</code>:</b><br>
+    You can also define the template content via <code>msg.template</code>, so you can use external files for example.<br>
+    Template will be reloaded on input if it has changed.<br>
+    Code written in the Template field will be ignored when <code>msg.template</code> is present.</p>
+    <p>The following icon fonts are available: <a href="https://klarsys.github.io/angular-material-icons/" target="_blank">Material Design icon</a>
+    <i>(e.g. 'check', 'close')</i> or a <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesome icon</a>
+    <i>(e.g. 'fa-fire')</i>, or a <a href="https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md">Weather icon</a>.
+    You can use the full set of Google material icons if you add 'mi-' to the icon name. e.g. 'mi-videogame_asset'.</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_template.json

@@ -0,0 +1,19 @@
+{
+    "ui_template": {
+        "label": {
+            "type": "Template type",
+            "local": "Widget in group",
+            "global": "Added to site <head> section",
+            "group": "Group",
+            "size": "Size",
+            "name": "Name",
+            "pass-through": "Pass through messages from input.",
+            "store-state": "Add output messages to stored state.",
+            "template": "Template",
+            "expand": "Expand",
+            "resend": "Reload last value on refresh.",
+            "className": "Class",
+            "classNamePlaceholder": "Optional CSS class name(s) for widget"
+        }
+    }
+}

node_modules/node-red-dashboard/nodes/locales/en-US/ui_text.html

@@ -0,0 +1,16 @@
+<script type="text/html" data-help-name="ui_text">
+    <p>Will display a non-editable text field on the user interface.</p>
+    <p>Each received <code>msg.payload</code> will update the text based on the provided <b>Value Format</b>.</p>
+    <p>The <b>Value Format</b> field can be used to change the displayed format and can contain valid HTML and
+    <a href="https://scotch.io/tutorials/all-about-the-built-in-angularjs-filters" target="_blank">Angular filters</a>.</p>
+    <p>For example: <code>{{value | uppercase}} &amp;deg;</code> will uppercase the payload text and add the degree symbol.</p>
+    <p>The label can also be set by a message property by setting
+    the field to the name of the property, for example <code>{{msg.topic}}</code>.</p>
+    <p>The following icon fonts are also available: <a href="https://klarsys.github.io/angular-material-icons/" target="_blank">Material Design icon</a>
+        <i>(e.g. 'check', 'close')</i> or a <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesome icon</a>
+        <i>(e.g. 'fa-fire')</i>, or a <a href="https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md">Weather icon</a>.
+        You can use the full set of google material icons if you add 'mi-' to the icon name. e.g. 'mi-videogame_asset'.</p>
+    <p>The widget also has a class of <code>nr-dashboard-widget-{the_widget_label_with_underscores}</code> which can be used for additional 
+        styling if required. You may need to use the <i>!important</i> flag to override the theme.</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_text_input.html

@@ -0,0 +1,16 @@
+<script type="text/html" data-help-name="ui_text_input">
+  <p>Adds a text input field to the user interface. Mode can be regular text, email or color picker.</p>
+  <p>Any input is sent as <code>msg.payload</code>. If set to ‘pass through mode’ an arriving <code>msg.payload</code>
+      will be used if it is different from the existing text in the input field. This allows you to preset
+      the text of the input field.</p>
+  <p>The <b>Delay</b> <i>(default : 300ms)</i> sets the amount of time in milliseconds before the output is sent.
+  Setting to <code>0</code> waits for "Enter" or "Tab" key to send. Enter will send payload but remain in focus.
+  Tab will send payload and move to next field. Clicking elsewhere will also send the payload.</p>
+  <p>The email mode will color in red if it is not a valid address and will return undefined.</p>
+  <p>The time input type returns a number of milliseconds from midnight.</p>
+  <p>Not all browsers support the <i>week</i> and <i>month</i> input types, and may return <i>undefined</i>.
+  Please test your target browser(s) before use.</p>
+  <p>If a <b>Topic</b> is specified, it will be added as <code>msg.topic</code>.</p>
+  <p>Setting <code>msg.enabled</code> to <code>false</code> will disable the input.</p>
+  <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_toast.html

@@ -0,0 +1,16 @@
+<script type="text/html" data-help-name="ui_toast">
+    <p>Shows <code>msg.payload</code> as a popup notification or OK / Cancel dialog
+    message on the user interface.</p>
+    <p>If a <code>msg.topic</code> is available it will be used as the title.</p>
+    <p>If you do not set an optional border highlight colour, then it can be set dynamically by <code>msg.highlight</code>.</p>
+    <p>You may also configure the position and duration of the toast notifications. If you leave the timeout blank
+    it can be set by <code>msg.timeout</code>. This does not apply to OK/Cancel dialogs.
+    <p>The dialog returns a <code>msg.payload</code> string of whatever you configure
+    the button label(s) to be. The second (cancel) button is optional, as is the return
+    value of <code>msg.topic</code>.</p>
+    <p>If you select 'OK, Cancel and Input' mode then <code>msg.payload</code> will contain
+    any text input by the user, rather than the OK button text.</p>
+    <p>The OK and Cancel button labels can be replaced by using <code>msg.ok</code> and <code>msg.cancel</code></p>
+    <p>Sending a blank payload will remove any active dialog without sending any data.</p>
+    <p>If a <b>Class</b> is specified, it will be added to the parent element. This way you can style the card and the elements inside it with custom CSS.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_ui_control.html

@@ -0,0 +1,28 @@
+<script type="text/html" data-help-name="ui_ui_control">
+    <p>Allows dynamic control of the Dashboard.</p>
+    <p>The default function is to change the currently displayed tab. <code>msg.payload</code>
+    should either be an object of the form <code>{"tab":"my_tab_name"}</code>, or just be the <b>tab name</b>
+    or <b>numeric index</b> (from 0) of the tab or link to be displayed.</p>
+    <p>Sending a blank tab name "" will refresh the current page.
+    You can also send "+1" for next tab and "-1" for previous tab.</p>
+    <p>Dashboard pages (i.e. "tabs") can be controlled by sending a <code>msg.payload</code> object with the format
+    <pre>{"tabs": {"hide": "tab_name_to_hide", "disable": ["secret_tab", "unused_stuff"]}}</pre>.
+    There are 2 toggle states available: <b>show</b>/<b>hide</b> and <b>enable</b>/<b>disable</b></p>
+    <p>Visibility of individual groups of widgets can controlled by a payload like
+    <pre>{"group": {"hide": ["tab_name_group_name_with_underscores"], "show": ["reveal_another_group"], "focus": true}}</pre>
+    where <b>focus</b> is optional and will cause the screen to scroll to show that group if required. 
+    You can also use properties `open` and `close` to set the state of a group that can be controlled by the user. The group
+    names are the IDs of the groups and are typically formed from the <i>tab name</i> plus <i>group name</i> joined with
+    underscores replacing all spaces.</p>
+    <p>When any browser client connects or loses connection, changes tab, or expands or collapses a group this node will emit a <code>msg</code> containing:</p>
+    <ul>
+    <li><code>payload</code> - <i>connect</i>, <i>lost</i>, <i>change</i>, or <i>group</i>.
+    <li><code>socketid</code> - the ID of the socket (this will change every time the browser reloads the page).
+    <li><code>socketip</code> - the ip address from where the connection originated.
+    <li><code>tab</code> - the number of the tab. (only for 'change' event).
+    <li><code>name</code> - the name of the tab. (only for 'change' event).
+    <li><code>group</code> - the name of the group. (only for 'group' event).
+    <li><code>open</code> - the state of the group. (only for 'group' event).
+    </ul>
+    <p>Optional - report only connect events - useful to use to trigger a resend of data to a new client without needing to filter out other events.</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/en-US/ui_ui_control.json

@@ -0,0 +1,16 @@
+{
+    "ui_ui_control": {
+        "label": {
+            "name": "Name",
+	    "output": "Output"
+        },
+        "placeholder": {
+            "name": "Name"
+        },
+	"events": {
+	  "all": "Connect, lost, change tab or group events",
+	  "change": "Change tab or group events only",
+	  "connect": "Connect event only"
+	}
+    }
+}

node_modules/node-red-dashboard/nodes/locales/ja/ui_base.json

@@ -0,0 +1,99 @@
+{
+    "ui_base" : {
+        "label" : {
+            "dashboard" : "ダッシュボード",
+            "title" : "タイトル",
+            "options" : "オプション",
+            "date-format" : "日付形式",
+            "sizes" : "サイズ",
+            "horizontal" : "横",
+            "vertical" : "縦",
+            "widget-size" : "最小Widgetサイズ",
+            "widget-spacing" : "Widget間隔",
+            "group-padding" : "グループパディング",
+            "group-spacing" : "グループ間隔",
+            "layout" : "配置",
+            "angular": "Angular",
+            "theme" : "テーマ",
+            "site" : "サイト"
+        },
+        "auto" : "自動",
+        "title" : "Node-REDダッシュボード",
+        "layout" : {
+            "tab-and-link" : "タブ & リンク",
+            "tab" : "タブ",
+            "link" : "リンク",
+            "group" : "グループ",
+            "edit" : "編集",
+            "spacer": "スペーサ",
+            "layout" : "レイアウト",
+            "layout-editor" : "ダッシュボードレイアウトエディタ",
+            "width" : "幅",
+            "auto": "自動サイズ調整",
+            "manual": "手動サイズ変更"
+        },
+        "theme" : {
+            "style" : "スタイル",
+            "custom-profile" : "カスタムプロファイル",
+            "custom-profile-name" : "名称未設定テーマ 1",
+            "base-settings" : "基本設定",
+            "page-settings" : "ページ設定",
+            "page" : {
+                "title" : "タイトルバー背景色",
+                "page" : "ページ背景色",
+                "side" : "サイドバー背景色"
+            },
+            "group-settings" : "グループ設定",
+            "group" : {
+                "text" : "グループ文字色",
+                "border" : "グループボーダー色",
+                "background" : "グループ背景色"
+            },
+            "widget-settings" : "Widget設定",
+            "widget" : {
+                "text" : "Widget文字色",
+                "colour" : "Widget色",
+                "background" : "Widget背景色"
+            }
+        },
+        "style" : {
+            "light" : "ライト (デフォルト)",
+            "dark" : "ダーク",
+            "custom" : "カスタム",
+            "primary" : "プライマリ",
+            "accents" : "アクセント",
+            "background" : "背景",
+            "warnings" : "警告",
+            "palette": "ライト/ダーク"
+        },
+        "base" : {
+            "colour" : "色",
+            "font" : "フォント"
+        },
+        "font" : {
+            "system" : "システムフォント (デフォルト)"
+        },
+        "site" : {
+            "title" : "Node-RED ダッシュボード",
+            "date-format" : "YYYY/MM/DD"
+        },
+        "title-bar" : {
+            "show" : "タイトルバー表示",
+            "hide" : "タイトルバー非表示"
+        },
+        "swipe" : {
+            "no-swipe" : "スワイプによるタブ切り替えをしない",
+            "allow-swipe" : "スワイプによるタブ切り替えをする"
+        },
+        "lock" : {
+            "clicked" : "サイドメニューをクリックで表示",
+            "locked" : "サイドメニューを表示したままにする",
+            "locked-icon": "常にアイコンのみを表示"
+        },
+        "temp" : {
+            "no-theme" : "ui_templateでテーマ設定を許可しない",
+            "allow-theme" : "ui_templateでテーマ設定を許可する",
+            "none" : "Angularテーマを全ての箇所で使用"
+        }
+    }
+}

node_modules/node-red-dashboard/nodes/locales/ja/ui_chart.html

@@ -0,0 +1,13 @@
+<script type="text/html" data-help-name="ui_chart">
+    <p>入力値をグラフに出力します。このグラフは、時系列の折れ線グラフ、棒グラフ(縦や横)、円グラフのいずれかです。</p>
+    <p>入力値の<code>msg.payload</code>は、数値に変換されます。もし変換に失敗した場合は、メッセージは無視されます。</p>
+    <p><b>Y</b>軸の最小値と最大値を設定することは任意です。グラフは自動的に受け取った値を用いて自動的に目盛りを調整します。</p>
+    <p>入力メッセージ毎に異なる<code>msg.topic</code>の値を用いることで、1つのグラフに複数の系列を表示できます。<code>msg.label</code>プロパティを用いることで、同じ系列の複数の棒グラフを表示できます。</p>
+    <p><b>X</b>軸には、表示する時間、または最大のポイント数を定義します。古くなったデータは、自動的にグラフから削除されます。軸のラベルは、<a href="https://momentjs.com/docs/#/displaying/format/" target="_blank">Moment.jsの時間フォーマット</a>の文字列を用いて表示できます。</p>
+    <p><code>msg.payload</code>に空の配列<code>[]</code>を含む入力によってグラフを初期化できます。</p>
+    <p>全てのグラフに渡すデータの作成方法については、<b><a href="https://github.com/node-red/node-red-dashboard/blob/master/Charts.md" target="_new">本情報</a></b>を参照してください。</p>
+    <p><b>初期ラベル</b>フィールドを用いることで、有効なデータを受け取る前にテキストを表示しておくことができます。</p>
+    <p>プロパティ名(例えば<code>{{msg.topic}}</code>)をラベル欄に設定しておくことで、ラベルをメッセージのプロパティによって設定できます。</p>
+    <p>本ノードの出力には、必要に応じて保存されたグラフの状態を持つ配列が含まれています。本データをchartノードに渡すことで、保存されたデータを再表示することもできます。</p>
+    <p>クラスが指定されている場合、そのクラスは親要素に追加されます。 このようにして、カスタムCSSを使用して、カードとその中の要素のスタイルを設定できます。 クラスは、<code> msg.className </code>文字列プロパティを設定することで実行時に設定できます。</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/ja/ui_chart.json

@@ -0,0 +1,56 @@
+{
+  "ui_chart": {
+    "label": {
+      "group": "グループ",
+      "size": "サイズ",
+      "label": "ラベル",
+      "optionalChartTitle": "任意のグラフタイトル",
+      "type": "種類",
+      "lineChart": "  折れ線グラフ",
+      "barChart": "  棒グラフ",
+      "barChartH": "  棒グラフ(横)",
+      "pieChart": "  円グラフ",
+      "polarAreaChart": "  鶏頭図",
+      "radarChart": "  レーダーチャート",
+      "enlargePoints": "ポイントを表示",
+      "xAxis": "X軸",
+      "last": "直近",
+      "seconds": "秒",
+      "minutes": "分",
+      "hours": "時間",
+      "days": "日",
+      "weeks": "週",
+      "or": "又は",
+      "points": "ポイント",
+      "xAxisLabel": "X軸ラベル",
+      "HHmmss": "HH:mm:ss",
+      "HHmm": "HH:mm",
+      "yearMonthDate": "年-月-日",
+      "dateMonth": "日/月",
+      "dayHHmm": "曜日 HH:mm",
+      "custom": "カスタム",
+      "automatic": "自動",
+      "asUTC": "UTCを使用",
+      "yAxis": "Y軸",
+      "min": "最小",
+      "max": "最大",
+      "legend": "凡例",
+      "none": "非表示",
+      "show": "表示",
+      "interpolate": "補完",
+      "linear": "直線",
+      "step": "段階",
+      "bezier": "ベジェ",
+      "cubic": "3次補間",
+      "cubicMono": "単調3次補間",
+      "cutout": "中心の切抜き率",
+      "useFirstColourForAllBars": "最初の色を全グラフで使用",
+      "seriesColours": "配色",
+      "blankLabel": "初期ラベル",
+      "displayThisTextBeforeValidDataArrives": "有効なデータが届く前に本文字列を表示",
+      "useDifferentColor": "シリーズに別の色を使用",
+      "className": "種類",
+      "classNamePlaceholder": "ウィジェット用のCSSクラス名（オプション）"
+    }
+  }
+}

node_modules/node-red-dashboard/nodes/locales/ja/ui_form.html

@@ -0,0 +1,17 @@
+<script type="text/html" data-help-name="ui_form">
+    <p>ユーザインターフェイスにフォームを追加します。</p>
+    <p>ユーザから複数の値を受け付け、送信ボタンのクリックによって、<code>msg.payload</code>のオブジェクトとして値を送信できます。</p>
+    <p>要素ボタンで追加することで、複数の入力向けの要素を追加できます。</p>
+    <p>各要素は、以下の部品を持っています:</p>
+    <ul>
+        <li> <b>ラベル</b> : ユーザインターフェイス上の要素のラベルとなる値</li>
+        <li> <b>名前</b> : 要素と対応する値を格納する<code>msg.payload</code>内のキー(変数名)</li>
+        <li> <b>種類</b> : 入力向けの要素の種類を選択するドロップダウンオプション</li>
+        <li> <b>必須</b> : 有効にするとユーザは送信前に値を埋める必要となる設定</li>
+        <li> <b>行数</b> : 複数行から成るテキスト入力欄UIの行数</li>
+        <li> <b>削除</b> : 現在の要素をフォームから削除</li>
+    </ul>
+    <p><b>Topic</b>欄は任意で<code>msg.topic</code>プロパティを設定するために用いることができます。</p>
+    <p>キャンセルボタンは、値に空白""を設定することで非表示にできます。</p>
+    <p>クラスが指定されている場合、そのクラスは親要素に追加されます。 このようにして、カスタムCSSを使用して、カードとその中の要素のスタイルを設定できます。 クラスは、<code> msg.className </code>文字列プロパティを設定することで実行時に設定できます。</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/ja/ui_form.json

@@ -0,0 +1,35 @@
+{
+  "ui_form": {
+    "label": {
+      "group": "グループ",
+      "size": "サイズ",
+      "label": "ラベル",
+      "optionalLabel": "任意のラベル",
+      "formElements": "フォームの要素",
+      "type": "種類",
+      "required": "必須",
+      "rows": "行数",
+      "remove": "削除",
+      "egName": "例) 名前",
+      "egName2": "例) name",
+      "text": "文字列",
+      "multiline": "複数行",
+      "number": "数値",
+      "email": "E-メール",
+      "password": "パスワード",
+      "checkbox": "チェックボックス",
+      "switch": "スイッチ",
+      "date": "日付",
+      "time": "時間",
+      "element": "要素",
+      "buttons": "ボタン",
+      "submitButtonText": "送信ボタンの文字列",
+      "cancelButtonText": "キャンセルボタンの文字列",
+      "topic": "トピック",
+      "optionalMsgTopic": "任意のmsg.topic",
+      "splitLayout": "フォーム要素を2列に配置",
+      "className": "種類",
+      "classNamePlaceholder": "ウィジェット用のCSSクラス名（オプション）"
+    }
+  }
+}

node_modules/node-red-dashboard/nodes/locales/ja/ui_group.json

@@ -0,0 +1,16 @@
+{
+    "ui_group" : {
+        "label" : {
+            "name" : "名前",
+            "tab" : "タブ",
+            "width" : "幅",
+            "default" : "デフォルト",
+            "group" : "グループ",
+            "unassigned" : "未設定",
+            "className": "種類",
+            "classNamePlaceholder": "ウィジェット用のCSSクラス名（オプション）"
+        },
+        "display-name" : "グループ名を表示する",
+        "collapse-name" : "グループの折りたたみを有効にする"
+    }
+}

node_modules/node-red-dashboard/nodes/locales/ja/ui_link.json

@@ -0,0 +1,16 @@
+{
+    "ui_link" : {
+        "label" : {
+            "name" : "名前",
+            "link" : "リンク",
+            "icon" : "アイコン",
+            "open-in" : "開く方法",
+            "new-tab" : "新規タブ",
+            "this-tab" : "このタブ",
+            "iframe" : "iframe",
+            "className": "種類",
+            "classNamePlaceholder": "ウィジェット用のCSSクラス名（オプション）"
+        },
+        "tip" : "<b>アイコン</b>フィールドには <a href=\"https://klarsys.github.io/angular-material-icons/\" target=\"_blank\">Material Design icon</a> <i>(例: 'check', 'close')</i>、<a href=\"https://fontawesome.com/v4.7.0/icons/\" target=\"_blank\">Font Awesome icon</a> <i>(例: 'fa-fire')</i>、もしくは <a href=\"https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md\" target=\"_blank\">Weather icon</a> <i>(例: 'wi-wu-sunny')</i>を指定できます。</p>"
+    }
+}

node_modules/node-red-dashboard/nodes/locales/ja/ui_tab.json

@@ -0,0 +1,21 @@
+{
+    "ui_tab" : {
+        "label" : {
+            "home" : "ホーム",
+            "tab" : "タブ",
+            "name" : "名前",
+            "icon" : "アイコン",
+            "state" : "状態",
+            "navmenu" : "メニュー",
+            "enabled" : "有効",
+            "disabled" : "無効",
+            "visible" : "表示",
+            "hidden" : "非表示"
+        },
+        "info": {
+            "disabled": " タブを無効化します",
+            "hidden": " タブを移動メニューに表示しません"
+        },
+    "tip" : "<b>アイコン</b>フィールドには <a href=\"https://klarsys.github.io/angular-material-icons/\" target=\"_blank\">Material Design icon</a> <i>(例: 'check', 'close')</i>、<a href=\"https://fontawesome.com/v4.7.0/icons/\" target=\"_blank\">Font Awesome icon</a> <i>(例: 'fa-fire')</i>、もしくは <a href=\"https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md\" target=\"_blank\">Weather icon</a> <i>(例: 'wi-wu-sunny')</i>を指定できます。</p>"
+    }
+}

node_modules/node-red-dashboard/nodes/locales/ja/ui_template.html

@@ -0,0 +1,44 @@
+<script type="text/html" data-help-name="ui_template">
+  <p>Template WidgetにはHTMLコードおよびAngular/Angular-Materialディレクティブを指定できます。</p>
+  <p>このノードで動的なユーザインターフェイス要素を作成し、入力によって見た目を変更したり、メッセージをNode-REDに送り返したりできます。</p>
+    <p><b>例:</b><br>
+  <pre style="font-size:smaller;">&lt;div layout=&quot;row&quot; layout-align=&quot;space-between&quot;&gt;
+  &lt;p&gt;数値は&lt;/p&gt;
+  &lt;font color=&quot;{{((msg.payload || 0) % 2 === 0) ? 'green' : 'red'}}&quot;&gt;
+    {{(msg.payload || 0) % 2 === 0 ? '偶数' : '奇数'}}
+  &lt;/font&gt;
+&lt;/div&gt;</pre>
+    このコードは<code>msg.payload</code>で受け取った数値が偶数か奇数かを表示します。同時に、偶数であれば緑に、奇数であれば赤にテキストの色を変更します。<br/>
+    次は、一意なIDをテンプレートに設定、デフォルトのテーマカラーを設定、入力メッセージの到着を監視する例です。</p>
+    <pre style="font-size:smaller;">
+&lt;div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}"&gt;何らかのテキスト&lt;/div&gt;
+&lt;script&gt;
+(function(scope) {
+  scope.$watch('msg', function(msg) {
+    if (msg) {
+      // メッセージ同着時に適当な処理を実行
+      $("#my_"+scope.$id).html(msg.payload);
+    }
+  });
+})(scope);
+&lt;/script&gt;</pre>
+    <p>この方法で作成したテンプレートはコピー可能です。コピーはそれぞれ独立して利用できます。</p>
+    <p><b>メッセージ送信:</b><br>
+    <pre style="font-size:smaller;">
+&lt;script&gt;
+var value = "こんにちは世界";
+// もしくは、コールバック関数で値を書き換え
+this.scope.action = function() { return value; }
+&lt;/script&gt;
+&lt;md-button ng-click=&quot;send({payload:action()})&quot;&gt;
+    クリックすると「こんにちは世界」を送信します
+&lt;/md-button&gt;</pre>
+    この例は、クリックするとペイロードに<code>'こんにちは世界'</code>を持つメッセージを送信するボタンを表示します。</p>
+  <p><b><code>msg.template</code>の使用:</b><br>
+    <code>msg.template</code>によってテンプレートを定義することもできます。例えば、外部ファイルに格納したテンプレートを用いる場合に有用です。<br>
+    テンプレートは入力が変化した場合に再ロードされます。<br>
+    「HTMLコード」フィールドに記述したコードは、<code>msg.template</code>が存在する場合には無視されます。</p>
+    <p>以下のアイコンフォントの利用も可能です: <a href="https://klarsys.github.io/angular-material-icons/" target="_blank">マテリアルデザインアイコン</a><i>(例:'check'、'close')</i>、<a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesomeアイコン</a><i>(例:'fa-fire')</i>、<a href="https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md">天気アイコン</a>。
+    アイコン名に'mi-’に追加することでGoogleマテリアルアイコン一式を利用できます。例:'mi-videogame_asset'。</p>
+  <p>クラスが指定されている場合、そのクラスは親要素に追加されます。 このようにして、カスタムCSSを使用して、カードとその中の要素のスタイルを設定できます。 クラスは、<code> msg.className </code>文字列プロパティを設定することで実行時に設定できます。</p>
+</script>

node_modules/node-red-dashboard/nodes/locales/ja/ui_template.json

@@ -0,0 +1,19 @@
+{
+    "ui_template" : {
+    	"label" : {
+    	    "type" : "コード種別",
+    	    "local" : "グループ内のWidget",
+    	    "global" : "<head>ヘッドセクションへ追加",
+    	    "group" : "グループ",
+    	    "size" : "サイズ",
+    	    "name" : "名前",
+    	    "pass-through" : "入力メッセージをそのまま渡す",
+    	    "store-state" : "出力メッセージを状態として保存",
+    	    "template" : "HTMLコード",
+            "expand": "展開する",
+            "resend": "更新時に最後の値を再度読み込む",
+			"className": "種類",
+      		"classNamePlaceholder": "ウィジェット用のCSSクラス名（オプション）"
+    	}
+    }
+}

node_modules/node-red-dashboard/nodes/locales/ja/ui_ui_control.html

@@ -0,0 +1,25 @@
+<script type="text/html" data-help-name="ui_ui_control">
+    <p>ダッシュボードの動的制御を行います</p>
+    <p>表示されているタブの切り替えが可能です。<code>msg.payload</code>に
+The default function is to change the currently displayed tab. <code>msg.payload</code>に表示対象のタブもしくはリンクの<code>{tab:"タブ名"}</code>、<b>タブ名</b>、もしくは、<b>添字</b> (0起点)を指定します。</p>
+    <p>空のタブ名("")を送信すると、表示されているページを更新します。また、"+1"を送ると次のタブ、"-1"を送ると前のタブに切り替えられます。</p>
+    <p>次の形式のオブジェクトを<code>msg.payload</code>で送付すると
+ダッシュボードページ(タブ)を制御できます。<pre>{"tabs": {"hide": "非表示タブ", "disable": ["秘密タブ", "未使用"]}}</pre>
+    ここでは、次の2つの状態が利用できます: <b>show</b>/<b>hide</b> および <b>enable</b>/<b>disable</b></p>
+    <p>widgetグループの表示を次のようなペイロードで制御できます。<br/>
+<pre>{group:{hide:["タブ名_グループ名"], show:["他_グループ_表示"], focus:true}}</pre>
+    <b>focus</b>は、グループが表示されるよう必要に応じて画面をスクロールするためのパラメータで、省略可能です。
+また、`open`および`close`プロパティを用いてグループの状態をユーザが制御できます。
+グループ名の指定は<i>タブ名</i>と<i>グループ名</i>を下線(_)で結合したものを用います。空白は下線で置き換えます。</p>
+    <p>クライアントのブラウザが接続もしくは切断した場合、タブが変更された場合、グループを拡大もしくは縮小した場合、次のプロパティを持つメッセージを送信します:</p>
+    <ul>
+    <li><code>payload</code> - <i>connect</i>、<i>lost</i>、<i>change</i>、もしくは<i>group</i>
+    <li><code>socketid</code> - ソケットID(ブラウザがページを再ロードする毎に変化します)
+    <li><code>socketip</code> - 接続元のIPアドレス,
+    <li><code>tab</code> - タブ番号 ('change'イベントのみ)
+    <li><code>name</code> - タブ名 ('change'イベントのみ)
+    <li><code>group</code> - グループ名 ('group'イベントのみ)
+    <li><code>open</code> - グループの状態 ('group'イベントのみ)
+    </ul>
+    <p>追加 - 「Connectイベントのみ」は新しいクライアントへのデータの再送を他のイベントをフィルタしないで行う場合に有用です。</p>
+</script>