colorpicker für fhemweb

[justme1968]

guten morgen,

ich bin gerade dabei einen colorpicker ins fhemweb einzubauen. eine erste test version geht schon und ich kann die farbwerte für meine hue birnen interaktiv einstellen. jetzt habe ich aber ein paar fragen zum allgemeinen vorgehen.

der colorpicker ist zur zeit dieser hier http://jscolor.com. es war der erste den ich gefunden habe und mir scheint die lizenz ok.
- gibt es prinzipielle richtlinien um ein zusätzliches javascript element in fhemweb einzubinden?
- gibt es einen vorschlag für einen anderen colorpicker?
- gibt es sonstige prinzipielle vorschläge?

- da ich keinerlei ahnung von javascript habe läuft er zur zeit nur in der raumübersicht. in der detailansicht bekomm ich ihn noch nicht zum funktionieren. ich vermute das das click event abgefangen wird. wer kennt sich aus und hat lust hier mal mit hin zuschauen?

anbei noch ein zwei screenshots wie das ganze ausschaut:
(siehe Anhang / see attachement)
(siehe Anhang / see attachement)

gruss
  andre

[rudolfkoenig]

Die Aufgabe hat mehrere Aspekte:
- jscolor.js ist mit 35k nicht gross, und mit LGPL auch FHEM vertraeglich, es koennte also unter fhem/www/jscolor eingecheckt werden. Bei dieser Groesse wuerde ich es sogar automatisch mit dem standard update ausliefern, und dafuer nicht ein extra Paket bauen, letzteres ist mit update dank Martin aber auch moeglich.
- in der Detailansicht will ich sowieso eine Schnittstelle fuer Module anbieten, ich sehe ein, dass das auch fuer den Uebersicht sinnvoll waere. Das kann aber noch etwas dauern.

[justme1968]

anbei zwei kleine patches die den colorpicker in der raumübersicht benutzen und in der detail ansicht zumindest die manuelle eingabe der farbwerte erlauben. zusätzlich ist nur jscolor wie vorgeschlagen unter fhem/www/jscolor nötig.

die idee ist analog zur slider definition in der set liste ein rgb:colorpicker,RGB verwenden zu können.

vielleicht hat der colorpicker ja schon eine chance bevor du die beiden schnittstellen baust.

gruss
  andre

[justme1968]

noch eine idee...

wie wäre es wenn man devStateIcon analog zu stateFormat so erweitert das perl code erlaubt ist um dynamisch anhand von farben oder dimstufen zu bestimmen was als icon in der web seite eingebettet wird. das muß dann auch nicht mehr unbedingt ein wirkliches icon sein sondern z.b. einfach ein html element dessen füllfarbe farbe/helligkeit was auch immer durch readings gesteuert wird.

z.b. etwas in der art:

Code Auswählen Erweitern

attr devStateIcon {'<div style="width:32;height:32;background-color:'. ReadingsVal($name,...) .'#F00;"></div>'}

gruss
  andre

[rudolfkoenig]

> attr devStateIcon {'<div

Habs genauso eingebaut und dokumentiert.
Achtung: im Detailansicht kann man ; direkt eingeben, im fhem.cfg muss man dasselbe als ;; schreiben. Und 32 sollte 32px heissen.

[rudolfkoenig]

> anbei zwei kleine patches

gefaellt mir nicht sehr gut, weil es immer versucht jscolor.js zu laden.

Ich schlage vor auf die generische Methode zu warten, oder es mit dem o.g. devStateIcon Feature zu loesen :)

[justme1968]

klasse. das mit dem devStateIcon variante werde ich probieren. das löst aber nur ein teil des problems. ich kann den aktuellen status anzeigen.
ich kann aber nicht etwas einstellen ohne das jscolor.js geladen ist. und es ermöglicht mir nur einen parameter einzustellen.

die andere möglichkeit würde ich gerne trozdem weiter verfolgen. zumal es damit möglich ist mehr als einen parameter zu editieren (zumindest sobald die beschränkung das es nur ein spezial element und nur am anfang der webCmd liste geben darf aufgehoben ist) und es zum anderen unschön ist die status anzeige im icon und das setzen eines paramters zu mischen.

wenn das einzige was dich stört ist das jscolor.js immer geladen wird lass uns einen weg finden jscolor.js nur zu laden wenn es benötigt wird. wie wäre es mit etwas in der art in fhemweb.js:

Code Auswählen Erweitern

function loadjsfile(filename){
  var script=document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.setAttribute("src", filename);
  document.getElementsByTagName("head")[0].appendChild(script);
 } und im patch muß nur an der stelle wo der colorpicker verwendet wird das jscolor dynmisch geladen werden.

Code Auswählen Erweitern

<script type="text/javascript">
loadScript("jscolor/jscolor.js");
</script>

das ist jetzt auf dem trockenen hingeschrieben. ich werde es mal testen. ist das dynamisch laden eine alternative für dich?

gruss
  andre

[justme1968]

den status mit dem neuen devStateIcon anzuzeigen funktioniert sehr gut.

aber natürlich sind mir noch ein paar dinge aufgefallen:

- ich komme anders als beim stateFormat nicht mit $name an den namen des devices. das wäre aber schön um eine generische version zu verwenden die dann auch gegen rename geschützt ist.

- was muss ich tun damit der perl code neu ausgeführt wird wenn sich am device etwas ändert? also analog zur icon änderung per longpoll.

- beim reload 01_FHEMWEB sind  hinterher keine icons da. die müßen extra mit rereadicons geladen werden.

gruss
  andre

[justme1968]

das mit dem loadscript war viel zu kompliziert gedacht.

ich kann es ja auch einfach an der stelle laden wo das text feld für den colorpicker dargestellt wird. anbei eine neue version des patches die ohne das globale laden auskommt.

spricht etwas dagegen die sonderbehandlung für den slider und auch für den colorpicker nicht nur dann zu machen wenn sie an erster stelle im webCmd stehen? ich denke die bedienbarkeit würde stark gewinnen wenn man an erster stelle noch ein toggle setzen könnte. dann würde der klick auf die icons immer vernünftig funktionieren und nicht nur wenn webCmd nicht gesetzt ist.

gruss
  andre

[justme1968]

noch eine idee...

wenn du nicht magst das fhemweb für so eine spezielle sache gepatcht wird waere vielleicht eine alternative wie bei devStateIcon die attribut definition zu erweitern. entweder in dem code erlaubt wird oder in dem ein kommando mit der :-syntax wie in der set set list erlaubt wird und dann eine HTML-Fn im modul aufgerufen wird. also so

Code Auswählen Erweitern

attr webCmd toggle:{getHTML($name,"colorpicker")}:on:off oder  

Code Auswählen Erweitern

attr webCmd toggle:(rgb:colorpicker:RGB):on:off:(pct:slider:0:1:100) die syntax für letzteres ist noch nicht so schön aber vielleicht hast du ja eine bessere idee was mit den : auf zweiter ebene zu tun ist.

vielleicht ist dieser vorschlag auch einfach und generell genug als  allgemeine lösung wie sie die dir vorschwebt.

gruss
  andre

ps: mit der neuen devStateIcon version habe ich gestern noch ein dynamiches rolladen icon gebastelt. das funktioniert sehr gut.

[rudolfkoenig]

Ich fürchte diese Idee ist noch nicht ausgereift.

Aus jedem Element der webCmd Liste wird ein Link (<a>) generiert, mit dem Element als Name und mit "cmd=set $d Element" als Link. Ich kann weder Name noch Befehl aus deinen Beispielen ableiten.

[justme1968]

das kommt darauf an was du automtisch generieren möchtest und was im code gemacht wird.

in dem beispiel  hätte ich alles inklusive dem cmd generiert weil ich die flexibilität beim colorpicker brauche weil hier nicht bei onClick sondern onChange reagieren muss. d.h. ich würde gerne den kompletten div erzeugen können wie ich es in meinem patch für den colorpicker eingebaut habe. ich muss also so etwas einfügen können und:

Code Auswählen Erweitern

<td colspan='2'>
  <script type='text/javascript' src='$FW_ME/jscolor/jscolor.js'></script>
  <input class='color {pickerMode:'$mode'}' value='#$cv' onchange='setColor(this,\"$mode\",$c)'\"/>
</td>
stell dir mal vor wie es aussehen müsste wenn du den slider nicht per sonderbehandlung im 01_FHEMWEB.pl erzeugst sondern komlett per webCmd code.

das könnte man unterstützen in dem man funktionen bereit stellt um bestimmte einfache szenarien zu unterstützen.
den punkt "ich komme anders als beim stateFormat nicht mit $name an den namen des devices. das wäre aber schön um eine generische version zu verwenden die dann auch gegen rename geschützt ist." von weiter oben aus dem devStateIcon sollte man hier natürlich auch unterstützen.

wenn du ein paar minuten zeit hast schau dir doch mal an wie ich in 31_HUEDevide.pl im 'get devStateIcon' gemacht habe.  da erzeuge ich z.b. für manche zustände genau das was normalerweise als icon generiert wird und für andere meine farbige markierung.



gruss
  andre

[justme1968]

ich habe eben bemerkt das das neue devStateIcon feature in der smallscreen version noch nicht geht.

muss ich beim verwenden noch etwas berücksichtigen oder du beim zusammenbauen der seite?

[rudolfkoenig]

>  ich habe eben bemerkt das das neue devStateIcon feature in der smallscreen version noch nicht geht.

Stimmt nicht, bei mir tut es. Oder anders: ab wannn werden endlich meine bitten erhoert, und man liefert mir eine genaue Fehlermeldung samt fhem.cfg & genaue Beschreibung?

[justme1968]

die frage war nicht mit dem gedanken verbunden das du einen fehler reproduzieren oder suchen sollst sondern damit das ich mich selber auf die suche mache wenn du sagst es geht. ich hab das problem inzwischen gefunden und behoben.