Как вывести электронные часы циферблат

Аналоговые часы на HTML5 c логикой на JavaScript

Для кого и зачем эта статья?

Что мы будем делать?

Реализация цифровых часов

Создадим три файла в текстовом редакторе. (Все три файла должны лежать в одной папке).

index.html — основная страничка
clockscript.js — скрипт с логикой работы
style.css — файл стилей

Для начала выведем текущее время в обычный div-блок в .html файл. Даже в такой маленькой задаче есть свой подводный камень. Если просто закинуть функцию отображения часов в событие onload у тега body, то текущее время отобразится в строке, но так и останется статическим. И div-блок, в который мы отправили строку с текущим временем, не будет самостоятельно обновляться.

Добиться самостоятельного обновления элемента страницы можно оборачиванием функции отображения времени в анонимный метод, который присваивается свойству onload корневого объекта Window .

Один из вариантов реализации может быть следующим. Файл index.html:

Разберемся с работой clockscript.js:

Выполняем внутренний JavaScript-код при помощи привязки к событию onload корневого объекта Window :

Метод объекта объекта Window , который выполняет код через определенные промежутки времени (указанные в миллисекундах):

Объект Date используется для проведения различных манипуляций с датой и временем. С помощью конструктора создаем его экземпляр и называем d:

Находим объект DOM по его id. Это именно тот объект, в который мы хотим выводить наше время. Это может быть параграф, заголовок или еще какой-то элемент. У меня это div-блок. После получения элемента по id, используем его свойство innerHTML для получение всего содержимого элемента вместе с разметкой внутри. И передаем туда результат метода toLocaleTimeString(), который возвращает форматированное представление времени:

Вот, что должно получиться(время динамически изменяется каждую секунду):

Реализация аналоговых часов

С этого момента мы будем использовать Canvas (HTML), который будет служить нам холстом для творчества.

Чтобы увидеть наш холст в файле index.html внутри body мы должны где-то расположить следующий тег, сразу определив его размеры:

Теперь в файле clockscript.js, прежде чем пытаться рисовать, нужно получить контекст объекта Canvas . Сделаем это в начале нашей функции отображения часов. Тогда файл clockscript.js изменится следующим образом:

Ну что, давайте вспоминать математику? Нам важно понять связь между делениями определенных стрелок и углом их поворота на будущем циферблате.

Угол поворота всех стрелок за 1 секунду:

• Секундная стрелка повернется на угол — (1/60)*360 o = 6 o
• Минутная стрелка повернется на угол — (1/60)*6 o = 0,1 o
• Часовая стрелка повернется на угол — (1/60)*0,1 o ≈ 0,0017 o

Первая проблема:

То есть даже за 1 секунду все стрелки должны повернуться, каждая на соответствующий угол. И если это не учесть, то первый подводный камень, который мы получим в отображении, будет некрасивая анимация. К примеру, когда время будет 19:30, то часовая стрелка будет ровно показывать на 19 часов, хотя в реальной жизни она должна уже быть наполовину приближена к 20 часам. Аналогично, приятнее будет выглядеть плавное передвижение минутной стрелки. Ну а секундная стрелка пусть перещелкивается дискретными движениями, как в большинстве реальных механических часов. Решение проблемы: прибавлять к углы поворота текущей стрелки угол поворота более быстрой стрелки, домноженный на коэффициент, обозначающий его долю от угла текущей стрелки.

Угол вращающегося радиус-вектора(стрелки часов) отсчитывается от положительного направления в направлении против часовой стрелки. Если мы это не учтем в нашей логике, то направим часы назад в прошлое.

И еще, отсчет часов, минут и секунд у нас происходит от цифры 12, верхнего положения. Решение проблемы: в наших формулах мы должны учесть это в качестве сдвига +π/2 (90 o ). А перед значением угла ставить знак «-«, чтобы часы шли именно по часовой стрелке. И, конечно, учитывать, что передача угла в градусах в тригонометрические функции языков программирования осуществляется с умножением на коэффициент «π/180 o «.

Реализация на примере секундной стрелки:

В ходе разметки рисочек циферблата нужно как-то выделить рисочки напротив часов. Всего рисочек — 60 для секунд и минут. 12 — для часов. Эти 12 должны как-то выделяться на фоне всех остальных. Также симметричность оцифровки зависит от ширины цифр. Очевидно, что цифры 10, 11 и 12 шире, чем 1, 2, 3 и т.д. Про это нужно не забыть.

Решение проблемы и вариант оцифровки циферблата:

С учетом всего этого, мой вариант исполнения кода логики и отображения аналоговых часов выглядит следующим образом:

Заключение

Вот такие часы должны получиться в итоге. Надеюсь, что данная статья поможет вам разобраться в элементарной анимации на JavaScript и зародит у вас интерес к освоению этого прекрасного языка программирования. Спасибо за внимание.

Источник

Настройка циферблата

Настройте циферблат Apple Watch, чтобы он выглядел так, как Вы хотите, и отображал нужные Вам функции. Выберите оформление, настройте цвета и функции, а затем добавьте в свою коллекцию. Меняйте циферблаты в любое время, чтобы отображать нужные инструменты или просто для разнообразия.

Раздел «Циферблаты» в приложении Apple Watch — самый легкий способ просмотреть все доступные циферблаты, настроить циферблат и добавить его в Вашу коллекцию. Но если Вам неудобно настраивать циферблат на iPhone, Вы можете сделать это прямо на Apple Watch. Подробнее см. в разделе Циферблаты Apple Watch и их функции.

Как выбрать другой циферблат

Смахните от края до края поперек циферблата, чтобы просмотреть другие циферблаты в Вашей коллекции.

Чтобы просмотреть все доступные циферблаты, коснитесь циферблата и удерживайте палец, смахивайте до нужного Вам варианта и коснитесь его.

Как добавить расширения на циферблат

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

Когда отображается циферблат, коснитесь дисплея и удерживайте палец, затем выберите «Изменить».

Смахните влево до конца.

Если на циферблат можно добавить расширения, они будут перечислены на последнем экране.

Коснитесь расширения, чтобы выбрать его, затем покрутите колесико Digital Crown, чтобы выбрать новое расширение, например «Активность» или «Пульс».

Завершив работу, нажмите колесико Digital Crown, чтобы сохранить изменения, затем коснитесь циферблата, чтобы к нему перейти.

Некоторые приложения из App Store также включают расширения.

Добавление циферблата в коллекцию

Создайте коллекцию собственных циферблатов, или даже вариантов оформления одного циферблата.

Когда отображается текущий циферблат, коснитесь дисплея и удерживайте палец.

Смахните влево до конца, затем коснитесь кнопки «Новый» (+).

Прокрутите колесико Digital Crown, чтобы просмотреть циферблаты, затем коснитесь «Добавить».

Совет. Коснитесь коллекции, например «Новое в watchOS», чтобы просмотреть определенную категорию циферблатов.

После добавления Вы сможете настроить циферблат.

Просмотр коллекции

Вы можете посмотреть все свои циферблаты сразу.

Откройте приложение Apple Watch на iPhone.

Коснитесь «Мои часы» и пролистайте коллекцию в разделе «Мои циферблаты».

Чтобы изменить порядок циферблатов в коллекции, коснитесь «Изменить» и потяните значок рядом с циферблатом вверх или вниз.

Удаление циферблата из коллекции

Когда отображается текущий циферблат, коснитесь дисплея и удерживайте палец.

Смахивайте по экрану, пока не появится циферблат, который Вам не нужен, затем смахните его вверх и коснитесь «Удалить».

Можно также на iPhone открыть приложение Apple Watch, коснуться пункта «Мои часы», а затем — кнопки «Изменить» в разделе «Мои циферблаты». Коснитесь кнопки рядом с ненужным циферблатом и коснитесь «Удалить».

Вы в любой момент можете снова добавить удаленный циферблат.

Перевод времени вперед

Откройте приложение «Настройки» на Apple Watch.

Коснитесь «+0 мин» и прокрутите колесико Digital Crown, чтобы перевести часы вперед на 59 минут или меньше.

При этом изменится только время, которое отображается на циферблате; будильники, время уведомлений или любые другие часы (например, «Мировые часы») останутся без изменений.

Источник

Изменение циферблата на Apple Watch

На циферблате часов можно выбирать различные варианты дизайна, настраивать цвета и добавлять расширения. Можно даже перевести время вперед.

Переключение между циферблатами на Apple Watch

1. На циферблате смахните влево или вправо от края до края.
2. Перестаньте смахивать, когда дойдете до нужного циферблата.

Некоторые циферблаты доступны не во всех странах и регионах. Циферблаты Hermès и Nike доступны только на соответствующих моделях.

Настройка циферблата на Apple Watch

1. Нажмите колесико Digital Crown, чтобы перейти к циферблату.
2. Нажмите на дисплей и удерживайте нажатие.
3. Смахните влево или вправо, чтобы выбрать циферблат, затем нажмите «Изменить».
4. Смахните влево или вправо, чтобы выбрать элемент затем поверните Digital Crown, чтобы изменить его. Например, можно изменить цвет второй стрелки или выбрать другие отметки на циферблате.
   
5. Смахните до конца влево, чтобы изменить расширения, которые можно использовать для проверки погоды, вашей активности или информации из других установленных приложений. Нажмите расширение, чтобы выбрать его, затем поверните Digital Crown, чтобы внести изменения.
   
6. По завершении нажмите колесико Digital Crown, чтобы сохранить изменения.
7. Нажмите циферблат, чтобы задать его в качестве текущего.

Можно также сменить циферблат с помощью iPhone. Откройте приложение Watch и перейдите на вкладку «Циферблаты».

Источник

Самодельные электронные часы, элементная база — часть 2

Привет, geektimes! В первой части статьи были рассмотрены принципы получения точного времени на самодельных часах. Пойдем дальше, и рассмотрим, как и на чем это время лучше выводить.

1. Устройства вывода

Итак, у нас есть некая платформа (Arduino, Raspberry, PIC/AVR/STM-контроллер, etc), и стоит задача подключить к нему некую индикацию. Есть множество вариантов, которые мы и рассмотрим.

Сегментная индикация

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

Осторожно, траффик!

Плюсы: простота конструкции, хорошие углы обзора, невысокая цена.
Минус: количество отображаемой информации ограничено.
Конструкции индикаторов бывают двух видов, с общим катодом и общим анодом, внутри это выглядит примерно так (схема с сайта производителя).

Есть 1001 статья как подключить светодиод к микроконтроллеру, гугл в помощь. Сложности начинаются тогда, когда мы захотим сделать большие часы — ведь смотреть на мелкий индикатор не особо удобно. Тогда нам нужны такие индикаторы (фото с eBay):

Они питаются от 12В, и напрямую от микроконтроллера просто не заработают. Тут нам в помощь приходит микросхема CD4511, как раз для этого предназначенная. Она не только преобразует данные с 4-битной линии в нужные цифры, но и содержит встроенный транзисторный ключ для подачи напряжения на индикатор. Таким образом, нам в схеме нужно будет иметь «силовое» напряжение в 9-12В, и отдельный понижающий преобразователь (например L7805) для питания «логики» схемы.

Матричные индикаторы

По сути, это те же светодиоды, только в виде матрицы 8х8. Фото с eBay:

Продаются на eBay в виде одиночных модулей либо готовых блоков, например по 4 штуки. Управление ими весьма просто — на модулях уже распаяна микросхема MAX7219, обеспечивающая их работу и подключение к микроконтроллеру с помощью всего лишь 5 проводов. Для Arduino есть много библиотек, желающие могут посмотреть код.
Плюсы: невысокая цена, хорошие углы обзора и яркость.
Минус: невысокое разрешение. Но для задачи вывода времени вполне достаточно.

ЖК-индикаторы

ЖК-индикаторы бывают графические и текстовые.

Графические дороже, однако позволяют выводить более разнообразную информацию (например график атмосферного давления). Текстовые дешевле, и с ними проще работать, они также позволяют выводить псевдографику — есть возможность загружать в дисплей пользовательские символы.

Работать с ЖК-индикатором из кода несложно, но есть определенный минус — индикатор требует много управляющих линий (от 7 до 12) от микроконтроллера, что неудобно. Поэтому китайцы придумали совместить ЖК-индикатор с i2c-контроллером, получилось в итоге очень удобно — для подключения достаточно всего 4х проводов (фото с eBay).

ЖК-индикаторы достаточно дешевые (если брать на еБее), крупные, их просто подключать, и можно выводить разнообразную информацию. Единственный минус это не очень большие углы обзора.

OLED-индикаторы

Являются улучшенным продолжением предыдущего варианта. Варьируются от маленьких и дешевых с диагональю 1.1″, до больших и дорогих. Фото с eBay.

Собственно, хороши всем кроме цены. Что касается мелких индикаторов, размером 0.9-1.1″, то (кроме изучения работы с i2c) какое-то практическое применение им найти сложно.

Газоразрядные индикаторы (ИН-14, ИН-18)

Эти индикаторы сейчас весьма популярны, видимо из-за «теплого лампового звукасвета» и оригинальности конструкции.

(фото с сайта nocrotec.com)

Схема их подключения несколько сложнее, т.к. эти индикаторы для зажигания используют напряжение в 170В. Преобразователь из 12В=>180В может быть сделан на микросхеме MAX771. Для подачи напряжения на индикаторы используется советская микросхема К155ИД1, которая специально для этого и была создана. Цена вопроса при самостоятельном изготовлении: около 500р за каждый индикатор и 100р за К155ИД1, все остальные детали, как писали в старых журналах, «дефицитными не являются». Основная сложность тут в том, что и ИН-хх, и К155ИД1, давно сняты с производства, и купить их можно разве что на радиорынках или в немногих специализированных магазинах.

2. Выбор платформы

С индикацией мы более-менее разобрались, осталось решить, какую аппаратную платформу лучше использовать. Тут есть несколько вариантов (самодельные я не рассматриваю, т.к. тем кто умеет развести плату и припаять процессор, эта статья не нужна).

Arduino

Самый простой вариант для начинающих. Готовая плата стоит недорого (около 10$ на eBay с бесплатной доставкой), имеет все необходимые разъемы для программирования. Фото с eBay:

Под Arduino есть огромное количество разных библиотек (например для тех же ЖК-экранов, модулей реального времени), Arduino аппаратно совместима с различными дополнительными модулями.
Главный минус: сложность отладки (только через консоль последовательного порта) и довольно-таки слабый по современным меркам процессор (2КБайт RAM и 16МГц).
Главный плюс: можно сделать много чего, практически не заморачиваясь с пайкой, покупкой программатора и разводкой плат, модули достаточно соединить друг с другом.

32-разрядные процессоры STM

Для тех кто захочет что-то помощнее, есть готовые платы с процессорами STM, например плата с STM32F103RBT6 и TFT-экраном. Фото с eBay:

Здесь мы уже имеем полноценную отладку в полноценной IDE (из всех разных мне больше понравилась Coocox IDE), однако понадобится отдельный программатор-отладчик ST-LINK с разъемом JTAG (цена вопроса 20-40$ на eBay). Как вариант, можно купить отладочную плату STM32F4Discovery, на которой этот программатор уже встроен, и его можно использовать отдельно.

Raspberry PI

И наконец, для тех кто хочет полной интеграции с современным миром, есть одноплатные компьютеры с Linux, всем уже наверное известные Raspberry PI. Фото с eBay:

Это полноценный компьютер с Linux, гигабайтом RAM и 4х-ядерным процессором на борту. С краю платы выведена панель из 40 пинов, позволяющая подключать различную периферию (пины доступны из кода, например на Python, не говоря о C/C++), есть также стандартный USB в виде 4х разъемов (можно подключить WiFi). Так же есть стандартный HDMI.
Мощности платы хватит к примеру, не только чтобы выводить время, но и чтобы держать HTTP-сервер для настройки параметров через web-интерфейс, подгружать прогноз погоды через интернет, и так далее. В общем, простор для полета фантазии большой.

С Raspberry (и процессорами STM32) есть одна единственная сложность — ее пины используют 3-вольтовую логику, а большинство внешних устройств (например ЖК-экраны) работают «по старинке» от 5В. Можно конечно подключить и так, в принципе заработает, но это не совсем правильный метод, да и испортить плату за 50$ как-то жалко. Правильный способ — использовать «logic level converter», который на eBay стоит всего 1-2$.
Фото с eBay:

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

ESP8266

Способ скорее экзотический, но довольно-таки перспективный в силу компактности и дешевизны решения. За совсем небольшие деньги (около 4-5$ на eBay) можно купить модуль ESP8266, содержащий процессор и WiFi на борту.
Фото с eBay:

Изначально такие модули предназначались как WiFi-мост для обмена по serial-порту, однако энтузиастами было написано множество альтернативных прошивок, позволяющих работать с датчиками, i2c-устройствами, PWM и пр. Гипотетически вполне возможно получать время от NTP-сервера и выводить его по i2c на дисплей. Для тех кто хочет подключить много различной периферии, есть специальные платы NodeMCU с большим числом выводов, цена вопроса около 500р (разумеется на eBay):

Единственный минус — ESP8266 имеет очень мало памяти RAM (в зависимости от прошивки, от 1 до 32КБайт), но задача от этого становится даже интересней. Модули ESP8266 используют 3-вольтовую логику, так что вышеприведенный конвертор уровней тут также пригодится.

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

Вместо заключения

Я в итоге остановился на использовании Raspberry PI с текстовым индикатором, настроенным на работу с псевдографикой (что вышло дешевле чем графический экран той же диагонали). Сфоткал экран настольных часов во время написания этой статьи.

Часы выводят точное время, взятое из Интернета, и погоду которая обновляется с Яндекса, все это написано на Python, и вполне работает уже несколько месяцев. Параллельно на часах запущен FTP-сервер, что позволяет (вкупе с пробросом портов на роутере) обновить на них прошивку не только из дома, но и из любого места где есть Интернет. Как бонус, ресурсов Raspberry в принципе хватит и для подключения камеры и/или микрофона с возможностью удаленного наблюдения за квартирой, или для управлением различными модулями/реле/датчиками. Можно добавить всякие «плюшки», типа светодиодной индикации о пришедшей почте, и так далее.

PS: Почему eBay?
Как можно было видеть, для всех девайсов приводились цены или фото с ебея. Почему так? К сожалению, наши магазины часто живут по принципу «за 1$ купил, за 3$ продал, на эти 2 процента и живу». В качестве простого примера, Arduino Uno R3 стоит (на момент написания статьи) 3600р в Петербурге, и 350р на eBay с бесплатной доставкой из Китая. Разница действительно на порядок, безо всяких литературных преувеличений. Да, придется подождать месяц чтобы забрать посылку на почте, но такая разница в цене думаю, того стоит. Но впрочем, если кому-то надо прямо сейчас и срочно, то наверно и в местных магазинах есть выбор, тут каждый решает сам.

Источник