Color-Picker

[TirochH]

Update vom 17.1.2021:
neu:
- RGB und HSL Ausgabe. RGB=default, HSL über "XXOPTIONS*hsl=1;" (siehe Beispiel in .hslib)
- Beispiele mit besonders mächtigen Universal-Logikbausteinen (.hslib)
- VISU Beispiele (in .hslib)
- neuer Name "XXCOLPICKER" (anstatt "XXCOLORPICKER" --> ändern!!)
- Vorsicht: nach jeder Änderung in der "custom.js" muß Browser-Cache geleert werden

Hier die fertige Lösung . Sieht jetzt doch anders aus.

Ist aber nach meiner Sicht die Optimallösung.

Beiliegend die HTML-Datei zum testen. Kann von jedem HTML-Browser - der eine ".html"-Datei aufrufen kann - benutzt werden.

Der Color-Picker läuft nur unter den neuesten Browsern und Betriebssystemen am Client. Bitte ausprobieren, mit der Test-HTML-Datei in Minuten erledigt. Funktionalität je nach Plattform unterschiedlich. Ist aber meistens sinnvoll, da ja am Handy anders zu bedienen als am PC.

Den in der zip Datei enthaltene JavaScript-Code "cp.js" ist in die custom.js zu kopieren.

Weiters wird die "d3.min.js" Bibliothek benötigt. Bibliothek kann durchaus schon für andere PlugIns schon vorhanden sein.
Genauer Pfad in beiliegender HTML-Datei. Für die Tests genügt der Netzwerkzugriff, sonst lokal runterladen und Eintrag in customs.js unter "hs.functions.element_loader([...])" eintragen.

Jetzt die in der ZIP-Datei vorhandenen Logik-Bausteine (*.hsl) zusätzlich laden (im Experten). Das sind sehr mächtige Universal-Bausteine die die Anzahl der benötigten Bausteine drastisch reduzieren. In unserem Fall schätzungsweise um den Faktor 10. Beschreibung erfolgt später.

Die beiliegende .hslib in den Experten laden. Die in der .hslib enthaltene VISU einbinden.

Das ist es. Alle sonstigen notwendigen Infos sind "selbsterklärend". Farbwert kann über colPicker und über die Felder "rgb" und "hsl" numerisch (9-stellig) eingegeben we

Colorwert kann durch ColorPicker oder durch Eingabe des max. 9-stelliigen Zahlenwert gesetzt werden. Die jeweiligen RGB-Werte für die weitere Verwendung müssen durch die entsprechenden Logikbausteine herausgerechnet werden.
Bitte um Feedback was benötigt wird.

Eines bin ich mir sicher, es ist.die mir "bestmöglich bekannte" Lösung unter "HS-Visu".

Noch einige Screen-Shots.

1. Testbild mit 2 Farbknöpfen (violett und orange) --> durch "klick" oder "touch" wird Color-Picker aufgerufen. Rechte Werte sind die dezimalen RGB-Werte in der Form "rrrgggbbb."

8EF8EECA-6901-4E81-BD0F-03E718461AFA.png

2. Color-Picker. Schaut nicht so spektakulär aus wie die "Circular CP", Bedienung und Auswahl der Farbe ist "spektakulär": Bitte ausprobieren und bitte um FEEDBACK.

B1BD02C7-8A43-42EC-80B5-FE84EEB9634B.png

3. Numerische Eingabe der Farbe. Die Farbe wird beim CP automatisch mitverändert. Nicht selbstverständlich !!!
3D34F1DE-BEF6-4D00-9B78-89BF96227B78.png

Hans

[Andreas1986]

Hy Hans.
Ist ja der Hammer. Ich wäre sehr interessiert.
Grüße Andy

[IHDpeitzmeier]

Ich auch, welchen Browser nutzt du dabei, ich kann die xxapi2 nur noch unter samsung laden. Wäre sehr an einem Tipp intressiert 😊

[TirochH]

Ich auch, welchen Browser nutzt du dabei, ich kann die xxapi2 nur noch unter samsung laden. Wäre sehr an einem Tipp interessiert 😊

Geht bei mit auf allen Geräten - ohne Einschränkungen. Benutze vorwiegend Safari, aber auch Chrome.

Meiner Meinung brauchst Du eine neue "start.htm". Die von Nils propagierte Netzwerklösung funktioniert meines Wissens nach nicht mehr.

Hier meine Start.htm. Du musst alle benötigten Dateien (auch die von GitHub lokal haben.

[TirochH]

Hy Hans.
Ist ja der Hammer. Ich wäre sehr interessiert.
Grüße Andy

Siehe Eintrag #1. Ist fertig.

Hans

[Andreas1986]

Danke Hans, hoffe ich kann mir das Morgen einrichten. Bin schon gespannt.

[Andreas1986]

Servus Hans,

hab mir die zip mal gezogen und versuche gerade das zum laufen zu bringen.
Bist du dir sicher das das notwendig ist?

In der "zweiten" und "letzten" Zeile sind die Kommentar-Markierungen "//" zu löschen.

[TirochH]

Für die Tests mit der HTML Datei brauchst natürlich nichts zum ändern.

Vor de Einbau in die Custom.js muss nur der Teil zwischen den beiden <script></script> in die custom.js Datei kopiert werden. Dann sind diese Kommentarzeilen in Code umzuwandeln. Dort steht ja der Name der Funktion XXCOLORPICKER3 drinnen. IN DER. LETZTEN ZEILE DIE "}" KLAMMER.

Hans

[Andreas1986]

Servus Hans. Hab da aktuell noch Probleme ich habe jetzt versucht alles so einzubinden wie bei XXSLIDER oder XXRSLIDER oder XXSWICH.

Bin leider bissen raus aus der XXAPI Thematik (custom.js).
Hab den Text OHNE <Script> und <Script/> in die Custom.js kopiert. auch ein Dynamischer Text mit XXCOLORPICKER3 habe ich angelegt.
Datentyp der Werteingabe ist 32Bit wie oben beschrieben.

Bilder sagen meiner Meinung nach mehr als 1000 Worte.
Kannst du auf die schnelle was finden was nicht passt?
Suche natürlich selber auch schon seit einer Weile nach dem Fehler.
Den Cache habe ich nach jedem HS Neustart jedes mal geleert.
Meine Versuche waren mit Firefox, Chrome, IE.

CP_1.png

Problem ist, das ich in der Visu nur das wie oben im Bild zusehen ähnliche Bild habe und sich beim Draufklicken die Werteingabe öffnet.

Danke schon mal.


Grüße Andy

[TirochH]

Genau genommen brauchst DU "zwei" unterschiedliche Sachen:

1. ein KO ( Kommunmikationsobjekt ) wo DU die Farbe in den von mir definierten numerischen Wert RRRGGGBBB eingibsts bzw das COLORPICKER3 Plugin ausgibt. DU hast es mit "Farbe" bezeichnet. Das wäre OK. Initialisiere es mit "rot", das ist der Wert 255000000.
2. dann brauchst DU ein VISU-TextElement (Breite 53, Höhe 30) mit dem

• KO "Farbe" als Textsteuerung (Du hast "XXCPdyn" verwendet, das ist falsch)
• dynamisches Textfeld, hast als "XXCOLORPICKER3" bezeichnet, dieser Name ist egal. Wichtig ist das optionale Präfix "XXCOLORPICKER3*. Das ist richtig.
• die Aktion "Werteingabe". Ist auch OK. (wichtig ist das verwendete KO "Farbe".

Also 2 kleine Fehler und dann wäre alles. OK.


Hans

[TirochH]

Andy

Falls DU noch Probleme hast, machen wir kurzfristig eine Teamviewer-Session.

Hans

[Andreas1986]

UOTE=TirochH;n1599536]Falls DU noch Probleme hast, machen wir kurzfristig eine Teamviewer-Session.[/QUOTE]

Super geiles Angebot. Das ist ein Support...

Genau genommen brauchst DU "zwei" unterschiedliche Sachen:

1. ein KO ( Kommunmikationsobjekt ) wo DU die Farbe in den von mir definierten numerischen Wert RRRGGGBBB eingibsts bzw das COLORPICKER3 Plugin ausgibt. DU hast es mit "Farbe" bezeichnet. Das wäre OK. Initialisiere es mit "rot", das ist der Wert 255000000.
2. dann brauchst DU ein VISU-TextElement (Breite 53, Höhe 30) mit dem

• KO "Farbe" als Textsteuerung (Du hast "XXCPdyn" verwendet, das ist falsch)
• dynamisches Textfeld, hast als "XXCOLORPICKER3" bezeichnet, dieser Name ist egal. Wichtig ist das optionale Präfix "XXCOLORPICKER3*. Das ist richtig.
• die Aktion "Werteingabe". Ist auch OK. (wichtig ist das verwendete KO "Farbe".

Danke dir für die Infos und das bereitgestellte Plugin. (Wie lange sitzt man an so einer Lösung (Std))?

Kann hoffentlich morgen weiter testen... Leider bis 17 Uhr Schulung.


Grüße Andy

[TirochH]

Andy

Freut mich, das es klappt. Beachte, dass das Plugin auf jedem System (Handy/IOS, Handy/Androis, Tablett, PC/Windows, PC/macOS) anders aussieht.

Hans

[SirTom]

Hey,

ich wollte auch gerade mal testen. Ich finde die Idee super! Ich habe erstmal mit der xstart.htm angefangen. Funktioniert die xxApi2 nun wieder mit Chrome?! Jedenfalls bekomme ich ein Bild
Leider habe ich nun Scrollbalken und die Visu wird nicht nicht direkt oben links in der Ecke ausgerichtet, sondern ich habe oben und links einen kleinen schwarzen Rand... liegt der Fehler bei mir oder finde ich da in der xstart.htm irgendwo was? Wollte erstmal das regeln, bevor ich mich mit dem Colorpicker auseinandersetze.

VG und auf jeden Fall vielen Dank für das Entwickeln!

Thomas

[Andreas1986]

Leider habe ich nun Scrollbalken

die habe ich leider auch unter Chrome,Firefox und IE

TirochH

Hast du das mal unter Firefox probiert? Hab da aktuell das Problem, das ich wenn ich den Colorpicker in ei Untermenü z.B. Wohnzimmer lege ich das Wohnzimmer nicht mehr aufrufen kann. Bei Chrome und IE funktioniert das einwandfrei.

Die Gesamte Farbe des 32Bit Wertes zerlege ich extra noch mit z.B. dem BitCutter? oder wie machst du das?

Grüße Andy