Espruino:Примеры/Кастомизация приложений для Bangle.js
Кастомизация приложений для Bangle.js[1]
В загрузчике приложений некоторые приложения можно кастомизировать перед загрузкой. Здесь мы объясним, как это сделать.
Это руководство написано с расчётом на то, что вы уже прошли вот это руководство, где объясняется, как добавить приложение в загрузчик приложений Bangle.js, и знаете, что нужно делать для того, чтобы предложить своё приложение на рассмотрение, а также уже имеете на руках приложение, которое можно кастомизировать.
Идея кастомизатора крайне проста. Вы создаёте веб-страницу, которая будет помогать пользователю кастомизировать его приложение. Эта страница будет появляться после клика по кнопке в загрузчике приложений, а после завершения кастомизации эта веб-страница предоставит загрузчику приложений список файлов, которые нужно загрузить на Bangle.js.
Давайте создадим простое приложение, которое будет показывать текст, введённый на HTML-странице.
Поэтому для начала нам нужен HTML-файл. Он содержит в себе пару базовых вещей – CSS-файл со стилями, чтобы оформление нашей страницы соответствовало оформлению загрузчика приложений, и библиотека, которая будет помогать в коммуникации с загрузчиком приложений.
Создайте в папке своего приложения файл под названием «custom.html» и добавьте в него:
<html>
<head>
<link rel="stylesheet" href="../../css/spectre.min.css">
</head>
<body>
<p>Some text: <input type="text" id="mytext" class="form-input" value="http://espruino.com"></p>
<p>Click <button id="upload" class="btn btn-primary">Upload</button></p>
<script src="../../core/lib/customize.js"></script>
<script>
// После клика на кнопку загрузки...
document.getElementById("upload").addEventListener("click", function() {
// берём текст, который надо добавить:
var text = document.getElementById("mytext").value;
// создаём текст приложения при помощи шаблонной строки:
var app = `
var txt = ${JSON.stringify(text)};
g.clear(1);
g.setFontAlign(0,0);
g.setFont("6x8");
g.drawString(txt,120,120);
`;
// отправляем готовое приложение
// (вдобавок к содержимому «app.json»):
sendCustomizedApp({
storage:[
{name:"myapp.app.js", url:"app.js", content:app},
]
});
});
</script>
</body>
</html>
Теперь редактируем JSON-файл своего приложения и прямо перед "storage" добавляем строчку "custom": "custom.html".
Поскольку теперь мы загружаем JS-файл своего приложения напрямую, мы также можем заменить {"name":"myapp.app.js", "url":"app.js"} на {"name":"myapp.app.js"}, удалив исходный файл приложения app.js.
Что ж, теперь всё готово! Запустите загрузчик приложений и сможете начать кастомизировать своё приложение.
См.также
Внешние ссылки
