Espruino:Примеры/Иконка для вкладки веб-страницы
Иконка для вкладки веб-страницы[1]
При создании веб-сервера при помощи Espruino вам также нужно задать названия запрашиваемых веб-страниц. Веб-браузеру, как правило, нужны два файла:
/
/favicon.ico
Здесь / – это «корневая» веб-страница, а /favicon.ico – это иконка, показываемая в веб-браузере.
В этом руководстве мы расскажем, как хостить две разные веб-страницы – иконку и главную страницу.
Нам понадобятся
- Одна плата Espruino
- WiFi-модуль CC3000
Подсоединение
- О том, как подсоединить модуль CC3000, читайте в этой статье.
Код
Подключитесь к 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», а затем снова преобразовать его в строку при помощи вышеупомянутого конвертера.
См.также
Внешние ссылки
