RGB-Anzeige

[JNK]

Hallo zusammen,

ich habe für RGB-LED ein neues Widget erstellt. Es füllt einfach die Aktor-Fläche in der Farbe, die sich aus den Wertenm der drei Adressen ergibt (s.u.):

<rgb>
  <layout colspan="1" />
  <address transform="DPT:5.004" mode="read" variant="r">0/3/20</address>
  <address transform="DPT:5.004" mode="read" variant="g">0/3/21</address>
  <address transform="DPT:5.004" mode="read" variant="b">0/3/22</address>
</rgb>

Die Frage ist nun: braucht oder will das noch jemand, ist der Bedarf so gross, dass es ein Standard-Widget sein soll? soll es ein Plugin werden? Und wie soll es heissen?

Gruss,

der Jan

[Werner V]

Hi!

Is das schon im SVN? Interesse auf jedenfall vorhanden!

lg Werner

[JNK]

basicdesign.addCreator('rgb', {
  create: function( element, path, flavour, type ) {
    var $e = $(element);
    var layout = $e.children('layout')[0];
    var style = layout ? 'style="' + extractLayout( layout, type ) + '"' : '';
    
    var classes = 'widget clearfix rgb';
    if( $e.attr('align') ) {
      classes+=" "+$e.attr('align');
    }
    var ret_val = $('<div class="'+classes+'" ' + style + '/>');
    ret_val.setWidgetLayout($e)
    var label = extractLabel( $e.find('label')[0] );
    var address = makeAddressList($e, rgb_handleVariant);
    
    var actor = '<div class="actor" style="background: #ffffff;"></div>';
    var $actor = $(actor).data( {
      'address' : address,
    } );
    for( var addr in address ) 
    { 
      if( address[addr][1] & 1 ) $actor.bind( addr, this.update ); // only when read flag is set
    }
    ret_val.append( label ).append( $actor );
    return ret_val;
  },
  update: function(e,d) { 
    var element = $(this);
    var value = transformDecode( element.data('address')[ e.type ][0], d );
    var bg = element.css('background-color').replace(/[a-zA-Z()\s]/g, '').split(/,/);
    switch (element.data('address')[e.type][2]) {
    case 'r' :  bg[0] = value; break;
    case 'g' :  bg[1] = value; break;
    case 'b' :  bg[2] = value; break;
      default:
    }
    var bgs = "rgb(" + bg[0] + ", " + bg[1] + ", " + bg[2] + ")";
    element.css('background-color', bgs ); 
    
    
  },
});

function rgb_handleVariant(src, transform, mode, variant) {
	  return [true, variant];
}

und in custom.css

.rgb .actor {
   min-height: 2.1em;
   height:100%;
 }

in structure_custom.js einfügen, und es geht erstmal. Ich wüsste halt gern ob als Plugin oder als "normales" Widget. Weil entweder muss man dann alle Designs entsprechend mitanpassen oder eine entsprechende CSS mitliefern, die meistens geht.

Gruss,

der Jan

[Werner V]

[CODE]
Ich wüsste halt gern ob als Plugin oder als "normales" Widget.

Hi,

sorry für die dumme Frage, aber wo ist da der Unterschied für mich als "Endanwender" ?

lg

[Chris M.]

Es gibt ja schon das Colorchooser-Widget, das eigentlich genau dafür gedacht ist - was war das Problem damit?

Sollte es die Widget-Größe gewesen sein: da könnte ich mir eine (zusätzliche) Lösung wie das Diagram-Popup vorstellen - es zeigt nur die kleine Fläche und wenn man die anklickt poppt der Colorchooser auf.

Wenn man das so macht, wäre es ein Plugin.

Wenn man es einzeln lässt, dass hilft bei der Beantwortung der Frage direkt vs. Plugin die alternative Frage: hole ich mir irgendwelche Laufzeit-Nachteile wenn es immer drinnen ist da es weitere Ressourcen lädt oder sehr dick ist?
=> Danach wäre es ein "normales" Widget

[Werner V]

Hi!

Also für mich die Größe (da wäre die Popout Funktion ja schon eine schicke Lösung) und eine klarere Anzeige der aktuellen Farbe. Eventuell so ein Feld einfügen dass einfach nur die Farbe anzeigt wie bei dem Code von JNK

lg Werner

[JNK]

@Chris: der Colorchooser hat eine feste groesse, die mir zu groß ist. Mir reicht eine Anzeige der Farbe.

Gruß,

der Jan

[Gringo885]

Mhh wo ihr gerade daran rumbastelt ^^ Kann das mangels Kenntnissen (noch) nicht umsetzen, aber was eig mit RGBW ?? Kann man ggf. da was anpassen ??

So als Helligkeit ??


Gruß

Gringo

[JNK]

Gerade eingecheckt (Rev. 1135).

@Gringo: Ich wüsste nicht, wie das gehen sollte, habe auch keine RGBW zum testen. Wie sieht das denn aus, wenn z.B. R=100%, W=100%. Ist das dann weiss oder hellrosa?

Gruss,

der Jan

[Chris M.]

Die richtige Lösung wären Farb-Profile. Dann würde RGBW, W, WW, RGBY, ... gehen.

Aber nur wenige dürften die notwendige Mess-Hardware (ein Spektrometer; ein Colorimeter reicht nicht wirklich) haben um ein Profil aufzunehmen. Und selbst wenn wir das Profil hätten, müsste man in JavaScript einen ICC Parser haben so wie passende Farbraum Konvertierungen.

Man könnte natürlich das ganze auch erst mal grob annähern (und dabei sich auch um's Gamma kümmern, das dürfte den größten Unterschied zwischen dargestellter und realer Farbe sein).
Das bleibt aber ein Gerate und ob's unterm Strich so viel einfacher ist, bleibt zu klären...

[Gringo885]

Naja bei 100% rot und 50% weiß isses hellrosa, allerdings kann ich gerade nicht genau testen, bin außer Haus.

Also die Platine hat jeweils 1x R/G/B LED und 2x WW-LED pro Einheit. Dementsprechend hätte ich mir einfach ein Helligkeitsbjekt vorgestellt. Im Prinzip neben dem Colorchooser noch einen in das Plugin integrierten Slider für die Helligkeit und ein Attribut 'w'. So kommt man zwar nicht um ne 2 Stufige Bedienung drum herum, aber kann immerhin alle in einem Plugin Steuern.

Erst Farbe, dann Helligkeit wenn Bedarf. Oder auch nur Warmweiß.


Gruß

Gringo

[Werner V]

Gerade eingecheckt (Rev. 1135).

Hi,

hat sich hier noch etwas getan? Wollte es gerade ausprobieren, allerdings wird gar nichts angezeigt, weder die Slider noch die Farbe, wurde das wieder irgendwie enfernt?

lg

[JNK]

Werner,

da ist es noch, nur funktioniert es nicht, weil das DIV 0px Höhe hat. Wieso weiss ich nicht, ich hab euach spontan nicht rausgefunden, wie ich das unter Berücksichtigung von margin und padding richtig hinkriege.

.rgb {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
}

im CSS zeigt es zwar an, aber der Rand der um das Aktor-DIV gehört verschwindet.

Gruss,

der Jan

[Chris M.]

Gerade habe ich eine neue Version eingecheckt, bei der ein neues <div class="value"> mit rein gekommen ist.
=> Wer das Design per custom.css geändert hat, muss die evtl. anpassen.

Andererseits habe ich dem pure-Design nun passende CSS-Definitionen mitgegeben. (Die anderen Designs fehlen vermutlich noch).
Und auf der Demo-Seite ist es jetzt auch.

PS: Evtl. wäre es noch gut, wenn dieses Widget so erweitert werden würde, dass es sich selbst auf 100% oder 255 als Maximal-Wert einstellt.