Hello,
i have done this timekeeper starting from github code, the strange thing is some time is working and sometime not, the field are displayed but the editing not. not every time, seem not realted to the browser, but making deploy more time in same case start to run. I'm not so expert in code, can anyone check if there is any concept error in html / javascript ?
thank in advance.
r.
[
{
"id": "5b205c9414353ac5",
"type": "tab",
"label": "Flow 2",
"disabled": false,
"info": "",
"env": []
},
{
"id": "ae119afba03b35d4",
"type": "debug",
"z": "5b205c9414353ac5",
"name": "debug 87",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 720,
"y": 220,
"wires": []
},
{
"id": "897358a91fa3edc3",
"type": "ui_template",
"z": "5b205c9414353ac5",
"group": "e89b87ae89095b54",
"name": "mytimepicker",
"order": 1,
"width": "8",
"height": "8",
"format": "<html>\n<script type=\"text/javascript\">\n $(document).ready(function() {\n $('.standard').clockTimePicker();\n});\n</script>\n<script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n<script src=\"https://unpkg.com/jquery-clock-timepicker@2.2.0/jquery-clock-timepicker.min.js\"></script>\n\n<style type=\"text/css\">\n .main {\n text-align: center;\n }\n .time {\n display: flex;\n font-size: 18px;\n padding: 5px;\n text-align: center;\n width: 94px;\n margin-top: 5px;\n }\n</style>\n<style type=\"text/css\">\n .clock-timepicker input {\n caret-color: transparent;\n }\n</style>\n\n<body>\n <div class=\"main\">\n <div class=\"clock-timepicker\" style=\"display:inline-block; position:relative\"><input class=\"time standard\" type=\"text\" value=\"10:15\" onchange=\"console.log('Time changed to: ' + this.value)\" style=\"min-width: 94px;\" autocomplete=\"off\" autocapitalize=\"none\" spellcheck=\"false\">\n <div class=\"clock-timepicker-autosize\"\n style=\"position: absolute; opacity: 0; display: none; top: 5px; left: 0px; font-size: 26px; font-family: MS Shell Dlg \\32 ; font-weight: 400; line-height: normal;\">\n 10</div>\n <div class=\"clock-timepicker-popup\"\n style=\"display: none; z-index: 99999; cursor: default; position: fixed; width: 200px; background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 20px 0px; border-radius: 5px; overflow: hidden; user-select: none; visibility: visible; left: 799px; top: 366.4px;\">\n <div style=\"position: relative; width: 180px; height: 180px; margin: 10px;\"><canvas\n class=\"clock-timepicker-hour-canvas\"\n style=\"cursor: default; position: absolute; top: 0px; left: 0px; zoom: 100%; display: block; opacity: 1; z-index: 1;\"\n width=\"180\" height=\"180\"></canvas><canvas class=\"clock-timepicker-minute-canvas\"\n style=\"cursor: default; position: absolute; top: 0px; left: 0px; display: block; zoom: 100%; opacity: 1; z-index: 1;\"\n width=\"180\" height=\"180\"></canvas></div>\n </div>\n </div>\n </div>\n\n</body>\n\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n $(' .clock-timepicker input').clockTimePicker('value', '08:00');\n }\n });\n\n\n })(scope);\n</script>\n\n\n</html>",
"storeOutMessages": true,
"fwdInMessages": false,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 490,
"y": 220,
"wires": [
[
"ae119afba03b35d4"
]
]
},
{
"id": "e1fa1948696528c8",
"type": "inject",
"z": "5b205c9414353ac5",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 240,
"y": 220,
"wires": [
[
"897358a91fa3edc3",
"a9f4f8b42930fdc4"
]
]
},
{
"id": "a9f4f8b42930fdc4",
"type": "ui_template",
"z": "5b205c9414353ac5",
"d": true,
"group": "e89b87ae89095b54",
"name": "mytimepicker",
"order": 1,
"width": "8",
"height": "8",
"format": "<html>\n\n<script type=\"text/javascript\">\n $(document).ready(function() {\n $('.standard').clockTimePicker();\n});\n</script>\n<script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n<script src=\"https://unpkg.com/jquery-clock-timepicker@2.2.0/jquery-clock-timepicker.min.js\"></script>\n\n<style type=\"text/css\">\n .main {\n text-align: center;\n }\n .time {\n display: flex;\n font-size: 18px;\n padding: 5px;\n text-align: center;\n width: 94px;\n margin-top: 5px;\n }\n</style>\n<style type=\"text/css\">\n .clock-timepicker input {\n caret-color: transparent;\n }\n</style>\n\n<body>\n <div class=\"main\">\n <div class=\"clock-timepicker\" style=\"display:inline-block; position:relative\"><input class=\"time standard\" type=\"text\" value=\"10:15\" onchange=\"console.log('Time changed to: ' + this.value)\" style=\"min-width: 94px;\" autocomplete=\"off\" autocapitalize=\"none\" spellcheck=\"false\">\n <div class=\"clock-timepicker-autosize\"\n style=\"position: absolute; opacity: 0; display: none; top: 5px; left: 0px; font-size: 26px; font-family: MS Shell Dlg \\32 ; font-weight: 400; line-height: normal;\">\n 10</div>\n <div class=\"clock-timepicker-popup\"\n style=\"display: none; z-index: 99999; cursor: default; position: fixed; width: 200px; background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 20px 0px; border-radius: 5px; overflow: hidden; user-select: none; visibility: visible; left: 799px; top: 366.4px;\">\n <div style=\"position: relative; width: 180px; height: 180px; margin: 10px;\"><canvas\n class=\"clock-timepicker-hour-canvas\"\n style=\"cursor: default; position: absolute; top: 0px; left: 0px; zoom: 100%; display: block; opacity: 1; z-index: 1;\"\n width=\"180\" height=\"180\"></canvas><canvas class=\"clock-timepicker-minute-canvas\"\n style=\"cursor: default; position: absolute; top: 0px; left: 0px; display: block; zoom: 100%; opacity: 1; z-index: 1;\"\n width=\"180\" height=\"180\"></canvas></div>\n </div>\n </div>\n </div>\n\n</body>\n\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n $(' .clock-timepicker input').clockTimePicker('value', '08:00');\n }\n });\n\n\n })(scope);\n</script>\n\n\n</html>",
"storeOutMessages": true,
"fwdInMessages": false,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 490,
"y": 120,
"wires": [
[
"ae119afba03b35d4"
]
]
},
{
"id": "e89b87ae89095b54",
"type": "ui_group",
"name": "Clock",
"tab": "debd57ea971062c2",
"order": 1,
"disp": true,
"width": "10",
"collapse": false,
"className": ""
},
{
"id": "debd57ea971062c2",
"type": "ui_tab",
"name": "Animated clock",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
