@thomas-jansen
habe mich etwas gespielt - bmi anzeige mit grafik
[image: 1665322387631-script-vis1.gif]
widget import
[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"5500","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"\n<canvas id=\"myCanvas\" width=\"300\" height=\"208\"> </canvas>\n\n\n<script type=\"text/javascript\">\nvar c=document.getElementById(\"myCanvas\");\nvar ctx=c.getContext(\"2d\");\nvar img=new Image();\nimg.onload = function(){\nctx.drawImage(img,0,0);\n};\nimg.src=\"/vis.0/armin/img/bmi2.png\";\n\n </script>\n\n<script> \n\nsetTimeout( () => { Self=this;\n Self.servConn.getStates(['0_userdata.0.CONTROL-OWN.WAAGE.Groesse','0_userdata.0.CONTROL-OWN.WAAGE.test'], (error, states) => { \nvar groesse=states['0_userdata.0.CONTROL-OWN.WAAGE.Groesse'].val ;\nvar gewicht=states['0_userdata.0.CONTROL-OWN.WAAGE.test'].val \n // Get a reference to the element.\nvar elem = document.getElementById('myCanvas');\n\n// Always check for properties and methods, to make sure your code doesn't break\n// in other browsers.\nif (elem && elem.getContext) {\n\t// Get the 2d context.\n\t// Remember: you can only initialize one context per element.\n\tvar context = elem.getContext('2d');\n\tif (context) {\n\t\t// You are done! Now you can draw your first rectangle.\n\t\t// You only need to provide the (x,y) coordinates, followed by the width and\n\t\t// height dimensions.\n\t/*\tcontext.fillRect(16,188, 10, 10); */\n\t/*\tcontext.fillRect(16,1, 10, 10); */\n\t/*\tcontext.fillRect(287,188, 10, 10);*/\n\t\tcontext.fillRect(Math.round(16+((groesse-150)*(5.4))),Math.round(-(1-188+(gewicht-40)*2.1)), 10, 10); /* 278/50*/ /* 188/90*/\n\t\t/*console.log( Math.round( -(1-188+((gewicht-40)*188/90)) ) ); */\n\t\tcontext.font = \"bold 16px Arial\";\n context.fillText(Math.round(gewicht/Math.pow((groesse/100),2)), Math.round(16+((groesse-150)*(5.4)))+15, Math.round(-(1-188+(gewicht-40)*2.1))+15);\n\t}\n}\n/*alert(Math.round(16+((groesse-150)*287/50)));*/ }, 1000);\n} ); \n</script>\n\n"},"style":{"left":"532px","top":"748px","width":"300px","height":"208px","transform":"scale(1)"},"widgetSet":"basic"}]
die id für die größe im im html teil angegeben werden - also der dp dafür, den du anlegen musst - genauso der dp für das gewicht (dieser kommt von xiaomi)
[image: 1665322687316-image-148.png]
Spoiler
[image: 1665326059039-bmi2.png]
