homepage/content/toys/facelight/app.js

92 lines
2.0 KiB
JavaScript

const defaultTemp = 5500
function colorTemperatureToRGB(kelvin) {
// https://gist.github.com/paulkaplan/5184275
let temp = kelvin / 100
let red, green, blue
if (temp <= 66) {
red = 255
green = temp
green = 99.4708025861 * Math.log(green) - 161.1195681661
if (temp <= 19) {
blue = 0
} else {
blue = temp-10
blue = 138.5177312231 * Math.log(blue) - 305.0447927307
}
} else {
red = temp - 60
red = 329.698727446 * Math.pow(red, -0.1332047592)
green = temp - 60
green = 288.1221695283 * Math.pow(green, -0.0755148492)
blue = 255
}
return {
r : clamp(red, 0, 255),
g : clamp(green, 0, 255),
b : clamp(blue, 0, 255),
}
}
function clamp(x, min, max) {
if (x<min) {return min}
if (x>max) {return max}
return x
}
function changeTemp(e) {
let tempIn = document.querySelector("#temp")
let tempOut = document.querySelector("#tempOut")
let temp
if (!e) {
temp = localStorage.temp || defaultTemp
} else if (e.target) {
temp = Number(e.target.value)
} else {
temp = e
}
let color = colorTemperatureToRGB(temp)
document.body.style.backgroundColor = "rgb(" + color.r + "," + color.g + "," + color.b + ")"
tempOut.textContent = temp
tempIn.value = temp
localStorage.temp = temp
}
function keydownEvent(event) {
let temp = Number(localStorage.temp || defaultTemp)
switch (event.key) {
case "ArrowLeft":
case "ArrowDown":
event.preventDefault()
changeTemp(temp - 100)
break
case "ArrowRight":
case "ArrowUp":
event.preventDefault()
changeTemp(temp + 100)
break
}
console.log("new temp is", temp)
}
function init() {
document.querySelector("#temp").addEventListener("input", changeTemp)
document.addEventListener("keydown", keydownEvent)
changeTemp()
if (navigator.serviceWorker) {
navigator.serviceWorker.register("sw.js")
}
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init)
} else {
init()
}