Skip to content

Instantly share code, notes, and snippets.

@Hugobox
Last active January 10, 2020 14:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hugobox/faf911189f9bbdfe0525ebaf77cae16e to your computer and use it in GitHub Desktop.
Save Hugobox/faf911189f9bbdfe0525ebaf77cae16e to your computer and use it in GitHub Desktop.
Automated "motorized" fader slider

This flow allows to automate the fading of a vertical slider. You can specify the target value via the payload and the time to get it there via the topic.

This is an improvement over the "Slick vertical slider" available here: https://flows.nodered.org/flow/4b2ebe373bcac34e6b18be998bb47f93

<style> input[type='range'].sliderH { margin-top: 60px; width: 80px; height: 240px; padding: 0; overflow: unset; cursor: grab; } input[type='range'].sliderV { transform: rotateZ(-90deg); margin-top: 60px; margin-bottom: 120px; writing-mode: bt-lr; width: 80%; padding: 0; overflow: unset; cursor: grab; height: 8px; margin-left: -100px; } .size1x6 { height: 8px !important; margin-left: -100px !important; } .size2x6 { height: 13px !important; margin-left: -80px !important; } .size1x6::-webkit-slider-thumb { height: 23px !important; width: 42px !important; } .size2x6::-webkit-slider-thumb{ height: 43px !important; width: 72px !important; } @media screen and (-webkit-min-device-pixel-ratio: 0) { input[type='range'].sliderH { -webkit-appearance: none; width: 240px; height: 10px; margin-top: 30px; margin-left: 30px; outline: 0; border-radius: 5px; background-color: #0b0b0b; box-shadow: inset 1px 1px 0 1px #6d6d6d; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { input[type='range'].sliderV { -webkit-appearance: none; -webkit-transform: rotate(270deg); width: 240px; height: 10px; margin-top: 140px; outline: 0; border-radius: 5px; background-color: #0b0b0b; box-shadow: inset 1px 1px 0 1px #6d6d6d; } } input[type='range']::-ms-track { width: 10px; height: 240px; border-radius: 5px; background-color: #0b0b0b; box-shadow: inset 1px 1px 0 1px #6d6d6d; border: 0; } input[type='range']::-moz-range-track { transform: rotateZ(-90deg); width: 10px; height: 240px; border-radius: 5px; background-color: #0b0b0b; box-shadow: inset 1px 1px 0 1px #6d6d6d; border: 0; } input[type='range']::-webkit-slider-thumb { width: 72px; height: 32px; -webkit-appearance: none; background-image: -webkit-linear-gradient(left, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e); box-shadow: 5px -10px 20px 0 #1a1a1a; } input[type='range']::-ms-thumb { width: 32px; height: 72px; border: 0; box-shadow: -10px -5px 20px 0 #1a1a1a; background-image: -ms-linear-gradient(bottom, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e); } input[type='range']::-ms-tooltip { display: none; } input[type='range']::-moz-range-thumb { width: 32px; height: 72px; border: 0; box-shadow: -10px -5px 20px 0 #1a1a1a; background-image: -moz-linear-gradient(bottom, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e); border-radius: 0; transform: rotateZ(-90deg); } </style>
[
{
"id": "1b8b9c39.cd5d94",
"type": "function",
"z": "37969d68.c02a22",
"name": "autofade",
"func": "let fadestep = context.get(\"fadestep\")\nlet level = context.get(\"level\") || 0\nlet step = 1\nlet target = msg.payload || 0\nlet timing = msg.topic*1000/(Math.abs(target - level)) || 0\n\nfunction fade(step,target) {\n if (level != target){\n level = level + step\n context.set(\"level\",level)\n //node.warn(\"target: \" + target + \" level: \" + level)\n }\n msg.payload = level\n node.send(msg)\n \n if (level === target){\n clearTimeout(fadestep);\n return;\n }\n}\n\nif (msg.hasOwnProperty(\"feedback\")){ // if message comes from front-end\n context.set(\"level\",msg.feedback)\n if (msg.hasOwnProperty(\"socketid\")){ // if message is a manual input from dashboard\n clearTimeout(fadestep); //stop fading\n }\n}else{\n clearTimeout(fadestep);\n target = msg.payload\n if (level < target){\n step = 1\n }else{\n step = -1\n }\n if (!msg.topic || msg.topic === \"0\"){\n level = msg.payload\n context.set(\"level\",level)\n return msg;\n }else{\n fadestep = setInterval(function(){ fade(step,target)}, timing);\n context.set(\"fadestep\",fadestep)\n }\n \n}\n\n",
"outputs": 1,
"noerr": 0,
"x": 487,
"y": 211,
"wires": [
[
"49736d54.086f64"
]
]
},
{
"id": "d1a17c2f.b549b",
"type": "change",
"z": "37969d68.c02a22",
"name": "feedback",
"rules": [
{
"t": "set",
"p": "feedback",
"pt": "msg",
"to": "payload",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 542,
"y": 262,
"wires": [
[
"1b8b9c39.cd5d94"
]
]
},
{
"id": "cca5c785.de9bb8",
"type": "debug",
"z": "37969d68.c02a22",
"name": "",
"active": true,
"tosidebar": false,
"console": false,
"tostatus": true,
"complete": "payload",
"targetType": "msg",
"x": 781,
"y": 214,
"wires": []
},
{
"id": "49736d54.086f64",
"type": "ui_template",
"z": "37969d68.c02a22",
"group": "",
"name": "fader",
"order": 4,
"width": "2",
"height": "6",
"format": "<div style=\"text-align: center;font-weight: bold;\">Light Master</div>\n<input class=\"sliderV size2x6\" type=\"range\" min=0 max=255 step=1 ng-model=\"msg.payload\" aria-label=\"volume\" ng-change=\"output(msg)\">\n\n<script>\n(function($scope) {\n $scope.output = function(key) {\n if ($scope.hasOwnProperty(\"msg\")){\n if ($scope.msg.hasOwnProperty(\"socketid\") || $scope.msg.payload !== 128){ //this prevents output at 50% from initialization on ng-change\n\t\t $scope.send({payload:$scope.msg.payload, socketid:$scope.msg.socketid});\n }\n }\n \n };\n})(scope);\n</script>\n\n<style>\ninput[type='range'].sliderH {\n margin-top: 60px;\n width: 80px;\n height: 240px;\n padding: 0;\n overflow: unset;\n cursor: grab;\n}\ninput[type='range'].sliderV {\n transform: rotateZ(-90deg);\n margin-top: 60px;\n writing-mode: bt-lr;\n width: 80%;\n padding: 0;\n overflow: unset;\n cursor: grab;\n height: 8px;\n margin-left: -100px;\n}\n.size1x6 {\n height: 8px !important;\n margin-left: -100px !important;\n}\n.size2x6 {\n height: 13px !important;\n margin-left: -80px !important;\n}\n.size1x6::-webkit-slider-thumb {\n height: 23px !important;\n width: 42px !important;\n}\n.size2x6::-webkit-slider-thumb{\n height: 43px !important;\n width: 72px !important;\n}\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n input[type='range'].sliderH {\n -webkit-appearance: none;\n width: 240px;\n height: 10px;\n margin-top: 30px;\n margin-left: 30px;\n outline: 0;\n border-radius: 5px;\n background-color: #0b0b0b;\n box-shadow: inset 1px 1px 0 1px #6d6d6d;\n }\n}\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n input[type='range'].sliderV {\n -webkit-appearance: none;\n -webkit-transform: rotate(270deg);\n width: 240px;\n height: 10px;\n margin-top: 140px;\n outline: 0;\n border-radius: 5px;\n background-color: #0b0b0b;\n box-shadow: inset 1px 1px 0 1px #6d6d6d;\n }\n}\ninput[type='range']::-ms-track {\n width: 10px;\n height: 240px;\n border-radius: 5px;\n background-color: #0b0b0b;\n box-shadow: inset 1px 1px 0 1px #6d6d6d;\n border: 0;\n}\ninput[type='range']::-moz-range-track {\n transform: rotateZ(-90deg);\n width: 10px;\n height: 240px;\n border-radius: 5px;\n background-color: #0b0b0b;\n box-shadow: inset 1px 1px 0 1px #6d6d6d;\n border: 0;\n}\ninput[type='range']::-webkit-slider-thumb {\n width: 72px;\n height: 32px;\n -webkit-appearance: none;\n background-image: -webkit-linear-gradient(left, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e);\n box-shadow: 5px -1px 10px 0 #1a1a1a;\n}\ninput[type='range']::-ms-thumb {\n width: 32px;\n height: 72px;\n border: 0;\n box-shadow: 5px -1px 10px 0 #1a1a1a;\n background-image: -ms-linear-gradient(bottom, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e);\n}\ninput[type='range']::-ms-tooltip {\n display: none;\n}\ninput[type='range']::-moz-range-thumb {\n width: 32px;\n height: 72px;\n border: 0;\n box-shadow: 5px -1px 10px 0 #1a1a1a;\n background-image: -moz-linear-gradient(bottom, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e);\n border-radius: 0;\n transform: rotateZ(-90deg);\n}\n</style>",
"storeOutMessages": true,
"fwdInMessages": true,
"templateScope": "local",
"x": 614.5,
"y": 211,
"wires": [
[
"d1a17c2f.b549b",
"cca5c785.de9bb8"
]
]
},
{
"id": "36f4e79f.503238",
"type": "inject",
"z": "37969d68.c02a22",
"name": "",
"topic": "1",
"payload": "255",
"payloadType": "num",
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"x": 281,
"y": 117,
"wires": [
[
"1b8b9c39.cd5d94"
]
]
},
{
"id": "2653f503.1b0d3a",
"type": "inject",
"z": "37969d68.c02a22",
"name": "",
"topic": "2",
"payload": "0",
"payloadType": "num",
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"x": 285,
"y": 158,
"wires": [
[
"1b8b9c39.cd5d94"
]
]
},
{
"id": "a3cb9449.c1d878",
"type": "inject",
"z": "37969d68.c02a22",
"name": "",
"topic": "3",
"payload": "200",
"payloadType": "num",
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"x": 285,
"y": 199,
"wires": [
[
"1b8b9c39.cd5d94"
]
]
},
{
"id": "40182633.c90508",
"type": "inject",
"z": "37969d68.c02a22",
"name": "",
"topic": "4",
"payload": "127",
"payloadType": "num",
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"x": 285,
"y": 235,
"wires": [
[
"1b8b9c39.cd5d94"
]
]
},
{
"id": "ce43c985.bed7b8",
"type": "inject",
"z": "37969d68.c02a22",
"name": "",
"topic": "0",
"payload": "40",
"payloadType": "num",
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"x": 287,
"y": 359,
"wires": [
[
"1b8b9c39.cd5d94"
]
]
},
{
"id": "1dad0ba3.d96794",
"type": "inject",
"z": "37969d68.c02a22",
"name": "",
"topic": "10",
"payload": "255",
"payloadType": "num",
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"x": 284,
"y": 276,
"wires": [
[
"1b8b9c39.cd5d94"
]
]
},
{
"id": "b6e16766.9fd428",
"type": "comment",
"z": "37969d68.c02a22",
"name": "payload is slider target value, topic is fading time in seconds",
"info": "",
"x": 427,
"y": 73,
"wires": []
},
{
"id": "c6b3f12a.1b00a",
"type": "comment",
"z": "37969d68.c02a22",
"name": "no topic or topic of \"0\" trigers instant change of slider",
"info": "",
"x": 397,
"y": 320,
"wires": []
},
{
"id": "eeef8bce.a93cf8",
"type": "inject",
"z": "37969d68.c02a22",
"name": "",
"topic": "",
"payload": "230",
"payloadType": "num",
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"x": 282,
"y": 399,
"wires": [
[
"1b8b9c39.cd5d94"
]
]
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment