Gelöst: Pfeil drehen

[michihorn]

Hallo, kann mir jemand sagen, wie ich den Pfeil in der Grafik drehen kann?
Das soll eine Darstellung der UV Level werden.

Bei 0 Grad = 0, bei 180 Grad = 11
Das Widget des Pfeil sieht wie folgt aus:

Spoiler

[{"tpl":"tplShapes","data":{"visibility-cond":"==","visibility-val":1,"svgType":"arrow","strokeColor":"#454436","fill":"#454436","strokeWidth":"10","scaleWidth":"0.5","scaleHeight":"1","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,"rotate":"{dev1}","visibility-oid":"","name":"Wind Nadel","visibility-groups-action":"hide","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_append":""},"style":{"left":"1043px","top":"636px","z-index":"30","width":"163px","height":"162px"},"widgetSet":"basic"}]

Mit dem Widget "jqplot-MeterGauge habe ich die Verläufe nicht hinbekommen.
Gruß Michael

[Glasfaser]

@michihorn sagte in Pfeil drehen:

Das soll eine Darstellung der UV Level werden.

Was hälst du hiervon :

EDIT :## Widget neu eingefügt.

Spoiler

[{"tpl":"tplCGradialGauge","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","factor":"1","valueOffset":"0","hCount":"5","minorTicks":"0","animation":true,"needle":"true","needleShadow":"true","needleType":"arrow","borders":false,"borderOuterWidth":"1","borderMiddleWidth":"1","borderInnerWidth":"1","borderShadowWidth":"1","valueBox":true,"ticksAngle":"270","startAngle":"45","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,"minValue":"0","maxValue":"15","oid":"javascript.0.Wetterstation.UV_Index","title":"UV Index","valueDec":"2","valueInt":"1","animationDuration":"1000","animationTarget":"needle","animatedValue":true,"animateOnInit":false,"valueTextShadow":true,"colorPlate":"rgba(39, 39, 39, 50)","colorBorderOuter":"#000000","colorBorderOuterEnd":"#000000","colorValueBoxRect":"rgba(39, 39, 39, 50)","colorValueBoxBackground":"rgba(39, 39, 39, 50)","colorValueBoxRectEnd":"rgba(39, 39, 39, 50)","colorPlateEnd":"rgba(39, 39, 39, 50)","colorMajorTicks":"#ffffff","colorMinorTicks":"#e6e6e6","colorTitle":"#ffffff","colorNeedle":"#cccccc","colorNeedleEnd":"#cccccc","needleCircleInner":true,"needleCircleOuter":true,"needleCircleSize":"9","colorNeedleCircleInner":"#616161","colorNeedleCircleInnerEnd":"#000000","colorNeedleCircleOuterEnd":"#616161","colorNeedleCircleOuter":"#000000","colorUnits":"#ffffff","colorNumbers":"transparent","colorValueText":"#ffffff","highlightsFrom1":"0","highlightsTo1":"3","highlightsColor1":"#558B2F","highlightsFrom2":"3","highlightsTo2":"6","highlightsColor2":"#F9A825","units":"","highlightsFrom3":"6","highlightsTo3":"8","highlightsColor3":"#EF6C00","highlightsFrom4":"8","highlightsTo4":"11","highlightsColor4":"#B71C1C","highlightsFrom5":"11","highlightsTo5":"15","highlightsColor5":"#6A1B9A","animationRule":"linear","colorBorderMiddle":"","colorBorderMiddleEnd":"","strokeTicks":false,"name":"UV INDEX","majorTicks":"2","majorTicksInt":"0","majorTicksDec":"0","colorValueBoxShadow":"rgba(39, 39, 39, 50)","needleStart":"0","needleEnd":"76","needleWidth":"4"},"style":{"left":"20px","top":"52px","z-index":"10","width":"186px","height":"140px","border-width":"","border-style":"","border-radius":"","border-color":"","font-family":"Jura-DemiBold","font-size":"22px"},"widgetSet":"canvas-gauges"},{"tpl":"tplJustgageValueIndicatorColored","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"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","is_tdp":false,"equalAfter":"0","balance1":"50","balance2":"50","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,"fullBri":true,"oid":"javascript.0.Wetterstation.UV_Index","unit":"","min_oid":"0","max_oid":"15","mid_oid":"8","changeBgColor":false,"digits":"3","color1":"#79fe34","color2":"#fcc031","color3":"#fd2121"},"style":{"left":"16px","top":"204px","width":"191px","height":"21px","z-index":"20","font-size":"medium","text-align":"center","font-family":"Jura-DemiBold"},"widgetSet":"justgage"}]

[michihorn]

@glasfaser sagte in Pfeil drehen:

Das sieht super aus, leider gibt es einen Fehler beim importieren des Widgets:

[OliverIO]

@michihorn said in Pfeil drehen:

[{"tpl":"tplShapes","data":{"visibility-cond":"==","visibility-val":1,"svgType":"arrow","strokeColor":"#454436","fill":"#454436","strokeWidth":"10","scaleWidth":"0.5","scaleHeight":"1","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,"rotate":"{dev1}","visibility-oid":"","name":"Wind Nadel","visibility-groups-action":"hide","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_append":""},"style":{"left":"1043px","top":"636px","z-index":"30","width":"163px","height":"162px"},"widgetSet":"basic"}]

der pfeil ist ungünstig, bzw. wo soll der ankerpunkt sein, an dem man dann den pfeil drehen soll? wenn du auf 0 oder 180 grad zeigst, dann ragt jewils ein schwänzchen darüber hinaus. das sieht hässlich aus

weiterhin wird alles was größer als der elementkasten ist (jedes html element hat eine größe und eine breite) abgeschnitten, daher muss der elementkassten so groß sein, das da nie was abgeschnitten wird, was hier nicht der fall ist.
daher probier das vorgeschlagene gauge widget

[Glasfaser]

@michihorn

Habe es neu hochgeladen ... siehe oben !

[OliverIO]

@michihorn said in Pfeil drehen:

einen Fehler beim importieren des Widgets

da hat der kollege was falsch markiert.
du kannst dir aber schon mal den adapter
IoBroker.vis-justgage (ich liebe schreibfehler in adapternamen)
installieren. da ist das widget enthalten

[michihorn]

@glasfaser Danke klappt jetzt