Dış ortam sıcaklığına bağlı olarak arka plan rengini ayarlama

Question

Heyoh SO,

Üzerinde çalıştığım bir projeyi uygulamak için bir sıcaklık widget'ım var. Hiçbir şey özellikle zor, ben ect gereken verileri almak için ücretsiz bir API var.

ANCAK, ben başlamak için iyi bir fikrim var olan bir renk özelliğini olurdu benimle çalışıyor güzel tasarımcı ...

O anki hava şartlarına bağlı olarak bir arka plan-renk tanımlamak için olur sıcaklık. Sıcaklık -20 gibi soğuk ise Yani

, arka plan rengi mavi/mor/herhangi bir renk soğuk olmalıdır; ve sıcak olduğu zaman, 25 gibi, turuncu/kırmızı gibi sıcak bir arka plan rengine sahip olmalıdır.

Bir dizi "sıcaklık adımı" ile kolayca çalışabileceğimi düşünüyorum, ancak sıcaklığı bağlı olarak rengi tanımlayabilecek bir işlevle çalışmayı tercih ederim. Garip olduğunu biliyorum, sıcaklık rengine göre bir renk tanımlamak için bir algoritma olup olmadığını bilmiyorum ... Bu makale faydalı http://en.wikipedia.org/wiki/Color_temperature yardımcı olmakla birlikte oldukça karmaşıktır, birisi herhangi bir fikri olduğunda bile, bir başlangıç ​​için çok Ilgilenen !

Ben Konuyu gördüm: Display temperature as a color with C#?

Ama C# kullanarak değilim ve JavaScript bir çözümü var eğer öyleyse, mükemmel olurdu istemiyorum. Bir sunucu tarafı ihtiyacı varsa sonunda PHP veya NodeJS ile çalışabilirim.

DÜZENLEME - Cevap:

Son olarak, çünkü grafik ihtiyaçları, gerçek renkler degrade diziyi kullanmak seçenek yoktu. Ama yine de sıcaklığa bağlı olarak en yakın adımların renklerini karıştırmam gerekiyordu! Bunu yapmak için küçük bir JS kitaplığı yazdım, yakında GitHub'da bulabileceksin, bağlantıyı buraya göndereceğim.

Burada bulabilirsiniz:

The presentation website of the project

Or the github project

Answer 1

Geçenlerde o zaman uygun olacağını gökyüzünün renkleri göstermek için zaman verileri kullanarak bu bilmece vardı.

1) baş belası yolu: B kanalları ayrı olarak senin sıcaklığın bir x keseninin kabul edeceğini sizin R, G için bir işlev olun ve bir y tükürmek Zor, İşte araştırdı üç yolu vardır -Renk kanalınız, mavi kanalınız ve yeşil kanalınız için çeşitli sıcaklık ve karşılık gelen renkler arasından seçim yapın. Bunu yapmak için, sıcaklıkların bazı büyük bölümleri için renk aralığı boyunca örnekleme yaparak ve olabildiğince çok nokta çizerek ve ardından kanalların her biri için puanlar üzerinden bir 6. derece polinom çizerek tersine mühendislik uygulayacağım. Bir sıcaklık değerini kabul edebilecek ve alfa 1 için bir RGB rengin R, G ve B kanalları için 3 çıkışı birleştiren bir fonksiyon elde edersiniz. Çalışmalı, test etmediniz ve

2) Ana renklerin her biri için bir arka plan sınıfı yapın (bunun 5 veya 50 renk olup olmadığına karar verdiniz) ve aralarında bir alfa harmanına sahip olacak şekilde geçiş yapın.Sorunum için kullanmaya başladığım şey buydu. vb

if(temp > 0 && temp <= 5) 
{ 
    greenBackground.alpha == 1 
    yellowBakckground.alpha == (temp/5) 
} 
else if(temp > 5 && temp <= 10) 

...

temp 2.5 idi Yani eğer o zaman% 50 karışımı olacağını sarı ve yeşil

ben 1 gece bu seçeneği ve sonuç görünüyor uygulamak başardı

harika! Zaman harcıyor, ama yapabildiğiniz kadar karmaşık değil.

3) gerekirse tamsayı değerlerine değil o birçok -30 ila 30) ve yuvarlak API'nın veri yoktur (Make ve olası tüm tamsayılar karşı gradyan den örneklenmiş RGB renkleri ile bir dizi saklayın. Sanırım en basit olanı olurdu. Yine de Seçenek 1 kadar havalı değil.

İyi şanslar!

Answer 2

Renk sıcaklığı ile ilgili wikipedia makalesi sorununuza bağlı değil. Wikipedia makalesi sadece dijital görüntüleme uzmanları için geçerlidir. Buradaki renk sıcaklığı, farklı bir şey ifade eder ...

Sorununuz, santigrat derece cinsinden belirli bir sıcaklığı nasıl görselleştireceğinizle ilgilidir. Bunu yapmak için standart bir algoritma yoktur. Tasarımcıya bu görevi nasıl çözeceğine bağlı.

Muhtemelen her 2.5 ° C veya 5 ° C için bir dizi rgb değeri oluşturabilir ve daha sonra aralarında sıcaklık değerleri için rgb ile karıştırırdım.

Answer 3

Renginiz aralığı + 30ºC

var hue = 30 + 240 * (30 - t)/60; 

bir "renk okunur" 30º (turuncu) aşağı -30 at 270º (violetish) den "HSL renk alan" süpürme aynı olacak şekilde gözüküyor t aralık dışındaysa, yukarıdaki ifadeyi çağırmadan önce kelepçeyi kelepçeleyin veya h anahtarını daha sonra istenilen renk tonu aralığına kelepçeleyin.

desteklenen tarayıcılarda bir hsl(h, s, l) renk dize kullanın veya RGB içine HSL rengini dönüştürmek için yaygın olarak bulunabilen "HSL to RGB" işlevlerini kullanabilirsiniz.

Bu özel bir durum değil, genel bir çözümdür, ama sadece tonlar arasındaki doğrusal gradyan yapıyor ve orta aralıkta harmanını (yani yeşil) scrunching ederek makul bir yaklaşım alabilirsiniz http://jsfiddle.net/V5HyL/

Answer 4

gör renk atlama olmadan:

Demo: http://jsfiddle.net/bcronin/kGqbR/18/

// 
// Function to map a -30 to 30 degree temperature to 
// a color 
// 
var F = function(t) 
{ 
    // Map the temperature to a 0-1 range 
    var a = (t + 30)/60; 
    a = (a < 0) ? 0 : ((a > 1) ? 1 : a); 

    // Scrunch the green/cyan range in the middle 
    var sign = (a < .5) ? -1 : 1; 
    a = sign * Math.pow(2 * Math.abs(a - .5), .35)/2 + .5; 

    // Linear interpolation between the cold and hot 
    var h0 = 259; 
    var h1 = 12; 
    var h = (h0) * (1 - a) + (h1) * (a); 

    return pusher.color("hsv", h, 75, 90).hex6(); 
};