Ankündigung

**mumpf** · 13.01.2017, 22:29

Hi allerseits,

dann bin ich wohl dran. Ich hoffe, es ist übersichtlich genug:

Zuerallererst: Ein Widget, dass nur Daten anzeigen soll, ist recht einfach zu machen. Wenn es um Interaktion gehen soll (also irgendwas clicken oder ziehen), dann kann es beliebig kompliziert werden, aber das ist nicht das Thema von diesem Thread.

Die Hauptarbeit liegt in dem obigen SVG. Wenn man sich die ersten paar Zeilen anschaut:

Code:

<svg width="300" height="168" viewBox="0 0 900 500">
<text class="Fussbodenheizung" font-family="sans-serif" font-size="63px" x="485" y="329">-°C</text>
<text class="Aussentemperatur" font-family="sans-serif" font-size="63px" x="5" y="159">-°C</text>
<text class="Warmwasser" font-family="sans-serif" font-size="63px" x="705" y="192">-°C</text>
<text class="Innentemp" font-family="sans-serif" font-size="63px" x="425" y="192">-°C</text>
<text class="Status" font-family="sans-serif" font-size="63px"  x="200" y="492">...</text>

dann sieht man 2 Sachen:

Die erste Zeile gibt mit width und height die Größe des Widgets in callidomus an, mit viewBox wird die callidomus-Größe auf ein abstraktes Koordinatensystem gemapped. Die Koordinatenangaben im SVG beziehen sich immer auf dieses Koordinatensystem.
Die Platzhalter für die Ausgabe der Werte sind SVG-Text-Tags, die alle auch eine Klasse zugewiesen haben müssen, die sagt, was das für ein Text ist. Durch ihre x- und y-Koordinaten sind die Dinger schon im SVG an der richtigen Stelle.

Wir brauchen jetzt also ein Stück Programmcode, der das SVG auf die Webseite der callidomus-Visu bringt und die Werte der Text-Tags (das sind die -°C hinten) mit Item-Werten aus callidomus austauscht und auch immer aktualisiert. Dann würde das in der Visu schon funktionieren. Ferner wollen wir das Widget ja auch noch in der GUI hinzufügen können, deswegen brauchen wir noch coding für den "Widget-Hinzufügen-Dialog".

Das war es dann auch schon... dann machen wir das!

Erstmal ein paar Vorbereitungen:
Eigene Widgets gehören in das Verzeichnis

Code:

/data/callidomus/local/visu/widgets

Da legen wir dann ein neues Unterverzeichnis an und erzeugen eine Widget-Verzeichnisstruktur:

Code:

cd /data/callidomus/local/visu/widgets
md web2comheiz
md web2comheiz/static
nano web2comheiz/static/detail.svg
---- hier jetzt das svg aus Thorstens Beitrag reinkopieren ----
---- Taste Strg-o drücken ----
---- Taste Strg-x drücken ----

So, jetzt haben wir schon mal das SVG an der richtigen Stelle.
Für den "Widget-Hinzufügen-Dialog" und um das SVG auf die Visu-Seite zu bringen, brauchen wir ein python-Programm. Python deswegen, weil das von callidomus direkt aufgerufen wird und callidomus in python geschrieben ist. Zuerst kommt jetzt das kommentierte Programm, dann die Anweisung, wie man es ins System bekommt:

Code:

# Diese Imports muessen immer da sein
import collections
import widgets

# Der Name der Widget-Klasse muss immer wie das Widget heißen, nur mit einem Großbuchstaben beginnen
class Web2comheiz(widgets.Widget):

    # Als erstes muss man die API vom Widget beschreiben, also wie wird das Widget technisch aufgerufen
    api = {
        # Name des Widgets (derzeit nur Kleinbuchstaben und Zahlen)
        'name': 'web2comheiz',
        # Beschreibung des Widgets
        'desc': 'Heizungswidget für web2com Wärmepumpen',
        'cat': 'Value',
        # Beispielcode für den Aufruf
        # Das folgende MUSS syntaktisch korrekt sein, da es für den Visu- und GUI-Build genutzt wird!
        'examples': [
            # im folgenden muss der widgetname und alle Parameternamen korrekt sein, die Inhalte sind beliebig
            {'code': "web2comheiz(item='demo.temperature', fbh='demo.rtr.set',\
                aussen='demo.rtr.mode', innen='demo.rtr.open', h2o='demo.rtr.set',\
                name='web2comHeiz', desc='Heizung')"}
        ],
    }

    # Ab hier wird der Dialog fuer den Widget-Editor im GUI definiert
    def __init__(self):
        # Die folgende Zeile ist notwendig
        widgets.Widget.__init__(self)

        # Jedes Widget hat mindestens eine Item-Referenz, der Parameter item ist somit bereits definiert, wir geben dem Paramter
        # nur noch seinen Namen
        self.params['item']['label'] = 'Item Status'

        # Eine vollstaendige Item-Parameter-Definition mit Namen (label), Wertebereich (pattern), Argumentnotwendigkeit (required),
        # Clickaktion (onfocus) und Online-Hilfe (help). Daraus wird in der GUI ein Eingabefeld für ein Item.
        self.params['fbh'] = {'label': 'Item Fussbodenheizung', 'pattern': 'item', 'required': None,
                              'onfocus': 'cg.acItems.focus(this);',
                              'help': """ Temperatur der Fussbodenheizung in °C """}

        self.params['aussen'] = {'label': 'Item Aussentemperatur', 'pattern': 'item', 'required': None,
                               'onfocus': 'cg.acItems.focus(this);',
                               'help': """ Aussentemperatur in °C """}

        self.params['innen'] = {'label': 'Item Innentemperatur', 'pattern': 'item', 'required': None,
                               'onfocus': 'cg.acItems.focus(this);',
                               'help': """ Innentemperatur in °C """}

        self.params['h2o'] = {'label': 'Item Warmwassertemperatur', 'pattern': 'item', 'required': None,
                               'onfocus': 'cg.acItems.focus(this);',
                               'help': """ Warmwassertemperatur in °C """}

        # Hiermit kann man die Reihenfolge der Parameter auf der Eingabemaske bestimmen
        self.params.move_to_end('h2o', last=False)
        self.params.move_to_end('innen', last=False)
        self.params.move_to_end('aussen', last=False)
        self.params.move_to_end('fbh', last=False)
        self.params.move_to_end('item', last=False)

    # Das folgende Coding bringt das SVG auf die HTML-Seite der Visu und sagt der Visu auch, welche Items
    # dargestellt werden solen. Die Werte dieser Items aktualisiern sich dann auch automatisch.
    def __call__(self, **kwargs):
        # Notwendige Zeile
        self.include(__file__)

        # Defaultparameter, die vorbelegt werden
        kwargs.setdefault("size", "m")
        kwargs.setdefault("showstatus", 0)

        # Diese Items werden dargestellt und aktualisiert, deren Namen wurde in der oben definierten Maske eingegeben
        # und stehen in kwargs
        items = [kwargs['item'], kwargs['fbh'], kwargs['aussen'], kwargs['innen'], kwargs['h2o']]

        # Hier wird das Aussehen des Detail-Widgets bestimmt. Das ist das Widget für den Tablet- und Browser-Modus
        # Technisch wird hier das SVG geladen und auf die HTML-Seite gebracht. Ferner bekommt das SVG noch einen
        # Namen, damit man es spaeter finden kann
        kwargs['detail'] = self.load(
            "widgets/web2comheiz/detail.svg",
            {'class': 'web2comHeizDetail'})

        # Hier wird das Aussehen des Digest-Widgets bestimmt. Das ist das Widget für den Mobile-Modus (Handy)
        # Bei diesem Widget sieht der Handy-Modus genau so aus wie der Tablet-Modus, trotzdem bekommt das
        # Widget einen eigenen Namen
        kwargs['digest'] = self.load(
            "widgets/web2comheiz/detail.svg",
            {'class': 'web2comHeizDigest'})

        # Die oben definierten Items werden hier uebergeben, damit sie gelesen und aktualisiert werden koennen
        kwargs['attr'] = {'data-item': ' '.join(items)}

        # Und der Widget-Name wird noch uebergeben
        kwargs['widget'] = self.name

        # Hier wird technisch auf die HTML-Seite der Visu geschrieben
        print(self.frame(kwargs))

Dieses Programm bekommt man folgendermaßen ins system:

Code:

nano __init__.py
---- Jetzt das obige Coding reinkopieren ----
---- Taste Strg-o ----
---- Taste Strg-x ----

Mit den obigen Schritten hätten wir alles im Browser in der Visu und der Browser wüsste schon, welche Items aktualisiert werden sollen. Leider weiß der Browser noch nicht, wo er die aktualisierten Werte schreiben soll. Das macht man mit einem Javascript-Programm. Wir brauchen deswegen Javascript, weil dieses Programm im Browser auf dem Visu-Rechner läuft, nicht auf dem callidomus-Server. Und der Browser spricht nichts anderes als Javascript.

Code:

//Wichtig: hier muss der widgetname stehen
cd.widgets.web2comheiz = {

    // Die folgende refresh-Funktion macht nichts, aber es gibt Fehler, wenn man sie rausloescht
    refresh: function (widgets) {
        //       widgets.each( function() {
        //           var widget = $(this);
        //       });
    },

    // Hier wird beschrieben, was aktualisiert werden soll
    // Die Funktion wird von der Visu aufgerufen und ihr wird gesagt
    // Hey widget, Dein item 'ABC' hat jetzt den val 5
    // Die Funktion dient dazu, diesen Wert an die richtige Stelle zu schreiben
    // Das Coding kann man noch stark komprimieren, aber mir ging es hier
    // eher darum, es nachvollziehbar zu machen
    update: function (widget, item, val) {

        // Erstmal holen wir uns alle Items, deren Positionen wir im SVG kennen und die wir somit aktualisiern wollen
        // Die Items haben wir im python an kwargs['attr'] uebergeben und holen sie uns hier zurueck
        var items = widget.attr('data-item').split(' ');
        // Jetzt wird jeder einzelne Item-Name rausgeholt
        var status = items[0];
        var fbh = items[1];
        var aussen = items[2];
        var innen = items[3];
        var h2o = items[4];

        // Es werden beide SVG, die wir im Python auf die Visu-Seite geschrieben haben, gesucht und gemerkt
        svg1 = d3.select(widget[0]).select('svg.web2comHeizDetail');
        svg2 = d3.select(widget[0]).select('svg.web2comHeizDigest');

        //Jetzt wird einfach fuer jedes Item geschaut, ob es den richtigen Namen hat und wenn ja, dann wird passend geaendert
        if (item == status) {
            // Beim Status-Item bekommt das SVG-Tag text mit dem Namen Staus den neuen Wert
            // Es wird immer in beiden SVG geaendert, das beide gleich behandelt werden
            svg1.select('text.Status').text(val);
            svg2.select('text.Status').text(val);
            return;
        } else if (item == fbh) {
            svg1.select('text.Fussbodenheizung').text(val.toFixed(1) + '°C');
            svg2.select('text.Fussbodenheizung').text(val.toFixed(1) + '°C');
            return;
        } else if (item == aussen) {
            svg1.select('text.Aussentemperatur').text(val.toFixed(1) + '°C');
            svg2.select('text.Aussentemperatur').text(val.toFixed(1) + '°C');
            return;
        } else if (item == innen) {
            svg1.select('text.Innentemp').text(val.toFixed(1) + '°C');
            svg2.select('text.Innentemp').text(val.toFixed(1) + '°C');
            return;
        } else if (item == h2o) {
            svg1.select('text.Warmwasser').text(val.toFixed(1) + '°C');
            svg2.select('text.Warmwasser').text(val.toFixed(1) + '°C');
            return;
        }

    }
}

Dieses Programm bekommt man folgendermaßen ins system:

Code:

nano widget.js
---- Jetzt das obige Coding reinkopieren ----
---- Taste Strg-o ----
---- Taste Strg-x ----

So, das war es, ein widget.css brauchen wir in diesem Beispiel nicht, da die Formatierung schon im SVG geschehen ist.

Jetzt muss man nur noch folgendes Kommando ausführen:

Code:

callidomus.gui build

Anschließend kann man in der GUI das Widget zu einer Visuseite hinzufügen web2com.PNG

Dann Visu generieren und das Widget genießen.

Wichtig für neue Widgets: Derzeit können Widget-Namen nur aus Kleinbuchstaben und Zahlen bestehen, macht keine Grossbuchstaben rein, das funktioniert nicht.

Gruß, Waldemar

**mumpf** · 16.01.2017, 15:07

Hi,

es kam noch die Frage, wie man einen Status im Gruppenkopf darstellt. Das geht relativ einfach. Ich habe im GUI auch noch ein Flag spendiert, über das man die Ausgabe im Gruppenkopf aktivieren/deaktivieren kann (wie Marcus das an vielen Stellen macht):

web2com.PNG
Was braucht man: Ein neues Feld "state" mit dem Text "Item Status", falls man nicht den Wert irgend eines schon vorhandenen Items im Kopf darstellen will.
Das Flag "Status im Gruppenkopf anzeigen".

Dann sind es nur Ergänzungen im obigen __init__.py, damit diese Sachen auf der Webseite auftauchen. Für die Statusausgabe selbst nutze ich das Value-Widget, das dann selbst für die Aktualisierung des Wertes sorgt. Deswegen muss man auch nichts am Javascript ändern:

Code:

# Diese Imports muessen immer da sein
import collections
import widgets

# Der Name der Widget-Klasse muss immer wie das Widget heißen, nur mit einem Großbuchstaben beginnen
class Web2comheiz(widgets.Widget):

    # Als erstes muss man die API vom Widget beschreiben, also wie wird das Widget technisch aufgerufen
    api = {
        # Name des Widgets (derzeit nur Kleinbuchstaben und Zahlen)
        'name': 'web2comheiz',
        # Beschreibung des Widgets
        'desc': 'Heizungswidget für web2com Wärmepumpen',
        'cat': 'Value',
        # Beispielcode für den Aufruf
        # Das folgende MUSS syntaktisch korrekt sein, da es für den Visu- und GUI-Build genutzt wird!
        'examples': [
            # im folgenden muss der widgetname und alle Parameternamen korrekt sein, die Inhalte sind beliebig
            {'code': "web2comheiz(item='demo.temperature', fbh='demo.rtr.set',\
                aussen='demo.rtr.mode', innen='demo.rtr.open', h2o='demo.rtr.set',\
                name='web2comHeiz', desc='Heizung')"},
[COLOR=#FF0000]            {'code': "web2comheiz(item='demo.temperature', fbh='demo.rtr.set',\
                aussen='demo.rtr.mode', innen='demo.rtr.open', h2o='demo.rtr.set',\
                status='demo.rts.state', name='web2comHeiz', desc='Heizung', showstatus=1)"}[/COLOR]
        ],
    }

    # Ab hier wird der Dialog fuer den Widget-Editor im GUI definiert
    def __init__(self):
        # Die folgende Zeile ist notwendig
        widgets.Widget.__init__(self)

        # Jedes Widget hat mindestens eine Item-Referenz, der Parameter item ist somit bereits definiert, wir geben dem Paramter
        # nur noch seinen Namen
        self.params['item']['label'] = 'Item Status'

        # Eine vollstaendige Item-Parameter-Definition mit Namen (label), Wertebereich (pattern), Argumentnotwendigkeit (required),
        # Clickaktion (onfocus) und Online-Hilfe (help). Daraus wird in der GUI ein Eingabefeld für ein Item.
        self.params['fbh'] = {'label': 'Item Fussbodenheizung', 'pattern': 'item', 'required': None,
                              'onfocus': 'cg.acItems.focus(this);',
                              'help': """ Temperatur der Fussbodenheizung in °C """}

        self.params['aussen'] = {'label': 'Item Aussentemperatur', 'pattern': 'item', 'required': None,
                               'onfocus': 'cg.acItems.focus(this);',
                               'help': """ Aussentemperatur in °C """}

        self.params['innen'] = {'label': 'Item Innentemperatur', 'pattern': 'item', 'required': None,
                               'onfocus': 'cg.acItems.focus(this);',
                               'help': """ Innentemperatur in °C """}

        self.params['h2o'] = {'label': 'Item Warmwassertemperatur', 'pattern': 'item', 'required': None,
                               'onfocus': 'cg.acItems.focus(this);',
                               'help': """ Warmwassertemperatur in °C """}

[COLOR=#FF0000]        self.params['state'] = {'label': 'Item Status', 'pattern': 'item', 
                               'onfocus': 'cg.acItems.focus(this);',
                               'help': """ Der Wert dieses Items wird in der Kopfzeile ausgegeben """}

        self.params['showstatus'] = {
            'label': 'Status im Gruppenkopf anzeigen',
            'type': 'checkbox',
            'checked': None,
            'help': """Wenn dieses Flag gesetzt ist, dann wird der Wert vom 'Status Item' in der Kopfzeile angezeigt.""",
        }[/COLOR]


        # Hiermit kann man die Reihenfolge der Parameter auf der Eingabemaske bestimmen
        self.params.move_to_end('h2o', last=False)
        self.params.move_to_end('innen', last=False)
        self.params.move_to_end('aussen', last=False)
        self.params.move_to_end('fbh', last=False)
        self.params.move_to_end('item', last=False)

    # Das folgende Coding bringt das SVG auf die HTML-Seite der Visu und sagt der Visu auch, welche Items
    # dargestellt werden solen. Die Werte dieser Items aktualisiern sich dann auch automatisch.
    def __call__(self, **kwargs):
        # Notwendige Zeile
        self.include(__file__)

        # Defaultparameter, die vorbelegt werden
        kwargs.setdefault("size", "m")
        kwargs.setdefault("showstatus", 0)

        # Diese Items werden dargestellt und aktualisiert, deren Namen wurde in der oben definierten Maske eingegeben 
        # und stehen in kwargs
        items = [kwargs['item'], kwargs['fbh'], kwargs['aussen'], kwargs['innen'], kwargs['h2o']]

[COLOR=#FF0000]        # Statusausgabe in der Kopzeile der Gruppe
        # Hier soll exemplarisch eine kleine "Dynamisierung" gezeigt werden
        # Die Statusausgabe wird nur gemacht, wenn auch das entsprechende Flag angegeben ist und das Statusitem vorbelegt ist
        if int(kwargs['showstatus']) == 1 and 'state' in kwargs:
            # Das Statusitem muss dann auch an Javascript gegeben werden
            items.append(kwargs['state'])
            # Das html für die Statusausgabe, nutzt das normale value-widget, deswegen ist kein extra javascript fuer ein Wertupdate noetig
            showStatusHtml = '<span class="showState">' + self.widgets['value'].html(item=kwargs['state'], round=1) + '</span>'
            # und der Laufzeit dieses html als Statusinfo übergeben 
            kwargs['status'] = showStatusHtml[/COLOR]

        # Hier wird das Aussehen des Detail-Widgets bestimmt. Das ist das Widget für den Tablet- und Browser-Modus
        # Technisch wird hier das SVG geladen und auf die HTML-Seite gebracht. Ferner bekommt das SVG noch einen 
        # Namen, damit man es spaeter finden kann
        kwargs['detail'] = self.load(
            "widgets/web2comheiz/detail.svg",
            {'class': 'web2comHeizDetail'})
        # Hier wird das Aussehen des Digest-Widgets bestimmt. Das ist das Widget für den Mobile-Modus (Handy)
        # Bei diesem Widget sieht der Handy-Modus genau so aus wie der Tablet-Modus, trotzdem bekommt das 
        # Widget einen eigenen Namen
        kwargs['digest'] = self.load(
            "widgets/web2comheiz/detail.svg",
            {'class': 'web2comHeizDigest'})
        # Die oben definierten Items werden hier uebergeben, damit sie gelesen und aktualisiert werden koennen
        kwargs['attr'] = {'data-item': ' '.join(items)}
        # Und der Widget-Name wird noch uebergeben
        kwargs['widget'] = self.name
        # Hier wird technisch auf die HTML-Seite der Visu geschrieben
        print(self.frame(kwargs))

Die Änderungen sind rot hervogehoben!

Gruß, Waldemar

**RoyalTS** · 16.01.2017, 16:07

Danke Waldemar!

Macht total Spass neues zu basteln

Bildschirmfoto vom 2017-01-16 16-01-57.png

**Stereofeld** · 16.01.2017, 16:39

Zitat von RoyalTS Beitrag anzeigen

Macht total Spass neues zu basteln

... wer jetzt noch rumheult: "Solange 1-Wire nicht geht, benutze ich callidomus nicht!" - dem ist auch nicht mehr zu helfen.

**heckmannju** · 16.01.2017, 16:40

ja sieht klasse aus!

**HeyFisch** · 16.01.2017, 23:12

Nabend,

echt der Hammer, was Ihr da gebaut habt

- so etwas hatte ich mir auch schon mal überlegt, doch den Aufwand gescheut. Ich denke ich muss mir da einen Teil für meine AlphaInnotec "borgen".

Ciao,
Fisch

**heckmannju** · 16.01.2017, 23:29

Hi,
vielleicht mal auf https://github.com/callidomus/widgets ablegen...
Viee Grüsse
Jürgen

**RoyalTS** · 17.01.2017, 07:08

@Jürgen: ich schau mal, dass ich die nächsten Tage ein Paket schnür' (inkl. Item-CSV, etc.)

**mumpf** · 17.01.2017, 08:47

Hi Thorsten,

2 Sachen:

Du solltest noch einen griffigeren Namen für die beiden widgets finden. Da Du aber der Erfinder bist, ist es natürlich Dir überlassen
Bitten nicht in das widgets-git auch noch logiken und item-exporte... die Widgets sind komplett unabhängig vom Rest, können für jede Wärmepumpe oder sogar für Heizungen verwendet werden, sofern die angeforderten Messgrößen in Items verfügbar sind. In dieses git sollte nur das rein, was unter visu/widgets steht... Ansonsten wird es zu verwirrend.

Gruß, Waldemar

**RoyalTS** · 17.01.2017, 08:48

Okok

Beide Vorschläge werden aufgenommen.

**heckmannju** · 17.01.2017, 09:20

Hi,
warum hast du bei FBH nur einen Wert gemacht? Ist das die Estrichtemperatur oder der Mittelwert VL/RL oder nur der VL Temperatur der FBH ist für mich nicht so klar?
VG
Jürgen

**RoyalTS** · 17.01.2017, 09:27

Hi Jürgen,

das ist nur die "Heizkreis Vorlauftemperatur". Da hab ich mich an die Grafiken von Ochsner gehalten.

Grüße
Thorsten

**RoyalTS** · 17.01.2017, 09:29

So, hab meine beiden Widgets nochmal überarbeitet.
Würde die aktuelle Version heute Abend daheim nochmal testen und dann auf Github ablegen.

Sollte sie jemand vorher testen wollen, einfach melden

**mumpf** · 17.01.2017, 09:29

Hi Jürgen,

es ist der Wert eines Items - wie der Wert berechnet wird, hat nichts mit dem Widget zu tun. Mit der Anleitung oben sollte es aber auch kein Problem sein, weitere Werte im SVG zur Verfügung zu stellen.

Gruß, Waldemar

Ankündigung

Anleitung: Widgeterstellung und zugehörige Logik (Bsp. Wärmepumpe mit web2com)

[callidomus] Anleitung: Widgeterstellung und zugehörige Logik (Bsp. Wärmepumpe mit web2com)

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar