Steelseries-Canvas in smartvisu?

[psilo]

Bonze das überlasse ich gerne den kollegen. ganz perfekt passt es halt nicht in die bisherige implementierung, da ich mit manchen IDs nicht umgehen kann, da ich aus der Id direkt den namen der JS Variable generiere.

Ich habe auch nicht so den Elan, das perfekt Rund zu machen, da habe ich in meiner Hauptbaustelle genug zu tun. Für mich reicht das wie hier publiziert.
Mein Code kann aber gerne genutzt werden, auch für eine Integration in SmartVisu

[smai]

allerdings etwas laggy bei Veränderungen

Das liegt am delegate, wenn du es folgendmassen schreibst, wird's bedeutend schneller (siehe Performance-Patch)

$(document).on('pagecreate', function (bevent, bdata) {
  $(bevent.target).find('canvas[data-widget="steelseries.lcd"]').on( {
    'update': function (event, response) {
      // DEBUG: console.log("[basic.textinput] update '" + this.id + "':", response);
      event.stopPropagation();
      {{ id | replace({'.': '_'}) }}.setValueAnimated(parseFloat(response[0]));
      {{ id | replace({'.': '_'}) }}.setThreshold(parseFloat(response[1]));
    }
  });
});

Statt dem {{ id | replace({'.': '_'}) }} verwendest du übrigens besser {{ uid(page, id) }}. Dies ersetzt die Punkte und macht die ID global eindeutig, weil mehrere Pages gleichzeitig im DOM sein können.

Damit ich es in einen Release aufnehmen würde, müsste das Javascript vom HTML getrennt werden können und deshalb auch ohne Twig-Ausdrücke auskommen.
Die ID als JS-Variable gefällt mir natürlich auch nicht recht, wie psilo schon selbst feststellr.

Da die smartVISU ja jQuery einsetzt, wäre mir anstelle der Steelseries eine Lösung im jQuery-Style sympatischer.

[psilo]

smai danke für die Tipps.. habs gerade umgebaut (s.u. - für die dies brauchen). Wenn sich jemand berufen fühlt, dass für SV schön zu machen gerne... Ich fände eine auch optisch angepasstere Lösung + Bau auf JQuery Basis aber auch besser. So sticht sich das vom Look etwas, wenn man beide Widgetarten verwendet.
Das mit der UID mag JS aber auch nicht, weil Ausdrücke wie "var room_technical-steel_radial_smaem_regard;" wohl wegen des "-" Probleme machen... Da muss ich den replace auch noch aufbohren. Aber bessere Ideen als die Replaces habe ich aktuell auch nicht

/**
 * Displays a steelseries lcd
 *
 * @param unique id for this widget
 * @param a gad/item
 */
{% macro lcd(id, gad) %}
   <canvas id="{{ id | replace({'.': '_'}) }}" data-widget="steelseries.lcd" data-item="{{ gad }}" width="50" height="50"></canvas>
   <script>
    var scroll = false;
    var {{ id | replace({'.': '_'}) }};

    function init() {
        // Initialzing gauge        
        var sections = [steelseries.Section(0, 70, 'rgba(255, 0, 0, 1.0)'),
                steelseries.Section(70, 95, 'rgba(255, 255, 0, 1.0)'),
                steelseries.Section(95, 100, 'rgba(0, 255, 0, 1.0)') ];
        {{ id | replace({'.': '_'}) }} = new steelseries.DisplaySingle('{{ id | replace({'.': '_'}) }}', {
            width: 120,
            height: 50,
            section: sections
            });
        {{ id | replace({'.': '_'}) }}.setLcdColor(steelseries.LcdColor.SECTIONS);
   }
   init();

   $(document).on('pagecreate', function (bevent, bdata) {
    $(bevent.target).find('canvas[data-widget="steelseries.lcd"]').on( {
      'update': function (event, response) {
        event.stopPropagation();
        {{ id | replace({'.': '_'}) }}.setValue(parseFloat(response));
      }
    });
   });
 </script>    
{% endmacro %}

/**
 * Displays a steelseries linear
 *
 * @param unique id for this widget
 * @param the gad for the value
 * @param the gad for the threshold
 * @param min value
 * @param max value
 * @param title
 * @param unit
 */
{% macro linear(id, gad_value, gad_threshold, minValue, maxValue, title, unit) %}
   <canvas id="{{ id | replace({'.': '_'}) }}" data-widget="steelseries.linear" data-item="{{ gad_value }}, {{ gad_threshold}}" width="320" height="140"></canvas>
   <script>
    var {{ id | replace({'.': '_'}) }};

    function init() {
        {{ id | replace({'.': '_'}) }} = new steelseries.Linear('{{ id | replace({'.': '_'}) }}', {
                    width: 320,
                    height: 140,
                    gaugeType: steelseries.GaugeType.TYPE2,
                    titleString: "{{ title }}",
                    unitString: "{{ unit }}",
                    {% if not gad_threshold %}thresholdVisible: false,{% endif %}
                    {% if minValue %}minValue: {{ minValue }},{% endif %}
                    {% if maxValue %}maxValue: {{ maxValue }},{% endif %}
                    lcdVisible: true
                    });
   }
   init();

   $(document).on('pagecreate', function (bevent, bdata) {
    $(bevent.target).find('canvas[data-widget="steelseries.linear"]').on( {
      'update': function (event, response) {
        event.stopPropagation();
        {{ id | replace({'.': '_'}) }}.setValueAnimated(parseFloat(response[0]));
        {{ id | replace({'.': '_'}) }}.setThreshold(parseFloat(response[1]));
      }
    });
   });
 </script>    
{% endmacro %}
/**
 * Displays a steelseries linear bargraph
 *
 * @param unique id for this widget
 * @param the gad for the value
 * @param the gad for the threshold
 * @param min value
 * @param max value
 * @param title
 * @param unit
 */
{% macro linear_bargraph(id, gad_value, gad_threshold, minValue, maxValue, title, unit) %}
   <canvas id="{{ id | replace({'.': '_'}) }}" data-widget="steelseries.linear_bargraph" data-item="{{ gad_value }}, {{ gad_threshold}}" width="320" height="140"></canvas>
   <script>
    var {{ id | replace({'.': '_'}) }};

    function init() {
        {{ id | replace({'.': '_'}) }} = new steelseries.LinearBargraph('{{ id | replace({'.': '_'}) }}', {
                    width: 320,
                    height: 140,
                    gaugeType: steelseries.GaugeType.TYPE2,
                    titleString: "{{ title }}",
                    unitString: "{{ unit }}",
                    {% if not gad_threshold %}thresholdVisible: false,{% endif %}
                    {% if minValue %}minValue: {{ minValue }},{% endif %}
                    {% if maxValue %}maxValue: {{ maxValue }},{% endif %}
                    lcdVisible: true
                    });
   }
   init();

   $(document).on('pagecreate', function (bevent, bdata) {
    $(bevent.target).find('canvas[data-widget="steelseries.linear_bargraph"]').on( {
      'update': function (event, response) {
        event.stopPropagation();
        {{ id | replace({'.': '_'}) }}.setValueAnimated(parseFloat(response[0]));
        {{ id | replace({'.': '_'}) }}.setThreshold(parseFloat(response[1]));
      }
    });
   });
 </script>    
{% endmacro %}
/**
 * Displays a steelseries radial
 *
 * @param unique id for this widget
 * @param the gad for the value
 * @param the gad for the threshold
 * @param min value
 * @param max value
 * @param title
 * @param unit
 */
{% macro radial(id, gad_value, gad_threshold, minValue, maxValue, title, unit) %}
   <canvas id="{{ id | replace({'.': '_'}) }}" data-widget="steelseries.radial" data-item="{{ gad_value }}, {{ gad_threshold}}" width="201" height="201"></canvas>
   <script>
    var {{ id | replace({'.': '_'}) }};

    function init() {        
        {{ id | replace({'.': '_'}) }} = new steelseries.Radial('{{ id | replace({'.': '_'}) }}', {
            gaugeType: steelseries.GaugeType.TYPE4,
            size: 201,
            titleString: "{{ title }}",
            unitString: "{{ unit }}",
            {% if not gad_threshold %}thresholdVisible: false,{% endif %}
            {% if minValue %}minValue: {{ minValue }},{% endif %}
            {% if maxValue %}maxValue: {{ maxValue }},{% endif %}
            lcdVisible: true,
            lcdDecimals: 1,
            useOdometer: false
            });
   }
   init();

   $(document).on('pagecreate', function (bevent, bdata) {
    $(bevent.target).find('canvas[data-widget="steelseries.radial"]').on( {
      'update': function (event, response) {
        event.stopPropagation();
        {{ id | replace({'.': '_'}) }}.setValueAnimated(parseFloat(response[0]));
        {{ id | replace({'.': '_'}) }}.setThreshold(parseFloat(response[1]));
      }
    });
   });
 </script>    
{% endmacro %}

[Dumbo75]

psilo
Ich habe das jetzt mal so zum Testen übernommen.
Den Aufruf habe ich mal so gestaltet:
{{ steelseries.radial('Test1', 'Werte.Temp.Speicher_o', 22, 0, 80, 'TestTitle', '°C') }}
Ich schaffe es aber irgendwie nicht, dass sich die Anzeige bewegt und einen Wert anzeigt
Irgendwie komme ich nicht wirklich weiter.
Wo könnte denn mein Fehler stecken?

Beim lcd klappt es mit:
{{ steelseries.lcd('Test1', 'Werte.Temp.Speicher_o', 22, 0, 80, 'TestTitle', '°C') }}
Allerdings nur, wenn ich davor noch ein
{{ basic.value('Speicher_o', 'Werte.Temp.Speicher_o') }}
setze.

[psilo]

Dumbo75 einfach mal mit der Entwicklerkonsole (F12) schauen ob es Fehler gibt? Welcher Browser? Ich habe den Threshold bisher auch nur per GAD gesetzt oder leer gelassen. Kann man beides mal testen. Ich habe auch Smarthome.py als Backend, vielleicht ist das irgendwie anders im Verhalten als FHEM oder was ihr verwendet?

[Dumbo75]

Das scheint es zu sein. ein leerer treshold und die Anzeige läuft.
D.h. irgendwie kommt das Script an dieser Stelle in Probleme wenn ein Wert übergeben wird:
data-item="{{ gad_value }}, {{ gad_threshold}}"

Wenn man hier nur data-item="{{ gad_value }}" verwendet funktioniert es nämlich auch.

[psilo]

dumbo das problem ist wahrsch. dass eine zahl als "data-item" gesetzt wird. wenn du eine GAD übergibst geht es... ich bin unsicher wie ich das unterscheiden kann.. evtl über "punkte" im namen. aber bei FHEM gibt es keine mit punkten verbundene itemhierarchie oder?

an der stelle muss ich halt auch schauen, wieviel aufwand ich für andere lösungen treiben will. bei mir mit GAD geht es 1a.. notfalls den code halt umbauen und bei dir das ganze aus dem data item rausnehmen

[Dumbo75]

Das passt jetzt erstmal. Ich muss mir das eh noch etwas anpassen, dann lasse ich mir hierfür auch noch was einfallen.

[psilo]

Dumbo75 evtl tune ich meine sachen auch noch.. ich muss mir aktuell aber erstmal echt für die verwendung gedanken machen. die widgets sind hübsch, aber sperrig.

[ERFI]

Also erstmal möcht' ich sagen, dass diese "Teile" echt Klasse aussehen. Dann hätte ich noch eine Frage (weil mir das in dem Screenshot von psilo aufgefallen ist), im Prinzip "off-topic" (ich möchte wegen so einer eigentl. banalen Frage keinen neuen Thread aufmachen) - aber viellecht kann mir ja doch Einer einen Tip geben: womit zeichnet Ihr Eure svg's? Ich hätte AutoCAD zur Verfügung, hab' aber gesehen, dass das Format nicht native unterstützt wird, also nur über Konverter zu bekommen ist.

[Tom Bombadil]

Hallo Erfi,
das wohl mit Abstand am häufigsten verwendete Programm ist Inkscape (Freeware) - das gute alte CorelDRAW oder Adobe Illustrator tun es auch. Angeblich kann auch Visio svg exportieren, hab es aber nicht probiert.
/tom

[ERFI]

Hallo Tom,
vielen Dank für Deine Antwort und damit einhergehende "Erleuchtung"! Phuu, war ich "blind". Ich verwende Visio beinahe täglich seit vielen Jahren ... der Export nach SVG ist mir noch nie aufgefallen. Inkscape schau' ich mir aber auch noch an. Vielen Dank' nochmal für die Info!

[psilo]

Was auch noch gut ist ist DIA. Ich muss meist aber egal mit was nochmals mit dem Texteditor drübergehen, damit die SVGs je nach Farbsetting mit einfärben.

[psilo]

Anbei ein kleines Update, da der vorherige Code nicht 2x das gleiche Widget konnte.. Man kann jetzt zudem die Farbe des Zeigers verändern und die Größe in Pixeln setzen.

Ich bin noch am Überlegen ob ich einen Radial mache, der auf meine Einspeisungs und Bezugs GAD hört und je nachdem den Zeiger grün oder rot macht.. dff.PNG

/**
 * Displays a steelseries lcd
 *
 * @param unique id for this widget
 * @param a gad/item
 */
{% macro lcd(id, gad) %}
   <canvas id="{{ id | replace({'.': '_'}) }}" data-widget="steelseries.lcd" data-item="{{ gad }}" width="50" height="50"></canvas>
   <script>
    var scroll = false;
    var {{ id | replace({'.': '_'}) }};

    function init() {
        // Initialzing gauge        
        var sections = [steelseries.Section(0, 70, 'rgba(255, 0, 0, 1.0)'),
                steelseries.Section(70, 95, 'rgba(255, 255, 0, 1.0)'),
                steelseries.Section(95, 100, 'rgba(0, 255, 0, 1.0)') ];
        {{ id | replace({'.': '_'}) }} = new steelseries.DisplaySingle('{{ id | replace({'.': '_'}) }}', {
            width: 120,
            height: 50,
            section: sections
            });
        {{ id | replace({'.': '_'}) }}.setLcdColor(steelseries.LcdColor.SECTIONS);
   }
   init();

   $(document).on('pagecreate', function (bevent, bdata) {
    $(bevent.target).find('canvas[id="{{ id | replace({'.': '_'}) }}"]').on( {
      'update': function (event, response) {
        event.stopPropagation();
        {{ id | replace({'.': '_'}) }}.setValue(parseFloat(response));
      }
    });
   });
 </script>    
{% endmacro %}

/**
 * Displays a steelseries linear
 *
 * @param unique id for this widget
 * @param the gad for the value
 * @param the gad for the threshold
 * @param min value
 * @param max value
 * @param title
 * @param unit
 */
{% macro linear(id, gad_value, gad_threshold, minValue, maxValue, title, unit) %}
   <canvas id="{{ id | replace({'.': '_'}) }}" data-widget="steelseries.linear" data-item="{{ gad_value }}, {{ gad_threshold}}" width="320" height="140"></canvas>
   <script>
    var {{ id | replace({'.': '_'}) }};

    function init() {
        {{ id | replace({'.': '_'}) }} = new steelseries.Linear('{{ id | replace({'.': '_'}) }}', {
                    width: 320,
                    height: 140,
                    gaugeType: steelseries.GaugeType.TYPE2,
                    titleString: "{{ title }}",
                    unitString: "{{ unit }}",
                    {% if not gad_threshold %}thresholdVisible: false,{% endif %}
                    {% if minValue %}minValue: {{ minValue }},{% endif %}
                    {% if maxValue %}maxValue: {{ maxValue }},{% endif %}
                    lcdVisible: true
                    });
   }
   init();

   $(document).on('pagecreate', function (bevent, bdata) {
    $(bevent.target).find('canvas[id="{{ id | replace({'.': '_'}) }}"]').on( {
      'update': function (event, response) {
        event.stopPropagation();
        {{ id | replace({'.': '_'}) }}.setValueAnimated(parseFloat(response[0]));
        {{ id | replace({'.': '_'}) }}.setThreshold(parseFloat(response[1]));
      }
    });
   });
 </script>    
{% endmacro %}
/**
 * Displays a steelseries linear bargraph
 *
 * @param unique id for this widget
 * @param the gad for the value
 * @param the gad for the threshold
 * @param min value
 * @param max value
 * @param title
 * @param unit
 */
{% macro linear_bargraph(id, gad_value, gad_threshold, minValue, maxValue, title, unit) %}
   <canvas id="{{ id | replace({'.': '_'}) }}" data-widget="steelseries.linear_bargraph" data-item="{{ gad_value }}, {{ gad_threshold}}" width="320" height="140"></canvas>
   <script>
    var {{ id | replace({'.': '_'}) }};

    function init() {
        {{ id | replace({'.': '_'}) }} = new steelseries.LinearBargraph('{{ id | replace({'.': '_'}) }}', {
                    width: 320,
                    height: 140,
                    gaugeType: steelseries.GaugeType.TYPE2,
                    titleString: "{{ title }}",
                    unitString: "{{ unit }}",
                    {% if not gad_threshold %}thresholdVisible: false,{% endif %}
                    {% if minValue %}minValue: {{ minValue }},{% endif %}
                    {% if maxValue %}maxValue: {{ maxValue }},{% endif %}
                    lcdVisible: true
                    });
   }
   init();

   $(document).on('pagecreate', function (bevent, bdata) {
    $(bevent.target).find('canvas[id="{{ id | replace({'.': '_'}) }}"]').on( {
      'update': function (event, response) {
        event.stopPropagation();
        {{ id | replace({'.': '_'}) }}.setValueAnimated(parseFloat(response[0]));
        {{ id | replace({'.': '_'}) }}.setThreshold(parseFloat(response[1]));
      }
    });
   });
 </script>    
{% endmacro %}
/**
 * Displays a steelseries radial
 *
 * @param unique id for this widget
 * @param the gad for the value
 * @param the gad for the threshold
 * @param min value
 * @param max value
 * @param widgetSize size of the widget in pixels. if left empty, 201 is set.
 * @param title
 * @param pointerColor according to steelseries.ColorDef, e.g. RED or GREEN
 * @param unit
 */
{% macro radial(id, gad_value, gad_threshold, minValue, maxValue, widgetSize, pointerColor, title, unit) %}

   {% if not widgetSize %}{% set widgetSize = 201 %}{% endif %}
   <canvas id="{{ id | replace({'.': '_'}) }}" data-widget="steelseries.radial" data-item="{{ gad_value }}, {{ gad_threshold}}" width="{{ widgetSize }}" height="{{ widgetSize }}"></canvas>
   <script>
    var {{ id | replace({'.': '_'}) }};

    function init() {        
        {{ id | replace({'.': '_'}) }} = new steelseries.Radial('{{ id | replace({'.': '_'}) }}', {
            gaugeType: steelseries.GaugeType.TYPE4,
            size: {{ widgetSize }},
            titleString: "{{ title }}",
            unitString: "{{ unit }}",
            {% if pointerColor %}pointerColor: steelseries.ColorDef.{{pointerColor}},{% endif %}
            {% if not gad_threshold %}thresholdVisible: false,{% endif %}
            {% if minValue %}minValue: {{ minValue }},{% endif %}
            {% if maxValue %}maxValue: {{ maxValue }},{% endif %}
            ledVisible: false,
            lcdVisible: true,
            lcdDecimals: 1,
            useOdometer: false
            });
   }
   init();

   $(document).on('pagecreate', function (bevent, bdata) {
    $(bevent.target).find('canvas[id="{{ id | replace({'.': '_'}) }}"]').on( {
      'update': function (event, response) {
        event.stopPropagation();
        {{ id | replace({'.': '_'}) }}.setValueAnimated(parseFloat(response[0]));
        {{ id | replace({'.': '_'}) }}.setThreshold(parseFloat(response[1]));
      }
    });
   });
 </script>    
{% endmacro %}

[psilo]

Die Dinger können wohl sogar einen Audio-Alarm:

        // Create audio tag for alarm sound
        var audioElement;
        if (playAlarm && alarmSound !== false) {
            audioElement = doc.createElement('audio');
            audioElement.setAttribute('src', alarmSound);
            audioElement.setAttribute('preload', 'auto');
        }