Modified the time version to have size a bit dynamically changeable
[{"id":"bf8580a24000c55c","type":"ui_template","z":"bf0d83d32eec75c2","group":"674712f8d915bcc0","name":"display","order":5,"width":0,"height":0,"format":"<style>\n .roll-display {\n --size:4;\n display: flex;\n align-content: center;\n justify-content: flex-start;\n flex-direction: row;\n }\n .slot {\n height: calc(var(--size) * 1em);\n width: calc(var(--size) * .8em);\n text-align: center;\n line-height: calc(var(--size) * 1em);\n border: 4px solid #000000a3;\n border-radius: 6px;\n border-top-width: 8px;\n border-bottom-width: 8px;\n position: relative;\n overflow: hidden;\n background: linear-gradient(0deg, #5a5a5a, #b7b7b7,#5d5d5d);\n }\n .num{\n position:absolute;\n left: 0;\n right: 0;\n user-select:none;\n font-size:calc(var(--size) *.7em);\n background: linear-gradient(0deg, #0000005e, #4c4c4c42, #0000005e);\n } \n .current{ \n top:0em;\n transition: top 0.25s;\n }\n .old{\n top:calc(var(--size) * 1em);\n transition: top 0.25s;\n }\n .next{\n top:calc(var(--size) * -1em);\n transition: none;\n }\n .last > .num{\n \n background: linear-gradient(0deg, #53535300, #d5d5d52e, #53535300);\n color: #464646;\n font-weight: 700;\n \n }\n .gap {\n position:relative;\n width: 8px;\n }\n .gap:after {\n content:'•';\n position:absolute;\n bottom:0;\n color:#a4a4a4;\n }\n .label{\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding-right:1em;\n }\n</style>\n\n\n<div id=\"{{'slot_'+$id+'_0'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_1'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_2'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_3'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_4'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_5'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n\n<div id=\"{{'slot_'+$id+'_6'}}\" class=\"slot last\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_7'}}\" class=\"slot last\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n\n<script>\n (function(scope) {\n let lock = false\n scope.previous = [-1,-1,-1,-1,-1,-1,-1,-1]\n scope.drawlist = [true,true,true,true,true,true,true,true]\n scope.$watch('msg', function(msg) {\n if (msg) { \n\n let time = new Date(msg.payload).toTimeString().split(\" \")[0]\n console.log(time)\n\n if(lock){\n // console.log(\"locked\")\n lock = false\n return\n } \n // console.log(msg.payload)\n lock = true \n\n let data = time.split('')\n while(data.length < 8){\n data.unshift(0)\n }\n\n data.forEach((d,i) => \n {\n //d = parseInt(d)\n if(scope.previous[i] == d){\n scope.drawlist[i] = false\n }\n else{\n scope.previous[i] = d\n scope.drawlist[i] = true\n }\n\n })\n \n data.forEach((d,i) => {\n if(scope.drawlist[i] == false){\n return\n }\n let current = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".current\")\n let next = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".next\")\n let old = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".old\")\n\n if(next.length == 0 && old.length > 0){\n next = old\n next.removeClass(\"old\").addClass(\"next\")\n } \n\n next.text(data[i])\n current.removeClass(\"current\").addClass(\"old\").on('transitionend webkitTransitionEnd oTransitionEnd', function () {\n old = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".old\")\n old.removeClass(\"old\").addClass(\"next\")\n lock = false\n });\n next.removeClass(\"next\").addClass(\"current\")\n })\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"roll-display","x":580,"y":780,"wires":[[]]},{"id":"ee10705e762837ef","type":"inject","z":"bf0d83d32eec75c2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":430,"y":780,"wires":[["bf8580a24000c55c"]]},{"id":"674712f8d915bcc0","type":"ui_group","name":"1. group","tab":"62083694d0eab7ca","order":1,"disp":true,"width":"6","collapse":true,"className":"ordered-1"},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
