Js: Farbpicker/Farbwähler als Ring coden
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bit
brauche
code
erstellen
farbe
formel
http
idee
jemand
kreis
kreisen
mittelpunkt
pixel
punkt
radius
realisieren
ringen
uhrzeigersinn
url
winkel
-
Hallo zusammen,
ich will einen ringgeformten Farbwähler mit den gängisten Farben inkl. Farbübergängen coden (Farbspektrum abbilden). Der User soll die Möglichkeit haben auf eine Farbe innerhalb des Ringes zu klicken und die gewählte Farbe soll dann in JS weiterverarbeitet werden -> z:B. Ausgabe als Hex-Code oder Bestimmung als Hintergrundfarbe etc.
Das man mit JS Eclipsen zeichnen und aus 2 Eclipsen ein Ring basteln kann soll nicht das Problem sein. Die folgenden beiden Fragen sind schon schwieriger:
1.) Wie bekomme ich die geschätzten 2000 Farben und Farbübergänge in den Ring? Kennt jemand eine JS-Formel oder zumindest einen Hinweis darauf, wie man dies realisieren könnte? Die jeweiligen Farben manuell zuzuweisen ist hierbei keine Alternative ;)
2.) Wie erhalte ich den Farbcode, auf den der User mit der Maus klickt? Dieser Code müsste in nem Array und der Position zwischengespeichert werden, das halte ich allerdings für sehr "umständlich".
Ich habe mich bereits im Netz erkundigt und keine wirkliche Lösung gefunden. Den Kreis als JPG anzeigen zu lassen und per Ajax und php eine Farbabfrage zu starten ist eher eine letztere Lösungsmöglichkeit.
Auch möchte ich nicht auf bereits vorgefertigte Lösungen zurückgreifen müssen.
Ich weiß, dass sich meine Idee wohl nicht mit 2-3 Codezeilen realisieren lässt, aber vllt. hat jemand ja ein grobes Konzept zur Realisierung.
Vielen Dank! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wozu selbst neu erfinden, wenn es das vorgefertigt bereits gibt?
http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/
Schaut aus wie ein ringförmiger Color Picker
Ansonsten kannst du dich beispielsweise hier darüber informieren, wie das andere angehen. -
Ja genau sowas! Nur das der Kontrast auch innerhalb dieses Ringes eingestellt werden kann und ohne jQuery. Das möchte ich aus rechtlichen Gründen nicht verwenden. Daher brauche ich einen eigenen Lösungsweg/-Ansatz.
-
esadat schrieb:
[...] 2000 Farben und Farbübergänge in den Ring?[...]
[...]Nur das der Kontrast auch innerhalb dieses Ringes eingestellt werden kann [...]
Wie groß willst Du deinen Farbring machen, damit der User überhaupt die möglichen Farben picken kann?
Bei 2000 Farben müßte dein Ring schon einen Durchmesser von mind. 640px haben, damit überhaupt alle Farben, mit je 1px, dargestellt werden können. Dazu noch Helligkeitsstufen... Wer soll das bedienen?
und ohne jQuery.
Das, von burgi verlinkte Tool kann dir zumindest ein paar Anregungen zur Umsetzung geben. -
...sollen ja nicht tatsächlich 2000 Farben dargestellt werden. Sind ja nur gefühlte 2000 und Ausdruck dafür, dass ich eine Formel benötige und nicht die einzelnen Farben manuell eingeben muss ... ;)
Der durch burgi gepostete Ring ist schon gut, jedoch benötigt man dafür jQuery, das ich nicht verwende.
Ich brauche ja nur einen Denkansturm wie sowas ohne jquery zu realisieren ist.
-
du setzt den mittelpunkt, ermittelst deine mausposition und entwickelst deine formel dazu, wie du die rbg kanäle rund um diesen mittelpunkt sich verändern lässt... so einfach ist das... und anhand der Mauskoordinate lässt du dir im verhältnis zum mittelpunkt den Hex-Code errechnen... so würde ich das machen...
-
esadat schrieb:
Der durch burgi gepostete Ring ist schon gut, jedoch benötigt man dafür jQuery, das ich nicht verwende.
Ich brauche ja nur einen Denkansturm wie sowas ohne jquery zu realisieren ist.
Jquery ist auch nur Javascript! Wenn Du dir den Aufbau des Skriptes mal anschaust, wirst Du deine gesuchten Formeln vermutlich dort finden. Die sind auch ohne jquery nutzbar.
-
Ich hatte mich auch mal an einem js-colorpicker versucht.
Grundsätzlich bin ich so vorgegangen das ich ein Farbiges Hintergrundbild hatte (erstellt durch ein selbstprogrammiertes Programm)
und je nach Mausposition wird die Farbe "errechnet".
Bei diesem Beispiel ist allerdings noch 'n Bug drin. Wenn man den rechten Slide bedient stimmen die Farben nicht mehr.
http://simuliertes.lima-city.de/spielplatz/painter/colorpickersimu.htm
Vielleicht sind da ja Anregungen für Dich dabei...
Ich denke mal das wichtigste ist also die richtige "Formel"
Ich würde es spontan so machen das ich Rot,Grün,Blau in 360° aufteilen würde und dazwischen die Farbübergänge.
also zB 0° Rot ,120° Grün, 240° Blau und in der Mitte Heller, außen dunkler.
Also bekommst du Die Helligkeit durch die Entfernung zum Mittelpunkt (Satz von Pythagoras) und die Farbe durch den Winkel (relativ zum Mittelpunkt).
Hintergrundbild erstellen und Farbe mit dieser Formel je nach x/y-position der Maus errechnen
Der Nachteil ist natürlich das Du weniger Helle Farben als Dunkle hast.
Aber deswegen hat sich der Kreis ja auch nie wirklich durchgesetzt.
Schau Dir dazu mal wiki an:
http://de.wikipedia.org/wiki/Farbkreis
http://de.wikipedia.org/w/index.php?title=Datei:Kleurencirkel2.png&filetimestamp=20120628154724
-
Ein paar gute Denkanstöße zum Bereich Formeln & Farben findet sich hier: http://farbe.wisotop.de
-
Vllt über Canvas? Leider kein Kreis aber:
Demo: http://maccman.github.com/colorcanvas/
Sourcecode: https://github.com/maccman/colorcanvas
Oder du nutzt HTML5 und setzt es voraus:
<input type="color" name="color" />
Hilft sowas vllt?
Liebe Grüße -
Hallo zusammen,
erst einmal vielen Dank für die zahlreichen Antworten!
Ich habe mich mal weiter informiert und ein wenig rumgebastelt. Das bisherige Grundergebnis findet ihr hier:
http://esadat.lima-city.de/farbkreis.html
Ich habe die Kreiskoordinaten mithilfe von Radius und Winkel, sowie Startkoordinaten und folgender Formel errechnet und ausgeben lassen:
//Kreiskoordinaten berechnen for i... 360..i++... x=sx+Math.sin(i)*radius; y=sy+Math.cos(i)*radius;
x,y=Kreiskooridnaten
sx,sy=Startkoordinaten
i=Grad
radius=Durchmesser/2
Dabei ist mir aufgefallen, dass die Koordinaten bei aufsteigendem Winkel nicht im Uhrzeigersinn den Kreis bilden, sondern immer an einer anderen Stelle des Kreises auftreten -> Mist, denn so kann ich die Farben nicht "aufsteigend" zuweisen.
Kennt jemand eine Formel, die mir Punkt für Punkt im Kreis im Uhrzeigersinn ausgibt?
Daher habe ich mir die Koordinaten von einem Halbkreis ausgeben lassen, in Excel aufsteigend sortiert und dann in ein Array geschoben, damit die Punkte im Uhrzeigersinn verlaufen...
Nun lasse ich die Punkte aus den Arrays (x,y) als div erstellen und errechne dazu die Farben in "aufsteigender" Form. und hinterlege die Farbe in jedem DIV in mouseover.
Da der Kreis nicht halbwegs fertig ist, da auch noch Farben von dunkel nach hell dargestellt werden sollen, grafisch noch ansehnlicher sein soll und die Ladezeit/Rechenkapazität bereits jetzt sehr hoch ist, denke ich, dass mein Ansatz zwar zu einem Ziel führt, aber für die weitere Anforderungen (hell/dunkel, mehr Farbübergänge etc.) ungeeignet ist.
Kennt sich jemand mit Farben und deren Codierungsregeln in HEX aus oder muss ich mich auch noch zwingend mit RGB beschäftigen?
Ich habe bereits in Erfahrung bringen können, dass je nachdem FF00 vor, hinter, aufgeteilt etc. und einer 2 stelligen Zahl bis 99 die verschiedenen Hauptfarben erstellt.
Je nachdem ob man FF anstatt 00 oder 00 anstatt FF verwendet, andere Zwischentöne und Sättigungen entstehen.
Hab ich schon erwähnt, dass ich Farben hasse ^^
Ich mag diese einfachen Colorpicker einfach nicht. Es sollte doch möglich sein einen ansehnlichen "modernen" Colorpicker zu erstellen, der auch nicht besonders viel Platz wegnimmt. Daher hatte ich die Idee des Farbringes. Habt ihr vllt. noch andere Ideen, wie man einen modernen "hübschen" Farbpicker gestalten könnte?
Beitrag zuletzt geändert: 1.11.2012 14:03:49 von esadat -
esadat schrieb:
Ja. Link 1, Link 2, Link 3
Kennt jemand eine Formel, die mir Punkt für Punkt im Kreis im Uhrzeigersinn ausgibt?
Am besten wird es sein, wenn du dir alle 3 Seiten anschaust
esadat schrieb:
Ja. Das funktioniert ganz einfach
Kennt sich jemand mit Farben und deren Codierungsregeln aus?
Die Farbe wird im hexadezimalen Zahlensystem angegeben. Sie besteht aus 6 Ziffern, das sind 24 Bit mit jeweils 8 Bit für einen Farbkanal.
Also so:RRGGBB
RR = 8 Bit rot, GG = 8 Bit grün, BB = 8 Bit blau.
Die Werte reichen dabei von
= 0 bis00
= 255FF
Damit lassen sich ca 16.7 Mio Farben darstellen.
Lesestoff: RGB Color Model, Hexadezimales Zahlensystem
Beitrag zuletzt geändert: 1.11.2012 14:07:05 von hackyourlife -
Ich habe mich einmal mit den Algorythmen beschäftigt und folgende Lösung gebastelt:
http://esadat.lima-city.de/farbkreis.html
(Roter Kreis ggf. Seite aktualisieren, da html zwischengespeichert sein könnte!)
hackyourlife hat mich auf die entscheidende Formel zur Zeichnung eines Kreises im Uhrzeigersinn gebracht. Vielen Dank! Somit konnte ich den Kreis Pixel für Pixel zeichnen.
Um einen breiten Kreis zu erhalten, habe ich nun 20 Kreise mit jeweils einem um 1px größeren Radius gezeichnet. Alles in allem um die 11000 Pixel. Dadurch kann ich 11000 Farben darstellen und auswählen lassen. Da jedoch bei einer Breite von 1px aufgrund der Formel "weiße Löscher" entstehen, habe ich die Breite auf 2 px gesetzt. Die hierdurch grafischen Ausbeulungen könnte man durch einen zuletzt erstellten weißen Kreis innen und außen relativieren.
Was haltet ihr von dieser Lösung, die sehr ressourcen-intensiv ist. Habt ihr Verbesserungsvorschläge, wie man die Erstellung effizienter darstellen könnte? Zu beachten ist dabei, dass die Pixel im Uhrzeigersinn erstellt werden müssen, um jeweils das Farbspektrum darstellen zu können und hat vllt. jemand eine Idee, wie ich das Farbspektrum effizient in den Kreis bringe (11000 Farben sind ja möglich - hell und dunkel soll dabei auch berücksichtigt werden)?
Beitrag zuletzt geändert: 1.11.2012 22:11:51 von esadat -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
