Steelseries-Canvas in smartvisu? -> jetzt verfügbar

[Dumbo75]

Meine aktuell verwendete Version für "radial":

/**
 * 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 %}

Bildschirmfoto1.png

[Tom Bombadil]

Jungs, das wird langsam 'ganz großes Kino'. Danke für Eure Arbeit!
/tom

[psilo]

Dumbo75 wie sind die beispielparameter für den unteren?

Update: passt habs raus..

ich bin an dem punkt, wo ich wahrsch. für verschiedene use cases versch. radials bauen werde. die parameter sind schon gut viele

[psilo]

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.

[Tom Bombadil]

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

[Dumbo75]

Was ich super fände, wenn hier noch mehr Beispiel-Usecases mit Ausprägungen der Widgets gepostet werden würden..

Hier noch mein RadialBargraph:
(Achtung: das funktioniert nicht mit der aktuellsten Version der Steelseries. Ich verwende noch Revision: 0.11.14)

/**
 * 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 %}

Einbinden mit:

{{ steelseries.radialbargraph(
        'Speicher_o',
        'Werte.Temp.Speicher_o',
        'TYPE4',
        101,
        '°C',
        'Oben',
        true,
        90,
        1,
        false,
        'BLACK_METAL'
          ) }}

Bildschirmfoto2.png

[psilo]

Dumbo75 sag mal kann es sein, dass die dinger aktuell nur gehen, wenn "normale" widgets mit der gleichen GAD existieren?

[Dumbo75]

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.

[psilo]

Dumbo75 ich habe mich jetzt schon durch die widget.js und den smarthome treiber gekämpft aber noch keinen ansatzpunkt gefunden.. offenbar sucht die update methode gezielt DIVs.. die nächsten tage mal sehen.

[psilo]

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..

[smai]

Diese Aussage hat mich aufgeschreckt, die Ursache dürfte wohl folgende Zeile in lib/base/base.js sein:

$('[id^="' + $.mobile.activePage.attr('id') + '-"][data-item]').each(function (idx) {

imho könnte man die einfach umschreiben zu

$.mobile.activePage.find('[data-item]').each(function (idx) {

Dadurch würde die Notwendigkei einer ID für jedes Element entfallen.

EDIT: Habe erst jetzt gesehen, dass du die Codestelle im anderen Thread bereits zitiert hattest.

[psilo]

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

[smai]

Den Weg in die Widgets finden die Werte, indem 5 Zeilen weiter unten die update-Funktion des entsprechenden Widgets aufgerufen wird:

$(this).trigger('update', [values]);

Das ist diejenige, welche in widgets.js per on({update:...}) definiert ist.

[psilo]

smai ich muss mir mal ansehen, wie das mit highcharts gebaut ist.. vielleicht findet sich ja doch eines tages ein weg für steelseries, google maps usw in die SV.. Aktuell ist es mir aber zu viel aufwand, diese massentauglich als PR aufzubereiten.

[ramann]

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.