Espruino:Примеры/Иконка для вкладки веб-страницы

Материал из Онлайн справочника
Версия от 15:06, 20 мая 2023; EducationBot (обсуждение | вклад)
(разн.) ← Предыдущая версия | Текущая версия (разн.) | Следующая версия → (разн.)
Перейти к навигацииПерейти к поиску

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


Иконка для вкладки веб-страницы[1]

При создании веб-сервера при помощи Espruino вам также нужно задать названия запрашиваемых веб-страниц. Веб-браузеру, как правило, нужны два файла:

/
/favicon.ico

Здесь / – это «корневая» веб-страница, а /favicon.ico – это иконка, показываемая в веб-браузере.

В этом руководстве мы расскажем, как хостить две разные веб-страницы – иконку и главную страницу.

Нам понадобятся

Подсоединение

Код

Подключитесь к Espruino, скопируйте в правую часть IDE код ниже (не забудьте поменять название точки доступа и пароль WiFi-сети на свои собственные), а затем кликните на кнопку загрузки кода.

var counter = 1;

var favicon = "\0\0\x01\0\x01\0\x10\x10\x10\0\x01\0\x04\x00\xf0\0\0\0\x16\0\0\x00\x89PNG\x0d\x0a\x1a\x0a\0\0\0\x0dIHDR\0\0\0\x10\0\0\0\x10\x08\x06\0\0\0\x1f\xf3\xffa\0\0\x00\xb7IDAT8\x8d\xa5S\xc1\x0d\x03!\x0csN\xb7\x91w\xcaP\xde)3\xd1G\x09\x0a\x85\xab\xa8\xea\x0f\x02\x82c\x1b0\x92x\x82\xbb\xb7:\x8f\x08D\x84\xd5\xb5\x1b\x00H\xb6>N\x04uN\x12\x92\x10\x11S\xcd]\x0b\xbf\xa9\xe9\x8a\x00\xa0I\x1a*\x06A\x97\xb7\x90\xd4\x8e$A\x12\xee\xde\xb2vR\x90$\xc8q\xf6\x03\xbc\x15Ldw]\x88zpc\xab*\x8c\x08H\xb2A\x90\x1e\x97\xce\x1bd3\x00\xb8v\x9b\xa7p\xf7\xb6\x10\x9cb\xc9\xe0Wd\x06\x17\x80v\xe2\xfb\x09\x17\x00H\xfa\x8b\xc0\xba\x9c\xe3CU\xf1\xc8@\xd2\x08fW\xf8i3?U\x12\x18z\x16\xf5A\x9ddc_\xee\xbd~e{*z\x01|\xcdnfT\x03\x0an\0\0\0\x00IEND\xaeB`\x82";

function getPage(req,res) {
  console.log(req.url);
  if (req.url == "/favicon.ico") {
    res.writeHead(200, {'Content-Type': 'image/x-icon'});
    res.write(favicon);
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('<html><head><meta http-equiv="refresh" content="5"></head><body><img src="favicon.ico"/>'+(counter++)+'</body></html>');
  }
  res.end();
}

var wlan;
function onInit() {
  wlan = require("CC3000").connect();
  wlan.connect( "AccessPointName", "WPA2key", function (s) { 
    if (s=="dhcp") {
      console.log("Мой IP-адрес - это "+wlan.getIP().ip);
      require("http").createServer(getPage).listen(80);
    }
  });
}
onInit();

На инициализацию CC3000 требуется некоторое время, так что вам, возможно, придётся подождать минуту-две. После подключения Espruino напечатает свой IP-адрес, после чего вы сможете подключиться к нему с помощью веб-браузера.

Подключившись, вы увидите маленькую иконку Espruino и число, которое будет увеличиваться с каждой перезагрузкой веб-страницы (это будет происходить каждые 5 секунд). Иконка Espruino также будет на вкладке этой веб-страницы рядом с её названием.

Итак, как это всё работает?

Сначала в функции getPage() мы смотрим в req.url, чтобы понять, какой файл был запрошен. Если это «\favicon.ico», мы меняем тип контента на иконку и отправляем строку favicon, которая на первый взгляд кажется случайным набором символов. В противном случае отправляем простую веб-страницу.

Строка, отправляемая как иконка, была создана с помощью вот этого конвертера, где вы загружаете обычный файл, получая в итоге строку символов, которую можно использовать в Espruino. Кроме того, вы можете создать собственную иконку, и сделать это можно множеством различных способов – например, вы можете воспользоваться этим онлайн-редактором, создать там иконку, скачать получившийся файл «favicon.ico», а затем снова преобразовать его в строку при помощи вышеупомянутого конвертера.

См.также

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