Hallo,
nach Highcharts habe ich mal ein bischen mit Steelseries herumgespielt.
Vorteil ist, dass keine "versteckten GADs" nötig sind, Daten werden per "update" übergeben.
Enthalten sind
- radial bzw. radial bargraph oder vertical - mit und ohne item für threshold
- linear und linear bargraph (horizontal oder vertical) - mit und ohne item für threshold
- LCD display (numeric oder Text)
Ich habe für die Widgets jeweils eine Ausführung mit und ohne Item für threshold und Odometer erstellt, da bei mir, wenn threshold/Odometer keinen Wert übergibt, das widget nicht geladen wird.
Ich habe nicht alle Einstellungen getestet, also keine Ahnung ob noch Fehler drin sind.
Widget ist hier zu finden:
a.A.
-
Den Weg in die Widgets finden die Werte, indem 5 Zeilen weiter unten die update-Funktion des entsprechenden Widgets aufgerufen wird:
Das ist diejenige, welche in widgets.js per on({update:...}) definiert ist.Code:$(this).trigger('update', [values]);Einen Kommentar schreiben:
-
smai ja ich fand das auch etwas arg "hard-coded"
einen umbau würde ich auf jdn fall gut heißen. so ganz ist mir trotzdem noch nicht klar, wie die werte dann ihren rückweg in die entsprechenden widgets finden. nachdem es nach entdeckung dieser zeile dann ging, hatte ich das aber erstmal sein lassen 
Einen Kommentar schreiben:
-
Diese Aussage hat mich aufgeschreckt, die Ursache dürfte wohl folgende Zeile in lib/base/base.js sein:
imho könnte man die einfach umschreiben zuCode:$('[id^="' + $.mobile.activePage.attr('id') + '-"][data-item]').each(function (idx) {
Dadurch würde die Notwendigkei einer ID für jedes Element entfallen.Code:$.mobile.activePage.find('[data-item]').each(function (idx) {
EDIT: Habe erst jetzt gesehen, dass du die Codestelle im anderen Thread bereits zitiert hattest.Zuletzt geändert von smai; 14.01.2017, 23:57.Einen Kommentar schreiben:
-
jetzt habe ich auch das problem mit dem updaten der widgets, wenn die gad nicht anderweitig verwendet wird gelöst.... die id des canvas muss wohl id="{{ uid(page, id) }}" sein, da darauf in der basic.js gesucht wird.. zumindest mit meinem google maps widget geht das jetzt einwandfrei..Einen Kommentar schreiben:
-
Das hätte ich ja anfangs schonmal erwähnt. Nur wenn meine GADs irgendwo "versteckt" sind, komme ich an die Werte ran. Leider habe ich mich noch nicht näher damit befasst und habe auch noch keine bessere Idee dafür.Einen Kommentar schreiben:
-
Hier noch mein RadialBargraph:Zitat von psilo Beitrag anzeigen
(Achtung: das funktioniert nicht mit der aktuellsten Version der Steelseries. Ich verwende noch Revision: 0.11.14)
Einbinden mit:Code:/** * Displays a steelseries radialbargraph * * @param unique id for this widget * @param the gad for the value * @param type * @param size * @param unit * @param title * @param lcdvisible * @param treshold * @param lcddezimals * @param ledvisible * @param framedesign */ {% macro radialbargraph(id, gad_value, type, sssize, unit, title, lcdvisible, treshold, lcddezimals, ledvisible, framedesign) %} <canvas id="{{ id }}" data-widget="steelseries.radialbargraph" data-item="{{ gad_value }}" width="201" height="201"></canvas> <script> var {{ id }}; function init() { valGrad = new steelseries.gradientWrapper( 0, 100, [ 0, 0.33, 0.66, 0.85, 1], [ new steelseries.rgbaColor(0, 0, 200, 1), new steelseries.rgbaColor(0, 200, 0, 1), new steelseries.rgbaColor(200, 200, 0, 1), new steelseries.rgbaColor(200, 0, 0, 1), new steelseries.rgbaColor(200, 0, 0, 1) ]); {{ id }} = new steelseries.RadialBargraph('{{ id }}', { gaugeType: steelseries.GaugeType.{{ type }}, size: {{ sssize }}, valueGradient: valGrad, useValueGradient: true, titleString: "{{ title }}", unitString: "{{ unit }}", lcdVisible: {{ lcdvisible }}, {% if threshold %}threshold: {{ treshold }},{% endif %} {% if lcddezimals %}lcdDecimals: {{ lcddezimals }},{% endif%} {% if not ledvisible %}ledVisible: false{% endif %} }); {% if framedesign %}setFrameDesign("{{ framedesign }}");{% endif %} } init(); $(document).on('pagecreate', function (bevent, bdata) { $(bevent.target).find('canvas[id="{{ id }}"]').on( { 'update': function (event, response) { event.stopPropagation(); {{ id }}.setValueAnimated(parseFloat(response)); } }); }); function setFrameDesign(sel) { switch (sel) { case "BLACK_METAL": {{ id }}.setFrameDesign(steelseries.FrameDesign.BLACK_METAL); break; case "METAL": {{ id }}.setFrameDesign(steelseries.FrameDesign.METAL); break; case "SHINY_METAL": {{ id }}.setFrameDesign(steelseries.FrameDesign.SHINY_METAL); break; case "BRASS": {{ id }}.setFrameDesign(steelseries.FrameDesign.BRASS); break; case "STEEL": {{ id }}.setFrameDesign(steelseries.FrameDesign.STEEL); break; case "CHROME": {{ id }}.setFrameDesign(steelseries.FrameDesign.CHROME); break; case "GOLD": {{ id }}.setFrameDesign(steelseries.FrameDesign.GOLD); break; case "ANTHRACITE": {{ id }}.setFrameDesign(steelseries.FrameDesign.ANTHRACITE); break; case "TILTED_GRAY": {{ id }}.setFrameDesign(steelseries.FrameDesign.TILTED_GRAY); break; case "TILTED_BLACK": {{ id }}.setFrameDesign(steelseries.FrameDesign.TILTED_BLACK); break; case "GLOSSY_METAL": {{ id }}.setFrameDesign(steelseries.FrameDesign.GLOSSY_METAL); break; } } </script> {% endmacro %}
Bildschirmfoto2.pngCode:{{ steelseries.radialbargraph( 'Speicher_o', 'Werte.Temp.Speicher_o', 'TYPE4', 101, '°C', 'Oben', true, 90, 1, false, 'BLACK_METAL' ) }}Zuletzt geändert von Dumbo75; 23.12.2016, 22:20.Einen Kommentar schreiben:
-
Was mir spontan einfällt:
- aktuelle KWL-Luftaustauschrate mit Markern für die 4 Werte für Feuchteschutz/Min-/Normal-/Stosslüftung für die gegebene Wohnfläche
- im Zusammenhang mit KWL Auswertung von VOC-Sensoren (CO2)
- aktuelle Temperatur WW-Speicher mit 'rot'-Hinterlegung im salmonellenkritischen Bereich (<60°C)
- VL-Temperatur Heizung im Vergleich zur Aussentemp.
Da gibt's mit Sicherheit noch zig weitere gute use-cases, gerade im Bereich Heizung/Lüftung/Wasser ...
/tom
Einen Kommentar schreiben:
-
Was ich super fände, wenn hier noch mehr Beispiel-Usecases mit Ausprägungen der Widgets gepostet werden würden..
Bei der PV Anlage / Strom sehe ich durchaus den Sinn.
Viel mehr fällt mir aber derzeit echt nicht ein. Ich denke in den meisten Fällen sollten die Daten eher oft updaten, damit sich das lohnt.Einen Kommentar schreiben:
-
-
Jungs, das wird langsam 'ganz großes Kino'. Danke für Eure Arbeit!
/tomEinen Kommentar schreiben:
-
Meine aktuell verwendete Version für "radial":
Bildschirmfoto1.pngCode:/** * Displays a steelseries radial * * @param unique id for this widget * @param the gad for the value * @param the gad for the threshold * @param the gad for the odometervalue * @param min value * @param max value * @param title * @param unit * @param sections * @param areas * @param type * @param size * @param lcdvisible * @param ledvisible * @param lcddezimals * @param useodometer * @param odometerparams * @param minmeasuredvaluevisible * @param maxmeasuredvaluevisible * @param backgroundcolor * @param pointertype * @param framedesign * @param foregroundtype * @param pointercolor * @param lcdcolor * @param ledcolor */ /** * Usage: {{ steelseries.radial( 'Test1', //Id 'Werte.Temp.Speicher_o', //GAD Value '', //GAD Treshold '', //GAD OdometerValue 0, //minValue 80, //maxValue 'TestTitle2', //Title '°C', //Unit '[[0, 50, 220, 0, 0, 0.3],[50, 80, 0, 220, 0, 0.3]]', //sections with [] '[[70, 80, 220, 0, 0, 0.3]]', //areas with [] 'TYPE6', //Type 280, //size true, //lcdVisible false, //ledVisible 2, //lcdDecimals true, //useOdoMeter '{digits: 2, decimals: 2}', //odoMeterParams true, //minMeasuredValueVisible true, //maxMeasuredValueVisible 'STAINLESS' //BackgroundColor 'TYPE8', //PointerType 'BLACK_METAL' //FrameDesign 'TYPE1', //ForeGroundType 'GREEN', //PointerColor 'LIGHTBLUE', //LcdColor 'CYAN_LED' //LedColor ) }} */ {% macro radial(id, gad_value, gad_threshold, gad_Odo, minValue, maxValue, title, unit, mysections, myareas, type, sssize, lcdvisible, ledvisible, lcddezimals, useodometer, odometerparams, minmeasured, maxmeasured, BGColor, pointer, framedesign, foregroundtype, pointercolor, lcdcolor, ledcolor) %} <canvas id="{{ id }}" data-widget="steelseries.radial" data-item="{{ gad_value }}, {{ gad_threshold}}, {{ gad_Odo}}" width="201" height="201"></canvas> <script> var {{ id }}; var settreshold = false; var setodometer = false; function init() { var i=0; var test = []; {% if mysections %} { var newsections = []; for(let x of Object.create({{ mysections }})){ newsections[i] = steelseries.Section(x[0], x[1], 'rgba(' + x[2] + ', ' + x[3] + ', ' + x[4] + ', ' + x[5] + ')'); i++; } } {% endif %} {% if myareas %} { var newareas = []; i = 0; for(let x of Object.create({{ myareas }})){ newareas[i] = steelseries.Section(x[0], x[1], 'rgba(' + x[2] + ', ' + x[3] + ', ' + x[4] + ', ' + x[5] + ')'); i++; } } {% endif %} //alert("{{ title }}"); {{ id }} = new steelseries.Radial('{{ id }}', { gaugeType: steelseries.GaugeType.{{ type }}, {% if sssize %}size: {{ sssize }},{% else %}size: 201,{% endif %} titleString: "{{ title }}", unitString: "{{ unit }}", {% if myareas %}area: newareas,{% endif %} {% if mysections %}section: newsections,{% endif %} {% if not gad_threshold %}thresholdVisible: false,{% endif %} {% if minValue %}minValue: {{ minValue }},{% endif %} {% if maxValue %}maxValue: {{ maxValue }},{% endif %} {% if minmeasured %}minMeasuredValueVisible: {{ minmeasured }},{% endif %} {% if maxmeasured %}maxMeasuredValueVisible: {{ maxmeasured }},{% endif %} {% if lcdvisible %}lcdVisible: {{ lcdvisible }},{% endif %} {% if not ledvisible %}ledVisible: false,{% endif %} lcdDecimals: {{ lcddezimals }}, {% if useodometer %}useOdometer: {{ useodometer }},{% endif %} {% if odometerparams %}odometerParams: {{ odometerparams }}{% endif %} }); {% if BGColor %}setBackgroundColor("{{ BGColor }}");{% endif %} {% if pointer %}setPointerType("{{ pointer }}");{% endif %} {% if framedesign %}setFrameDesign("{{ framedesign }}");{% endif %} {% if foregroundtype %}setForegroundType("{{ foregroundtype }}");{% endif %} {% if pointercolor %}setPointerColor("{{ pointercolor }}");{% endif %} {% if lcdcolor %}setLcdColor("{{ lcdcolor }}");{% endif %} {% if ledcolor %}setLedColor("{{ ledcolor }}");{% endif %} } init(); $(document).on('pagecreate', function (bevent, bdata) { $(bevent.target).find('canvas[id="{{ id }}"]').on( { 'update': function (event, response) { event.stopPropagation(); {% if gad_Odo %}setodometer = true;{% endif %} {% if gad_threshold %}settreshold = true;{% endif %} {{ id }}.setValueAnimated(parseFloat(response[0])); switch(response.length){ case 3: {{ id }}.setThreshold(parseFloat(response[1])); {{ id }}.setOdoValue(parseFloat(response[2])); case 2: if (settreshold) { {{ id }}.setThreshold(parseFloat(response[1])); } else if (setodometer) { {{ id }}.setOdoValue(parseFloat(response[1])); }; } } }); }); function setFrameDesign(sel) { switch (sel) { case "BLACK_METAL": {{ id }}.setFrameDesign(steelseries.FrameDesign.BLACK_METAL); break; case "METAL": {{ id }}.setFrameDesign(steelseries.FrameDesign.METAL); break; case "SHINY_METAL": {{ id }}.setFrameDesign(steelseries.FrameDesign.SHINY_METAL); break; case "BRASS": {{ id }}.setFrameDesign(steelseries.FrameDesign.BRASS); break; case "STEEL": {{ id }}.setFrameDesign(steelseries.FrameDesign.STEEL); break; case "CHROME": {{ id }}.setFrameDesign(steelseries.FrameDesign.CHROME); break; case "GOLD": {{ id }}.setFrameDesign(steelseries.FrameDesign.GOLD); break; case "ANTHRACITE": {{ id }}.setFrameDesign(steelseries.FrameDesign.ANTHRACITE); break; case "TILTED_GRAY": {{ id }}.setFrameDesign(steelseries.FrameDesign.TILTED_GRAY); break; case "TILTED_BLACK": {{ id }}.setFrameDesign(steelseries.FrameDesign.TILTED_BLACK); break; case "GLOSSY_METAL": {{ id }}.setFrameDesign(steelseries.FrameDesign.GLOSSY_METAL); break; } } function setBackgroundColor(sel) { switch (sel) { case "DARK_GRAY": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.DARK_GRAY); break; case "SATIN_GRAY": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.SATIN_GRAY); break; case "LIGHT_GRAY": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.LIGHT_GRAY); break; case "WHITE": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.WHITE); break; case "BLACK": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.BLACK); break; case "BEIGE": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.BEIGE); break; case "BROWN": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.BROWN); break; case "RED": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.RED); break; case "GREEN": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.GREEN); break; case "BLUE": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.BLUE); break; case "ANTHRACITE": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.ANTHRACITE); break; case "MUD": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.MUD); break; case "PUNCHED_SHEET": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.PUNCHED_SHEET); break; case "CARBON": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.CARBON); break; case "STAINLESS": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.STAINLESS); break; case "BRUSHED_METAL": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.BRUSHED_METAL); break; case "BRUSHED_STAINLESS": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.BRUSHED_STAINLESS); break; case "TURNED": {{ id }}.setBackgroundColor(steelseries.BackgroundColor.TURNED); break; } } function setForegroundType(sel) { switch (sel.options[sel.selectedIndex].value) { case "TYPE1": {{ id }}.setForegroundType(steelseries.ForegroundType.TYPE1); break; case "TYPE2": {{ id }}.setForegroundType(steelseries.ForegroundType.TYPE2); break; case "TYPE3": {{ id }}.setForegroundType(steelseries.ForegroundType.TYPE3); break; case "TYPE4": {{ id }}.setForegroundType(steelseries.ForegroundType.TYPE4); break; case "TYPE5": {{ id }}.setForegroundType(steelseries.ForegroundType.TYPE5); break; } } function setPointerColor(sel) { switch (sel.options[sel.selectedIndex].value) { case "RED": {{ id }}.setValueColor(steelseries.ColorDef.RED); break; case "GREEN": {{ id }}.setValueColor(steelseries.ColorDef.GREEN); break; case "BLUE": {{ id }}.setValueColor(steelseries.ColorDef.BLUE); break; case "ORANGE": {{ id }}.setValueColor(steelseries.ColorDef.ORANGE); break; case "YELLOW": {{ id }}.setValueColor(steelseries.ColorDef.YELLOW); break; case "CYAN": {{ id }}.setValueColor(steelseries.ColorDef.CYAN); break; case "MAGENTA": {{ id }}.setValueColor(steelseries.ColorDef.MAGENTA); break; case "WHITE": {{ id }}.setValueColor(steelseries.ColorDef.WHITE); break; case "GRAY": {{ id }}.setValueColor(steelseries.ColorDef.GRAY); break; case "BLACK": {{ id }}.setValueColor(steelseries.ColorDef.BLACK); break; case "RAITH": {{ id }}.setValueColor(steelseries.ColorDef.RAITH); break; case "GREEN_LCD": {{ id }}.setValueColor(steelseries.ColorDef.GREEN_LCD); break; case "JUG_GREEN": {{ id }}.setValueColor(steelseries.ColorDef.JUG_GREEN); break; } } function setPointerType(sel) { switch (sel) { case "TYPE1": {{ id }}.setPointerType(steelseries.PointerType.TYPE1); break; case "TYPE2": {{ id }}.setPointerType(steelseries.PointerType.TYPE2); break; case "TYPE3": {{ id }}.setPointerType(steelseries.PointerType.TYPE3); break; case "TYPE4": {{ id }}.setPointerType(steelseries.PointerType.TYPE4); break; case "TYPE5": {{ id }}.setPointerType(steelseries.PointerType.TYPE5); break; case "TYPE6": {{ id }}.setPointerType(steelseries.PointerType.TYPE6); break; case "TYPE7": {{ id }}.setPointerType(steelseries.PointerType.TYPE7); break; case "TYPE8": {{ id }}.setPointerType(steelseries.PointerType.TYPE8); break; case "TYPE9": {{ id }}.setPointerType(steelseries.PointerType.TYPE9); break; case "TYPE10": {{ id }}.setPointerType(steelseries.PointerType.TYPE10); break; case "TYPE11": {{ id }}.setPointerType(steelseries.PointerType.TYPE11); break; case "TYPE12": {{ id }}.setPointerType(steelseries.PointerType.TYPE12); break; case "TYPE13": {{ id }}.setPointerType(steelseries.PointerType.TYPE13); break; case "TYPE14": {{ id }}.setPointerType(steelseries.PointerType.TYPE14); break; case "TYPE15": {{ id }}.setPointerType(steelseries.PointerType.TYPE15); break; case "TYPE16": {{ id }}.setPointerType(steelseries.PointerType.TYPE16); break; } } function setLcdColor(sel) { switch (sel.options[sel.selectedIndex].value) { case "BEIGE": {{ id }}.setLcdColor(steelseries.LcdColor.BEIGE); break; case "BLUE": {{ id }}.setLcdColor(steelseries.LcdColor.BLUE); break; case "ORANGE": {{ id }}.setLcdColor(steelseries.LcdColor.ORANGE); break; case "RED": {{ id }}.setLcdColor(steelseries.LcdColor.RED); break; case "YELLOW": {{ id }}.setLcdColor(steelseries.LcdColor.YELLOW); break; case "WHITE": {{ id }}.setLcdColor(steelseries.LcdColor.WHITE); break; case "GRAY": {{ id }}.setLcdColor(steelseries.LcdColor.GRAY); break; case "BLACK": {{ id }}.setLcdColor(steelseries.LcdColor.BLACK); break; case "GREEN": {{ id }}.setLcdColor(steelseries.LcdColor.GREEN); break; case "BLUE2": {{ id }}.setLcdColor(steelseries.LcdColor.BLUE2); break; case "BLUE_BLACK": {{ id }}.setLcdColor(steelseries.LcdColor.BLUE_BLACK); break; case "BLUE_DARKBLUE": {{ id }}.setLcdColor(steelseries.LcdColor.BLUE_DARKBLUE); break; case "BLUE_GRAY": {{ id }}.setLcdColor(steelseries.LcdColor.BLUE_GRAY); break; case "STANDARD": {{ id }}.setLcdColor(steelseries.LcdColor.STANDARD); break; case "STANDARD_GREEN": {{ id }}.setLcdColor(steelseries.LcdColor.STANDARD_GREEN); break; case "BLUE_BLUE": {{ id }}.setLcdColor(steelseries.LcdColor.BLUE_BLUE); break; case "RED_DARKRED": {{ id }}.setLcdColor(steelseries.LcdColor.RED_DARKRED); break; case "DARKBLUE": {{ id }}.setLcdColor(steelseries.LcdColor.DARKBLUE); break; case "LILA": {{ id }}.setLcdColor(steelseries.LcdColor.LILA); break; case "BLACKRED": {{ id }}.setLcdColor(steelseries.LcdColor.BLACKRED); break; case "DARKGREEN": {{ id }}.setLcdColor(steelseries.LcdColor.DARKGREEN); break; case "DARKGREEN": {{ id }}.setLcdColor(steelseries.LcdColor.DARKGREEN); break; case "AMBER": {{ id }}.setLcdColor(steelseries.LcdColor.AMBER); break; case "LIGHTBLUE": {{ id }}.setLcdColor(steelseries.LcdColor.LIGHTBLUE); break; } } function setLedColor(sel) { switch (sel.options[sel.selectedIndex].value) { case "RED_LED": {{ id }}.setLedColor(steelseries.LedColor.RED_LED); break; case "GREEN_LED": {{ id }}.setLedColor(steelseries.LedColor.GREEN_LED); break; case "BLUE_LED": {{ id }}.setLedColor(steelseries.LedColor.BLUE_LED); break; case "ORANGE_LED": {{ id }}.setLedColor(steelseries.LedColor.ORANGE_LED); break; case "YELLOW_LED": {{ id }}.setLedColor(steelseries.LedColor.YELLOW_LED); break; case "CYAN_LED": {{ id }}.setLedColor(steelseries.LedColor.CYAN_LED); break; case "MAGENTA_LED": {{ id }}.setLedColor(steelseries.LedColor.MAGENTA_LED); break; } } </script> {% endmacro %}Einen Kommentar schreiben:
Einen Kommentar schreiben: