Espruino:Примеры/Кастомизация приложений для Bangle.js: различия между версиями
Myagkij (обсуждение | вклад) (Новая страница: «{{Espruino/Панель перехода}} {{Перевод от Сubewriter}} {{Myagkij-редактор}} =<ref>[ www.espruino.com - ]</ref>= <syntaxhighligh...») |
Myagkij (обсуждение | вклад) Нет описания правки |
||
| Строка 3: | Строка 3: | ||
{{Myagkij-редактор}} | {{Myagkij-редактор}} | ||
=<ref>[ www.espruino.com - ]</ref>= | =Кастомизация приложений для Bangle.js<ref>[https://www.espruino.com/Bangle.js+Custom www.espruino.com - Bangle.js App Customiser]</ref>= | ||
В загрузчике приложений некоторые приложения можно кастомизировать перед загрузкой. Здесь мы объясним, как это сделать. | |||
Это руководство написано с расчётом на то, что вы уже прошли [https://www.espruino.com/Bangle.js+App+Loader вот это руководство], где объясняется, как добавить приложение в загрузчик приложений [[Bangle.js]], и знаете, что нужно делать для того, чтобы предложить своё приложение на рассмотрение, а также уже имеете на руках приложение, которое можно кастомизировать. | |||
Идея кастомизатора крайне проста. Вы создаёте веб-страницу, которая будет помогать пользователю кастомизировать его приложение. Эта страница будет появляться после клика по кнопке в загрузчике приложений, а после завершения кастомизации эта веб-страница предоставит загрузчику приложений список файлов, которые нужно загрузить на [[Bangle.js]]. | |||
Давайте создадим простое приложение, которое будет показывать текст, введённый на [[HTML]]-странице. | |||
Поэтому для начала нам нужен [[HTML]]-файл. Он содержит в себе пару базовых вещей – [[CSS]]-файл со стилями, чтобы оформление нашей страницы соответствовало оформлению загрузчика приложений, и библиотека, которая будет помогать в коммуникации с загрузчиком приложений. | |||
Создайте в папке своего приложения файл под названием ''«custom.html»'' и добавьте в него: | |||
<syntaxhighlight lang="html5" enclose="div"> | |||
<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> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
Теперь редактируем [[JSON]]-файл своего приложения и прямо перед ''"storage"'' добавляем строчку '''"custom": "custom.html"'''. | |||
Поскольку теперь мы загружаем [[JS]]-файл своего приложения напрямую, мы также можем заменить '''{"name":"myapp.app.js", "url":"app.js"}''' на '''{"name":"myapp.app.js"}''', удалив исходный файл приложения '''app.js'''. | |||
'''Примечание:''' Мы задаём в sendCustomizedApp() фрагмент '''url:"app.js"''' для [[JS]]-файлов – независимо от того, существует ли файл [[app.js]] и был ли он вообще загружен. С помощью этого фрагмента загрузчик приложений понимает, что это [[JavaScript]]-файл (по его расширению), и соответственно, может уменьшить и токенизировать его. | |||
Что ж, теперь всё готово! Запустите загрузчик приложений и сможете начать кастомизировать своё приложение. | |||
'''Примечание:''' Здесь мы каждый раз создаём полноценный [[JS]]-файл своего приложения, но особой нужды в этом нет. Например, [https://github.com/espruino/BangleApps/tree/master/apps/openstmap приложение OpenStreetMap] загружает из файла текст приложения, а потом просто загружает дополнительные [[JSON]]-файлы и текст. | |||
=См.также= | =См.также= | ||
Версия от 18:33, 3 марта 2021
Кастомизация приложений для 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.
Примечание: Мы задаём в sendCustomizedApp() фрагмент url:"app.js" для JS-файлов – независимо от того, существует ли файл app.js и был ли он вообще загружен. С помощью этого фрагмента загрузчик приложений понимает, что это JavaScript-файл (по его расширению), и соответственно, может уменьшить и токенизировать его.
Что ж, теперь всё готово! Запустите загрузчик приложений и сможете начать кастомизировать своё приложение.
Примечание: Здесь мы каждый раз создаём полноценный JS-файл своего приложения, но особой нужды в этом нет. Например, приложение OpenStreetMap загружает из файла текст приложения, а потом просто загружает дополнительные JSON-файлы и текст.
См.также
Внешние ссылки
