node-red-dashboard/nodes/ui_ui_control.html

A set of dashboard nodes for Node-RED

<script type="text/javascript">
    // convert to i18 text
    function c_(x) {
        return RED._("node-red-dashboard/ui_ui_control:ui_ui_control."+x);
    }

    RED.nodes.registerType('ui_ui_control', {
        category: c_("label.category"),
        color: 'rgb( 63, 173, 181)',
        defaults: {
            name: {value:""}
        },
        inputs:1,
        outputs:1,
        align: "right",
        icon: "ui_link.png",
        paletteLabel: 'ui control',
        label: function() { return this.name || "ui control"; },
        labelStyle: function() { return this.name?"node_label_italic":""; }
    });
</script>

<script type="text/x-red" data-template-name="ui_ui_control">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="ui_ui_control.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]ui_ui_control.placeholder.name">
    </div>
</script>

<script type="text/x-red" 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>Visibility of individual groups of widgets can controlled by a payload like
    <code>{group:{hide:["tab_name_group_name_with_underscores"], show:["reveal_another_group"], focus:true}}</code>
    where <b>focus</b> is optional and will cause the screen to scroll to show that group if required. 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 this node will emit a <code>msg</code> containing:</p>
    <ul>
    <li><code>payload</code> - <i>connect</i> or <i>lost</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.
    </ul>
</script>