» » Dropclock для xscreensaver или как верстальщик писал заставку под Linux

 

Dropclock для xscreensaver или как верстальщик писал заставку под Linux

Автор: admin от 29-09-2014, 15:53, посмотрело: 722

Не помню, где первый раз увидел, но был очарован заставкой DropClock, о которой уже упоминалось на Хабре.

Dropclock для xscreensaver или как верстальщик писал заставку под Linux

Но вот беда: авторы собрали её только для Win и Mac. Несмотря на это, желание было сильнее ограничений, и я решил во что бы то ни стало собрать собственную реализацию.

Первая мысль: попытаться реализовать программный рендер воды и брызги.
Так как моё основное направление — веб, я начал искать реализации webGL и эффектов воды. В результате изысканий пришёл к WebGL Water.

Почитал немного документации, попробовал helloworld'ы, но это не моё.

Беглое чтение исходников и попытки правок не привнесли ясности в предмет исследований. Было принято решение посмотреть, а из чего же состоит оригинал.

Скачал с торрентов Win версию, на вайне не пошла, поставил на виртуалку.

На деле оказалось, что это флеш со вшитыми роликами: 10 с цифрами на чёрном фоне и 10 на белом, каждый длится минуту.
Распаковщики swf их не потянули, но мне помог конвертер SWF to Video (win). Дальше уже в родной системе перекодировал в mp4/x264 ffmpeg-ом.

Далее дело оставалось за малым — заставить это работать в браузере. Для разнообразия ещё добавил подгрузку погоды с OpenWeatherMap.

Получилась вот такая разметка:

	<div class="all">
		<div class="d d0"><video src="dropclock_media/b0.mp4" autoplay="autoplay" loop="loop" id="d0" data-d="0"></video></div>
		<div class="d d1"><video src="dropclock_media/b0.mp4" autoplay="autoplay" loop="loop" id="d1" data-d="1"></video></div>
		<div class="d s"><div class="sep"></div></div>
		<div class="d d2"><video src="dropclock_media/b0.mp4" autoplay="autoplay" loop="loop" id="d2" data-d="2"></video></div>
		<div class="d d3"><video src="dropclock_media/b0.mp4" autoplay="autoplay" loop="loop" id="d3" data-d="3"></video></div>
		<div class="inspector">
			<div class="time" id="info"></div>
			<div class="weather"></div>
		</div>
	</div>




В firefox видео притормаживало и дребезжало, поэтому изначально я был ориентирован на webkit.
Добавил задержку падения цифр, чтобы не исчезали все сразу.
Вроде работает, красиво, но нужно запускать это как самостоятельный файл.

Нашёл у себя в убунте системный мини-браузер webbrowser-app и, покапавшись в его параметрах, написал вот такой лаунчер:

#/bin/sh
webbrowser-app --chromeless --fullscreen /var/www/vhosts/localhost/dropclock/index.html

Но xscreensaver на него сильно ругался и я понял, что что-то делаю не так…

Шло время, желание иметь красивую заставку никак не утолялось. 13 сентября, во всероссийский День Программиста, работа была отодвинута, а внимание снова сосредоточено на достижении призрачной цели. До этого видел оконные приложения на Python и выбор пал на него, как впоследствии оказалось, не зря. Раньше никогда ничего на нём не писал. Начал разбирать базовые примеры, добавил webkit.

А вдруг можно и к xscreensaver'у его прикрутить? Был найден пример заставки на питоне, на базе которого написан свой.

В ~/.xscreensaver под списком добавлена строка:
- "Drop Clock" /var/www/vhosts/localhost/dropclock/dropclock_xss.py n
Впоследствии ещё дорабатывал адаптивность стиля для корректного отображения в маленьком окне, получилось неплохо, мне нравится.
Можно считать, что день программиста удался.

Видео можно найти по магнет-ссылке.

Источник: Хабрахабр

Категория: Программирование, Веб-разработка, Linux

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *