Neues Design, ähnlich Homeserver

[2ndsky]

Gehen tut das prinzipiell einwandfrei... bei mir seit August im Einsatz. Vor einem Release sollte allerdings die HTML Struktur und das zugehörige CSS nochmal grundlegend überarbeitet werden. Es funktioniert für iPhone und iPad, weil ich es für diese Auflösungen optimiert habe. Bei anderen Auflösungen passen die Scrollbalken nicht oder die Aufteilung der Spalten ist nicht so schön. Außerdem sind z.B. für die Listen mehrere DIVs ineinander geschachtelt (damit die Rahmen passen). Das ist eigentlich unschön und lässt sich bestimmt eleganter lösen. Apollo hat ja auch schon einen ersten Entwurf gemacht und gezeigt, dass es geht. Nur gab es dabei ein paar Probleme mit den Quadranten auf dem iPhone. Hätte ich ne Woche Urlaub (indem nichts anderes wie z.B. Weihnachten ansteht) wäre das schnell passiert... das scheint bei mir aber erst wieder August 2014 so weit zu sein

[stromie]

Hi

bei mir läuft es auf einen Standard PC stabil. Sieht auch schön aus.
Anpassungen kann man ja leicht per css machen.

Daumen hoch

Grüße Ronny

[henfri]

Hallo,

ich bin gerade dabei das Design für mich zu nutzen.
Jetzt habe ich gleich mal etwas angepasst:

Beim
list.rtr wird ja beim Klick auf die Solltemperatur was rtr-Popup geöffnet.

Jetzt möchte ich zusätzlich beim Klick auf den Stellwert ein Plot-Popup öffnen, dass die Temperatur (ist/soll) und den Stellwert anzeigt.

Hier meine Modifikationen:

widget_list.html

{% macro rtr(id, txt, gad_actual, gad_valve, gad_set_value, gad_set, gad_comfort, gad_night, gad_frost, gad_state, gad_txt, step) %}
    {% import "basic.html" as basic %}
    {% import "widget_visu.html" as visu %}
    {% import "widget_popup.html" as popup %}
    <li data-icon="false">
    <div class="nw_table">
        <div class="nw_table_cell nw_border">{{ txt|e }}</div>
        <div class="nw_table_cell">
            <div class="nw_table">
                <div class="nw_table_cell nw_border">
                        {{ basic.float(id~'_actual_value', gad_actual, '°') }}
                </div>
                <div class="nw_table_cell nw_border nw_min_landscape">
                    [COLOR="red"]<a href="#{{ uid(page, id) }}_list_rtr_plot_popup" data-rel="popup" data-position-to="window">[/COLOR]
						{{ basic.value(id~'_valve_value', gad_valve, '%') }}
					[COLOR="red"]</a>[/COLOR]
                </div>
                <div class="nw_table_cell nw_border">
                    <a href="#{{ uid(page, id) }}_list_rtr_popup" data-rel="popup" data-position-to="window">
                        {{ basic.float(id~'_set_value', gad_set_value, '°') }}
                    </a>
                </div>
[COLOR="Red"]                {{ popup.rtr_plot(uid(page, id)~'_list_rtr_plot_popup', gad_actual, gad_set_value, gad_set) }}[/COLOR]
                {{ popup.rtr(uid(page, id)~'_list_rtr_popup', txt, gad_actual, gad_set_value, gad_set, gad_comfort, gad_night, gad_frost, gad_state, gad_txt, step) }}
            </div>
        </div>
    </div>
    </li>
{% endmacro %}

widget_popup.html

[COLOR="red"]{% macro rtr_plot(id, txt, gad_actual, gad_set_value, gad_set) %}
    {% import "widget_ext.html" as ext %} 
	<div id="{{ id }}" data-role="popup" data-overlay-theme="a" class="nw_rtr_plot-popup">
            {{ plot.period(id~'rtr_plot',[gad_actual, gad_set_value, gad_set],  'avg', '1h', 0, 0, 100, '', '', ['#aa0', '#a00', '#00a'], ['line', 'line', 'area']) }}
        </div>
{% endmacro %}[/COLOR]

(neues in rot)

Momentan öffnet das ein halbtransparentes Overlay -aber leider kein Diagramm.

Sieht jemand den Fehler?

Gruß,
Hendrik

[2ndsky]

Neues Design, ähnlich Homeserver

Ich glaub eher, dass das rendern von highcharts fehlt. Die wollen nicht in hidden Containern rendern, daher musst du das manuell anstupsen wenn du das Popup öffnest.

[Apollo]

Glaub ich auch.

Gruß

[stromie]

Das ist auch so. Hatte ja das gleich Problem mit meinen DigiPlots. Aber im Page Order ist in der Visu.js ein Script für die Plots. Einfach anpassen.

grüße Ronny

[henfri]

Hallo,

gib mir mal nen Tipp. Das ist alles neu für mich.
Meinst du dieses:

$(document).on("pagecreate", function() {
    $(".nw_tab-header ul li").on("click",function(){
        $(this).parent().find(".ui-btn-active").removeClass("ui-btn-active");
        $(this).addClass("ui-btn-active");
        var newSelection = $(this).children("a").attr("data-tab-class");
        var prevSelection = $(this).parent().parent().attr("data-tab-selection");
        $("."+prevSelection).addClass("ui-screen-hidden");
        $("."+newSelection).removeClass("ui-screen-hidden");
        $(this).parent().parent().attr("data-tab-selection", newSelection);
        
        $("."+newSelection).find('[data-widget[B]^[/B]="plot.period"]').each(function(idx) {
            if ($('#' + this.id).highcharts()) {
                $('#' + this.id).highcharts().destroy(); 
                var values = widget.get(widget.explode($(this).attr('data-item')));
                if (widget.check(values))
                    $(this).trigger('update', [values]);
            }
        });
        
    });
});

Also konkret:

[data-widget^="plot.period"]

(das Dach).
Das müsste eigentlich ja keinen Unterschied machen:
Bei dir war es ein Problem, weil du ein _zoomable dranhängen hattest. Ich habe aber ja plot.period genutzt.

Wie auch immer: Auch mit dem Dach passiert nix. Es wird nur die ganze Visu leicht abgedunkelt :-(

Gruß,
Hendrik

[henfri]

Hm. Keine Tipps? :-(

[Apollo]

Mach mal nen neuen Threat auf, mit deiner konkreten Frage.

Gruss

[stromie]

Hm. Keine Tipps? :-(

Ja das wars bei mir aber auch nur im Zusammenspiel mit TABS.
Genau so kann es bei dir nicht funktionieren.
Du must das neuzeichnen mit dem popup event kombinieren.

Grüße Ronny

[al007]

Hallo,

ich habe mir heute smartVISU installiert, wie kann ich dieses neue Design aktivieren?

Was bedeuten die Einstellungen unter smartVISU Configuration -> Interface -> Pages -> Design ?

Benötige ich noch das smarthome.py wenn ich smartVISU nutzen möchte?

Gruß Alex

[RoyalTS]

Hmm,

und wo kann man dieses Design nun finden?

Danke und Grüße
Thorsten

[Apollo]

Du müsstest deine Seite auf der "quad.html" basieren (extends) lassen.

Gruss

[ist aber noch Beta]

[henfri]

Hallo,

Du müsstest deine Seite auf der "quad.html" basieren (extends) lassen.

Gruss

[ist aber noch Beta]

Ich habe einfach 2ndskys Git ausgecheckt und für mich angepasst.

Gruß,
Hendrik

[ratzi82]

Ich habe einfach 2ndskys Git ausgecheckt und für mich angepasst.

Hast du für das neueste SmartHome.Pi 2.1 Image bestimmte Änderungen vornehmen müssen?
Bei mir funktioniert das Design von 2ndsky aus dem Git nicht mit diesem Image, so bald man das Design in der config auswählt,
wird leider keine Seite mehr geladen.

Wäre für Tipps dankbar wie man das debuggen kann.