Can someone explain me how can i use like this code (CSS+JS+HTML) in Node-Red?
To use in dasboard you would add all the code to a ui-template node. You would need to edit the function part if you want the template to send messages. Read the help text to see how that would be done.
template layout.
<style>
css
</style>
html
<script>
js
</script>
1 Like
Tnx for answer.
i did it what did u say ..
but there is a problem..
The knob look like that without function..
Copy all is most often wrong advise. You'll need to copy only what is necessary for that element.
And even then, the container where you put the copy is not mostly same so the outcome may vary.
1 Like
Knob.txt (8.2 KB)
i have cleaned up the code a bit but the code still doesn't work and i can't understand what's wrong....
The copy from codepen brings something what ui_template does not like and it messes up the script.
Did a cleanup for you but also removed all comments so if you need them back, do compare with original.
[{"id":"fd84f8b527ec0681","type":"ui_template","z":"09deee63c1b960f7","group":"08ac9b242ae51e8c","name":"volume knob","order":1,"width":0,"height":0,"format":"<div class=\"body\">\n <p>Current volume: <span id=\"volumeValue\" class=\"current-value\">0%</span></p>\n <div class=\"knob-surround\">\n\n <div id=\"knob\" class=\"knob\"></div>\n\n <span class=\"min\">Min</span>\n <span class=\"max\">Max</span>\n\n <div id=\"tickContainer\" class=\"ticks\"></div>\n\n\n\n\n <style>\n @font-face {\n font-family: 'Open Sans';\n font-style: normal;\n font-weight: 300;\n src: local('Open Sans Light'), local('OpenSans-Light'),\n url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');\n }\n\n @font-face {\n font-family: 'Varela Round';\n font-style: normal;\n font-weight: 400;\n src: local('Varela Round Regular'), local('VarelaRound-Regular'),\n url(https://fonts.gstatic.com/s/varelaround/v13/w8gdH283Tvk__Lua32TysjIfp8uK.ttf) format('truetype');\n }\n\n body {\n background-color: #181818;\n font-size: 100%;\n font-family: \"Open Sans\", sans-serif;\n color: #aaa;\n text-align: center;\n user-select: none;\n }\n\n .cd__main {\n display: block !important;\n }\n\n .body {\n width: 100%;\n height: 100%;\n background-color: black;\n }\n\n .knob-surround {\n position: relative;\n background-color: grey;\n width: 14em;\n height: 14em;\n border-radius: 50%;\n border: solid 0.25em #0e0e0e;\n margin: 5em auto;\n background: #181818;\n background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #1d1d1d), color-stop(1, #131313));\n background: -ms-linear-gradient(bottom, #1d1d1d, #131313);\n background: -moz-linear-gradient(center bottom, #1d1d1d 0%, #131313 100%);\n background: -o-linear-gradient(#131313, #1d1d1d);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#131313', endColorstr='#1d1d1d', GradientType=0);\n -webkit-box-shadow: 0 0.2em 0.1em 0.05em rgba(255, 255, 255, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset,\n 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);\n -moz-box-shadow: 0 0.2em 0.1em 0.05em rgba(255, 255, 255, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset, 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);\n box-shadow: 0 0.2em 0.1em 0.05em rgba(255, 255, 255, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset, 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);\n }\n\n .knob {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n -webkit-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n -ms-transform: rotate(0deg);\n transform: rotate(0deg);\n z-index: 10;\n }\n\n .knob:before {\n content: \"\";\n position: absolute;\n bottom: 19%;\n left: 19%;\n width: 3%;\n height: 3%;\n background-color: #a8d8f8;\n border-radius: 50%;\n -webkit-box-shadow: 0 0 0.4em 0 #79c3f4;\n -moz-box-shadow: 0 0 0.4em 0 #79c3f4;\n box-shadow: 0 0 0.4em 0 #79c3f4;\n }\n\n .min,\n .max {\n display: block;\n font-family: \"Varela Round\", sans-serif;\n color: rgba(255, 255, 255, 0.4);\n text-transform: uppercase;\n -webkit-font-smoothing: antialiased;\n font-size: 70%;\n position: absolute;\n opacity: 0.5;\n }\n\n .min {\n bottom: 1em;\n left: -2.5em;\n }\n\n .max {\n bottom: 1em;\n right: -2.5em;\n }\n\n .tick {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 5;\n overflow: visible;\n }\n\n .tick:after {\n content: \"\";\n width: 0.08em;\n height: 0.6em;\n background-color: rgba(255, 255, 255, 0.2);\n position: absolute;\n top: -1.5em;\n left: 50%;\n -webkit-transition: all 180ms ease-out;\n -moz-transition: all 180ms ease-out;\n -o-transition: all 180ms ease-out;\n transition: all 180ms ease-out;\n }\n\n .activetick:after {\n background-color: #a8d8f8;\n -webkit-box-shadow: 0 0 0.3em 0.08em #79c3f4;\n -moz-box-shadow: 0 0 0.3em 0.08em #79c3f4;\n box-shadow: 0 0 0.3em 0.08em #79c3f4;\n -webkit-transition: all 50ms ease-in;\n -moz-transition: all 50ms ease-in;\n -o-transition: all 50ms ease-in;\n transition: all 50ms ease-in;\n }\n\n h1 {\n font-weight: normal;\n margin: 2em 0;\n }\n\n p {\n line-height: 150%;\n max-width: 36em;\n margin: 1em auto;\n }\n\n a {\n color: #aaa;\n text-decoration: none;\n border-bottom: 1px solid #444;\n -webkit-transition: color 0.2s ease-in;\n -moz-transition: color 0.2s ease-in;\n -o-transition: color 0.2s ease-in;\n transition: color 0.2s ease-in;\n }\n\n a:hover,\n a:focus {\n color: #eee;\n }\n\n body,\n .knob {\n background-image:\n url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAgAElEQVR4nMVdeUAWVdf/NY7j4zAim2ia+YqiuGJuFCm4gyFqromiaInkS7igoFgKpamoiKiFCwgEKIpauaKgCC5gLpniirmQS+4LbtCr3x80l9lnHqC+31/wzMy955x77nbuOeeiX79+1L179xio4P3336fVnvGoWbMmvWfPHg4AMjMzWaV3Fi1aRG3cuFG1HqOwtbVlN27caAkADx8+pPPy8uyk7zx69EhWz44dO8h7qampTN++fQmdPF3R0dF0bGwsV1kaeURHR3NOTk4m/v+BAwdq8j9w4EAOt2/fJi95e3vrCp+Hs7OzouArg6KiIkr6W3h4uL3edzY2Nibh/0ePHjWpvcsjICDA1LBhQ00eHj58SJ7/+OOPRE5ubm6q31lYWHCXL1+uskaVgWVZZv/+/dSBAwcMN9bKlSvNaqyoqCjVsp8/f/7PMfc3GjRooKm5oaGhouebNm3ipk6dSgOAk5MTof3UqVMiPsLDw9nc3Fyuc+fOujx06tRJpowiODs7MwMGDBANB6WlpSZXV1f6zz\n\n }\n </style>\n\n\n\n<script>\nvar knobPositionX;\nvar knobPositionY;\nvar mouseX;\nvar mouseY;\nvar knobCenterX;\nvar knobCenterY;\nvar adjacentSide;\nvar oppositeSide;\nvar currentRadiansAngle;\nvar getRadiansInDegrees;\nvar finalAngleInDegrees;\nvar volumeSetting;\nvar tickHighlightPosition;\nvar audio = new Audio(\"https://www.cineblueone.com/maskWall/audio/skylar.mp3\");\nvar startingTickAngle = -135;\nvar tickContainer = document.getElementById(\"tickContainer\");\nvar volumeKnob = document.getElementById(\"knob\");\nvar boundingRectangle = volumeKnob.getBoundingClientRect();\n\nfunction main() {\naudio.volume = 0;\nvolumeKnob.addEventListener(getMouseDown(), onMouseDown);\ndocument.addEventListener(getMouseUp(), onMouseUp);\ncreateTicks(27, 0);\n}\n\n\nfunction onMouseDown() {\nif (audio.paused == true) {\nvar promise = audio.play();\nif (promise !== undefined) {\npromise.then((_) => {audio.play();}).catch((error) => {});\n}\n}\ndocument.addEventListener(getMouseMove(), onMouseMove);\n}\n\n\nfunction onMouseUp() {\ndocument.removeEventListener(getMouseMove(), onMouseMove);\n}\n\nfunction onMouseMove(event) {\nknobPositionX = boundingRectangle.left;\nknobPositionY = boundingRectangle.top;\n\nif (detectMobile() == \"desktop\") {\nmouseX = event.pageX;\nmouseY = event.pageY;\n} else {\nmouseX = event.touches[0].pageX;\nmouseY = event.touches[0].pageY;\n}\n\nknobCenterX = boundingRectangle.width / 2 + knobPositionX;\nknobCenterY = boundingRectangle.height / 2 + knobPositionY;\n\nadjacentSide = knobCenterX - mouseX;\noppositeSide = knobCenterY - mouseY;\n\ncurrentRadiansAngle = Math.atan2(adjacentSide, oppositeSide);\n\ngetRadiansInDegrees = (currentRadiansAngle * 180) / Math.PI;\n\nfinalAngleInDegrees = -(getRadiansInDegrees - 135);\n\n\nif (finalAngleInDegrees >= 0 && finalAngleInDegrees <= 270) { volumeKnob.style.transform=\"rotate(\" + finalAngleInDegrees\n + \"deg)\" ; volumeSetting=Math.floor(finalAngleInDegrees / (270 / 100));\n tickHighlightPosition=Math.round((volumeSetting * 2.7) / 10); createTicks(27, tickHighlightPosition);\n audio.volume=volumeSetting / 100; document.getElementById(\"volumeValue\").innerHTML=volumeSetting + \"%\" ; } }\n function createTicks(numTicks, highlightNumTicks) { while (tickContainer.firstChild) {\n tickContainer.removeChild(tickContainer.firstChild); } for (var i=0; i < numTicks; i++) { var\n tick=document.createElement(\"div\"); if (i < highlightNumTicks) { tick.className=\"tick activetick\" ; } else {\n tick.className=\"tick\" ; } tickContainer.appendChild(tick); tick.style.transform=\"rotate(\" + startingTickAngle\n + \"deg)\" ; startingTickAngle +=10; } startingTickAngle=-135; } function detectMobile() { var\n result=navigator.userAgent.match(/(iphone)|(ipod)|(ipad)|(android)|(blackberry)|(windows phone)|(symbian)/i); if\n (result !==null) { return \"mobile\" ; } else { return \"desktop\" ; } } function getMouseDown() { if\n (detectMobile()==\"desktop\" ) { return \"mousedown\" ; } else { return \"touchstart\" ; } } function getMouseUp() { if\n (detectMobile()==\"desktop\" ) { return \"mouseup\" ; } else { return \"touchend\" ; } } function getMouseMove() { if\n (detectMobile()==\"desktop\" ) { return \"mousemove\" ; } else { return \"touchmove\" ; } } main();\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":950,"y":3240,"wires":[[]]},{"id":"08ac9b242ae51e8c","type":"ui_group","name":"Default","tab":"2acb95821445c8af","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"2acb95821445c8af","type":"ui_tab","name":"Home","icon":"dashboard","order":4,"disabled":false,"hidden":false}]
1 Like
I did understand my problem and i know more about ui_template..
Thank u again for ur help.. 
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
