I've been suggested to share my little project, so here it is.
I have a atmospheric pressure sensor and wanted to get a little weather prediction on my dashboard:
And here are the nodes used to get this:
[
{
"id": "1a7965f3b14b7163",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "f4ef17549bcdd8bf",
"type": "inject",
"z": "1a7965f3b14b7163",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "1009.54",
"payloadType": "str",
"x": 120,
"y": 180,
"wires": [
[
"48355c7d023f2b70",
"9499014ebc5d53b3",
"5139626cee6bf13b",
"6ed5d7e114155f42"
]
]
},
{
"id": "48355c7d023f2b70",
"type": "ui-gauge",
"z": "1a7965f3b14b7163",
"name": "ATM Press",
"group": "63cc085a2f9ed996",
"order": 4,
"width": "3",
"height": 3,
"gtype": "gauge-half",
"gstyle": "needle",
"title": "ATM Press",
"units": "hPa",
"icon": "",
"prefix": "",
"suffix": "",
"segments": [
{
"from": "980",
"color": "#0032ff"
},
{
"from": "1009",
"color": "#00ff32"
},
{
"from": "1026",
"color": "#ffbb00"
}
],
"min": "980",
"max": "1050",
"sizeThickness": 16,
"sizeGap": 4,
"sizeKeyThickness": 8,
"styleRounded": true,
"styleGlow": false,
"className": "",
"x": 330,
"y": 100,
"wires": []
},
{
"id": "9499014ebc5d53b3",
"type": "change",
"z": "1a7965f3b14b7163",
"name": "",
"rules": [
{
"t": "set",
"p": "press",
"pt": "global",
"to": "payload",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 700,
"y": 120,
"wires": [
[]
]
},
{
"id": "5139626cee6bf13b",
"type": "function",
"z": "1a7965f3b14b7163",
"name": "Trend calc",
"func": "var oldp = global.get(\"oldp\");\nmsg.payload = ((msg.payload - oldp) * 100).toFixed(0);\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 330,
"y": 160,
"wires": [
[
"5a6a8e3100cf5bf5",
"2d85289ff1258b48"
]
]
},
{
"id": "6ed5d7e114155f42",
"type": "change",
"z": "1a7965f3b14b7163",
"name": "",
"rules": [
{
"t": "set",
"p": "topic",
"pt": "msg",
"to": "pressure/old",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 330,
"y": 200,
"wires": [
[
"9b793199dcd5d16d"
]
]
},
{
"id": "5a6a8e3100cf5bf5",
"type": "ui-template",
"z": "1a7965f3b14b7163",
"group": "63cc085a2f9ed996",
"page": "",
"ui": "",
"name": "Trend",
"order": 9,
"width": 3,
"height": 0,
"head": "",
"format": "<template>\n <div class=\"panning-knob\">\n <label class=\"pan-label\">10m Trend (<span v-text=\"value\"></span>)</label>\n <input\n type=\"range\"\n min=\"-30\"\n max=\"30\"\n v-model=\"value\"\n @input=\"send(value)\"\n class=\"slider\"\n />\n <div class=\"pan-indicator\">\n <span :class=\"{ activeL: value < -10 }\">Rainy</span>\n <span :class=\"{ activeM: value >= -10 && value <= 10 }\">Stable</span>\n <span :class=\"{ activeR: value > 10 }\">Clearing</span>\n </div>\n </div>\n</template>\n\n<style scoped>\n .panning-knob {\n width: 320px;\n padding: 20px 10px 10px 10px;\n background: white;\n border-radius: 12px;\n //box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .pan-label {\n color: black;\n font-size: 14px;\n margin-bottom: 6px;\n letter-spacing: 1px;\n }\n\n .slider {\n width: 100%;\n margin: 0 0 8px 0;\n -webkit-appearance: none;\n background: linear-gradient(90deg, #2196f3 0%, #eee 50%, #f44336 100%);\n height: 8px;\n border-radius: 4px;\n outline: none;\n transition: background 0.3s;\n }\n\n .slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: green;\n border: 1px solid #333;\n cursor: pointer;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n transition: background 0.2s;\n }\n /* .triangle{\n width: 0;\n height: 0;\n border-top: 10px solid transparent;\n border-bottom: 10px solid transparent;\n border-right:10px solid blue;\n } */\n\n .slider::-moz-range-thumb {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: #ffeb3b;\n border: 2px solid #333;\n cursor: pointer;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n transition: background 0.2s;\n }\n\n .slider::-ms-thumb {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: #ffeb3b;\n border: 2px solid #333;\n cursor: pointer;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n transition: background 0.2s;\n }\n\n .slider:focus {\n outline: none;\n }\n\n .pan-indicator {\n display: flex;\n justify-content: space-between;\n width: 100%;\n font-size: 13px;\n color: #888;\n margin-top: 2px;\n }\n\n .pan-indicator span {\n flex: 1;\n text-align: center;\n font-weight: bold;\n opacity: 0.7;\n }\n\n .pan-indicator .activeL {\n color: blue;\n opacity: 1;\n }\n .pan-indicator .activeM {\n color: green;\n opacity: 1;\n }\n .pan-indicator .activeR {\n color: gold;\n opacity: 1;\n }\n</style>",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 510,
"y": 100,
"wires": [
[]
]
},
{
"id": "2d85289ff1258b48",
"type": "change",
"z": "1a7965f3b14b7163",
"name": "",
"rules": [
{
"t": "set",
"p": "trend",
"pt": "global",
"to": "payload",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 700,
"y": 160,
"wires": [
[]
]
},
{
"id": "9b793199dcd5d16d",
"type": "delay",
"z": "1a7965f3b14b7163",
"name": "",
"pauseType": "delay",
"timeout": "600",
"timeoutUnits": "seconds",
"rate": "1",
"nbRateUnits": "1",
"rateUnits": "second",
"randomFirst": "1",
"randomLast": "5",
"randomUnits": "seconds",
"drop": false,
"allowrate": false,
"outputs": 1,
"x": 510,
"y": 200,
"wires": [
[
"df4e064331e5892a"
]
]
},
{
"id": "df4e064331e5892a",
"type": "change",
"z": "1a7965f3b14b7163",
"name": "",
"rules": [
{
"t": "set",
"p": "oldp",
"pt": "global",
"to": "payload",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 700,
"y": 200,
"wires": [
[]
]
},
{
"id": "63cc085a2f9ed996",
"type": "ui-group",
"name": "Aer",
"page": "863c7875112d9869",
"width": "12",
"height": 1,
"order": 5,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "863c7875112d9869",
"type": "ui-page",
"name": "Home",
"ui": "5bd117d7db0d2853",
"path": "/page1",
"icon": "home",
"layout": "grid",
"theme": "bdb038ab42cbbbb6",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "3"
},
{
"name": "Tablet",
"px": "576",
"cols": "6"
},
{
"name": "Small Desktop",
"px": "768",
"cols": "9"
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 1,
"className": "",
"visible": true,
"disabled": false
},
{
"id": "5bd117d7db0d2853",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"headerContent": "page",
"navigationStyle": "temporary",
"titleBarStyle": "default",
"showReconnectNotification": true,
"notificationDisplayTime": 1,
"showDisconnectNotification": true,
"allowInstall": true
},
{
"id": "bdb038ab42cbbbb6",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#ffffff",
"primary": "#0094CE",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"density": "default",
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]
