Hallo Für ein kleines lokales Webprojekt würde ich gerne Temperaturen in Farben darstellen. Der Bereich liegt zwischen 10 und 90°C und die Farben sollen in ein Grad Schritten von blau nach rot laufen. Mit dem CSS Gradient ist dies leider nicht umzusetzen: https://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_angles Was ich jetzt suche ist eine Möglichkeit, jeder Temperatur eine Farbe zuzuordnen. Dies muss nicht im Browser passieren, ich kann die Datenbank, welche die temperaturen enthält, auch über ein PHP Script um die Spalten mit den Farbwerten erweitern. Eine feste Tabelle möchte ich nicht machen, das wäre ja zu einfach ;-) Aber vor allem auch zu unflexibel, wenn mal andere Farben gewünscht sind. Danke und Gruß Kolja
Typ schrieb: > Kenntnisse über lineare Funktionen? Nein, Kentnisse über CSS :-) Aber damit sollte es funktionieren: https://www.w3schools.com/colors/colors_rgb.asp color: rgb(100%, 100%, 100%); Ist aber nicht nicht so schön flexibel, wie ich eigenltlich wollte, aber dafür sehr einfach.
Ja, also und da bastelst du für die R und B Werte jetzt eine Funktion in Abhängigkeit von der Temperatur rein und fertich.
Kolja L. schrieb: > 30°C: > blau = 30%, > rot = 90 - temp = 60% Was ist dir daran zu unflexibel? Georg
Geht ja auch JavaScript. Ja ich weiß, das ist böse :-) Hier z.B: ein Farbverlauf Blau - Weiß - Rot (circa) ja nach Maus:
1 | <html>
|
2 | <head>
|
3 | <title>blau-rot</title> |
4 | <script>
|
5 | window.onload = function() |
6 | {
|
7 | var text = document.getElementById ("text"); |
8 | var x_min = text.getBoundingClientRect().left; |
9 | var x_max = text.getBoundingClientRect().right; |
10 | var hue_min = 1 + 2/3; |
11 | var hue_max = 1; |
12 | |
13 | text.onmousemove = function (e) |
14 | {
|
15 | var x = e.clientX / (x_max - x_min); |
16 | |
17 | var hue = hue_min + x * (hue_max - hue_min); |
18 | var lit = 4 * x * (1 - x); |
19 | lit = 0.4 + (1 - 0.4) * lit; |
20 | |
21 | text.style.background = "hsl(" + (360*hue) + ", 100%, " + (100*lit) + "%)"; |
22 | };
|
23 | }
|
24 | </script>
|
25 | </head>
|
26 | <body>
|
27 | <div id="text">Text Text Text Text Text Text Text Text Text Text Text Text Text </div> |
28 | </body>
|
29 | </html>
|
Kolja L. schrieb: > Der Bereich liegt zwischen 10 und 90°C und die Farben sollen in ein Grad > Schritten von blau nach rot laufen. Das ist eventuell im HSV Farbraum einfacher zu berechnen als in RGB, da ändert sich von Rot nach Blau nur ein Wert. Gibt IMHO sattere Farben verglichen zu einfacher Interpolation in RGB.
Es gibt eine einfache formel, die ich immer zur linearen Interpolation zwischen 2 werten mit mehreren Komponenten verwende, egal ob es farben, punkte im raum, oder sonstwas sind:
a und b können vektoren oder scalare sein, t ist ein scalar zwischen 0 und 1. t=0 ist das selbe wie a, t=1 das selbe wie b, t=0.5 ist (a+b)/2, usw. Ungetestete javascript funktion:
1 | function interpolate(a,b,t){ |
2 | if(a.length != b.length) |
3 | throw new Error("Dimension error"); |
4 | var r = []; |
5 | for( var i=a.length; i--; ) |
6 | r[i] = a[i]*(1-t) + b[i]*t; |
7 | return r; |
8 | }
|
9 | // verwendungsbeipeiel: interpolate([1,2,3],[3,2,1],0.5); // [2,2,2]
|
Ich finde es erspart viel rechnerei, wenn man nur t auf den bereich 0 bis 1 normalisieren muss.
Thread beobachten
Seitenaufteilung abschaltenBitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.