Тик-так часики... вечером в Техасике...

...Приехав в "Техас" пообщаться совершенно по другому поводу, уехал с данным обещанием подумать, что бы такого им демонстрировать на сцене с проектора. К примеру, часики.

Flash исключается, 3D - я и подзабыл порядком Блендер, и использовал его только для статичных картинок.

Осталось прибегнуть к тому, что хорошо знакомо: HTML + CSS + Javascript.

Нашёл в инете вот это.

Изучил. Первое, графику надо прорисовывать заново. Второе, Яваскрипт, который всем этим заправляет, конечно, как это - sophisticated, - но это же полный, как это - overkill. В общем, Яваскрипт решил тоже сделать свой. В итоге от оригинальных часиков осталась идея указания времени посредством трёх стрелок - по одной для часов, минут и секунд, что тоже не вполне оригинально.

Часики нарисовал в Инкскейпе в виде черыёх объектов: фон и три стрелки, всё тщательно выровнено относительно, как это - bounding box, - затем этот квадрат размножен на четыре, и каждый объект с ним сгруппирован. Таким образом, при экспорте в растр все объекты гарантированно имеют общий центр. Экспортировал с большим, даже огромным запасом разрешения, чтобы даже на проекторе Full HD было эротишненько.

Собирается в HTML внутри квадратного блока: три блока для графики стрелок, абсолютно позиционированы и равны контейнеру.

Стрелки крутятся путём CSS Transitions, что оставляет за бортом всякие там недобраузеры, благо это делается для одного-единственного клиента.

Для транзишнов использован jquery.transit.js.

Итоговый Яваскрипт, в отличие от оригинального (кому лень смотреть - там два экрана мелким почерком), следующий:

$(document).ready(function(){
                
   var Now = new Date();
   var Hour = Now.getHours();
   var Minute = Now.getMinutes();
   var Second = Now.getSeconds();
                
   Hour=(Hour > 12)? Hour-12 : Hour;
                
   var angleSecond = Second * 6;
   var angleMinute = Minute * 6 + Second*.1;
   var angleHour = Hour * 30 + Minute*.5;
                
   $('#analogHour').transition({rotate: angleHour});
   $('#analogMinute').transition({rotate: angleMinute});
   $('#analogSecond').transition({rotate: angleSecond});
                
   setInterval(function() {
      doAnimation($('#analogSecond'), 6, 500);
      doAnimation($('#analogMinute'), .1, 500);
   }, 1000);
                
   setInterval(function() {
      doAnimation($('#analogHour'), .5, 500);
      }, 60000);
                
});
            
function doAnimation(obj, angle, timing){
   obj.transition({rotate: '+='+angle}, timing);
}

Попробовал - тикает, зараза! Для проверки накопления ошибки (всё-таки вращение, а часики выставляются только в момент запуска и далее тикают независимо от часов компьютера) оставил на ночь. Утром увидел опережение на минуту: 9:05 на компьютере, шесть минут десятого в браузере. Не успел сказать "тваюжтымать", как часы компьютера перескочили на шесть минут: они ж дискретные, ёлы-палы.

Осталось проверить в деле, для чего поехал в "Техас" с флешкой. Запустили в Chrome, вывели на проектор - ну прямо мняшка.

В общем, технология украшения увеселительных заведений динамическим веб-контентом доказала свою жизнеспособность, что открывает, прямо скажем, широчайшие возможности.