Таблица лидеров

Доброе время суток. Думаю, что Вы все сделали правильно, по крайней мере в контексте данного проекта. Другой вопрос, на сколько сам проект корректно написан... Датчик освещенности берите исходя из потребности. не думаю. что будут сложности с добавлением любого из них. Лично я люблю датчики, имеющие 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(); Но Вам лучше использовать более плавные анимации.