Wenn dies dein erster Besuch hier ist, lies bitte zuerst die Hilfe - Häufig gestellte Fragen durch. Du musst dich vermutlich registrieren, bevor du Beiträge verfassen kannst. Klicke oben auf 'Registrieren', um den Registrierungsprozess zu starten. Du kannst auch jetzt schon Beiträge lesen. Suche dir einfach das Forum aus, das dich am meisten interessiert.
Hast du ne Anleitung/Beschreibung wie ich sowas basteln kann. Die statischen Icons sind für mich nicht das Problem. Schwierig wird es da die dynamik rein zu bekommen.
waere auf jedenfall ne ganz lustige sache...
so wie ich die svg icons verstehe, sind das auch nur container dateien
d.h. es gibt sagen wir mal 10 einzelne png bilder, die dann uber eine xml datei bei jedem zustand aufgerufen werden ?
EDIT: unter Visu/widgets/icon.html
steht folgendes:
/**
* a windsock
*
* @param unique id for this widget
* @param a gad/item for switching
* @param a gad/item for the angle of the pin
* @param the minimum value for 0° (optional, default 0, for future use)
* @param the maximum value for ~90° (optional, default 255)
*/
{% macro windsock(id, gad_switch, gad_value, min, max) %}
so wie ich die svg icons verstehe, sind das auch nur container dateien d.h. es gibt sagen wir mal 10 einzelne png bilder, die dann uber eine xml datei bei jedem zustand aufgerufen werden ?
SVGs sind viel mehr als einzelne Bilder für den Sonnenstand könnte das SVG z.B. so aussehen, welches in "icon.html" eingefügt wird:
Erklärung:
Das SVG erzeugt einen großen Halbkreis und zwei kleine Kreise welche die Sonne darstellen, die Sonnenstrahlen werden durch den zweiten Kreis mit einer Strichpunktlinie dargestellt. (ein Kreis würde auch genügen aber mit dem extra Kreis sieht es etwas besser aus, weil dadurch ein kleiner Abstand zwischen Strahlen und Sonne besteht) <g>-TAG gruppiert Objekte ist hier eingentlich nicht notwendig <path> erzeugt einen Halbkreis, das stroke="black" muss später weggelassen werden, da es vom theme/design vorgegeben wird, ist hier nur zum Testen drin. <circle> sind einfach zwei Kreise mit dem Mittelpunkt 50,40 und dieser wird am Ende durch JavaScript gesetzt.
Der angegebene Code kann in eine leere Textdatei kopiert werden und ein Browser zeigt euch das Beispiel an.
Für die <circle>-TAGs erzeugt ihr mit Javascript in "widget.js" bzw. "widget.min.js" (siehe config.php) die Mittelpunktkoordinaten.
Alle dynamischen Icons arbeiten in smartVISU mit Werten von min bis max, d.h. angenommen min ist 0 (Sonne links unten bzw. ausgeblendet) und max ist 255 (Sonne rechts unten), dann steht die Sonne bei dem Wert 127 genau in der Mitte.
Diese Umrechnung von einem Wert zwischen 0 und 255 auf die Position auf dem Halbkreis (Mittelpunkt berechnen) müsst ihr in JavaScript umsetzen (siehe Beitrag von Bonze).
Was noch fehlt ist die Umrechnung des Sonnenstandes auf einen Wert zwischen 0 und 255, dass muss z.B. in smarthome.py geschehen. Dort wird eine Logik erstellt, welche genau diese Umrechnung durchführt und über einen neues Item, dass dann bei smartvisu angegeben wird, ausgibt.
Ich hoffe das hilft ein wenig weiter.
Edit: Vielleicht noch als Hinweis, im svg-TAG wird mit ViewBox="0 0 100 100" angegeben, dass das SVG oben links die Position x=0 und y=0 hat und rechts unten x=100 und y=100. Der dargestellte Halbkreis ist vom linken "Rand" 20, vom rechten Rand auch 20 (x-Position 80) und von unten beides mal 30 (y-Position 70) entfernt.
Zuletzt geändert von panzaeron; 30.04.2015, 14:58.
ich muss sagen gerade der teil in der widget.js finde ich recht kompliziert, wenn ich mir mal die andren einträge anschaue
ich weiss nicht wie ich die kreise dort zeichnen lassen soll?!
Im Prinzip würde das schon genügen, aber dann ist das Icon nicht zu den übrigen kompatibel, aber einfacher wäre es...
Ich habe meinen Beitrag oben editiert, es ist einfacher wenn die Kreise bereits im SVG eingefügt werden und nur die Koordinaten in "widget.js" (bzw. widget.min.js) verändert werden:
HTML-Code:
$(document).delegate('svg[data-widget="icon.solar_altitude"]', {
'update': function (event, response) {
<!-- Berechnung der Koordinaten x_koordinate und y_koordinate -->
...
<!-- Auswählen der Kreise -->
$('#' + this.id + ' g#sun circle').each(function(){
<!-- Setzen des Mittelpunkts -->
$(this).attr('cx', x_koordinate);
$(this).attr('cy', y_koordinate);
<!-- Bei Sonnenuntergang ausdblenden, ansonsten einblenden --->
if (Bedingung für "sichtbar") {
$(this).css("visibility", "visible");
}
else {
$(this).css("visibility", "hidden");
}
});
}
});
Den Quelltext habe ich aus dem Kopf auf egschrieben, weiß nicht ob es funktioniert (mal abgesehen von den fehlenden Bedingungen), aber so ist der Weg.
komisch habs jetzt abgeändert, die Anzeige-Bedingung mal entfernt, sodass es immer angezeigt wird, jedoch seh ich immer noch nichts.
Er meckert zwar nicht, das es dieses macro nicht gibt, im Quelltext ist an dieser Stelle nichts zu sehen. Irgendwo muss wohl noch was einfuegen.
EDIT: hab aber immernoch das Problem, das Smartvisu mir überhaupt nichts ausgibt an der Stelle, an der ich das Icon einbinden möchte.
muss ich die widget.min.js bearbeitet haben ?
EDIT:
also bin jetzt auf diesem Stand:
widget.js
// ----- icon.sun_visu --------------------------------------------------------
$(document).delegate('svg[data-widget="icon.solar_altitude"]', {
'update': function (event, response) {
//Berechnung der Koordinaten x_koordinate und y_koordinate -->
var radWinkel = response / 180 * Math.PI; // radWinkel = 0.698131...
//window.alert("altitude "+radWinkel);
var x_koordinate = 147.5+(Math.cos(radWinkel)* -127.5);
var y_koordinate = 127.5+(Math.sin(radWinkel)* -127.5);
Wir verarbeiten personenbezogene Daten über die Nutzer unserer Website mithilfe von Cookies und anderen Technologien, um unsere Dienste bereitzustellen. Weitere Informationen findest Du in unserer Datenschutzerklärung.
Indem Du unten auf "ICH stimme zu" klickst, stimmst Du unserer Datenschutzerklärung und unseren persönlichen Datenverarbeitungs- und Cookie-Praktiken zu, wie darin beschrieben. Du erkennst außerdem an, dass dieses Forum möglicherweise außerhalb Deines Landes gehostet wird und bist damit einverstanden, dass Deine Daten in dem Land, in dem dieses Forum gehostet wird, gesammelt, gespeichert und verarbeitet werden.
Kommentar