Espruino:Примеры/Первое приложение для Bangle.js (таймер): различия между версиями

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
(Новая страница: «{{Espruino/Панель перехода}} {{Перевод от Сubewriter}} {{Myagkij-редактор}} =<ref>[ www.espruino.com - ]</ref>= <syntaxhighligh...»)
 
Нет описания правки
 
(не показано 11 промежуточных версий 2 участников)
Строка 3: Строка 3:
{{Myagkij-редактор}}
{{Myagkij-редактор}}


=<ref>[ www.espruino.com - ]</ref>=
=Первое приложение для Bangle.js (таймер)<ref>[https://www.espruino.com/Bangle.js+First+App www.espruino.com - Bangle.js First Application (Timer)]</ref>=


Это руководство подразумевает, что вы уже прошли [https://www.espruino.com/Bangle.js+Development руководство «Разработка под Bangle.js»] и примерно представляете, с чего начать.


<syntaxhighlight lang="html5" enclose="div">
Если да, то вы уже должны быть подключены и умеете написать простой код. Так что давайте попробуем написать простое приложение-таймер.
 
Для этого лучше использовать правую часть [[IDE]] – после загрузки кода вы, если захотите, сможете менять значения и вызывать функции при помощи [[REPL]] в левой части [[IDE]].
 
== Обратный отсчёт ==
 
Скопируйте код ниже в правую часть [[IDE]] и кликните на кнопку загрузки [[File:Quick_Start_Code_upload_icon.png]](она находится в центре [[IDE]]):
 
<syntaxhighlight lang="javascript">
var counter = 30;
 
function countDown() {
  counter--;
 
  g.clear();
  // Рисуем текущее значение счётчика:
  g.drawString(counter, g.getWidth()/2, g.getHeight()/2);
  // Опционально – делаем так,
  // чтобы LCD-дисплей оставался включенным:
  g.flip();
}
 
var interval = setInterval(countDown, 1000);
</syntaxhighlight>
 
Теперь в середине экрана появится маленький текст с цифрой ''«29»'', с которой начнётся обратный отсчёт.
 
[[File:Bangle.js_First_App_countdown_sml_1.png|center]]
 
'''Почему код отформатирован именно так?''' Читайте об этом [https://www.espruino.com/Code+Style здесь] (там же можно найти несколько советов на ту тему).
 
== Изменение шрифта ==
 
Во-первых, текст можно сделать побольше и хорошо его отцентрировать. Касаемо шрифта есть два варианта – bitmap-шрифт или векторный шрифт.
 
Поскольку мы не используем функцию reset(), чтобы на каждом кадре сбрасывать состояние библиотеки Graphics, то можем просто скопировать и вставить код ниже в левую часть [[IDE]].
 
<syntaxhighlight lang="javascript">
g.setFontAlign(0,0); // центрируем текст
g.setFont("6x8",8);  // bitmap-шрифт, увеличенный в 8 раз
</syntaxhighlight>
 
[[File:Bangle.js_First_App_countdown_6x8_2.png|center]]
 
Теперь у нас будет более крупное (но пикселизированное) число, размещённое в центре экрана.
 
Вы можете попробовать разные числа (''«-1»'', ''«1»'', ''«0»'' в setFontAlign() или поменять «8» в setFont()) или поэкспериментировать с '''g.setColor("#00ff7f")''', чтобы задать какой-то другой цвет.
 
Когда закончите с этими экспериментами, добавьте этот код сразу после g.clear() в правой части [[IDE]], а потом снова загрузите результат на [[Bangle.js]].
 
Если вам нужен более гладкий текст, можно воспользоваться векторным шрифтом (и задать высоту, например, 80 пикселей) – заменив '''g.setFont("6x8",8)''' на '''g.setFont("Vector",80)'''.
 
[[File:Bangle.js_First_App_countdown_big_3.png|center]]
 
== Сообщения, писки и жужжание ==
 
Наконец, давайте добавим код, который будет определять, когда счётчик достигнет ''«0»'', показывать сообщение и издавать писк:
 
<syntaxhighlight lang="javascript">
var counter = 30;
var counterInterval;
 
function outOfTime() {
  E.showMessage("Время вышло","Мой таймер");
  Bangle.buzz();
  Bangle.beep(200, 4000)
    .then(() => new Promise(resolve => setTimeout(resolve,200)))
    .then(() => Bangle.beep(200, 3000));
  // Снова 10 секунд спустя:
  setTimeout(outOfTime, 10000);
}
 
function countDown() {
  counter--;
  // Время вышло:
  if (counter<=0) {
    clearInterval(counterInterval);
    counterInterval = undefined;
    outOfTime();
    return;
  }
 
  g.clear();
  g.setFontAlign(0,0);    // центрируем текст
  g.setFont("Vector",80); // векторный шрифт, высота 80 пикселей
  // Рисуем текущее значение счётчика:
  g.drawString(counter,120,120);
  // Опционально – делаем так,
  // чтобы LCD-дисплей оставался включенным:
  g.flip();
}
 
counterInterval = setInterval(countDown, 1000);
</syntaxhighlight>
 
[[File:Bangle.js_First_App_countdown_end_4.png|center]]
 
В результате, когда счётчик дойдёт до нуля, [[Bangle.js]] начнёт пищать и жужжать, пока вы не зажмёте на них кнопку '''BTN3'''. Давайте сделаем так, чтобы нажатие на '''BTN2''' сбрасывало таймер:
 
* Добавляем '''if (counterInterval) return;''' первой строчкой в '''function outOfTime()'''
* Заменяем '''counterInterval = setInterval(countDown, 1000);''' на:
 
<syntaxhighlight lang="javascript">
function startTimer() {
  counter = 30;
  countDown();
  if (!counterInterval)
    counterInterval = setInterval(countDown, 1000);
}
 
startTimer();
</syntaxhighlight>
 
* Наконец, делаем так, чтобы нажатие на кнопку сбрасывало таймер. Добавляем '''setWatch(startTimer, BTN2);''' прямо перед вызовом outOfTime(); в функции countDown().
 
Теперь ваш код должен выглядеть примерно так:
 
<syntaxhighlight lang="javascript">
var counter = 30;
var counterInterval;
 
function outOfTime() {
  if (counterInterval) return;
  E.showMessage("Время вышло", "Мой таймер");
  Bangle.buzz();
  Bangle.beep(200, 4000)
    .then(() => new Promise(resolve => setTimeout(resolve,200)))
    .then(() => Bangle.beep(200, 3000));
  // И снова спустя 10 секунд:
  setTimeout(outOfTime, 10000);
}
 
function countDown() {
  counter--;
  // Время вышло:
  if (counter<=0) {
    clearInterval(counterInterval);
    counterInterval = undefined;
    setWatch(startTimer, BTN2);
    outOfTime();
    return;
  }
 
  g.clear();
  g.setFontAlign(0,0);    // центрируем текст
  g.setFont("Vector",80); // векторный шрифт, высота 80 пикселей
  // Рисуем текущее значение счётчика:
  g.drawString(counter,120,120);
  // Опционально – делаем так,
  // чтобы LCD-дисплей оставался включенным:
  g.flip();
}
 
function startTimer() {
  counter = 30;
  countDown();
  if (!counterInterval)
    counterInterval = setInterval(countDown, 1000);
}
 
startTimer();
</syntaxhighlight>
 
== Создание приложения ==
 
Теперь, когда код готов, нам надо превратить его в приложение для часов. Для этого нам понадобятся два базовых файла:
* Код приложения в [[JS-файл]]е.
* Информационный [[JSON]]-файл, описывающий приложение (название и т.д.) для лаунчера.
 
Во-первых, придумайте уникальный ID для приложения. Не используйте пробельные символы, используйте строчные символы и старайтесь сделать ID как можно короче (лучше меньше 10 символов).
 
Наше приложение пока не должно быть в [https://github.com/espruino/BangleApps/tree/master/apps этом списке], чтобы не мешать другим приложениям, которые вы, возможно, установили.
 
=== Код приложения: timer.app.js ===
 
Мы используем название '''«timer»'''. Теперь кликните на треугольник под кнопкой загрузки код, выберите '''Storage''', затем '''New File''', напечатайте '''«timer.app.js»''' и кликните на '''OK'''.
 
Теперь кликните на кнопку загрузки. Ваше приложение будет загружено на часы, а затем выполнено из этого файла. После этого вы можете спокойно продолжать разрабатывать своё приложение, как если бы оно было на часах.
 
=== Информация о приложении: timer.app.info ===
 
Теперь у нас есть файл приложения, но в лаунчере оно не появится, потому что у нас нет файла с информацией об этом приложении. Чтобы исправить это, просто скопируйте и вставьте код ниже в левую часть [[IDE]].
 
Он запишет в файл '''«timer.info»''' релевантную информацию о нашем приложении:
 
<syntaxhighlight lang="javascript">
require("Storage").write("timer.info",{
  "name":"My Timer",
  "src":"timer.app.js"
});
</syntaxhighlight>
 
Теперь, если зажать кнопку '''BTN3''' (чтобы перейти к циферблату), затем нажать на '''BTN2''' (чтобы выйти в меню) и пролистать вниз, можно увидеть пункт '''My Timer'''. Если выбрать его, это запустит созданное нами приложение!
 
{{Примечание1|[https://banglejs.com/apps/ Загрузчик приложений Bangle.js] генерирует этот файл автоматически – мы просто показали тут, как создать приложение без использования загрузчика.}}
 
=== Иконка: timer.img ===
 
Если вы зашли в меню, то, наверно, заметили, что у нашего приложения нет иконки.
 
Так что давайте исправим это, добавив ''48-пиксельную иконку.'' Её можно сделать и самому, но мы бы порекомендовали воспользоваться сайтом [https://icons8.com/ icons8.com], так как тамошними иконками можно пользоваться бесплатно, если они используются для проектов с открытым кодом. Итак:
 
* Перейдите на сайт [https://icons8.com/ icons8.com]
* Впишите '''«Timer»''' в поле поиска
* В меню '''All Styles''' выберите '''Color''' – этот стиль часто используется для [[Bangle.js]]
* Выберите какую-нибудь иконку – например, '''Sand Timer'''
* Кликните на '''Download''' и загрузите ''48-пиксельную иконку''
 
Теперь нам надо преобразовать изображение, чтобы его можно было использовать в [[Espruino]], а потом загрузить. Можно воспользоваться [http://www.espruino.com/Image+Converter вот этим конвертером], но эти инструменты есть и в [[IDE]]:
* Кликните на иконку с ''4 дисками в центре'' [[IDE]] [[File:Upload_espruino_icon_ide_060320211053.png]].
* Выберите пункт '''Upload a File'''.
* Выберите файл изображения, который загрузили выше.
* [[IDE]] автоматически определит, что это изображение, и предложит вам ряд настроек для конвертации.
* Назовите иконку '''«timer.img»'''.
* Убедитесь, что поставили галочки рядом с пунктами '''Convert for Espruino''' и '''Transparency'''.
* Выберите пункт '''4 bit Mac Palette''' и посмотрите на превью. Если цветовая палитра вас не устраивает, попробуйте '''8 bit Web Palette.'''
* Кликните на OK, чтобы загрузить иконку.
 
Теперь нам осталось отредактировать информационный файл, чтобы добавить в него указатель на иконку. Скопируйте и вставьте код ниже в левую часть [[IDE]]:
 
<syntaxhighlight lang="javascript">
require("Storage").write("timer.info",{
  "name":"My Timer",
  "src":"timer.app.js",
  "icon":"timer.img"
});
</syntaxhighlight>
 
Теперь если открыть лаунчер, там должна быть иконка нашего приложения.
 
{{Примечание1|Эти изображения можно использовать и внутри самого приложения. Например, если вы хотите нарисовать изображение таймера, просто вызовите вот это:
 
<syntaxhighlight lang="javascript">
g.drawImage(require("Storage").read("timer.img"),x,y)
</syntaxhighlight>
}}
 
== Что дальше ==
 
Окей, приложение готово, и мы можем запустить его из лаунчера.
 
Как насчёт добавить его в [https://banglejs.com/apps/ загрузчик приложений Bangle.js]? О том, как это сделать, можно прочесть в [https://www.espruino.com/Bangle.js+App+Loader этом руководстве].
 
О том, как создать собственный циферблат для Bangle.js, можно прочесть [https://www.espruino.com/Bangle.js+Clock тут].


=См.также=
=См.также=


{{ads}}
 


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


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

Текущая версия от 06:52, 24 мая 2023

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


Первое приложение для Bangle.js (таймер)[1]

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

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

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

Обратный отсчёт

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

var counter = 30;

function countDown() {
  counter--;

  g.clear();
  // Рисуем текущее значение счётчика:
  g.drawString(counter, g.getWidth()/2, g.getHeight()/2);
  // Опционально – делаем так, 
  // чтобы LCD-дисплей оставался включенным: 
  g.flip();
}

var interval = setInterval(countDown, 1000);

Теперь в середине экрана появится маленький текст с цифрой «29», с которой начнётся обратный отсчёт.

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

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

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

Поскольку мы не используем функцию reset(), чтобы на каждом кадре сбрасывать состояние библиотеки Graphics, то можем просто скопировать и вставить код ниже в левую часть IDE.

g.setFontAlign(0,0); // центрируем текст
g.setFont("6x8",8);  // bitmap-шрифт, увеличенный в 8 раз

Теперь у нас будет более крупное (но пикселизированное) число, размещённое в центре экрана.

Вы можете попробовать разные числа («-1», «1», «0» в setFontAlign() или поменять «8» в setFont()) или поэкспериментировать с g.setColor("#00ff7f"), чтобы задать какой-то другой цвет.

Когда закончите с этими экспериментами, добавьте этот код сразу после g.clear() в правой части IDE, а потом снова загрузите результат на Bangle.js.

Если вам нужен более гладкий текст, можно воспользоваться векторным шрифтом (и задать высоту, например, 80 пикселей) – заменив g.setFont("6x8",8) на g.setFont("Vector",80).

Сообщения, писки и жужжание

Наконец, давайте добавим код, который будет определять, когда счётчик достигнет «0», показывать сообщение и издавать писк:

var counter = 30;
var counterInterval;

function outOfTime() {
  E.showMessage("Время вышло","Мой таймер");
  Bangle.buzz();
  Bangle.beep(200, 4000)
    .then(() => new Promise(resolve => setTimeout(resolve,200)))
    .then(() => Bangle.beep(200, 3000));
  // Снова 10 секунд спустя:
  setTimeout(outOfTime, 10000);
}

function countDown() {
  counter--;
  // Время вышло:
  if (counter<=0) {
    clearInterval(counterInterval);
    counterInterval = undefined;
    outOfTime();
    return;
  }

  g.clear();
  g.setFontAlign(0,0);    // центрируем текст
  g.setFont("Vector",80); // векторный шрифт, высота 80 пикселей 
  // Рисуем текущее значение счётчика:
  g.drawString(counter,120,120);
  // Опционально – делаем так, 
  // чтобы LCD-дисплей оставался включенным: 
  g.flip();
}

counterInterval = setInterval(countDown, 1000);

В результате, когда счётчик дойдёт до нуля, Bangle.js начнёт пищать и жужжать, пока вы не зажмёте на них кнопку BTN3. Давайте сделаем так, чтобы нажатие на BTN2 сбрасывало таймер:

  • Добавляем if (counterInterval) return; первой строчкой в function outOfTime()
  • Заменяем counterInterval = setInterval(countDown, 1000); на:
function startTimer() {
  counter = 30;
  countDown();
  if (!counterInterval)
    counterInterval = setInterval(countDown, 1000);
}

startTimer();
  • Наконец, делаем так, чтобы нажатие на кнопку сбрасывало таймер. Добавляем setWatch(startTimer, BTN2); прямо перед вызовом outOfTime(); в функции countDown().

Теперь ваш код должен выглядеть примерно так:

var counter = 30;
var counterInterval;

function outOfTime() {
  if (counterInterval) return;
  E.showMessage("Время вышло", "Мой таймер");
  Bangle.buzz();
  Bangle.beep(200, 4000)
    .then(() => new Promise(resolve => setTimeout(resolve,200)))
    .then(() => Bangle.beep(200, 3000));
  // И снова спустя 10 секунд:
  setTimeout(outOfTime, 10000);
}

function countDown() {
  counter--;
  // Время вышло:
  if (counter<=0) {
    clearInterval(counterInterval);
    counterInterval = undefined;
    setWatch(startTimer, BTN2);
    outOfTime();
    return;
  }

  g.clear();
  g.setFontAlign(0,0);    // центрируем текст
  g.setFont("Vector",80); // векторный шрифт, высота 80 пикселей 
  // Рисуем текущее значение счётчика:
  g.drawString(counter,120,120);
  // Опционально – делаем так, 
  // чтобы LCD-дисплей оставался включенным: 
  g.flip();
}

function startTimer() {
  counter = 30;
  countDown();
  if (!counterInterval)
    counterInterval = setInterval(countDown, 1000);
}

startTimer();

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

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

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

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

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

Код приложения: timer.app.js

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

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

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

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

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

require("Storage").write("timer.info",{
  "name":"My Timer",
  "src":"timer.app.js"
});

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

Примечание

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

Иконка: timer.img

Если вы зашли в меню, то, наверно, заметили, что у нашего приложения нет иконки.

Так что давайте исправим это, добавив 48-пиксельную иконку. Её можно сделать и самому, но мы бы порекомендовали воспользоваться сайтом icons8.com, так как тамошними иконками можно пользоваться бесплатно, если они используются для проектов с открытым кодом. Итак:

  • Перейдите на сайт icons8.com
  • Впишите «Timer» в поле поиска
  • В меню All Styles выберите Color – этот стиль часто используется для Bangle.js
  • Выберите какую-нибудь иконку – например, Sand Timer
  • Кликните на Download и загрузите 48-пиксельную иконку

Теперь нам надо преобразовать изображение, чтобы его можно было использовать в Espruino, а потом загрузить. Можно воспользоваться вот этим конвертером, но эти инструменты есть и в IDE:

  • Кликните на иконку с 4 дисками в центре IDE .
  • Выберите пункт Upload a File.
  • Выберите файл изображения, который загрузили выше.
  • IDE автоматически определит, что это изображение, и предложит вам ряд настроек для конвертации.
  • Назовите иконку «timer.img».
  • Убедитесь, что поставили галочки рядом с пунктами Convert for Espruino и Transparency.
  • Выберите пункт 4 bit Mac Palette и посмотрите на превью. Если цветовая палитра вас не устраивает, попробуйте 8 bit Web Palette.
  • Кликните на OK, чтобы загрузить иконку.

Теперь нам осталось отредактировать информационный файл, чтобы добавить в него указатель на иконку. Скопируйте и вставьте код ниже в левую часть IDE:

require("Storage").write("timer.info",{
  "name":"My Timer",
  "src":"timer.app.js",
  "icon":"timer.img"
});

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

Примечание

Эти изображения можно использовать и внутри самого приложения. Например, если вы хотите нарисовать изображение таймера, просто вызовите вот это:

g.drawImage(require("Storage").read("timer.img"),x,y)

Что дальше

Окей, приложение готово, и мы можем запустить его из лаунчера.

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

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

См.также

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