basic.slider in javascript for-schleife einbauen

[ivande]

Hallo,

ich versuche gerade (mit meinen bescheidenden javascript Kenntnissen) ein Szenen-Widget zu "basteln". Ich übergebe dazu ein Item mit einem Dict in welchen die verschiedenen Szenen gespeichert sind.
In einer for - Schleie fülle ich nun dynamisch die slider in eine listview..

sieht so aus: slider_problem.jpg



Das erste Problem das ich dabei habe: ich weiß nicht wie ich ich den dynamischen slider beibringe, die Formatierungen vom basic.slider zu übernehmen?

Gruß Ivan

{% macro szene(id, gad_szene_name, gad_szenen, gagroup) %}[INDENT]<span id="{{ uid(page, id) }}" data-widget="scenes.lights" data-item="{{ gad_szenen }}" data-groupName="{{ gagroup }}" class="log">[/INDENT][INDENT=2]<ul data-role="listview">
</ul>[/INDENT][INDENT]</span>

<script type="text/javascript">[/INDENT][INDENT=2]$(document).delegate('span[data-widget="scenes.lights"]', {
'update': function (event, response) {
var ret;
var line = '';
var groupName = '';
var groupNameAttr = $(this).attr('data-groupName').split('.')

if (groupNameAttr.length > 1)[/INDENT][INDENT=3]groupName = groupNameAttr[groupNameAttr.length-1][/INDENT][INDENT=2]else if (groupNameAttr.length == 1)[/INDENT][INDENT=3]groupName = groupNameAttr[0][/INDENT][INDENT=2]
group = {};
for(gr in response[0]['groups'])
{[/INDENT][INDENT=3]if (response[0]['groups'][gr]['name'] == groupName)
{
group = response[0]['groups'][gr];
}[/INDENT][INDENT=2]}
// Fuellen des Listview mit silder's
for(light in group['lights'])
{[/INDENT][INDENT=3]name = group['lights'][light]['name'];
type = group['lights'][light]['type'];
nr = group['lights'][light]['nr'];
if (type == 'dimming')
{[/INDENT][INDENT=4]ret = "<input type='range' role='slider' data-widget='basic.slider' id='my_slider'" + nr + "value='50' min='0' max='100' orientation='' handleinfo='' data-highlight='true' class=''/>"
ret += '<p>' + name + ' ' + type +'</p>';[/INDENT][INDENT=3]}
else[/INDENT][INDENT=4]ret = '<h3>' + name + ' ' + type +'</h3>';[/INDENT][INDENT=3]line += '<li data-icon="false">' + ret + '</li>';[/INDENT][INDENT=2]}[/INDENT][INDENT=2]$('#' + this.id + ' ul').html(line).trigger('prepare').listview('refre sh').trigger('redraw');[/INDENT][INDENT=2]

}[/INDENT][INDENT=2]});[/INDENT][INDENT]
</script>[/INDENT]
 
{% endmacro %}

[Bonze]

Verstehe nicht wie das widget funktionieren soll ? Willst du mit dem slider durch verschieben zwischen den szenen wechseln ?
dann waere es vl praktischer den slider vkn 0-5 zu machen und dann durch die zahl den passenden wert bzw die szene aus dem dict zu waehlen?

[ivande]

Hallo,
die Slider sind nicht für die Auswahl der Szene gedacht, sonder um die Leuchte(n) zu dimmen,..

ich möchte natürlich schon im Widget aus den Szenen welche im Dict liegen eine Szene auswählen können. (z.B. über eine Icon-Liste, oder über eine Szenen-Combo-box,..soweit bin ich noch gar nicht gekommen,..) Bisher ändere ich die Szene noch über Taster und PM.
Je nach ausgewählter Szene gehen dann die Slider der Leuchten auf Position,.. Dann möchte ich damit die Leuchten dimmen können und über einen "Speichern" Button die Dimmwerte in die Szene übernehmen, oder evtl. über einen weiteren Button auch eine neue Szenen anlegen,..

[smai]

Du musst für jQuery Mobile noch ein trigger('create') auf das neu eingefügte HTML machen.
Bei deiner Struktur ist das nicht so einfach, deshalb würde ich das <ul data-role="listview"> ebenfalls in den HTML-String nehmen und erst alle Zeilen in einen String packen und zuletzt anstelle des prepare/refresh/redraw folgendes machen:

$(this).html(html).trigger('create')

Allerdings bin ich auch dann noch nicht sicher, ob die Widgets auch durch die smartVISU erkannt werden, weil deren events bei onpagecreate gebunden werden.

Ich hätte dir gerne den ganzen Code gepostet, kann am Tablet aber deinen Code nicht recht kopieren, Vielleicht weil du ihn als Quote statt als Code gekennzeichnet hast.

[ivande]

nach langem hab ich wieder etwas Zeit zum weiter "experimentieren" gefunden.

$(this).html(html).trigger('create'

durch die Zeile werden die dynamisch angelegen Slider tatsächlich von SmartVISU formatiert.


SzenenWidget.jpg


Problem1:
scenesDomUpdate wird komischer weise erst nachdem ich die Seite aktualisiere (F5) aufgerufen. Also erscheinen die Slider nicht beim Aufbauen der Seite sondern erst beim Aktualiseren.

$(bevent.target).find('span[data-widget="scenes.lights"]').on( {
        'update': scenes.scenesDomUpdate,

Problem2:
Slider funktionieren beim direkten Draufklicken, allerdings lassen sie sich nicht per Maus,.. hin+herschieben. (nur um 1)

Problem3:
beim Click auf die beiden dynamisch angelegen colordisc öffnet sich leider nicht das Popup zur Auswahl der Farben.

scenes.js

// ----------------------------------------------------------------------------
// 
// Szenen Widget 
//
// V0.04
//

$(document).on('pagecreate', function (bevent, bdata) {
    var scenes = {
        //----------------------------------------------------------------------------
        // Seitenaufbau
        //----------------------------------------------------------------------------

        // Überschrift
        BuildHeader: function(headline) {
            var txt = "";
            txt += "<div class='scenesHeader'>" + headline + "</div>" +
                        "<div class='scenesTableMain' id='scenesTable'>"+
                        "<ul data-role='listview' id='scenesLightsLV'>";

            return txt;
        },

        // Abschluss der Seite
        BuildFooter: function() {
            var txt = "</ul>";
            txt +=     "</div>"
            return txt;
        },

        FillTable: function(d_group) {
            //console.debug("FillTable-Funktion");
            line = "";

            for(light in d_group['lights'])
            {
                name = d_group['lights'][light]['name'];
                type = d_group['lights'][light]['type'];
                nr = d_group['lights'][light]['nr'];
                if (type == 'dimming')
                {
                    //ret = "<input type='range' role='slider' data-widget='basic.slider' id='my_slider" + nr + "' value='0' min='0' max='100' orientation='' handleinfo='' data-highlight='true' class=''/>"
                    ret = "<input type='range' role='slider' data-widget='basic.slider' id='my_slider" + nr + "' value='0' min='0' max='100' orientation='' handleinfo='1' data-highlight='true' class='ui-slider-no-input'/>"
                    ret += '<p>' + name + ' ' +'</p>';

                }
                else if (type == 'rgbw')
                {
                    ret = "<span data-widget='basic.colordisc' style='display: inline-block;'>";
                    ret+= "<a id='my_rgb" + nr + "' data-widget='basic.color' data-style='disc' data-item='0', '0', '0' data-min='0' data-max='255' ";
                    ret+="data-step='7' data-colors='10' class='colordisc'><span></span>" + name + "</a>";
                    ret+= "<div id='my_rgb" + nr + "-screen' data-widget='basic.colordisc' class='ui-popup-screen ui-overlay-a in hide'></div>";
                    ret+= "<canvas id='my_rgb" + nr + "-disc' data-widget='basic.colordisc' data-step='8' data-colors='10' class='colordisc hide'></canvas></span>";
                    console.debug(ret);
                }
                else 
                {
                    ret = '<h3>' + name + ' ' + type +'</h3>';
                }
                line += '<li data-icon="false">' + ret + '</li>';
            }
            return line;

        },

        BindTableItems: function(response, d_group, item) {
            //console.debug("BindTableItems");

            var sceneNr = 0;
            scene = d_group['scenes'][sceneNr];

            for(light in d_group['lights'])
            {
                name = d_group['lights'][light]['name'];
                type = d_group['lights'][light]['type'];
                nr = d_group['lights'][light]['nr'];

                if (type == 'dimming')
                {
                    //var $myArr = $('#scenesLightsLV').find('li') //OK!!
                    //console.debug($myArr[0]);

                    // ID des Slider-Elementes
                    var slidId = '#my_slider'+ nr; 

                    var sliderx = $(bevent.target).find(slidId);
                    //console.debug(sliderx);

                    sliderx.bind( 'change', function(e) {
                        scenes.ChangeSlidePos(response, d_group, item, e);
                    });

                    // Slider auf Position setzen z.B. sliderx.val(55);
                    sliderx.val(scene['lightValues'][light]);
                    sliderx.slider('refresh');
                }
                //else
            }
        },

        ChangeSlidePos: function(response, d_group, item, e) {
            console.debug("ChangeSlidePos");
            var sceneNr = 0;
            scene = d_group['scenes'][sceneNr];

            var slidId = e.target.id;
            var slidVal = Number(e.target.value);
            var lightId = slidId.replace('my_slider', '');
            //console.debug($(bevent.target));
            //console.debug(slidId);
            //console.debug(Id);
            //console.debug(slidVal);
            //console.debug(e);
            //console.debug('item:'+item);


            scene['lightValues'][lightId-1] = slidVal;
            //console.debug(scene);

            // Dict wieder zu SH senden
            io.write(item, {'groups': response[0]['groups']});
            console.debug('ChangeSlidePos:'+slidId+' Id:'+lightId+' value:'+slidVal);
        },



        scenesDomUpdate: function(event, response) {
            console.debug("scenesDomUpdate");

            // wenn keine Daten vorhanden, dann ist kein item mit den Eigenschaften hinterlegt und es wird nichts gemacht
            if (response.length === 0){
                notify.error("SCENES widget", "No SCENES data available in item '" + $(this).attr('data-item') + "' for widget " + this.id + ".");
                return;
            }

            console.debug($(this).attr('data-group'));
            var group = '';
            var tmp_values = $(this).attr('data-group').split('.')

            if (tmp_values.length > 1)
                group = tmp_values[tmp_values.length-1]
            else if (tmp_values.length == 1)
                group = tmp_values[0]
            else
            {
                notify.error("SCENES widget", "No group name available in item'" + $(this).attr('data-group') + "' for widget " + this.id + ".");
                return;
            }

            console.debug(group);

            var scene = $(this).attr('data-scene');
            console.debug('data-scene:' + scene);
            console.debug($(this));

            var item = $(this).attr('data-item');

            d_group = {};
            for(gr in response[0]['groups'])
            {
                if (response[0]['groups'][gr]['name'] == group)
                {
                    d_group = response[0]['groups'][gr];
                }
            }


            //Kopfzeile
            txt = scenes.BuildHeader("Szenen - Widget");

            // Füllen der Zeilen
            if (Object.keys(d_group).length !== 0)  // Prüfen ob Dict nicht leer ist
            {
                txt += scenes.FillTable(d_group);
            }

            //txt += "<button id='scenesOKButton'>OK</button>";

            //Fußzweile - Abschluss
            txt += scenes.BuildFooter();


            $(this).html(txt).trigger('create')

            if (Object.keys(d_group).length !== 0)  // Prüfen ob Dict nicht leer ist
            {
                scenes.BindTableItems(response, d_group, item);
            }

        },

        //scenesDomClick: function(event) {
        //    console.info("scenesDomClick");
        //}
    }


    $(bevent.target).find('span[data-widget="scenes.lights"]').on( {
        'update': scenes.scenesDomUpdate,
        //'click': scenes.scenesDomClick
    });

});

hier der Aufbau vom dict:

groups:
- nr: 1
  name: Bad
  lights:
  - {name: PanelWanne, nr: 1, type: dimming}
  - {name: PanelDusche, nr: 2, type: dimming}
  - {name: Spiegel, nr: 3, type: dimming}
  - {name: StripeWanne, nr: 4, type: rgbw}
  - {name: StripeDusche, nr: 5, type: rgbw}
  scenes:
  - {nr: 1, name: PM, lightValues: [20, 20, 20, [20, 20, 20, 20], [20, 20, 20, 20]]}
  - {nr: 2, name: PM_Nacht, lightValues: [20, 20, 20, [20, 20, 20, 20], [20, 20, 20, 20]]}

{% macro szene(id, gad_szene_name, gad_szenen, gad_group, gad_scene) %}
    {% set uid = uid(page, id) %}
    {% import "widget_input.html" as input %}


    <span id="{{ uid }}-widget_scenes" data-widget="scenes.lights" data-item="{{ gad_szenen }}" data-group="{{ gad_group }}" data-scene="{{ gad_scene }}" class="log">
    </span>

    <script type="text/javascript">
    $.getScript("pages/Ivan_DW    /scenes.js", function(){
     //   alert("Script loaded but not necessarily executed.");
    });
    </script>

{% endmacro %}

[smai]

Wie ich befürchtet hatte, werden die events nicht gebunden.
Sowohl in den smartVISU Widgets wie in deinem Code steht

$(document).on('pagecreate',...

Ehrlich gesagt habe ich keine Idee, wie sich das lösen lässt. Einfach pagecreate zu triggern geht nicht, weil dann die Events bei den bereits eingefügten Widgets mehrfach gebunden würden.