Ankündigung

**ThomasCologne** · 05.05.2019, 22:28

Zitat von gaert Beitrag anzeigen

...Das ist dann was für 3.0

schon notiert ;-))

**gaert** · 06.05.2019, 20:28

Zitat von saegefisch Beitrag anzeigen

ich meine mich zu erinnern, dass man das Rundinstrument immer nur im Uhrzeigersinn verwenden kann...

Richtig. Aber nicht mehr lange - in Version 2.0 ändert sich dies wie folgt:

Spezifische Eigenschaften

Für weitere Einstellungen und Optionen siehe: Allgemeine Informationen zu Visuelementen ⇗

Typ: legt fest, welche Art von Rundinstrument angezeigt werden soll
- Zeiger: Zeiger
- Zeiger (mit Mittelpunkt): Zeiger mit Anzeige des Mittelpunkts
- Strich: Strich am Innenrand des Rundinstruments
- Kreis: gefüllter Kreis am Innenrand des Rundinstruments
- Segment: gefülltes Kreissegment
- Kontur: Kreissegmentkontur am Innenrand des Rundinstruments
- Kontur (runde Enden): Kreissegmentkontur am Innenrand des Rundinstruments mit abgerundeten Enden
Richtung: definiert die Anzeigerichtung des Rundinstruments
- im Uhrzeigersinn: die Anzeige erfolgt im Uhrzeigersinn (der Minimum-Wert entspricht dem Startwinkel)
- gegen den Uhrzeigersinn: die Anzeige erfolgt gegen den Uhrzeigersinn (der Minimum-Wert entspricht dem Endwinkel)
Startwinkel/Endwinkel: definiert die Ausdehnung des Rundinstruments im Bereich von 0..360 (Grad)
- beide Werte sind als absolute Winkelwerte anzugeben, z.B. führt 45/315 zu einem 3/4-Kreis (270 Grad), der nach unten offen ist
- Bezugspunkt (0 Grad) ist die 6-Uhr-Position
- Winkelwerte werden stets im Uhrzeigersinn umgesetzt, z.B. führt die Angabe 0/90 zu einem Viertelkreis unten links
Zeiger: Stärke/Größe
- beim Typ "Zeiger": diese Angabe bestimmt die Linienstärke der Zeiger (in Pixeln): die Angabe von "0" führt zu einer Skalierung in Abhängigkeit von der Größe des Visuelements
- beim Typ "Strich": diese Angabe bestimmt die Linienstärke des Strichs (in Pixeln), die radiale Länge entspricht stets der Angabe "Bereichsanzeige: Stärke" (auch wenn die Bereichsanzeige ausgeblendet ist)
- beim Typ "Kreis": diese Angabe bestimmt den Radius des Kreises (in Pixeln)
- beim Typ "Segment": diese Angabe wird ignoriert
- beim Typ "Kontur": diese Angabe bestimmt die Stärke der Kontur (in Pixeln)
Bereichsanzeige: die Bereichsanzeige hebt die Ausdehnung des Rundinstruments statisch hervor (Start- und Endwinkel)
- Opazität: legt die Opazität der Bereichsanzeige fest oder blendet die Bereichsanzeige aus
- Typ: legt die Darstellung der Bereichsanzeige fest
- Stärke: bestimmt die Stärke der Bereichsanzeige (in Pixeln): die Angabe von "0" führt zu einer Skalierung in Abhängigkeit von der Größe des Visuelements
  - beim Typ "Strich": diese Angabe bestimmt zudem die Länge des Strichs (in Pixeln)
  - beim Typ "Kreis": diese Angabe bestimmt zudem den Durchmesser(!) des Kreises (in Pixeln), sofern die Angabe "Zeiger: Stärke/Größe"=0 ist (automatisch)
  - beim Typ "Kontur": diese Angabe bestimmt zudem die Stärke der Kontur (in Pixeln), sofern die Angabe "Zeiger: Stärke/Größe"=0 ist (automatisch)
Wertebereich (Minimum/Maxmium): definiert den Wertebereich für die Anzeige des KO1-Wertes im Rundinstrument (Integer/Float)
- wird dieses Feld [leer] belassen, werden ggf. die KO-Filtereinstellungen angewendet
- Hinweis: Wenn der Minimum-Wert größer als der Maxmium-Wert ist, werden die Werte intern korrigiert (für eine invertierte Darstellung ist die Option "Richtung" entsprechend auszuwählen).

**saegefisch** · 06.05.2019, 21:07

Ach klasse, dann kann ich die Leinwand mit dem Source-Code doch wieder aufhängen - bei Dir und eodmi ist man doch noch richtig Kunde wie am ersten Tag... Danke, Christian!

**gaert** · 07.05.2019, 23:00

Hier für Spass mal die "VSE-Datei" für den Drehregler - Ihr könnte bestimmt erahnen, dass ich noch einiges dokumentieren muss, bis das erste eigene Visuelement programmiert werden kann

Aber die grobe Struktur kann man vielleicht bereits erahnen... Der Code ist bewusst recht "simpel" gehalten, also zig IFs statt eine Funktion - so kann man's vielleicht besser verstehen hier und da

Code:

###[DEF]###
[name    =Drehregler]

[folderid=162]
[xsize    =100]
[ysize    =100]
[text    ={#}]

[var1    =0]
[var2    =7]
[var4    =-1]
[var5    =]
[var6    =]
[var7    =]
[var8    =-1]
[var9    =100]
[var10    =70]
[var11    =100]
[var12    =0]
[var13    =360]

[var17    =0]
[var18    =100]
[var19    =1]
[var20    =]

[flagText        =1]
[flagKo1        =1]    
[flagKo2        =1]
[flagKo3        =1]
[flagPage        =0]
[flagCmd        =0]
[flagDesign        =1]
[flagDynDesign    =1]

[captionKo1        =Status]
[captionKo2        =Wert setzen]
###[/DEF]###


###[PROPERTIES.JS]###
n+="<table width='100%' border='0' cellpadding='2' cellspacing='0'>";
    n+="<tr><td colspan='4'>Modus<br><div id='*var1*' data-type='6' data-value='' data-list='0|Potentiometer (relativ)|*radiotr0*;2|Potentiometer (absolut)|*radiotr0*;1|Inkrementalgeber (5-Grad-Schritte);9|Inkrementalgeber (15-Grad-Schritte);' class='control6' style='width:100%;'>&nbsp;</div></td></tr>";
    n+="<tr id='*radiotr0*'>";
        n+="<td colspan='2'>Startwinkel<br><input type='text' id='*var12*' data-type='1' value='' class='control1' style='width:100%;'></input></td>";
        n+="<td colspan='2'>Endwinkel<br><input type='text' id='*var13*' data-type='1' value='' class='control1' style='width:100%;'></input></td>";
    n+="</tr>";

    n+="<tr><td colspan='4' class='formSubTitel2'>Darstellung<hr></td></tr>";
    n+="<tr><td colspan='4'>Darstellung<br><div id='*var2*' data-type='6' data-value='' data-list='0|neutral;1|Deko;2|Cursor;4|Eingabewert;6|Cursor und Eingabewert;3|Deko und Cursor;5|Deko und Eingabewert;7|Deko, Cursor und Eingabewert;' class='control6' style='width:100%;'>&nbsp;</div></td></tr>";
    n+="<tr>";
        n+="<td colspan='2'>Schleifbahngröße (%)<br><input type='text' id='*var9*' data-type='1' value='' class='control1' style='width:100%;'></input></td>";
        n+="<td>Knopfgröße: von (%)<br><input type='text' id='*var10*' data-type='1' value='' class='control1' style='width:100%;'></input></td>";
        n+="<td>Knopfgröße: bis (%)<br><input type='text' id='*var11*' data-type='1' value='' class='control1' style='width:100%;'></input></td>";
    n+="</tr>";

    n+="<tr><td colspan='4' class='formSubTitel2'>Wertebereich<hr></td></tr>";
    n+="<tr>";
        n+="<td colspan='2'>Minimum (leer=KO-Filter)<br><input type='text' id='*var5*' data-type='1' value='' class='control1' style='width:100%;'></input></td>";
        n+="<td colspan='2'>Maximum (leer=KO-Filter)<br><input type='text' id='*var6*' data-type='1' value='' class='control1' style='width:100%;'></input></td>";
    n+="</tr>";
    n+="<tr>";
        n+="<td colspan='2'>Raster (leer=KO-Filter)<br><input type='text' id='*var7*' data-type='1' value='' class='control1' style='width:100%;'></input></td>";
        n+="<td colspan='2'>Nachkommastellen<br><div id='*var8*' data-type='6' data-value='' data-list='-1|KO-Filter;|beliebig;0|0 (x);1|1 (x.y);2|2 (x.yy);3|3 (x.yyy);4|4 (x.yyyy);5|5 (x.yyyyy);' class='control6' style='width:100%;'>&nbsp;</div></td>";
    n+="</tr>";

    n+="<tr><td colspan='4' class='formSubTitel2'>Zyklisches Setzen<hr></td></tr>";
    n+="<tr><td colspan='4'>KO2 zyklisch setzen<br><div id='*var4*' data-type='6' data-value='' data-list='-1|deaktiviert;0|aktiviert;100|aktiviert (alle 100 ms setzen);250|aktiviert (alle 250 ms setzen);500|aktiviert (alle 500 ms setzen);1000|aktiviert (alle 1000 ms setzen);' class='control6' style='width:100%;'>&nbsp;</div></td></tr>";

    n+="<tr><td colspan='4' class='formSubTitel2'>Visuelement-Verknüpfung (Knopf)<hr></td></tr>";
    n+="<tr>";
        n+="<td colspan='4'>";
            n+="<div id='*var17*' data-type='6' data-value='' data-list='0|deaktiviert;1|aktiviert|*radio1*;' class='control6' style='width:100%;'>&nbsp;</div>";
            n+="<div id='*radio1*'>";
                n+="<table width='100%' border='0' cellpadding='2' cellspacing='0'>";
                    n+="<tr>";
                        n+="<td colspan='2'>Visuelement-ID (leer=automatisch)<br><input type='text' id='*var20*' data-type='1' value='' class='control1' style='width:100%;'></input></td>";
                        n+="<td>Radius (%)<br><input type='text' id='*var18*' data-type='1' value='' class='control1' style='width:100%;'></input></td>";
                        n+="<td>Rotation<br><div id='*var19*' data-type='6' data-value='' data-list='0|deaktiviert;1|aktiviert;' class='control6' style='width:100%;'>&nbsp;</div></td>";
                    n+="</tr>";
                n+="</table>";
            n+="</div>";
        n+="</td>";
    n+="</tr>";
n+="</table>";
###[/PROPERTIES.JS]###


###[ACTIVATION.PHP]###
<?
//gaid und gaid2 gegenseitig ergänzen, falls nicht angegeben
if (($item['gaid']>0) && !($item['gaid2']>0)) {
    sql_call("UPDATE edomiLive.visuElement SET gaid2=".$item['gaid']." WHERE id=".$item['id']);
}
if (!($item['gaid']>0) && ($item['gaid2']>0)) {
    sql_call("UPDATE edomiLive.visuElement SET gaid=".$item['gaid2']." WHERE id=".$item['id']);
}

//Min/Max/Raster/Nachkommastellen ggf. aus KO-Konfiguration/DPT-Array übernehmen (vmin/vmax/vstep/vlist)
$tmp=sql_getValues('edomiProject.editKo','valuetyp,vmin,vmax,vstep,vlist','id='.$item['gaid']);
if ($tmp!==false) {
    //Min/Max ggf. aus DPT-Array holen
    if (isEmpty($tmp['vmin'])) {$tmp['vmin']=$global_dptData[$tmp['valuetyp']][0];}
    if (isEmpty($tmp['vmax'])) {$tmp['vmax']=$global_dptData[$tmp['valuetyp']][1];}
    //leere Werte ersetzen
    if (isEmpty($item['var5'])) {sql_call("UPDATE edomiLive.visuElement SET var5='".sql_encodeValue($tmp['vmin'])."' WHERE (id=".$item['id'].")");}
    if (isEmpty($item['var6'])) {sql_call("UPDATE edomiLive.visuElement SET var6='".sql_encodeValue($tmp['vmax'])."' WHERE (id=".$item['id'].")");}
    if (isEmpty($item['var7'])) {sql_call("UPDATE edomiLive.visuElement SET var7='".sql_encodeValue($tmp['vstep'])."' WHERE (id=".$item['id'].")");}
    if ($item['var8']=='-1')     {sql_call("UPDATE edomiLive.visuElement SET var8='".sql_encodeValue($tmp['vlist'])."' WHERE (id=".$item['id'].")");}
}

//Min/Max ggf. vertauschen
if ($item['var5']>$item['var6'] && !isEmpty($item['var6'])) {
    sql_call("UPDATE edomiLive.visuElement SET var5='".sql_encodeValue($item['var6'])."',var6='".sql_encodeValue($item['var5'])."' WHERE (id=".$item['id'].")");
}

//Verknüpftes Visuelement (Knopf), mit Option "automatisch": VE finden, das an der exakt gleichen Position (auf der gleichen Visueite) platziert ist (größte ID zuerst, dies erhöht die Wahrscheinlichkeit eines korrekten Treffers)
if ($item['var17']==1 && !($item['var20']>0)) {
    $tmp=sql_getValues('edomiProject.editVisuElement','id','id<>'.$item['id'].' AND visuid='.$item['visuid'].' AND pageid='.$item['pageid'].' AND xpos='.$item['xpos'].' AND ypos='.$item['ypos'].' ORDER BY id DESC');
    if ($tmp!==false) {
        sql_call("UPDATE edomiLive.visuElement SET var20=".$tmp['id']." WHERE id=".$item['id']);
    }
}
?>
###[/ACTIVATION.PHP]###


###[SHARED.JS]###
VSE_VSEID_parseVar=function(obj) {
    //Winkelbereich
    var a1=parseInt(obj.dataset.var12);
    var a2=parseInt(obj.dataset.var13);
    if (a1>a2) {
        var tmp=a1;
        a1=a2;
        a2=tmp;
    }
    if (a1<0) {a1=0;}
    if (a1>=360) {a1=359;}
    if (a2<=a1) {a2=a1+1;}
    if (a2>360) {a2=360;}
    obj.dataset.var12=a1;
    obj.dataset.var13=a2;
    
    //Schleifbahngröße
    if (isNaN(parseFloat(obj.dataset.var9))) {obj.dataset.var9=0;}
    if (parseFloat(obj.dataset.var9)<0) {obj.dataset.var9=0;}
    if (parseFloat(obj.dataset.var9)>100) {obj.dataset.var9=100;}
    
    //Knopfgröße
    if (isNaN(parseFloat(obj.dataset.var10))) {obj.dataset.var10=0;}
    if (parseFloat(obj.dataset.var10)<-100) {obj.dataset.var10=-100;}
    if (parseFloat(obj.dataset.var10)>100) {obj.dataset.var10=100;}
    if (isNaN(parseFloat(obj.dataset.var11))) {obj.dataset.var11=0;}
    if (parseFloat(obj.dataset.var11)<-100) {obj.dataset.var11=-100;}
    if (parseFloat(obj.dataset.var11)>100) {obj.dataset.var11=100;}
}
###[/SHARED.JS]###


###[EDITOR.JS]###
VSE_VSEID=function(elementId,obj,meta,property,isPreview,koValue) {
    var n="<svg id='"+obj.id+"-svg' style='position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box;'></svg>";    
    n+="<table cellpadding='0' cellspacing='0' border='0' style='width:100%; height:100%;'><tr><td>"+meta.itemText+"</td></tr></table>";
    obj.innerHTML=n;

    //Text immer zentrieren, kein Padding
    obj.style.textAlign="center";
    obj.style.padding="0";

    VSE_VSEID_parseVar(obj);

    if (obj.dataset.var9>0) {document.getElementById(obj.id+"-svg").innerHTML=graphics_svg_centerArc(element_getFgColor(obj),obj.offsetWidth,obj.offsetHeight,obj.dataset.var12,obj.dataset.var13,{size:obj.dataset.var9,solid:false});}

    return true;
}
###[/EDITOR.JS]###


###[VISU.JS]###
VSE_VSEID_CONSTRUCT=function(elementId,obj) {
    var n="<table cellpadding='0' cellspacing='0' border='0' style='width:100%; height:100%;'>";
        n+="<tr><td><span id='e-"+elementId+"-text'></span></td></tr>";
    n+="</table>";
    if (obj.dataset.var2&1 || obj.dataset.var2&2) {n+="<svg id='e-"+elementId+"-svg' style='display:block; position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box;'></svg>";}
    if (obj.dataset.var2&4) {n+="<div id='e-"+elementId+"-editvalue' style='display:none; position:absolute; left:0; top:0; right:0; bottom:0; color:"+visu_indiColorText+";'></div>";}
    obj.innerHTML=n;

    if (isNaN(parseFloat(obj.dataset.var5)) || isNaN(parseFloat(obj.dataset.var6))) {
        obj.dataset.var5=0;
        obj.dataset.var6=100;
    }

    VSE_VSEID_parseVar(obj);

    if (visuElement_hasKo(elementId,2)) {
        visuElement_onDrag(obj,((obj.dataset.var1&2)?0:1),2,obj.dataset.var4);
    }
}

VSE_VSEID_REFRESH=function(elementId,obj,isInit,isRefresh,isLive,isActive,koValue) {
    //Text immer zentrieren, kein Padding
    obj.style.textAlign="center";
    obj.style.padding="0";

    document.getElementById("e-"+elementId+"-text").innerHTML=visuElement_parseString(visuElement_getText(elementId),koValue);
    VSE_VSEID_render(elementId,isActive,koValue);
}

VSE_VSEID_DRAGSTART=function(elementId,dragObj) {
    var obj=document.getElementById("e-"+elementId);
    if (obj) {    
        //KO-Wert als Startposition merken
        var mousePos=visuElement_getMousePosition(obj,dragObj,0);
        var kovalue=visuElement_getKoValue(elementId,1);
        visuElement_initDragData(mousePos,kovalue,1,1,null,obj.dataset.var5,obj.dataset.var6,null,null,obj.dataset.var12,obj.dataset.var13,obj.dataset.var8,obj.dataset.var7,((obj.dataset.var1&8)?15:5));                        
    
        if (obj.dataset.var2&4) {
            document.getElementById("e-"+elementId+"-text").style.display="none";
            document.getElementById("e-"+elementId+"-editvalue").style.display="block";
        }
    }
}

VSE_VSEID_DRAGMOVE=function(elementId,dragObj) {
    var obj=document.getElementById("e-"+elementId);
    if (obj) {
        //KO-Wert aus Position ermitteln
        var mousePos=visuElement_getMousePosition(obj,dragObj,0);
        var modus=((obj.dataset.var1&2)?0:1);
        if (obj.dataset.var1&1) {modus=2;}
        var pos=visuElement_getDragData(mousePos,null,1,1,modus,obj.dataset.var5,obj.dataset.var6,null,null,obj.dataset.var12,obj.dataset.var13,obj.dataset.var8,obj.dataset.var7,((obj.dataset.var1&8)?15:5));                        
        var value=pos.valuex;
        return value;
    }
}

VSE_VSEID_DRAGEND=function(elementId,dragObj,dragValue) {
    var obj=document.getElementById("e-"+elementId);
    if (obj) {
        if (obj.dataset.var2&4) {
            document.getElementById("e-"+elementId+"-text").style.display="inline";
            document.getElementById("e-"+elementId+"-editvalue").style.display="none";
        }
    }
}

VSE_VSEID_render=function(elementId,isActive,koValue) {
    var obj=document.getElementById("e-"+elementId);
    if (obj) {
        var n="";

        if (isActive) {
            if (obj.dataset.var2&2) {var color=visu_indiColor;} else {var color=element_getFgColor(obj);}

            if (obj.dataset.var2&1 || obj.dataset.var2&2) {
                var pos=getPos();
                n+=radialLine(color,obj.offsetWidth,obj.offsetHeight,pos,{s1:obj.dataset.var10,s2:obj.dataset.var11,width:2});
                if (obj.dataset.var9>0) {n+=graphics_svg_centerArc(color,obj.offsetWidth,obj.offsetHeight,obj.dataset.var12,obj.dataset.var13,{size:obj.dataset.var9,solid:true});}
            }
            if (obj.dataset.var2&4) {document.getElementById("e-"+elementId+"-editvalue").innerHTML="<button class='elementContent'><span style='background:"+visu_indiColor+"; color:"+visu_indiColorText+"; padding:1px; border-radius:3px;'>"+visuElement_parseString(visuElement_getCaption(elementId),koValue)+"</span></button>";}
        
        } else if (obj.dataset.var2&1) {
            var color=element_getFgColor(obj);

            var pos=getPos();
            n+=radialLine(color,obj.offsetWidth,obj.offsetHeight,pos,{s1:obj.dataset.var10,s2:obj.dataset.var11,width:2});
            if (obj.dataset.var9>0) {n+=graphics_svg_centerArc(color,obj.offsetWidth,obj.offsetHeight,obj.dataset.var12,obj.dataset.var13,{size:obj.dataset.var9,solid:true});}
        }
        
        if ((obj.dataset.var2&1 || obj.dataset.var2&2)) {document.getElementById("e-"+elementId+"-svg").innerHTML=n;}

        //Verknüpftes Visuelement (Knopf)
        if (obj.dataset.var17==1 && obj.dataset.var20>0) {
            var a=getPos()+element_getAngle(obj);    //Regler-Rotation ggf. hinzuaddieren
            var x=obj.offsetLeft;
            var y=obj.offsetTop;
            var w=obj.offsetWidth;
            var h=obj.offsetHeight;
            if (w>=h) {var r=h/2;} else {var r=w/2;}
            if (!isNaN(parseFloat(obj.dataset.var18))) {r*=parseFloat(obj.dataset.var18)/100;}
            var p=math_getPolar(x+w/2,y+h/2,a,r);
            if (obj.dataset.var19==1) {var aa=getPos()+element_getAngle(obj);} else {var aa=element_getAngle(obj);}

            visuElement_modify(obj.dataset.var20,{
                para:{x:p.x,y:p.y,a:aa},
                func:function(obj,para){VSE_VSEID_modifyLinkedElement(obj,para);}
            });
        }
    }


    function getPos() {
        var pos=math_mapValue(koValue,obj.dataset.var5,obj.dataset.var6,obj.dataset.var12,obj.dataset.var13);
        return pos;
    }

    function radialLine(fgcolor,w,h,a,para) {
        if (w>=h) {var r=h/2;} else {var r=w/2;}
        var p1=math_getPolar(w/2,h/2,a,r*para.s1/100);
        var p2=math_getPolar(w/2,h/2,a,r*para.s2/100);
        return "<line x1='"+p1.x+"' y1='"+p1.y+"' x2='"+p2.x+"' y2='"+p2.y+"' stroke-linecap='butt' stroke='"+fgcolor+"' stroke-width='"+para.width+"' vector-effect='non-scaling-stroke'/>";
    }
}

VSE_VSEID_modifyLinkedElement=function(obj,para) {
    var x=para.x-obj.offsetWidth/2+visuElement_getDesignOffsetX(obj);
    var y=para.y-obj.offsetHeight/2+visuElement_getDesignOffsetY(obj);
    var a=para.a+visuElement_getDesignAngle(obj);
    obj.style.left=x+"px";
    obj.style.top=y+"px";
    obj.style.webkitTransform="rotate("+a+"deg)";
}
###[/VISU.JS]###


###[HELP]###
Das Visuelement "Drehregler" ermöglicht das Bearbeiten eines KO-Wertes mit Hilfe eines virtuellen Potentiometers oder Inkrementalgebers (Endlosdrehregler).

<h2>Spezifische Eigenschaften</h2>
Für weitere Einstellungen und Optionen siehe: <link>Allgemeine Informationen zu Visuelementen***1002</link>

<ul>
    <li>
        Modus: legt das Eingabeverhalten des Drehreglers fest
        <ul>
            <li>Potentiometer (relativ/absolut): der Drehregler verhält sich wie ein Potentiometer mit einem Bewegungsumfang von maximal 0..360 Grad</li>
            <li>Inkrementalgeber (stets relativ): Der Drehregler verhält sich wie ein Inkrementalgeber, d.h. bei jeder Winkeländerung von 5 bzw. 15 Grad wird der Wert je nach Drehrichtung erhöht oder erniedrigt. Die Schrittweite der Wertänderung ist dabei von den u.g. Parametern abhängig (Raster und Nachkommastellen).</li>
            <li>relativ: Der Wert von KO2 wird relativ zum aktuellen Wert (KO1) verändert, d.h. der Drehregler kann an einer beliebigen Position "angefasst" werden, ohne dass eine Wertänderung erfolgt. Erst beim Bewegen des Drehreglers wird der Wert relativ zu dieser Startposition abgeändert.</li>
            <li>absolut: Der Wert von KO2 wird unabhängig vom aktuellen Wert (KO1) gesetzt, d.h. beim "Anfassen" des Drehreglers wird bereits der mit dieser Position korrespondierende Wert gesetzt.</li>
            <li>Hinweis: Der Winkel 0 Grad befindet sich auf 6-Uhr-Position, im Uhrzeigersinn wird der Wert stets erhöht.</li>
        </ul>
    </li>

    <li>
        Startwinkel/Endwinkel: legt den Bewegungsumfang des Drehreglers im <i>ganzzahligen</i> Bereich von 0..360 (Grad) fest
        <ul>
            <li>beide Werte sind als absolute Winkelwerte anzugeben, z.B. führt 45/315 zu einem 3/4-Kreis (270 Grad), der nach unten offen ist</li>
            <li>Bezugspunkt (0 Grad) ist die 6-Uhr-Position</li>
            <li>Winkelwerte werden stets im Uhrzeigersinn umgesetzt, z.B. führt die Angabe 0/90 zu einem Viertelkreis unten links</li>
            <li>Wichtig: der Startwinkel muss stets kleiner als der Endwinkel sein</li>
        </ul>
    </li>

    <li>
        Darstellung: legt das Erscheinungsbild des Drehreglers fest
        <ul>
            <li>Deko (Dekoration): zeigt den Bewegungsumfang ("Schleifbahn") und einen einfachen Knopf (aktuelle Position) an</li>
            <li>Cursor: zeigt während der Bedienung einen Cursor in Indikatorfarbe an</li>
            <li>Eingabewert: zeigt während der Bedienung den eingestellten Wert in Indikatorfarbe an</li>
        </ul>
    </li>

    <li>
        Schleifbahngröße: legt den relativen Durchmesser der "Schleifbahn" fest (sofern "Deko" aktiviert ist)
        <ul>
            <li>erlaubt sind Werte von 0..100 Prozent (0=keine Schleifbahn anzeigen)</li>
            <li>Hinweis: Diese Angabe wirkt sich lediglich auf das Erscheinungsbild aus (funktioniell keine Bedeutung).</li>
        </ul>
    </li>

    <li>
        Knopfgröße (von/bis): legt die relative Größe des "Knopfes" und des Eingabe-Cursors fest (sofern "Deko" bzw. "Cursor" aktiviert ist)
        <ul>
            <li>erlaubt sind Werte von -100..100 Prozent</li>
            <li>Hinweis: Diese Angabe wirkt sich lediglich auf das Erscheinungsbild aus (funktioniell keine Bedeutung).</li>
        </ul>
    </li>

    <li>
        Minimum (Integer/Float): unterer Grenzwert der Eingabe
        <ul>
            <li>wird dieses Feld [leer] belassen, werden ggf. die KO-Filtereinstellungen angewendet</li>
            <li>Wichtig: Falls das Minimum und/oder das Maximum nicht definiert wurde, wird stets ein Wertebereich von 0..100 erzeugt.</li>
        </ul>
    </li>

    <li>
        Maximum (Integer/Float): oberer Grenzwert der Eingabe
        <ul>
            <li>wird dieses Feld [leer] belassen, werden ggf. die KO-Filtereinstellungen angewendet</li>
            <li>Wichtig: Falls das Minimum und/oder das Maximum nicht definiert wurde, wird stets ein Wertebereich von 0..100 erzeugt.</li>
        </ul>
    </li>

    <li>
        Raster (Integer/Float): die Eingabe wird auf einen Wert mit dieser "Schrittweite" umgerechnet
        <ul>
            <li>z.B. Raster=0.5: die Eingabe 0.45 wird zu 0, die Eingabe 2.98 wird zu 2.5 umgerechnet</li>
            <li>wird dieses Feld [leer] belassen, werden ggf. die KO-Filtereinstellungen angewendet</li>
            <li>Hinweis: Im Modus "Inkrementalgeber" legt dieser Wert ggf. die Schrittweite jeder Wertänderung fest. Wird kein Rasterwert angegeben, ist die Anzahl der Nachkommastellen (s.u.) ausschlaggebend: Der Wert wird z.B. bei 2 Nachkommastellen um 0.01 erhöht bzw. erniedrigt.
        </ul>
    </li>

    <li>
        Nachkommastellen: die Eingabe wird ggf. auf die angegebene Anzahl von Nachkommastellen gerundet
        <ul>
            <li>Option "KO-Filter": ggf. werden die KO-Filtereinstellungen angewendet</li>
            <li>Hinweis: Im Modus "Inkrementalgeber" legt dieser Wert ggf. die Schrittweite jeder Wertänderung fest, sofern kein Rasterwert (s.o.) angegeben wurde: Der Wert wird z.B. bei 2 Nachkommastellen um 0.01 erhöht bzw. erniedrigt.
        </ul>
    </li>

    <li>
        KO2 zyklisch setzen: legt fest, wann und wie häufig KO2 auf einen Wert gesetzt werden soll
        <ul>
            <li>deaktiviert: das KO wird nur beim Beenden ("Loslassen") der Eingabe auf den entsprechenden Wert gesetzt</li>
            <li>aktiviert: das KO wird beim Beenden und <i>während</i> der Eingabe (jedoch nur bei einer Wertänderung) auf den entsprechenden Wert gesetzt - dies wird u.U. zu einer hohen Buslast führen!</li>
            <li>aktiviert (alle ... ms setzen): das KO wird beim Beenden und <i>während</i> der Eingabe (jedoch nur bei einer Wertänderung) auf den entsprechenden Wert gesetzt, jedoch nur in dem angegebenen Intervall</li>
            <li>Wichtig: Ist diese Option aktiviert, wird das Visuelement keine Live-Vorschau-Werte bereitstellen.</li>
        </ul>
    </li>
</ul>


<h2>Kommunikationsobjekte</h2>
Dieses Visuelement kann (optional) folgende Kommunikationsobjekte (KO) verwalten:

<ul>
    <li>
        KO1: Status
        <ul>
            <li>dieser KO-Wert wird ggf. als Wert und Position angezeigt und dient als Grundlage für eine relative Wertänderung</li>
            <li>dieser KO-Wert wird zudem zur <span style="background:#e0ffe0;">Steuerung und Beschriftung</span> verwendet (Designs, Funktionen und Formeln)</li>
        </ul>
    </li>

    <li>
        KO2: Wert setzen
        <ul>
            <li>dieses KO wird auf den per Drehregler eingestellten Wert gesetzt</li>
            <li>Hinweis: Dieser KO-Wert wird während der Bedienung des Visuelements als Vorschau-Wert für das KO1 aller anderen Visuelemente mit <link>aktivierter Live-Vorschau***1002</link> bereitgestellt.</li>
        </ul>
    </li>

    <li>
        KO3: Steuerung des dynamischen Designs
        <ul>
            <li>dieser KO-Wert wird ausschließlich zur Steuerung eines <link>dynamischen Designs***1003</link> verwendet, falls kein KO1 angegeben wurde</li>
            <li>wenn dieses KO angegeben wurde, wird ein dynamisches Design durch dieses <i>KO3</i> gesteuert</li>
            <li>wenn dieses KO nicht angegeben wurde, wird ein dynamisches Design durch das <i>KO1</i> gesteuert</li>
        </ul>
    </li>
</ul>

<b>Hinweis:</b>
Bei einer Aktivierung ergänzen sich KO1 und KO2 gegenseitig: Wird z.B. KO1 nicht angegeben, wird KO1 automatisch mit dem gleichen KO wie KO2 verknüpft (und umgekehrt).


<h2>Besonderheiten</h2>
<ul>
    <li>Designs: Innenabstand und Textausrichtung werden ignoriert (die Textausrichtung ist stets zentriert)</li>
    <li>Seitensteuerung/Befehle stehen nicht zu Verfügung</li>
</ul>


<h2>Tipps</h2>
<h3>Individuellen "Knopf" erzeugen</h3>
Mit Hilfe eines weiteren Visuelements (z.B. einem Universalelement) kann bei Bedarf ein individueller "Knopf" zur Anzeige der aktuellen Position des Drehreglers erzeugt werden:

Zunächst wird z.B. ein Universalelement beispielsweise mit einem Hintergrundbild angelegt:
<ul>
    <li>als KO1 wird das KO2 des Drehreglers angegeben</li>
    <li>ggf. kann hier die Option "Live-Vorschau" aktiviert werden, um das Universalelement in Echtzeit während der Bedienung des Drehreglers reagieren zu lassen</li>
    <li>im Design des Visuelements wird der Eigenschaft "&Delta;X-Position" die Formel "{polarX(...)}" und der Eigenschaft "&Delta;Y-Position" die Formel "{polarY(...)}" zugewiesen (die Funktionsparameter werden in der Folge erläutert)</li>
    <li>beide Angaben zusammen führen zu einer wertabhängigen Positionierung des Universalalements auf einer Kreisbahn</li>
    <li>abschließend wird das Universalelement exakt(!) in der linken oberen Ecke des Drehreglers positioniert</li>
    <li>falls das Seitenverhältnis des Drehreglers nicht 1:1 beträgt, muss die Position des Universalelements entsprechend angepaßt werden: Ziel ist es das Universalelement in der linken oberen Ecke einer gedachten rechteckigen Begrenzung um die Kreisbahn des Drehreglers zu positionieren.</li>
</ul>

Die Parameter der o.g. Formeln <link>polarX(minValue,maxValue,minAngle,maxAngle,Radius)***r-3</link> bzw. <link>polarY(...)***r-3</link> sind wie folgt zu wählen:
<ul>
    <li>minValue/maxValue: der Wertebereich (Minimum/Maximum) des Drehreglers</li>
    <li>minAngle/maxAngle: der Winkelbereich des Drehreglers (beim Modus "360 Grad" bzw. "Inkrementalgeber" sind 0/360 anzugeben, beim Modus "270 Grad" sind 45/315 anzugeben)</li>
    <li>Radius: der Radius entspricht der halben Breite des Drehreglers (ggf. abzüglich Rahmenbreite), bzw. dessen gedachter rechteckiger Begrenzung seiner Kreisbahn</li>
    <li>Hinweis: Der Radius kann ggf. angepaßt werden, z.B. um das Universalelement (Knopf) exakt auf der Kreisbahn zu positionieren. In der Regel ist es z.B. sinnvoll, die halbe "Größe" des Knopfes vom Radius abzuziehen, damit der Knopf mit seinem Mittelpunkt auf der Kreisbahn liegt.</li>
</ul>

<b>Hinweis:</b>
Zur Positionsanzeige kann alternativ (oder zusätzlich) z.B. auch ein <link>Rundinstrument***1002-27</link> verwendet werden.


<h2>Bedienung in der Visualisierung</h2>
Durch das Anklicken (und Festhalten) einer beliebigen Stelle des Visuelements wird die Eingabe gestartet.
Ein Verschieben der Maus (mit gedrückter Maustaste) um das Zentrum des Visuelements führt zu einer Änderung des Eingabewerts.
Das Maß der Wertänderung hängt dabei (je nach Modus) vom Abstand der Maus zum Zentrum des Visuelements ab.
Ein Loslassen der Maustaste beendet die Eingabe, KO2 wird ggf. auf den eingestellten Wert gesetzt.
###[/HELP]###

**Winni** · 08.05.2019, 07:05

Gibt's das Listelement evtl. auch schon als VSE-Datei? Dann könnte ich mal abschätzen, ob ich auch bei Erscheinen schon auf 2.0 wechseln kann.

**gaert** · 08.05.2019, 07:16

Klar:

Code:

###[DEF]###
[name    =Liste/Tabelle]

[folderid=161]
[xsize    =200]
[ysize    =250]
[text    ={#}]

[var1    =]
[var2    =]
[var3    =0]
[var4    =0]
[var5    =0]
[var6    =3]
[var7    =0]
[var8    =0]
[var10    =]

[flagText        =1]
[flagKo1        =1]    
[flagKo2        =0]
[flagKo3        =1]
[flagPage        =1]
[flagCmd        =1]
[flagDesign        =1]
[flagDynDesign    =1]

[captionText    =Daten]
###[/DEF]###


###[PROPERTIES.JS]###
n+="<table width='100%' border='0' cellpadding='2' cellspacing='0'>";
    n+="<tr>";
        n+="<td>Zeilentrenner (leer=Zeilenumbruch)<br><input type='text' id='*var1*' data-type='1' value='' class='control1' style='width:100%;'></input></td>";
        n+="<td>Spaltentrenner (leer=keine Spalten)<br><input type='text' id='*var2*' data-type='1' value='' class='control1' style='width:100%;'></input></td>";
    n+="</tr>";
    n+="<tr><td colspan='2'>Titelzeile<br><div id='*var7*' data-type='6' data-value='' data-list='0|ohne;1|1. Zeile ist Titelzeile;2|1. Zeile ist Titelzeile (Zeilenhöhe minimieren);' class='control6' style='width:100%;'>&nbsp;</div></td></tr>";
    n+="<tr><td colspan='2'>Sortierung<br><div id='*var3*' data-type='6' data-value='' data-list='0|ohne;1|aufsteigend (ganze Zeile);2|absteigend (ganze Zeile);3|aufsteigend (Spalte 1);4|absteigend (Spalte 1);5|aufsteigend (Spalte 1, ausblenden);6|absteigend (Spalte 1, ausblenden);' class='control6' style='width:100%;'>&nbsp;</div></td></tr>";

    n+="<tr><td colspan='2' class='formSubTitel2'>Darstellung<hr></td></tr>";
    n+="<tr>";
        n+="<td>Zeilenhöhe (px, 0=optimal)<br><input type='text' id='*var4*' data-type='1' value='' class='control1' style='width:100%;'></input></td>";
        n+="<td>Innenabstand (px, 0=ohne)<br><input type='text' id='*var5*' data-type='1' value='' class='control1' style='width:100%;'></input></td>";
    n+="</tr>";
    n+="<tr>";
        n+="<td>Trennlinien<br><div id='*var6*' data-type='6' data-value='' data-list='0|ohne;1|Zeilen;2|Spalten;3|Zeilen und Spalten;' class='control6' style='width:100%;'>&nbsp;</div></td>";
        n+="<td>Blättern-Schaltflächen<br><div id='*var8*' data-type='6' data-value='' data-list='0|nur anzeigen wenn erforderlich;1|immer anzeigen;' class='control6' style='width:100%;'>&nbsp;</div></td>";
    n+="</tr>";
    n+="<tr><td colspan='2'>Kopfzeilenhöhe (px, leer=Standard)<br><input type='text' id='*var10*' data-type='1' value='' class='control1' style='width:100%;'></input></td></tr>";
n+="</table>";
###[/PROPERTIES.JS]###


###[ACTIVATION.PHP]###
<?
//Separator1 auf <br> setzen, falls leer (Hinweis: in der Visu wird CHR(10/13) in <br> umgewandelt)
if (isEmpty($item['var1'])) {
    sql_call("UPDATE edomiLive.visuElement SET var1='<br>' WHERE (id=".$item['id'].")");
}
?>
###[/ACTIVATION.PHP]###


###[EDITOR.JS]###
VSE_VSEID=function(elementId,obj,meta,property,isPreview,koValue) {
    var mheight=(obj.dataset.var10!='')?obj.dataset.var10:40;
    var n="<table cellpadding='0' cellspacing='0' border='0' style='position:absolute; left:0; top:0; width:100%; height:100%;'>";
        n+="<tr style='height:"+mheight+"px;'>";
            n+="<td width='50%' align='center'>&lt;</td>";
            n+="<td width='50%' align='center'>&gt;</td>";
        n+="</tr>";
        n+="<tr><td colspan='2' style='border-top:1px dotted;'>"+((isPreview)?"":"<span class='app2_pseudoElement'>LISTE/TABELLE</span>")+"</td></tr>";
    n+="</table>";
    obj.innerHTML=n;

    //kein Padding
    obj.style.padding="0";

    return false;
}
###[/EDITOR.JS]###


###[VISU.JS]###
VSE_VSEID_CONSTRUCT=function(elementId,obj) {
    var mheight=(obj.dataset.var10!='')?obj.dataset.var10:40;
    var n="<table cellpadding='0' cellspacing='0' border='0' style='position:absolute; left:0; top:0; width:100%; height:100%;'>";
        n+="<tr id='e-"+elementId+"-scroll' style='height:"+mheight+"px; display:none;'>";
            n+="<td width='50%' align='center' id='e-"+elementId+"-last'>&lt;</td>";
            n+="<td width='50%' align='center' id='e-"+elementId+"-next'>&gt;</td>";
        n+="</tr>";
        n+="<tr><td colspan='2' id='e-"+elementId+"-scroll2'><div style='position:relative; height:100%;'><div id='e-"+elementId+"-edit' style='position:absolute; top:0; left:0; right:0; bottom:0; overflow-x:hidden; overflow-y:auto;'></div></div></td></tr>";
    n+="</table>";
    obj.innerHTML=n;
    
    if (visuElement_hasCommands(elementId)) {
        visuElement_onClick(document.getElementById("e-"+elementId+"-edit"),function(veId,objId){visuElement_doCommands(veId);});
    }

    visuElement_onClick(document.getElementById("e-"+elementId+"-last"),function(veId,objId){scrollUp("e-"+veId+"-edit");});
    visuElement_onClick(document.getElementById("e-"+elementId+"-next"),function(veId,objId){scrollDown("e-"+veId+"-edit");});
}

VSE_VSEID_REFRESH=function(elementId,obj,isInit,isRefresh,isLive,isActive,koValue) {
    //kein Padding
    obj.style.padding="0";

    VSE_VSEID_update(elementId,visuElement_parseString(visuElement_getText(elementId),koValue));
}

VSE_VSEID_update=function(elementId,list) {
    var d=document.getElementById("e-"+elementId);
    if (d) {

        var obj=document.getElementById("e-"+elementId+"-edit");
        var rows=list.split(d.dataset.var1);
        var rowsMax=rows.length;
        if (rows[rowsMax-1]=="") {
            rows.pop();
            rowsMax--;
        }    
        
        if (rowsMax>0) {
            //Spalten erzeugen:
            var cols=new Array();
            var colsMax=1;
            if (d.dataset.var2=="") {
                for (var t=0;t<rowsMax;t++) {cols[t]=[rows[t]];}
            } else {
                for (var t=0;t<rowsMax;t++) {
                    cols[t]=rows[t].split(d.dataset.var2);
                    if (cols[t].length>colsMax) {colsMax=cols[t].length;}
                }
            }

            //Sortieren (ggf. ohne 1. Zeile):
            if (d.dataset.var7>=1) {var titel=cols.shift();}
            if (d.dataset.var3==1) {
                cols.sort();
            } else if (d.dataset.var3==2) {
                cols.sort();
                cols.reverse();
            } else if (d.dataset.var3==3 || d.dataset.var3==5) {
                cols.sort(sort1up);
            } else if (d.dataset.var3==4 || d.dataset.var3==6) {
                cols.sort(sort1down);
            }
            if (d.dataset.var7>=1) {cols.unshift(titel);}

            //Ausgabe:
            colsStart=0;
            if ((d.dataset.var3==5 || d.dataset.var3==6) && colsMax>1) {colsStart=1;}    //ggf. 1. Spalte ausblenden:
            if (d.dataset.var4==0) {
                var h="";
                var n="<table cellpadding='"+d.dataset.var5+"' cellspacing='0' border='0' style='width:100%; height:100%;'>";
            } else {
                var h=" height='"+d.dataset.var4+"'";
                var n="<table cellpadding='"+d.dataset.var5+"' cellspacing='0' border='0' style='width:100%;'>";
            }
            
            if (d.dataset.var7>=1) {    //Titelzeile: ggf. Spaltenbreite setzen
                var tmp="";
                var isSet=false;
                for (var tt=colsStart;tt<colsMax;tt++) {
                    if (cols[0][tt]) {
                        var meta=cols[0][tt].split("***");
                        if (meta.length==2 && !isNaN(parseFloat(meta[1]))) {
                            tmp+="<col width='"+parseFloat(meta[1])+"%'>";
                            isSet=true;
                        } else {
                            tmp+="<col width=''>";
                        }
                        cols[0][tt]=meta[0];
                    }
                }
                if (isSet) {n+="<colgroup>"+tmp+"</colgroup>";}
            }            
            
            for (var t=0;t<rowsMax;t++) {
                var b1="";
                if (t<(rowsMax-1) && (d.dataset.var6==1 || d.dataset.var6==3)) {b1="border-bottom:1px dotted;";}
                if (t==0 && d.dataset.var7>=1) {
                    //Titelzeile
                    b1="border-bottom:1px solid; font-weight:bold;";
                    if (d.dataset.var7==2) {n+="<tr height='1'>";} else {n+="<tr"+h+">";}
                } else {
                    n+="<tr"+h+">";
                }
                for (var tt=colsStart;tt<colsMax;tt++) {
                    if (cols[t][tt]!==undefined) {var col=cols[t][tt];} else {var col="&nbsp;";}
                    var b2="";
                    if (tt<(colsMax-1) && (d.dataset.var6==2 || d.dataset.var6==3)) {b2="border-right:1px dotted;";}
                    n+="<td style='"+b1+b2+"'>"+col+"</td>";
                }
                n+="</tr>";
            }
            n+="</table>";            
            obj.innerHTML=n;
        } else {
            //keine Daten (wichtig für ClickEvent!)
            obj.innerHTML="<table cellpadding='0' cellspacing='0' border='0' style='width:100%; height:100%;'><tr><td>&nbsp;</td></tr></table>";
        }

        if (d.dataset.var8==1 || parseInt(obj.scrollHeight)>parseInt(obj.clientHeight)) {
            document.getElementById("e-"+elementId+"-scroll").style.display="table-row";
            document.getElementById("e-"+elementId+"-scroll2").style.borderTop="1px solid";
        } else {
            document.getElementById("e-"+elementId+"-scroll").style.display="none";
            document.getElementById("e-"+elementId+"-scroll2").style.borderTop="none";
        }
    }

    function sort1up(a,b) {
        if (a[0]===b[0]) {
            return 0;
        } else {
            return (a[0]<b[0])?-1:1;
        }
    }
    
    function sort1down(a,b) {
        if (a[0]===b[0]) {
            return 0;
        } else {
            return (a[0]>b[0])?-1:1;
        }
    }
}
###[/VISU.JS]###


###[HELP]###
Das Visuelement "Liste/Tabelle" generiert aus den Angaben im Feld "Beschriftung" (auch in dynamischen Designs) eine Auflistung bzw. Tabelle.

<h2>Spezifische Eigenschaften</h2>
Für weitere Einstellungen und Optionen siehe: <link>Allgemeine Informationen zu Visuelementen***1002</link>

<ul>
    <li>
        Zeilentrenner: legt fest, welche Zeichenkette einzelne Zeilen voneinander abtrennen soll
        <ul>
            <li>wird dieses Feld [leer] belassen, wird als Zeilentrenner ein "Zeilenumbruch" erwartet</li>
        </ul>
    </li>

    <li>
        Spaltentrenner: legt ggf. fest, welche Zeichenkette einzelne Spalten voneinander abtrennen soll
        <ul>
            <li>wird dieses Feld [leer] belassen, werden keine Spalten erzeugt (es wird also eine Auflistung anstelle einer Tabelle angezeigt)</li>
        </ul>
    </li>

    <li>
        Sortierung: ermöglicht das Sortieren der Listen-/Tabellendaten (Stringvergleich)
        <ul>
            <li>ohne: es erfolgt keine Sortierung, d.h. die Daten werden in der angegebenen Reihenfolge angezeigt</li>
            <li>aufsteigend/absteigend (ganze Zeile): die Daten werden aufsteigend bzw. absteigend sortiert, als Sortierkriterium dient die gesamte Zeile</li>
            <li>aufsteigend/absteigend (Spalte 1): die Daten werden aufsteigend bzw. absteigend sortiert, als Sortierkriterium dient nur die erste Spalte</li>
            <li>aufsteigend/absteigend (Spalte 1, ausblenden): wie zuvor, jedoch wird die erste Spalte (Sortierkriterium) nicht angezeigt</li>
            <li>Hinweis: Die erste Zeile (Titel) wird ggf. von der Sortierung ausgenommen (s.u.).</li>
            <li>Wichtig: Die Sortierung erfolgt stets per Stringvergleich! Reine Zahlenwerte werden daher u.U. anders als erwartet sortiert.</li>
        </ul>
    </li>

    <li>
        Zeilenhöhe: definiert die Zeilenhöhe jeder einzelnen Zeile
        <ul>
            <li>0 = optimale Zeilenhöhe (d.h. es wird die max. Höhe des Visuelements ausgenutzt, ggf. wird gescrollt)</li>
            <li>1..oo = feste Zeilenhöhe in Pixel (unabhängig von dieser Angabe wird die Zeilenhöhe mindestens der Schriftgröße entsprechen)</li>
        </ul>
    </li>

    <li>Innenabstand: definiert den Innenabstand jeder einzelnen Zeile bzw. Zelle in Pixeln</li>

    <li>Trennlinien: legt fest, ob Spalten und/oder Zeilen mit einer Linie visuell getrennt werden sollen</li>

    <li>
        Titelzeile: legt fest, ob die erste (unsortierte) Zeile der Daten als Titelzeile (Legende) interpretiert werden soll
        <ul>
            <li>1. Zeile ist Titelzeile: die vollstände 1. Zeile (ggf. einschließlich Spalten) wird als Titelzeile angezeigt und von einer Sortierung ausgeschlossen</li>
            <li>1. Zeile ist Titelzeile (Zeilenhöhe minimieren): wie zuvor, jedoch wird die Zeilenhöhe für die Titelzeile unabhängig von den o.g. Einstellungen so gering wie möglich eingestellt</li>
            <li>
                Hinweis: Die Titelzeile kann (optional) ausserdem zur Definition der jeweiligen Spaltenbreite (Tabellen) verwendet werden:
                <ul>
                    <li>die Breite jeder einzelnen Spalte kann als Prozentwert wie folgt definiert werden (als Spaltentrenner wird in diesem Beispiel das Komma verwendet):</li>
                    <li>"Titel1***10,Titel2***20,Titel3***70" führt zu Spaltenbreiten von 10%, 20% und 70%</li>
                </ul>
            </li>
        </ul>
    </li>

    <li>Blättern-Schaltflächen: legt fest, ob ggf. Schaltflächen zum Blättern (Scrollen) angezeigt werden</li>

    <li>Kopfzeilenhöhe: legt optional die Höhe der Kopfzeile in Pixeln fest (Blättern-Schaltflächen)</li>
</ul>


<h2>Kommunikationsobjekte</h2>
Dieses Visuelement kann (optional) folgende Kommunikationsobjekte (KO) verwalten:

<ul>
    <li>
        KO1: Steuerung
        <ul>
            <li>dieser KO-Wert wird ggf. als Datengrundlage verwendet</li>
            <li>dieser KO-Wert wird zudem zur <span style="background:#e0ffe0;">Steuerung und Beschriftung</span> verwendet (Designs, Funktionen und Formeln)</li>
        </ul>
    </li>

    <li>
        KO3: Steuerung des dynamischen Designs
        <ul>
            <li>dieser KO-Wert wird ausschließlich zur Steuerung eines <link>dynamischen Designs***1003</link> verwendet, falls kein KO1 angegeben wurde</li>
            <li>wenn dieses KO angegeben wurde, wird ein dynamisches Design durch dieses <i>KO3</i> gesteuert</li>
            <li>wenn dieses KO nicht angegeben wurde, wird ein dynamisches Design durch das <i>KO1</i> gesteuert</li>
        </ul>
    </li>
</ul>


<h2>Besonderheiten</h2>
<ul>
    <li>
        Die Auflistung bzw. Tabelle wird aus den Angaben im Feld "Beschriftung" (auch in dynamischen Designs) generiert, z.B.:
        <ul>
            <li>"A|B|C|1|2|3": Auflistung (Zeilentrenner ist hier "|")</li>
            <li>"A,B,C|1,2,3|XX,,YY": Tabelle (Zeilentrenner ist hier "|", Spaltentrenner ist hier ",")</li>
            <li>"{#}": Auflistung/Tabelle auf Grundlage des KO-Wertes</li>
            <li>prinzipiell sind auch HTML/CSS-Angaben möglich, z.B. "1|<u>2:Wichtig!</u>|3" (Unterstreichen)</li>
        </ul>
    </li>

    <li>das Feld "Beschriftung" stellt die anzuzeigenden Daten bereit</li>
    <li>Designs: Innenabstand wird ignoriert</li>
    <li>Hinweis: wenn keine Seitensteuerungen/Befehle zugewiesen wurden, verhält sich dieses Visuelement dennoch nicht <link>klicktransparent***1002</link></li>
</ul>


<h2>Bedienung in der Visualisierung</h2>
Mit den Pfeil-Schaltflächen kann ggf. durch die Auflistung/Tabelle geblättert werden (Scrollen).
Mit einem Klick auf die Auflistung bzw. Tabelle werden alle zugewiesenen Seitensteuerungen/Befehle ausgeführt.
###[/HELP]###

**Brick** · 08.05.2019, 07:37

Zitat von gaert Beitrag anzeigen

Hier für Spass mal die "VSE-Datei" für den Drehregler - Ihr könnte bestimmt erahnen, dass ich noch einiges dokumentieren muss, bis das erste eigene Visuelement programmiert werden kann

Uhh... da bin ich raus...

**DolcheVita** · 08.05.2019, 08:02

gaert sehe ich das richtig, das in dem Element auch die Anzahl der gesteuerten oder steuerbaren KOs "frei" definiert werden kann?

**gaert** · 08.05.2019, 15:47

Nein

Geduld... Die Doku ist in Arbeit...

**gaert** · 08.05.2019, 15:49

Noch eine Sache:

Das "Rundinstrument" erweitere ich gerade um eine lineare Option, d.h. das Rundinstrument kann auch "gerade" sein

So kann man schnell man eine Slider-Schleimspur zaubern etc.

Jetzt grüble ich in Sachen Namensgebung: "Wertanzeige"? "Rund-/Linearinstrument"? Wer also einen chicken Namen parat hat...

**mars** · 08.05.2019, 16:56

"Universalinstrument" - geht nicht, ist zu ähnlich zu "Universalelement"
"Universalgenie" - geht nicht, bist ja wohl Du

... keine Idee

**Bassti** · 08.05.2019, 17:27

Zitat von gaert Beitrag anzeigen

"Wertanzeige"?

Fänd ich sehr passend

**gaert** · 08.05.2019, 18:42

Namensänderung ist beim Amt beantragt

Universalgenie ist mir allerdings noch zu wenig...

"Wertanzeige" fände ich auch nicht schlecht, besser wäre eigentlich "grafische Wertanzeige" - aber das klingt irgendwie sperrig. Naja, gibt wichtigeres! Hauptsachte man ahnt, was gemeint ist...

**gaert** · 08.05.2019, 19:21

So in der Art (die Größe innerhalb des Visuelements kann man übrigens bald anpassen - dies erleichtert ggf. die Überlagerung mit Drehregler/Slider/etc.):

Bildschirmfoto 2019-05-08 um 19.21.19.png

**gibsonrocker** · 08.05.2019, 20:11

"Wertanzeige" finde ich auch noch am besten. Das Wort "grafische" brauchts dabei nicht. Es ist ja eine Visu. Sollte vielleicht klar sein das eine Anzeige in einer Visu grafisch ist. Und nicht einfach eine Zahl.

Oder "Wertinstrument"...Universalanzeige ist auch gut. Immerhin können wir alle mit dem Wort "Universal" dank dem Universalelement was anfangen.

Wenn ich beim schreiben so drüber nachdenke wäre vielleicht "Universalanzeige" echt am besten. Wer weiß was Dir noch alles einfällt.

Ankündigung

Diskussionsthread EDOMI-Releases/Updates

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar