Quad Design um Plot-Popups erweitern

[henfri]

[QUOTE=henfri;353569]Hallo,

ich bin gerade dabei das Quad-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.period-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.

Ronnie sagt im Nachbar-Thread:

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.

Sorry, aber ich bin da absoluter Laie. Als ich zuletzt js gemacht hab, kamen CSS gerade erst. Muss so ca. 1996 gewesen sein. Und da habe ich auch nicht viel mehr als Hallo Welt gemacht..
Ich kann nicht finden, was Ronnie bei den TABS geändert hat, um sie zum Laufen zu bekommen.
Ich finde nur in der visu.js:

// ---- TABS ------------------------------------------------------------------
$(document).on("pageshow", function() {
    $(".nw_tab-header").each(function(idx) {
        var height = $(this).parent().innerHeight() - $(this).outerHeight() - 40;
        $(this).siblings(".nw_tab-content").css('height', height);
    });
});

Ist es das?

Gruß,
Hendrik

[stromie]

Hallo Hendrik

ich bin neu in js und css.

Bei mir war das Problem mit dem Tabs und mein Digitalplot.
Der gepostete Code hilft dir nicht so viel weiter. Du willst ja nicht auf ein Tabs Event triggern sondern auf irrgend ein Popup Event. Diese muss dann den Plot neuzeichnen.

Der Teil fürs neu zeichnen müsste das hier sein.

$("."+newSelection).find('[data-widget^="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]);
            }
        });

Wenn noch nicht gemacht ergänze mal in der Visu.ccs

.nw_blind-popup, .nw_rtr_plot-popup {
    height: 215px;
    width: 500px;
}
}

dann geht schon mal ein popup auf.

Jetz noch auf den Event triggern und neuzeichnen.

jQuery Mobile Docs - Popup




Grüße Ronny

[stromie]

Für die Events hilft vielleicht das noch weiter

javascript - How do I change the text of a jquery popup dynamically? - Stack Overflow

[henfri]

Hallo,

ich hab's versucht:

1) mit dem hier in der visu.css:

/* RTR-Plot */
.nw_rtr_plot-popup {
    height: 215px;
    width: 500px;
}
}

öffnet sich der Plot schonmal in der richtigen Größe.

2) mit

$(document).on("pageinit", "heizung", function(){
    $(nw_rtr_plot-popup).on("popupbeforeposition", function(event, ui) {
        $(this).append("<p>TEST</p>");
    });
    $(nw_rtr_plot-popup).on("popupafteropen", function(event, ui) {
		$("."+newSelection).find('[data-widget^="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]);
            }
        });
		});
    });

in der widget.js wird aber leider nicht neu gezeichnet

Darin ist schon ein Problem versteckt:
Momentan nenne ich die Seite ja statisch "heizung", weil ich nicht wusste, wie ich den Namen bekomme. Die Seite heisst aber heizung, das sollte es also nicht sein:

<div data-role="page" id="heizung" data-theme="a">

Habe ich etwas falsch verstanden?
Nichtmal "test" sieht man.

Gruß,
Hendrik

[2ndsky]

Das

$("."+newSelection).find('[data-widget^="plot.period"]').each(function(idx) {

schnappt sich nur Items die die CSS Klasse besitzen, die in der Variable "newSelection" steht. Du musst hier den jQuery Selector so anpassen, dass dein Popup gefunden wird.

Versuch mal

$(".nw_rtr_plot-popup").find('[data-widget^="plot.period"]').each(function(idx) {

[henfri]

Hallo Niko,

danke für deinen Tipp!
Es hat leider nicht geholfen, doch ich fürchte, dass der code gar nicht ausgeführt wird. Deshalb habe ich den Code jetzt mal so abgeändert:

$(document).on("pageinit", "heizung", function(){
    $(nw_rtr_plot-popup).on("popupbeforeposition", function(event, ui) {
        $(this).append("<p>I've been added to popup!</p>");
		alert("Test");
    });
    $(nw_rtr_plot-popup).on("popupafteropen", function(event, ui) {
		alert("Test");
	  $(".nw_rtr_plot-popup").find('[data-widget^="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]);
            }
        });
		});
    });

Es kommt aber keine Nachricht mit "Test", wenn ich das Popup öffne.

Ich habe bzgl. der widget_min.js vs. widget.js-Problematik schon ausprobiert (ich editiere ja die widget.js im pages/quad Ordner, geladen wird aber die widget_min.js), ob es einen Unterschied macht, wenn ich make.php aufrufe, oder in der config.php

	define ('config_js', 'js');

hinzufüge.

Gruß,
Hendrik

[Apollo]

Wenn man an den .js Dateien entwickelt und ändert sollte man:
define ('config_js', 'js');

in die config.php machen, das ist wesentlich besser als jedes mal make.php zu rufen.

Du meinst doch sicher widgets/widget.js oder? (deine Datei wird standardmässig nicht geladen)

Gruss

[henfri]

Wenn man an den .js Dateien entwickelt und ändert sollte man:
define ('config_js', 'js');

in die config.php machen, das ist wesentlich besser als jedes mal make.php zu rufen.

Ja, das hab ich ja gemacht (s.o.) make.php nur zur Sicherheit einmal getestet, um auszuschließen, dass es diese Variante mit 2.7 nimmer gibt (ich hatte nur gelesen, dass es sie bei 2.6 gibt)

Du meinst doch sicher widgets/widgets.js oder? (deine Datei wird standardmässig nicht geladen)

Sorry. Da habe ich mich verguckt.
Ich meine die widget.js/widget.min.js im smartVISU/widgets/ Verzeichnis (oben hatte ich pages geschrieben).

Gruß,
Hendrik

[2ndsky]

Das hier wird auch nicht funktionieren:

 $(nw_rtr_plot-popup).on("popupbeforeposition", function(event, ui) {

du behandelst nw_rtr_plot-popup wie eine Variable, sollte aber ein String sein. Wenn dann

 $(".nw_rtr_plot-popup").on("popupbeforeposition", function(event, ui) {

[henfri]

Hallo,

danke, das habe ich korrigiert.

Es funktioniert aber noch nicht. Daher ein paar Fragen:
1) soll der code in die widgets/widget.js oder in die pages/friedel/visu.js
2) sollte bei folgendem code nicht beim Laden der Seite ein Alert kommen?

$(document).on("pageinit", "heizung", function(){
alert("z");
    $(".nw_rtr_plot-popup").on("popupafteropen", function(event, ui) {
		$("."+newSelection).find('[data-widget^="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]);
            }
        });
		});
    });

3)Ist es normal, dass der Seitenquelltext im Browser so aussieht:

	<div id="heizung-eg_Gaestebad_heizung_list_rtr_plot_popup" data-role="popup" data-overlay-theme="a" class="nw_rtr_plot-popup">
            
        </div>

Oder sollte innerhalb div-Tags nicht etwas zu dem Plot stehen?

Gruß,
Hendrik

[JuMi2006]

Seid Ihr da schon weiter gekommen ?

[henfri]

Hallo,

ich leider nicht.

Gruß,
Hendrik

[JuMi2006]

Also hier mal für ein einfaches Plot-Popup.
Das in ein Widget zu packen ist dann auch nicht mehr weit:

visu.css

/* CUSTOMS */
.nw_plot-popup {
    height: 340px;
    width: 420px;
    min-height: 240px;
    min-width: 320px;
    box-sizing: border-box;
    padding: 5px;
}

widget.js

// CUSTOM
// ----- plot.popup --------------------------------------------------------------

$(document).on("pageinit", function(){
    $(".nw_plot-popup").on("popupafteropen", function(event, ui) {
    $("."+newSelection).find('[data-widget^="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]);
        }
        });
    });
});

test.html

/**
 * -----------------------------------------------------------------------------
 * @package     smartVISU
 * @author      Niko Will, Mirko Hirsch
 * @copyright   2015
 * @license     GPL <http://www.gnu.de>
 * -----------------------------------------------------------------------------
 */

{% extends "base.html" %}

{% block title %}
TEST
{% endblock %}

{% block header %}
<img class="icon" src='{{ icon0 }}measure_power_meter.png'/>
{% endblock %}

{% block quad_main_top %}
    
<a href="#plot-popup" data-rel="popup">
<img class="icon" src="{{ icon1~'measure_power_meter.png' }}">
</a>

<div class="nw_plot-popup" id="plot-popup" data-role="popup">
{{ plot.period('ptag', 'zaehler.haushalt.verbrauch.gestern', 'avg', '1w', '', '', '', '', 'Haushalt', '#aa0', 'area', '', '') }}
</div>

{% endblock %}

{% block quad_main_bottom %}   
{% endblock %}


{% block quad_top %}
{% endblock %}

{% block quad_bottom %}
{% endblock %}

CSS-mässig gibts da bestimmt noch einiges zu tun, grundsätzlich aber läuft das so.

[toggle]

Hi,

ich habe den Code ausprobiert. test.html funktioniert. Allerdings hängt sich mein Firefox (37.0.1) auf, wenn ich den Popup-Aufruf in bestehende Seiten einbinde. Firefox allokiert einfach endlos Speicher und belegt einen CPU-Kern zu 100%.

Leider werden Daten nicht erst nach dem Öffnen vom Popup aus der DB geladen, sondern bereits beim Laden der Seite. Wie müsste plot.period "verpackt" werden, damit die Daten nicht schon beim Laden der Seite abgerufen werden?

[JuMi2006]

Ich bin da auch gerade in einem anderen Zusammenhang am verzweifeln. Mit mehreren Plots wirds noch spannender. Allerdings ist das nicht meine Programmiersprache ... bin also ebenso auf Hilfe angewiesen .
Ungewöhnliche Speicherbelastung habe ich hier bei Chrome allerdings nicht.