Espruino:Примеры/Кастомизация приложений для Bangle.js: различия между версиями
Нет описания правки |
Myagkij (обсуждение | вклад) Нет описания правки |
||
Строка 60: | Строка 60: | ||
Поскольку теперь мы загружаем [[JS]]-файл своего приложения напрямую, мы также можем заменить '''{"name":"myapp.app.js", "url":"app.js"}''' на '''{"name":"myapp.app.js"}''', удалив исходный файл приложения '''app.js'''. | Поскольку теперь мы загружаем [[JS]]-файл своего приложения напрямую, мы также можем заменить '''{"name":"myapp.app.js", "url":"app.js"}''' на '''{"name":"myapp.app.js"}''', удалив исходный файл приложения '''app.js'''. | ||
{{Примечание1|Мы задаём в sendCustomizedApp() фрагмент '''url:"app.js"''' для [[JS]]-файлов – независимо от того, существует ли файл [[app.js]] и был ли он вообще загружен. С помощью этого фрагмента загрузчик приложений понимает, что это [[JavaScript]]-файл (по его расширению), и соответственно, может уменьшить и токенизировать его.}} | |||
Что ж, теперь всё готово! Запустите загрузчик приложений и сможете начать кастомизировать своё приложение. | Что ж, теперь всё готово! Запустите загрузчик приложений и сможете начать кастомизировать своё приложение. | ||
{{Примечание1|Здесь мы каждый раз создаём полноценный [[JS]]-файл своего приложения, но особой нужды в этом нет. Например, [https://github.com/espruino/BangleApps/tree/master/apps/openstmap приложение OpenStreetMap] загружает из файла текст приложения, а потом просто загружает дополнительные [[JSON]]-файлы и текст.}} | |||
=См.также= | =См.также= | ||
=Внешние ссылки= | =Внешние ссылки= |
Версия от 15:33, 20 мая 2023
Кастомизация приложений для 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.
Что ж, теперь всё готово! Запустите загрузчик приложений и сможете начать кастомизировать своё приложение.
См.также
Внешние ссылки