Espruino:Примеры/Циферблаты Bangle.js: различия между версиями

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
Нет описания правки
Нет описания правки
 
(не показаны 2 промежуточные версии 1 участника)
Строка 15: Строка 15:
Скопируйте код ниже в правую часть [[IDE]] и кликните на кнопку загрузки кода [[File:Quick_Start_Code_upload_icon.png]]:
Скопируйте код ниже в правую часть [[IDE]] и кликните на кнопку загрузки кода [[File:Quick_Start_Code_upload_icon.png]]:


<syntaxhighlight lang="javascript" enclose="div">
<syntaxhighlight lang="javascript">
function draw() {
function draw() {
   // Задаём, как будем показывать текущее время:
   // Задаём, как будем показывать текущее время:
Строка 49: Строка 49:
Мы воспользуемся кастомным 7-сегментным шрифтом под названием '''Font7x11Numeric7Seg''' при помощи строчки '''g.setFont("7x11Numeric7Seg")'''.
Мы воспользуемся кастомным 7-сегментным шрифтом под названием '''Font7x11Numeric7Seg''' при помощи строчки '''g.setFont("7x11Numeric7Seg")'''.


<syntaxhighlight lang="javascript" enclose="div">
<syntaxhighlight lang="javascript">
// Загружаем шрифты:
// Загружаем шрифты:
require("Font7x11Numeric7Seg").add(Graphics);
require("Font7x11Numeric7Seg").add(Graphics);
Строка 80: Строка 80:
[[File:Bangle.js Clock Faces.png|center]]
[[File:Bangle.js Clock Faces.png|center]]


'''Примечание:''' Чтобы избежать мерцания, в drawString() используется четвёртый аргумент, который очищает фон (по умолчанию рисуется только сам текст).
{{Примечание1|Чтобы избежать мерцания, в drawString() используется четвёртый аргумент, который очищает фон (по умолчанию рисуется только сам текст).}}


Наконец, добавляем дату. Мы можем воспользоваться для этого библиотекой locale – это значит, что дата будет адаптирована под любого пользователя, независимо от его языка.
Наконец, добавляем дату. Мы можем воспользоваться для этого библиотекой locale – это значит, что дата будет адаптирована под любого пользователя, независимо от его языка.
Строка 86: Строка 86:
Просто добавьте под функцией draw() вот этот код:
Просто добавьте под функцией draw() вот этот код:


<syntaxhighlight lang="javascript" enclose="div">
<syntaxhighlight lang="javascript">
   // Рисуем дату (обычным шрифтом):
   // Рисуем дату (обычным шрифтом):
   g.setFont("6x8");
   g.setFont("6x8");
Строка 104: Строка 104:
У большинства циферблатов есть виджеты. Чтобы их мог показывать и наш циферблат, нам нужно добавить в конец кода следующее:
У большинства циферблатов есть виджеты. Чтобы их мог показывать и наш циферблат, нам нужно добавить в конец кода следующее:


<syntaxhighlight lang="javascript" enclose="div">
<syntaxhighlight lang="javascript">
Bangle.loadWidgets();
Bangle.loadWidgets();
Bangle.drawWidgets();
Bangle.drawWidgets();
Строка 117: Строка 117:
В каждом циферблате должна быть возможность запустить лаунчер, и по умолчанию за это отвечает кнопка '''BTN2'''. Чтобы добавить эту возможность в свой циферблат, просто поместите код ниже в конец всего кода (не в функцию):
В каждом циферблате должна быть возможность запустить лаунчер, и по умолчанию за это отвечает кнопка '''BTN2'''. Чтобы добавить эту возможность в свой циферблат, просто поместите код ниже в конец всего кода (не в функцию):


<syntaxhighlight lang="javascript" enclose="div">
<syntaxhighlight lang="javascript">
// Показываем лаунчер после нажатия на среднюю кнопку:
// Показываем лаунчер после нажатия на среднюю кнопку:
setWatch(Bangle.showLauncher, BTN2, { repeat: false, edge: "falling" });
setWatch(Bangle.showLauncher, BTN2, { repeat: false, edge: "falling" });
Строка 128: Строка 128:
Чтобы оптимизировать этот момент, мы можем отслеживать то, когда экран выключается, и следом выключать интервал '''secondInterval''', а затем снова включать его, когда экран снова включат (и сразу же перерисовывать циферблат):
Чтобы оптимизировать этот момент, мы можем отслеживать то, когда экран выключается, и следом выключать интервал '''secondInterval''', а затем снова включать его, когда экран снова включат (и сразу же перерисовывать циферблат):


<syntaxhighlight lang="javascript" enclose="div">
<syntaxhighlight lang="javascript">
// Останавливаем обновление экрана после его выключения,
// Останавливаем обновление экрана после его выключения,
// а затем возобновляем, когда он снова будет включен:
// а затем возобновляем, когда он снова будет включен:
Строка 145: Строка 145:
В результате наш код должен выглядеть вот так:
В результате наш код должен выглядеть вот так:


<syntaxhighlight lang="javascript" enclose="div">
<syntaxhighlight lang="javascript">
// Загружаем шрифты:
// Загружаем шрифты:
require("Font7x11Numeric7Seg").add(Graphics);
require("Font7x11Numeric7Seg").add(Graphics);
Строка 218: Строка 218:
Это запишет в файл '''«myclock.info»''' информацию о нашем приложении:
Это запишет в файл '''«myclock.info»''' информацию о нашем приложении:


<syntaxhighlight lang="javascript" enclose="div">
<syntaxhighlight lang="javascript">
require("Storage").write("myclock.info",{
require("Storage").write("myclock.info",{
   "name":"My Clock",
   "name":"My Clock",
Строка 230: Строка 230:
Вы также можете перейти в настройки ('''Settings''') и в '''Select Clock''' задать, чтобы этот циферблат стал циферблатом по умолчанию.
Вы также можете перейти в настройки ('''Settings''') и в '''Select Clock''' задать, чтобы этот циферблат стал циферблатом по умолчанию.


'''Примечание:''' [https://banglejs.com/apps/ Загрузчик приложений Bangle.js] генерирует этот файл автоматически – мы сделали всё это здесь, чтобы вы научились создавать приложение без использования загрузчика.
{{Примечание1|[https://banglejs.com/apps/ Загрузчик приложений Bangle.js] генерирует этот файл автоматически – мы сделали всё это здесь, чтобы вы научились создавать приложение без использования загрузчика.}}


== Что дальше ==
== Что дальше ==
Строка 240: Строка 240:
=См.также=
=См.также=


{{ads}}
 


=Внешние ссылки=
=Внешние ссылки=
Строка 246: Строка 246:
<references />
<references />


{{Навигационная таблица/Espruino}}
{{Навигационная таблица/Портал/Espruino}}
{{Навигационная таблица/Телепорт}}

Текущая версия от 15:15, 28 мая 2023

Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.


Циферблаты Bangle.js[1]

Это руководство подразумевает, что вы уже прошли руководство «Разработка под Bangle.js» и понимаете, с чего начать.

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

Для этого лучше использовать правую часть IDE – после загрузки кода мы, если захотим, сможем менять значения и вызывать функции при помощи REPL в левой части IDE.

Отрисовка линии

Скопируйте код ниже в правую часть IDE и кликните на кнопку загрузки кода :

function draw() {
  // Задаём, как будем показывать текущее время:
  var d = new Date();
  var h = d.getHours(), m = d.getMinutes();
  var time = h + ":" + ("0"+m).substr(-2);

  // Сбрасываем состояние графической библиотеки:
  g.reset();
  // Очищаем область, где хотим нарисовать время:
  g.clearRect(50,50,100,120);
  // Рисуем текущее время:
  g.drawString(time, 50, 50);
}

// Очищаем экран один раз (на запуске):
g.clear();
// Сначала сразу рисуем:
draw();
var secondInterval = setInterval(draw, 1000);

Теперь в середине экрана должен быть маленький текст со временем.

Немного странный код ("0"+m).substr(-2) добавляет нули к минутам (то есть в результате формат времени будет "12:01", а не "12:1").

Почему код отформатирован именно так? Читайте об этом в статье о стилях кода, в которой также есть несколько советов на эту тему.

Изменение шрифта

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

Мы воспользуемся кастомным 7-сегментным шрифтом под названием Font7x11Numeric7Seg при помощи строчки g.setFont("7x11Numeric7Seg").

// Загружаем шрифты:
require("Font7x11Numeric7Seg").add(Graphics);
// Позиция на экране:
const X = 160, Y = 140;

function draw() {
  // Задаём, как будем показывать текущее время:
  var d = new Date();
  var h = d.getHours(), m = d.getMinutes();
  var time = (" "+h).substr(-2) + ":" + ("0"+m).substr(-2);
  // Сбрасываем состояние графической библиотеки:
  g.reset();
  // Рисуем текущее время (7-сегментный шрифт, увеличенный в 4 раза)
  g.setFont("7x11Numeric7Seg",4);
  g.setFontAlign(1,1); // выравниванием справа снизу
  g.drawString(time, X, Y, true /*очищаем фон*/);
  // рисуем секунды (7-сегментный шрифт, увеличенный в 2 раза)
  g.setFont("7x11Numeric7Seg",2);
  g.drawString(("0"+d.getSeconds()).substr(-2), X+30, Y, true /*очищаем фон*/);
}

// Один раз очищаем экран (при запуске):
g.clear();
// Сначала сразу рисуем:
draw();
var secondInterval = setInterval(draw, 1000);
Примечание

Чтобы избежать мерцания, в drawString() используется четвёртый аргумент, который очищает фон (по умолчанию рисуется только сам текст).

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

Просто добавьте под функцией draw() вот этот код:

  // Рисуем дату (обычным шрифтом):
  g.setFont("6x8");
  g.setFontAlign(0,1); // выравниваем по центру снизу
  // Добавляем отступы к дате. 
  // Это очистит фон, если у даты изменится размер.
  var dateStr = "    "+require("locale").date(d)+"    ";
  g.drawString(dateStr, g.getWidth()/2, Y+15, true /*очищаем фон*/);

Дополнительные функции часов

Теперь у нас есть нечто, показывающее дату, но перед тем, как это станет циферблатом, нам нужно добавить ещё кое-что.

Виджеты

У большинства циферблатов есть виджеты. Чтобы их мог показывать и наш циферблат, нам нужно добавить в конец кода следующее:

Bangle.loadWidgets();
Bangle.drawWidgets();

Вы можете вызывать Bangle.drawWidgets() при каждом очищении экрана плюс виджетам нужно постоянно себя перерисовывать – но лучше делать это как можно реже, чтобы избежать мерцания.

В нашем примере мы очистим экран лишь один раз (при запуске), поэтому и функцию Bangle.drawWidgets() мы тоже вызовем только один раз.

Использование кнопки BTN2 для запуска лаунчера

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

// Показываем лаунчер после нажатия на среднюю кнопку:
setWatch(Bangle.showLauncher, BTN2, { repeat: false, edge: "falling" });

Энергосбережение

Прямо сейчас мы перерисовываем экран каждую секунду – независимо от того, включен он или нет. Очевидно, что для заряда батареи это плохие новости.

Чтобы оптимизировать этот момент, мы можем отслеживать то, когда экран выключается, и следом выключать интервал secondInterval, а затем снова включать его, когда экран снова включат (и сразу же перерисовывать циферблат):

// Останавливаем обновление экрана после его выключения,
// а затем возобновляем, когда он снова будет включен:
Bangle.on('lcdPower',on=>{
  if (secondInterval) clearInterval(secondInterval);
  secondInterval = undefined;
  if (on) {
    secondInterval = setInterval(draw, 1000);
    draw(); // сразу же рисуем
  }
});

Итог

В результате наш код должен выглядеть вот так:

// Загружаем шрифты:
require("Font7x11Numeric7Seg").add(Graphics);
// Позиция на экране:
const X = 160, Y = 140;

function draw() {
  // Задаём, как будем показывать текущее время:
  var d = new Date();
  var h = d.getHours(), m = d.getMinutes();
  var time = (" "+h).substr(-2) + ":" + ("0"+m).substr(-2);
  // Сбрасываем состояние графической библиотеки:
  g.reset();
  // Рисуем текущее время (7-сегментный шрифт, увеличенный в 4 раза):
  g.setFont("7x11Numeric7Seg",4);
  g.setFontAlign(1,1); // выравниваем справа внизу
  g.drawString(time, X, Y, true /*очищаем фон*/);
  // Рисуем секунды (7-сегментный шрифт, увеличенный в 2 раза):
  g.setFont("7x11Numeric7Seg",2);
  g.drawString(("0"+d.getSeconds()).substr(-2), X+30, Y, true /*очищаем фон*/);
  // Рисуем дату обычным шрифтом:
  g.setFont("6x8");
  g.setFontAlign(0,1); // выравниваем по центру снизу:
  // Добавляем отступы к дате. 
  // Это очистит фон, если у даты изменится размер.
  var dateStr = "    "+require("locale").date(d)+"    ";
  g.drawString(dateStr, g.getWidth()/2, Y+15, true /*очищаем фон*/);
}

// Очищаем экран один раз (при запуске):
g.clear();
// Сперва сразу рисуем:
draw();
var secondInterval = setInterval(draw, 1000);
// Останавливаем обновление экрана после его выключения,
// а затем возобновляем, когда он снова будет включен:
Bangle.on('lcdPower',on=>{
  if (secondInterval) clearInterval(secondInterval);
  secondInterval = undefined;
  if (on) {
    secondInterval = setInterval(draw, 1000);
    draw(); // сразу же рисуем
  }
});
// Загружаем виджеты:
Bangle.loadWidgets();
Bangle.drawWidgets();
// Показываем лаунчер после нажатия на среднюю кнопку:
setWatch(Bangle.showLauncher, BTN2, { repeat: false, edge: "falling" });

Создание приложения

Теперь, когда код готов, нам нужно превратить его в приложение для смарт-часов. Для этого нам нужно создать два основных файла:

  • Код приложения в JS-файле.
  • JSON-файл, описывающий приложение (название и т.д.) для лаунчера.

Во-первых, придумайте уникальный ID для своего приложения. Не используйте пробелы, используйте строчные символы и старайтесь сделать его покороче (в разумных пределах – лучше всего в пределах 10 символов).

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

Код приложения: «myclock.app.js»

Мы используем название myclock. Теперь кликните на стрелочку под кнопкой загрузки кода, выберите Storage, затем New File, впишите «myclock.app.js» и кликните на OK.

Теперь кликните на кнопку загрузки кода. Приложение будет загружено на часы, а затем выполнено из заданного вами файла. Теперь вы можете спокойно продолжать разрабатывать своё приложение, как если бы оно было на часах.

Информация о приложении: «myclock.app.info»

Итак, приложение у нас есть, но в лаунчере оно отображаться не будет, потому что у нас нет файла с информацией о приложении. Чтобы исправить этот недостаток, просто скопируйте и вставьте код ниже в левую часть IDE Espruino.

Это запишет в файл «myclock.info» информацию о нашем приложении:

require("Storage").write("myclock.info",{
  "name":"My Clock",
  "type":"clock",
  "src":"myclock.app.js"
});

Теперь, если зажать на часах кнопку BTN3, чтобы перейти к циферблату, затем нажать BTN2, чтобы зайти в меню, и прокрутить вниз, можно увидеть пункт My Clock. Если выбрать его, это выполнит ваше приложение!

Вы также можете перейти в настройки (Settings) и в Select Clock задать, чтобы этот циферблат стал циферблатом по умолчанию.

Примечание

Загрузчик приложений Bangle.js генерирует этот файл автоматически – мы сделали всё это здесь, чтобы вы научились создавать приложение без использования загрузчика.

Что дальше

Итак, циферблат готов!

Как насчёт добавить его в загрузчик приложений Bangle.js? О том, как это сделать, можно почитать в этой статье.

См.также

Внешние ссылки