Steelseries-Canvas in smartvisu?

[panzaeron]

Hat schon jemand versucht die SteelSeries-Canvas mit smartvisu zu verheiraten. Ich könnte mir gut vorstellen, dass man damit eine nette Startseite gestalten kann...
Code auf Github

[Dumbo75]

Ich habe das auf meiner Startseite als iframe eingebunden.

[Bonze]

Sowas koennte man doch bestimmt http://www.jqueryscript.net/chart-gr...ite-Vroom.html hiermit, nachbilden ?

[Dumbo75]

Das schaut dann so aus:

IMG-20161219-WA0000.jpeg

[psilo]

Wie bedatet ihr die?

Sieht auf jdn. Fall ganz schick aus und sollte mit fairem Aufwand machbar sein... Vielleicht auch was für meinen Weihnachtsurlaub.

[Dumbo75]

Über einen kleinen "Umweg".
Ich zeige die Werte auf der Seite an und verstecke diese dann mit css. Mit dem iframe habe ich aber trotzdem Zugriff auf diese eindeutigen Elemente. Somit kann ich dann die Zeiger steuern.

[psilo]

Dumbo75 naja es gibt ja methoden zum "live" bedaten.. da sollte sich schon was bauen lassen.

PS: Meine Testintegration updated schon live, ist nur sehr unschön integriert.. darauf kann ich aber aufbauen:
ff.PNG

[Dumbo75]

So hole ich ja die Werte. Nur habe ich ja aktuell die Anzeigen als iframe geladen. Da muss ich ja irgendwie an die Daten kommen. Muss mich mal näher mit dem Aufbau auseinandersetzen, wie das ohne iframe klappen könnte, damit ich die fhem-Daten direkt verwenden kann. Noch komme ich nur über den Umweg zum Ziel.

[psilo]

Dumbo75: ich mache das aber doch ohne iFrame.. Aktuell via:

$(document).delegate('canvas[data-widget="steelseries.lcd"]', {
'update': function (event, response) {
single1.setValue(parseFloat(response));
},

Ich muss noch schauen wie ich das generischer hinkriege. ich befürchte nur das canvas element zu holen wird nicht funktionieren.

[psilo]

so, das hier würde als Widget für das LCD Element / ein "Linear" (Thermometer, mit Wert + Threshold via 2 versch. GADs) schon mal gehen. gg.PNG
Gerade auch mal am Handy getestet.. optisch 1a, allerdings etwas laggy bei Veränderungen

[psilo]

ich kann das jetzt noch beliebig ausbauen.. mir fehlen nur gerade ideen, wo ich die widgets wirklich sinnvoll einsetzen kann :>

[Bonze]

Das runde wäre sehr nice, denke ich bzw das ware fuer die meisten sehr interessant

[psilo]

welches der runden

[psilo]

So hier das set um ein simples Radial erweitert:

/**
 * 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).delegate('canvas[data-widget="steelseries.lcd"]', {
    'update': function (event, response) {               
        // DEBUG: console.log("[basic.textinput] update '" + this.id + "':", response);
                {{ 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.lcd" 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).delegate('canvas[data-widget="steelseries.lcd"]', {
    'update': function (event, response) {               
        // DEBUG: console.log("[basic.textinput] update '" + this.id + "':", response);
                {{ 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.lcd" 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).delegate('canvas[data-widget="steelseries.lcd"]', {
    'update': function (event, response) {               
        // DEBUG: console.log("[basic.textinput] update '" + this.id + "':", response);
                {{ 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).delegate('canvas[data-widget="steelseries.radial"]', {
    'update': function (event, response) {               
        // DEBUG: console.log("[basic.textinput] update '" + this.id + "':", response);
                {{ id | replace({'.': '_'}) }}.setValue(parseFloat(response[0]));
                {% if gad_threshold %}{{ id | replace({'.': '_'}) }}.setThreshold(parseFloat(response[1]));{% endif %}
    }    
    });
 </script>     
{% endmacro %}

Die JS Libs entpacken und bspw via
<script type="text/javascript" src="vendor/SteelSeries/steelseries-min.js"></script>
<script type="text/javascript" src="vendor/SteelSeries/tween-min.js"></script>
einbinden.

Widget importieren und mit dem hier aufrufen:

{% import "widgets/widget_steelseries.html" as steelseries %}
{{ steelseries.radial('steel.office.temperature.state ','office.temperature.state','office.temperature.plan', 0, 40, 'Temperatur Büro', '°C') }}

Beispiele: ff.PNG
g.PNG

[Bonze]

Koennte man das nicht sogar ins offizielle smartvisu aufnehmen ?