Доброе время суток.
Думаю, что Вы все сделали правильно, по крайней мере в контексте данного проекта. Другой вопрос, на сколько сам проект корректно написан...
Датчик освещенности берите исходя из потребности. не думаю. что будут сложности с добавлением любого из них. Лично я люблю датчики, имеющие I2C интерфейс, но это мои личные предпочтения.
Что касаемо изменения интерфейса в зависимости от внешних факторов. Сразу отвечу. что это возможно. но Вам придется разобраться с CSS.
На данный момент все стили анимации, о которой Вы говорите описаны в файле cloud.css, он подгружается java скриптом после загрузки страницы. Забегая вперед скажу. что такой механизм загрузки связан с ограниченной производительностью контроллера и тем, что он отдает файлы web интерфейса в один поток. Также в этом файле находятся все изображения облаков и луны в специальном формате base64.
После загрузки этого файла, стили, описанные в нем, добавляются к основному стилю, описанному в файле index.htm. После этой операции стили могут быть применены к объектам HTML.
Анимация цвета фона описывается классом .sky
.sky {
background: #007fd5;
-webkit-animation: sky_background 50s ease-out infinite;
-moz-animation: sky_background 50s ease-out infinite;
-o-animation: sky_background 50s ease-out infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
}
Тут описан начальный цвет фона и все трансформации. Обратите внимание, что некоторые стили в разных движках браузеров описываются по-разному.
В коде видно. что анимацией занимается объект sky_background
@-webkit-keyframes sky_background {
0% { background: #007fd5; color: #007fd5 }
50% { background: #000; color: #a3d9ff }
100% { background: #007fd5; color: #007fd5 }
}
@-moz-keyframes sky_background {
0% { background: #007fd5; color: #007fd5 }
50% { background: #000; color: #a3d9ff }
100% { background: #007fd5; color: #007fd5 }
}
На этом описание смены цвета фона заканчивается.
В вашем случае, эту анимацию можно удалять, а у объекта body просто менять background в зависимости от показаний датчика освещенности. Для этого придется придумать формулу или массив описывающий зависимость цвета от показаний.
Данные с сенсоров читает java функция, описанная в index.htm
function chenge(fast) {
if(allowAjaxConnection || fast) {
$.ajax({
dataType: "json",
url: domain + "api/sensors" + ($(".settings #sl-system").is(":visible") ? "?system=true" : ""),
type: "GET",
cache: false,
timeout: 3000,
success: function(data) {
$.each(data, function(name, value) { if (name !== 'system') animate("." + name, value); });
if (data.system) apiSetSystemInfo(data.system, true);
//$('.out_temperature').trigger('configure', {"fgColor":"#FF0000"});
}
});
}
setTimeout(chenge, 5000);
}
Переменная name содержит имя сенсора, а переменная value значение. Останется только добавить условие проверки имени и связать значение с цветом фона.
Луна описана в CSS классом moon, а в коде включается с помощью строки
$(".moon").show();
Но Вам лучше использовать более плавные анимации.