FTUI Gartenbewässerung per SVG Grafik einbinden und ansteuern

[Roger79]

Hallo zusammen,

leider komme ich an einer Stelle nicht mehr weiter.

Ich habe meinen Garten mit insgesamt 15 Magnetventilen bestückt und per ESP Eeasy (Wemos D1 Mini) angesteuert.

Nun steht aber noch an, das Ganze auf dem Tablet im Flur anzuzeigen. Mir ist klar wie ich die einzelnen Devices entsprechend darstellen kann.

Damit bei der Anzahl von Ventilen nicht der Überblick verloren geht habe ich einen Plan meines Gartens per Inkspace erstellt und als SVG gespeichert.
Diese SVG in meine HTML Seite eingebunden und jedem Bereich, voher per Inkspace definiert, eine eigene ID vergeben, so dass ich diesen per JS entsprechend einfärben kann.

Beim Klicken des Buttons kann ich mittels "onclick" darauf reagieren und mein Script wird durchlaufen.

Die Gartenbewässerung läuft meist im Hintergrund per Zeitsteuerung ab. D.h. ich löse keinen gezielten KLICK durch ein Button aus.

Hat jemand eine Idee wie ich auf das "setOn" im Widget bzw. auf die addClass "active" reagieren kann ohne das Widget modifzieren zu müssen?

SVG Datei

Code Auswählen Erweitern

<!-- Übersichtsgrafik der Beregner -->
<svg viewbox="0 0 195 214.99999">
    <g id="layer1">
<image id="Garten" height="210.60834" preserveAspectRatio="none" style="image-rendering:optimizeSpeed" width="191.02916" x="0" xlink:href="data:image/png;base64,
    iVBORw0KGgoAAAANSUhEUgAAAtIAAAMcCAYAAAB9/0LaAAAABHNCSVQICAgIfAhkiAAAIABJREFU
.
.
.
BQAAAABJRU5ErkJggg==" y="0" />

<rect id="Beet1" height="113.32228" style="fill-opacity:1;stroke-width:0.264583" width="8.8198938" x="3" y="5.6" />
<rect id="Beet2" height="5.8799305" style="fill-opacity:1;stroke-width:0.256996" width="164.15704" x="21.7" y="5.6" />
<rect id="Beet3" height="143.25647" style="fill:#86ab37;fill-opacity:1;stroke-width:0.264583" width="10.423512" x="177" y="12.8" />
<rect id="Beet4" height="14.165285" style="fill:#86ab37;fill-opacity:1;stroke-width:0.264583" width="36.615925" x="129.4" y="14.2" />
<rect id="Beet5" height="70.02462" style="fill:#86ab37;fill-opacity:1;stroke-width:0.264583" width="12.027128" x="44.2" y="133.1" />
<rect id="Beet6" height="46.504898" style="fill:#86ab37;fill-opacity:1;stroke-width:0.264583" width="1.6036172" x="72" y="161.1" />
<rect id="Beet7" height="1.8708706" style="fill:#86ab37;fill-opacity:1;stroke-width:0.264583" width="18.441595" x="73.6" y="205.8" />
<rect id="Beet8" height="1.6036007" style="fill:#86ab37;fill-opacity:1;stroke-width:0.264583" width="26.994219" x="73.6" y="159.6" />
      </g>
</svg>


Hier mal mein Versuch per Sctipt:

per Klick auf den Button wird TEST ausgeführt und meine HOffnung war, dass ich auf SetOn reagieren kann.

Code Auswählen Erweitern

function Test() {
  var elem = document.getElementById("BtnBeet1").firstChild;
  var elem2 = elem.firstChild;
  var color = elem2.style.color;


  if (color == "rgb(170, 105, 0)") {
document.getElementById("Beet1").style.fill = "red";
  }
  else if (color == "rgb(80, 80, 80)") {
document.getElementById("Beet1").style.fill = "black";
  }
}
function setOn() {
  var elem = document.getElementById("BtnBeet1").firstChild;
  var elem2 = elem.firstChild;
  var color = elem2.style.color;


  if (color == "rgb(170, 105, 0)") {
document.getElementById("Beet1").style.fill = "red";
  }
  else if (color == "rgb(80, 80, 80)") {
document.getElementById("Beet1").style.fill = "black";
  }
}

}




Hier die Funktion zu setOn im fa-multi-button.js

Code Auswählen Erweitern

        function setOn() {

            state = true;

            elem.bg.css("color", options['onBackgroundColor']);
            elem.fg.css("color", options['onColor']);
            faElem.addClass('active');
            elem.trigger('setOn');
        }



Vielen Dank
Roger

[Gunther]

Da ich noch nicht ganz verstehe, was Du machen willst... (und auch nicht, was Incspace ist)...

Kannst Du nicht den Grundriss darstellen, dort Icons manuell platzieren und den Status aus den Readings nehmen um einzufärben. Geht doch alles mit Standard-Tablet UI Werkzeugen.

[Roger79]

Ich sehe, ich habe es zu kompliziert erklärt. Inkscape ist einfach nur ein Programm zum Bearbeiten von Vektorgrafiken.

Ich möchte auf diversen Tablets und Smartphones, aber auch auf dem Desktop eine Seite für meinen Garten erstellen, am besten Responsive, damit ich nicht unterschiedliche Seiten definieren muss.

Es sollen auf der Seite div. Buttons (switches) angezeigt werden, mit denen ich direkt die Rasensprenger ansteuern kann. Das bekomme ich auch hin.

Zusätzlich möchte ich einen Plan meines Gartens einblenden. Diesen habe ich per SVG eingebunden.
Wenn nun ein Bereich beregnet wird, soll dieser mit einer anderen Farbe eingefärbt werden. Dazu habe ich diesen Bereich mit einer eigenen HTML ID z.B. #Beet1 hinterlegt.

Ich sehe den Vorteil in der Verwendung einer SVG Grafik, dass diese trotz Größenunterschiede der Geräte insich stabil bleibt.
Ich hatte es schon versucht die Switches direkt auf die Grafik zu platzieren. Das hat auch gut für eine Fenstergröße funktioniert.
Ruft man es dann auf dem Smartphone die Seite auf, so passt die Positionierung und Größe der Switches nicht mehr zu Grafik überein.


Daher versuche ich gerade einen Weng zu finden auf das hoffentlich vorhandene Event "setOn" reagieren zu können.