[Featurewunsch] Sonnenstand darstellen

[martinb07]

Hallo
In meiner Wetter-App von Yahoo am Handy sehe ich den aktuellen Sonnenstand wie folgt dargestellt:
FullSizeRender.jpg

Sowas könnte man doch mit einem SVG-Icon nachbauen, oder?

[Apollo]

Ja, geht.

[martinb07]

Super. :-)

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.

Dank dir schon mal für die Tipps.

[Apollo]

Grad die dynamik, ist kein grosses Thema. Schau dir mal die widgets/icons.html an und die widget.js...

Gruss

[martinb07]

Oki, Doki!! Danke.

[whe]

Hast Du mittlerweile eine Lösung gefunden ?
mache es mit dem Icon.compass, sieht aber nicht so gut aus.

 <tr>
  <td align=left style="padding-left: 10px;">
  Sonnenstand (Azimut):
  </td>
  <td align="right">
  {{ icon.compass('icon3', '', 'Dach.Wetter.Azimut') }} 
  {{ basic.float('Dach.Wetter.Azimut', 'Dach.Wetter.Azimut', 'grade') }} 
  </td>
  </tr>

[Bonze]

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) %}

<svg id="{{ uid(page, id) }}" data-widget="icon.windsock" data-item="{{ gad_value }}, {{ gad_switch }}" data-min="{{ min|default('0') }}" data-max="{{ max|default('255') }}"
class="icon icon0" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
<g>
<line x1="80" y1="22" x2="80" y2="95" />
<polyline id="top" points="70,40, 80,22, 90,40" />
<polyline id="part0" points="71,50, 89,50, 88,54, 72,54" />
<polyline id="part1" points="73,64, 87,64, 86,68, 74,68" />
<polyline id="part2" points="75,78, 85,78, 84,82, 76,82" />
<polyline id="part3" points="70,40, 76,82, 84,82, 90,40" fill="none" />
</g>
</svg>

{% endmacro %}

unter Visu/widgets/widgets.js

// ----- icon.windsock --------------------------------------------------------
$(document).delegate('svg[data-widget="icon.windsock"]', {
'update': function (event, response) {
// response is: {{ gad_value }}, {{ gad_switch }}

var ang = response[0] / $(this).attr('data-max') * 0.45 * Math.PI;

var pt = [];
pt = pt.concat(fx.rotate([70, 40], ang, [80, 22]), [80, 22], fx.rotate([90, 40], ang, [80, 22]));
$('#' + this.id + ' #top').attr('points', pt.toString());

for (var i = 0; i < 3; i++) {
pt = [];
pt = pt.concat(fx.rotate([71 + i * 2, 50 + i * 14], ang, [80, 22]), fx.rotate([89 - i * 2, 50 + i * 14], ang, [80, 22]),
fx.rotate([88 - i * 2, 54 + i * 14], ang, [80, 22]), fx.rotate([72 + i * 2, 54 + i * 14], ang, [80, 22]));
$('#' + this.id + ' #part' + i).attr('points', pt.toString());
}

pt = [];
pt = pt.concat(fx.rotate([70, 40], ang, [80, 22]), fx.rotate([76, 82], ang, [80, 22]), fx.rotate([84, 82], ang, [80, 22]), fx.rotate([90, 40], ang, [80, 22]));
$('#' + this.id + ' #part3').attr('points', pt.toString());
}
});

dann sollte sich sowas fuer den Sonnenstand auch anpassen lassen ?
Vl optinal mit Angabe des azimut?

[Bonze]

weiss nich welche daten ich alles anpassen muss, widget.js, widget.min.js , icon.html?
oder noch was ?

[panzaeron]

Ich habe mich mit dem Sonnenstand noch nicht beschäftigt, aber eventuell hilft es weiter:

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:

<svg id="{{ uid(page, id) }}" data-widget="icon.solar_altitude" data-item="{{ item_value }}" data-min="{{ min|default('0') }}" data-max="{{ max|default('255') }}"
    class="icon icon0" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
    <g>
        <path d="M 20,70 A30,30 0 1,1 80,70" fill="none" stroke="black"/>
    </g>
    <g id="sun">
        <circle cx="50" cy="40" r="5"/>
        <circle cx="50" cy="40" r="8" fill="none" stroke-dashoffset="4" stroke-dasharray="1,4" stroke-width="4" stroke="black"/>
    </g>
</svg>

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.

[Bonze]

wuerde es nicht funktionieren die winkelwerte der Sonne mit js umzurechnen?

    var radWinkel = response[1] / 180 * Math.PI;            // radWinkel = 0.698131...
        var x_koordinate = cos( radWinkel ) * 5;// x_koordinate = 3,830222...
        x_koordinate = Math.round(x_koordinate);        //4
        var y_koordinate = sin( radWinkel ) * 5;  // y_koordinate = 3,213938...
        y_koordinate =Math.round(y_koordinate); //3

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?!

[panzaeron]

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:

$(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.

[Bonze]

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.

[Apollo]

Gibts da inzwischen ein brauchbares Ergebnis?

Gruss

[Bonze]

mh bin noch am spielen, ich weiss noch nicht wie ich diese Normierung auf den Bereich 0-255 machen soll
wer auch spielen möchte, kann dies hier tun.

http://js.do/code/57776


vl hast du aber auch ne idee?!

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);

x_koordinate = Math.round(x_koordinate);
y_koordinate = Math.round(y_koordinate);

// Auswaehlen der Kreise -->
$('#' + this.'#sun'). attr('cx', x_koordinate);
$('#' + this.'#sun'). attr('cy', y_koordinate);
$('#' + this.id + ' #beam'). attr('cx', x_koordinate);
$('#' + this.id + ' #beam'). attr('cy', y_koordinate);
);
}
});

icon.html

/**
* a sun_visu
*
* @param unique id for this widget
* @param a gad/item altitude
* @param a gad for text1
* @param a gad for text2
*/
{% macro icon.solar_altitude(id, value,aufgang,untergang) %}
<svg id="{{ uid(page, id) }}" data-widget="icon.solar_altitude" data-item="{{ value }},{{ aufgang }},{{ untergang }}" data-min="{{ min|default('0') }}" data-max="{{ max|default('255') }}"
class="icon icon0" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 300" width="300px" height="300px">
<g>
<path d="M 20,70 A30,30 0 1,1 80,70" fill="none" stroke="black"/>
</g>
<g >
<circle id="sun" cx="30" cy="20" r="5"/>
<circle id="beam" cx="30" cy="20" r="8" fill="none" stroke-dashoffset="4" stroke-dasharray="1,4" stroke-width="4" stroke="black"/>
</g>
<text x="20" dy="150"
style="font-size:11px; font-weight:bold;">
{{ sunrise }}
</text>
<text x="250" y="150"
style="font-size:11px; font-weight:bold"
>
{{ sunset }}
</text>
</svg>
{% endmacro %}

funktioniert leider noch nicht
wenn ich das Svg+Javascript serperat teste funktionierts

[Apollo]

Schau dir mal die svg - icons an.

Selbst wenn es ein wenig klein ist, würde ich das in der Mimik machen.

dazu:
widgets/icon.html
widgets/widgets.js

angucken.

Die Normierung wurde auch schon bei andern "icons" gemacht, und kann dort angeschaut werden.

Gruss