a dashboard item to show a light on and off?

[Claudio Francesconi]

i am looking for a graphic object to output a boolean... like a light turned on and off

or a door open and closed... actually the switch is working good as an input but i need an output

could u help me?

sorry, i know i m noob

[Sebastian Barwe]

this thread may give you ideas

https://groups.google.com/d/msg/node-red/Id4alWd9KJ0/F45_znOjAgAJ

[Claudio Francesconi]

thanks alot

[Claudio Francesconi]

you know what...

this is much more than what i needed

it adds the button (input) functionality and i totally dont need that... all i need is much more simple, just an output status ... but it's working pretty good, i am trying to cut off the button part :)

Il giorno mercoledì 29 marzo 2017 21:42:37 UTC+2, Sebastian Barwe ha scritto:

[Glenn]

I use an image button and use a switch to display the in off image depending on payload can post code later if you like

[Claudio Francesconi]

yes please

in the meantime i've realized this

and it's not bad

[

    {

        "id": "492aa865.9389b8",

        "type": "function",

        "z": "6f7e8e52.293d5",

        "name": "",

        "func": "if (msg.payload==\"APERTO\") msg.payload=1\nif (msg.payload==\"CHIUSO\") msg.payload=0\nreturn msg;",

        "outputs": 1,

        "noerr": 0,

        "x": 367,

        "y": 699,

        "wires": [

            [

                "932cf979.3ae228"

            ]

        ]

    },

    {

        "id": "70bafe58.15f8d",

        "type": "mqtt in",

        "z": "6f7e8e52.293d5",

        "name": "Cancello",

        "topic": "cancello",

        "qos": "1",

        "broker": "4ac4cc8.c8f2b34",

        "x": 185,

        "y": 701,

        "wires": [

            [

                "492aa865.9389b8"

            ]

        ]

    },

    {

        "id": "932cf979.3ae228",

        "type": "ui_template",

        "z": "6f7e8e52.293d5",

        "group": "22502c81.0edf14",

        "name": "Cancello",

        "order": 0,

        "width": "4",

        "height": "1",

        "format": "\n<style>\n\ncancello {\n\tbackground-color:#0A0;\n\t/* border-radius:10px;\n    padding:1em 1em; */\n\tfont-size:1.3em;\n\tfont-weight:800;\n\theight:100%;\n\twidth:100%;\n    position: relative;\n    vertical-align:middle;\n\ttext-align:center;\n}\n\n</style>\n\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js\"></script> \n\n<cancello>\n    \n<div ng-style=\"{color: (msg.payload || 0) % 2 === 0 ? '#060' : 'red'}\">\n{{msg.payload == '0' ? 'CANCELLO CHIUSO' : 'CANCELLO APERTO'}}\n<ng-md-icon icon=\"home\" size=\"50\"></ng-md-icon> \n</div>\n\n</cancello>\n\n",

        "storeOutMessages": true,

        "fwdInMessages": true,

        "x": 561.5,

        "y": 788,

        "wires": [

            []

        ]

    },

    {

        "id": "4ac4cc8.c8f2b34",

        "type": "mqtt-broker",

        "z": "",

        "broker": "192.168.1.35",

        "port": "1883",

        "clientid": "",

        "usetls": false,

        "compatmode": true,

        "keepalive": "60",

        "cleansession": true,

        "willTopic": "",

        "willQos": "0",

        "willPayload": "",

        "birthTopic": "",

        "birthQos": "0",

        "birthPayload": ""

    },

    {

        "id": "22502c81.0edf14",

        "type": "ui_group",

        "z": "",

        "name": "Cancello",

        "tab": "db48b26.7a1565",

        "disp": false,

        "width": "4"

    },

    {

        "id": "db48b26.7a1565",

        "type": "ui_tab",

        "z": "",

        "name": "Pulsanti",

        "icon": "dashboard",

        "order": 2

    }

]

i m just gettin crazy to align vertically centered the text and the image

[Dave C-J]

Claudio,

Just delete the switch node and redeploy. 

sent from phone

[Lestat De la Morte]

try this in a ui template, input your payload where you see "put your payload here" 

 It's from a collection from people here in this forum (Thanks Mr Scargill and All), i just modified the input part 'cos i don't need it either.

it look like this, it goes from red to green on message payload and dispay ON OFF but you can change it as you like. i resized it a bit too....

<md-button class="vibrate filled touched bigfont rounded" style="background-color:#333333" >

<svg  width="60px" height="60px" version="1.1" 

viewBox="0 0 76 76">

 <g id="Button_1">

  <rect fill="#4B4B4D" width="76" height="76"/>

  <polygon fill="#1A1A1A" stroke="black" stroke-width="0.380524" points="72,72 4,72 0,76 76,76 76,0 72,4 "/>

  <polygon fill="#848688" points="4,4 72,4 76,0 0,0 0,76 4,72 "/>

  <circle fill="none" stroke="#FFF212" stroke-width="1.8" cx="38" cy="38" r="29"/>

    <g ng-style="{fill:msg.payload ==='put your payload here' ? 'green' : 'red'}">

      <circle  cx="38" cy="38" r="26" />

    </g>

  <line fill="none" stroke="#E6E7E8" stroke-width="0.380524" x1="0" y1="0" x2="4" y2= "4" />

  <polyline fill="none" stroke="#D2D3D5" stroke-width="0.380524" points="4,72 4,4 72,4 "/>

  <g ng-style="{fill:msg.payload === 'put your payload here' ? 'none' : '#FEFEFE'}">

    <text x="37" y="44" style="text-anchor:middle" font-weight="normal" font-size="19.0185" font-family="Droid Sans">OFF</text>

  </g>

  <g ng-style="{fill:msg.payload === 'put your payload here' ? '#FEFEFE' : 'none'}">

    <text x="37" y="44" style="text-anchor:middle" font-weight="normal" font-size="19.0185" font-family="Droid Sans">ON</text>

  </g>

 </g>

</svg>

</md-button>Saisissez le code ici...

 Enjoy.

[Claudio Francesconi]

just in case someone needs

i fixed my interface like this:

and it's working perfectly:

takes a value from a MQTT... and from the click itself also... and output to another MQTT topic....

it was difficult to make because of a funky loop effect.

this is the code:

[{"id":"27a314d7.224b2c","type":"ui_template","z":"b61fe67e.0c9f08","group":"22502c81.0edf14","name":"ALLARME INTRUSIONE","order":2,"width":"4","height":"1","format":"<!DOCTYPE html>\n\n<style>\n:focus {\noutline: 0;\n}\nmd-button45{\n    background-color:#0A0;\n\twidth: 100%; \n\theight: 100%;\n    line-height: 30px;\t\t\n    cursor:pointer;\n    color:#020;\n    font-weight:800;\n    font-size:1.4em;\n    text-align:center;\t\n}\nmd-button45:hover {\n\tbackground:#0C0;\n\tfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#415989', endColorstr='#2e466e',GradientType=0);\n\tbackground-color:#0C0;\n}\nmd-button45:active {\n\tposition:relative;\n\ttop:1px;\n}\n</style>\n\n<md-button45\n    ng-style=\"{background: msg.payload=='1' ?'red':'transparrent'}\"\n    ng-click=\"msg.payload = (msg.payload=='0' ? '1' : '0'); send(msg) \"\n>\n{{msg.payload == '0' ? 'ALLARME OFF' : 'ALLARME ATTIVO'}}\n</md-button45>","storeOutMessages":true,"fwdInMessages":true,"x":475,"y":310,"wires":[["f57f54c5.fa29a8"]]},{"id":"7c2a4f09.c1dbb","type":"function","z":"b61fe67e.0c9f08","name":"","func":"if (msg.payload==\"ATTIVO\") msg.payload=1\nif (msg.payload==\"DISATTIVATO\") msg.payload=0\nreturn msg;","outputs":1,"noerr":0,"x":272,"y":392,"wires":[["27a314d7.224b2c"]]},{"id":"d47d6b05.3a44f8","type":"mqtt in","z":"b61fe67e.0c9f08","name":"Allarme IN","topic":"allarmeintrusione","qos":"2","broker":"4ac4cc8.c8f2b34","x":129,"y":310,"wires":[["7c2a4f09.c1dbb"]]},{"id":"f57f54c5.fa29a8","type":"mqtt out","z":"b61fe67e.0c9f08","name":"Allarme OUT","topic":"allarmeclick","qos":"1","retain":"","broker":"4ac4cc8.c8f2b34","x":786,"y":360,"wires":[]},{"id":"22502c81.0edf14","type":"ui_group","z":"","name":"Cancello","tab":"db48b26.7a1565","disp":false,"width":"4"},{"id":"4ac4cc8.c8f2b34","type":"mqtt-broker","z":"","broker":"192.168.1.35","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willPayload":"","birthTopic":"","birthQos":"0","birthPayload":""},{"id":"db48b26.7a1565","type":"ui_tab","z":"","name":"Cancello","icon":"dashboard","order":2}]

[Colin Law]

You may want to clear the checkbox 'Pass through messages from input.' to stop the mqtt loop.  Then the input from mqtt will not be passed on the output.

Colin

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/532b156f-db0e-487b-947a-84b4cdb7d497%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Glenn]

Here is how I do it.

If you simply want to change the colour use the style element

<md-button class="md-icon-button" aria-label="repeat" ng-click="msg.payload.playMode.repeat === 'none' ? send({payload: 'repeaton'}) : send({payload: 'repeatoff'})">
        <md-icon md-svg-icon="/playback/repeat.svg" ng-style="msg.payload.playMode.repeat =='none' ? { 'color':'#fff'} : { 'color': '#536dfe' }"></md-icon>
    </md-button>

If you want to have a different icon you can do something like this

    <md-button class="md-fab md-primary md-hue-2" aria-label="PlayStop" ng-click="send({payload: 'playpause'})">
        <md-icon md-svg-icon="/playback/{{msg.payload.playbackState=='PLAYING' ? 'stop' : 'play'}}.svg" class="plain-icon"></md-icon>
    </md-button>

So it does a if playing display stop icon otherwise display play icon and the first example displays a white icon if repeat is off and a coloured icon if it is on

[Claudio Francesconi]

i m sorry but i think it's not workin for me, would u be so kind to send a short flow with it?

thanx

[Claudio Francesconi]

BY THE WAY

is there any chance to have a button that changes its label (and payload) when a boolean MQTT message comes?

[Glenn]

You can change everything. so that if true label one if false label two or use a switch statement.

I am using the node-red template node might not work without my icons but change that around and have a look

Enter code here...[
    {
        "id": "a8556b3.6733c98",
        "type": "tab",
        "label": "Flow 2"
    },
    {
        "id": "fc9e1ac8.bbd95",
        "type": "ui_template",
        "z": "a8556b3.6733c98",
        "group": "e933f497.a6c188",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<md-button class=\"md-icon-button\" aria-label=\"repeat\" ng-click=\"msg.payload.playMode.repeat === 'none' ? send({payload: 'repeaton'}) : send({payload: 'repeatoff'})\">\n        <md-icon md-svg-icon=\"/playback/repeat.svg\" ng-style=\"msg.payload =='none' ? { 'color':'#fff'} : { 'color': '#536dfe' }\"></md-icon>\n    </md-button>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "x": 460,
        "y": 420,
        "wires": [
            []
        ]
    },
    {
        "id": "c370d49e.425498",
        "type": "inject",
        "z": "a8556b3.6733c98",
        "name": "",
        "topic": "",
        "payload": "repeat",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": true,
        "x": 250,
        "y": 420,
        "wires": [
            [
                "fc9e1ac8.bbd95"
            ]
        ]
    },
    {
        "id": "2fc7c9a0.f0e43e",
        "type": "inject",
        "z": "a8556b3.6733c98",
        "name": "",
        "topic": "",
        "payload": "PLAYING",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": true,
        "x": 260,
        "y": 500,
        "wires": [
            [
                "19abf506.eef56b"
            ]
        ]
    },
    {
        "id": "19abf506.eef56b",
        "type": "ui_template",
        "z": "a8556b3.6733c98",
        "group": "e933f497.a6c188",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "    <md-button class=\"md-fab md-primary md-hue-2\" aria-label=\"PlayStop\" ng-click=\"send({payload: 'playpause'})\">\n        <md-icon md-svg-icon=\"/playback/{{msg.payload=='PLAYING' ? 'stop' : 'play'}}.svg\" class=\"plain-icon\"></md-icon>\n    </md-button>\n    \n    ",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "x": 460,
        "y": 500,
        "wires": [
            []
        ]
    },
    {
        "id": "e933f497.a6c188",

        "type": "ui_group",
        "z": "",

        "name": "Default",
        "tab": "ecf72197.c13a78",
        "disp": true,
        "width": "6"
    },
    {
        "id": "ecf72197.c13a78",

        "type": "ui_tab",
        "z": "",

        "name": "test2",
        "icon": "dashboard"
    }
]

 

[Claudio Francesconi]

yep

unfortunately i don't see any icons... just 2 circles (one bigger)

by the way

is there any chance to change the layout of a normal dashboard button? i mean the text size for example.