Espruino:Примеры/Графический веб-интерфейс: различия между версиями

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
(Новая страница: «{{Espruino/Панель перехода}} {{Перевод от Сubewriter}} {{Myagkij-редактор}} =<ref>[ www.espruino.com - ]</ref>= <syntaxhighlig...»)
 
Нет описания правки
 
(не показаны 3 промежуточные версии 2 участников)
Строка 3: Строка 3:
{{Myagkij-редактор}}
{{Myagkij-редактор}}


=<ref>[ www.espruino.com - ]</ref>=
=Графический веб-интерфейс<ref>[https://www.espruino.com/Graphical+Web+Interface www.espruino.com - Graphical Web Interface]</ref>=


[[File:Graphical_Web_Interface_chrome.png|center]]


В этом руководстве мы сделаем интерактивную графическую репрезентацию дома. При клике на окна этого дома будут загораться соответствующие [[светодиод]]ы на полосе светодиодов.


<syntaxhighlight lang="javascript" enclose="div">
Это можно сделать, встроив в [[HTML]]-файл [[SVG-изображение]]. С [[SVG-элемент]]ами можно обращаться как с обычными [[HTML-элемент]]ами – при клике на них можно запускать [[JavaScript]]-код и менять их атрибуты (в данном случае – чтобы поменять цвет на желтый, создав эффект загоревшегося света в окне).


== Нам понадобятся ==
* Одна [https://www.espruino.com/Original плата Espruino]
* [https://www.espruino.com/CC3000 WiFi-модуль CC3000]
* Модель дома
* Полоса из восьми светодиодов [https://www.espruino.com/WS2811 WS2811]
== Подсоединение ==
* О том, как подключить модуль [[CC3000]], читайте в [https://www.espruino.com/CC3000 этой статье]
* О том, как подключить полосу [[светодиод]]ов [[WS2811]] к контакту '''B15''', читайте в [https://www.espruino.com/WS2811 этой статье]
* Расположите полосу [[светодиодов]] зигзагом – чтобы ряд из 4 нижних [[светодиод]]ов отвечал за нижний ряд окон, а ряд из 4 верхних [[светодиод]]ов – за верхний ряд окон
== Код ==
Сначала нам надо запустить программу [http://www.inkscape.org/en/ Inkscape] и нарисовать дом. Я просто обвёл линиями фото модели домика.
[[File:Graphical_Web_Interface_inkscape.png|center]]
Теперь нажмите на '''File > Save As''' и выберите пункт '''Plain SVG'''. Это удалит из изображения все ненужные теги [[Inkscape]]. Вот исходный код моего изображения:
<syntaxhighlight lang="javascript">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!— Сделано в Inkscape (http://www.inkscape.org/) -->
<svg
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:cc="http://creativecommons.org/ns#"
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="400"
  height="400"
  id="svg2">
  <metadata
    id="metadata19">
    <rdf:RDF>
      <cc:Work
        rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
          rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
    id="defs17" />
  <g
    transform="translate(0,-652.36218)"
    id="layer1">
    <path
      d="m 298.14029,720.42948 23.40489,71.44408 -7.4832,139.54296 -62.09459,78.69208 M 256.01376,857.36476 251.64895,1013.2945 81.605295,945.43453 65.389325,821.03539 M 100.3929,693.74746 56.130595,818.31663 250.69365,873.11433 299.09559,717.9604 z"
      id="path3002"
      style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
      d="m 85.426505,868.97264 -2.8659,-29.62898 9.23458,-10.19492 11.782055,17.52251 1.9106,28.03603 z"
      id="path3004"
      style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
      d="m 116.63302,877.5746 -2.8659,-28.03603 8.59771,-9.23914 12.41892,14.6552 1.9106,28.03602 z"
      id="path3006"
      style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
      d="m 171.40364,894.45994 -1.59217,-30.58476 11.14518,-9.55774 13.37422,17.20393 0.31843,30.26617 z"
      id="path3008"
      style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
      d="m 208.02352,905.61063 -0.9553,-30.90335 12.10049,-9.23914 14.96638,18.47829 -0.63686,29.31039 z"
      id="path3010"
      style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
      d="m 96.571685,934.28384 -3.8212,-29.94757 12.737355,3.5045 3.50277,30.58476 z"
      id="path3012"
      style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
      d="m 124.27543,943.84158 -3.18433,-29.62899 12.10048,4.46028 2.22904,30.58476 z"
      id="path3014"
      style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
      d="m 182.54882,965.82437 -1.27374,-32.17771 14.32952,4.77887 -0.63686,31.85914 z"
      id="path3016"
      style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
      d="m 213.75533,978.24943 0.31843,-32.4963 15.60326,4.77887 -0.31843,33.77067 z"
      id="path3018"
      style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
      d="m 146.08815,965.98367 -2.38825,-47.94798 23.24566,8.28337 0.79609,47.62939 z"
      id="path3022"
      style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
  </g>
</svg>
</syntaxhighlight>
Теперь удаляем метаданные, добавляем атрибуты [[onclick]] к каждому элементу [[path]], который нужно сделать кликабельным, и меняем [[id]] на что-то более удобочитаемое (в коде ниже я их менять не стал). Наконец, помещаем это [[SVG-изображение]] внутрь [[HTML]]-файла вместе со скриптом, который будет запрашивать у [[Espruino]] веб-страницу при клике на каждое окно.
<syntaxhighlight lang="javascript">
<html><body>
<script>
  function toggle(n) {
    var e = document.getElementById("path"+n);
    var lit = e.style.fill != "rgb(236, 236, 236)";
    lit = !lit; // переключаем
    e.style.fill = lit ? "#ffff30" : "#ececec";
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","set?l"+n+"="+lit,false);
    xmlhttp.send();
  }
</script>
<svg
  width="400"
  height="400">
  <g
    id="layer1"
    transform="translate(0,-652.36218)">
    <path
      id="path3002"
      style="fill:none;stroke:#000000;stroke-width:1px;"
      d="m 298.14029,720.42948 23.40489,71.44408 -7.4832,139.54296 -62.09459,78.69208 M 256.01376,857.36476 251.64895,1013.2945 81.605295,945.43453 65.389325,821.03539 M 100.3929,693.74746 56.130595,818.31663 250.69365,873.11433 299.09559,717.9604 z" />
    <path
      style="fill:#ececec;stroke:#000000;stroke-width:1px;"
      d="m 85.426505,868.97264 -2.8659,-29.62898 9.23458,-10.19492 11.782055,17.52251 1.9106,28.03603 z"
      id="path1" onclick="toggle(1)"/>
    <path
      style="fill:#ececec;stroke:#000000;stroke-width:1px;"
      d="m 116.63302,877.5746 -2.8659,-28.03603 8.59771,-9.23914 12.41892,14.6552 1.9106,28.03602 z"
      id="path2" onclick="toggle(2)"/>
    <path
      style="fill:#ececec;stroke:#000000;stroke-width:1px;"
      d="m 171.40364,894.45994 -1.59217,-30.58476 11.14518,-9.55774 13.37422,17.20393 0.31843,30.26617 z"
      id="path3" onclick="toggle(3)"/>
    <path
      style="fill:#ececec;stroke:#000000;stroke-width:1px;"
      d="m 208.02352,905.61063 -0.9553,-30.90335 12.10049,-9.23914 14.96638,18.47829 -0.63686,29.31039 z"
      id="path4" onclick="toggle(4)"/>
    <path
      style="fill:#ececec;stroke:#000000;stroke-width:1px;"
      d="m 96.571685,934.28384 -3.8212,-29.94757 12.737355,3.5045 3.50277,30.58476 z"
      id="path5" onclick="toggle(5)"/>
    <path
      style="fill:#ececec;stroke:#000000;stroke-width:1px;"
      d="m 124.27543,943.84158 -3.18433,-29.62899 12.10048,4.46028 2.22904,30.58476 z"
      id="path6" onclick="toggle(6)"/>
    <path
      style="fill:#ececec;stroke:#000000;stroke-width:1px;"
      d="m 182.54882,965.82437 -1.27374,-32.17771 14.32952,4.77887 -0.63686,31.85914 z"
      id="path7" onclick="toggle(7)"/>
    <path
      style="fill:#ececec;stroke:#000000;stroke-width:1px;"
      d="m 213.75533,978.24943 0.31843,-32.4963 15.60326,4.77887 -0.31843,33.77067 z"
      id="path8" onclick="toggle(8)"/>
    <path
      style="fill:none;stroke:#000000;stroke-width:1px;"
      d="m 146.08815,965.98367 -2.38825,-47.94798 23.24566,8.28337 0.79609,47.62939 z"
      id="path3022"/>
  </g>
</svg>
</body></html>
</syntaxhighlight>
</syntaxhighlight>
Если кликнуть на второе окно, код выше запросит страницу '''/set?l2=true'''.
Сохраните этот [[HTML]]-файл на диск, а затем при помощи [https://www.espruino.com/File+Converter этого конвертера] преобразуйте его в строку. Вы, конечно, можете просто сохранить этот [[HTML]]-файл на SD-карту (и в этом случае преобразование в строку не понадобится), но благодаря сохранению файла в переменную [[Espruino]] сможет использовать его, не имея никакой [[SD-карты]] вовсе.
Наконец, пишем [[Espruino]]-код, который будет обслуживать нашу веб-страницу – то есть включать и выключать [[светодиод]]ы при запросе страницы '''/set'''.
<syntaxhighlight lang="javascript">
var page = "<html><body>\n<script>\n  function toggle(n) {\n    var e = document.getElementById(\"path\"+n);\n    var lit = e.style.fill != \"rgb(236, 236, 236)\";\n    lit = !lit; // переключаем\n    e.style.fill = lit ? \"#ffff30\" : \"#ececec\";\n    var xmlhttp=new XMLHttpRequest();\n    xmlhttp.open(\"GET\",\"set?l\"+n+\"=\"+lit);\n    xmlhttp.send();\n  }\n</script>\n<svg\n  width=\"400\"\n  height=\"400\">\n  <g\n    id=\"layer1\"\n    transform=\"translate(0,-652.36218)\">\n    <path\n      id=\"path3002\"\n      style=\"fill:none;stroke:#000000;stroke-width:1px;\"\n      d=\"m 298.14029,720.42948 23.40489,71.44408 -7.4832,139.54296 -62.09459,78.69208 M 256.01376,857.36476 251.64895,1013.2945 81.605295,945.43453 65.389325,821.03539 M 100.3929,693.74746 56.130595,818.31663 250.69365,873.11433 299.09559,717.9604 z\" />\n    <path\n      style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n      d=\"m 85.426505,868.97264 -2.8659,-29.62898 9.23458,-10.19492 11.782055,17.52251 1.9106,28.03603 z\"\n      id=\"path1\" onclick=\"toggle(1)\"/>\n    <path\n      style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n      d=\"m 116.63302,877.5746 -2.8659,-28.03603 8.59771,-9.23914 12.41892,14.6552 1.9106,28.03602 z\"\n      id=\"path2\" onclick=\"toggle(2)\"/>\n    <path\n      style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n      d=\"m 171.40364,894.45994 -1.59217,-30.58476 11.14518,-9.55774 13.37422,17.20393 0.31843,30.26617 z\"\n      id=\"path3\" onclick=\"toggle(3)\"/>\n    <path\n      style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n      d=\"m 208.02352,905.61063 -0.9553,-30.90335 12.10049,-9.23914 14.96638,18.47829 -0.63686,29.31039 z\"\n      id=\"path4\" onclick=\"toggle(4)\"/>\n    <path\n      style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n      d=\"m 96.571685,934.28384 -3.8212,-29.94757 12.737355,3.5045 3.50277,30.58476 z\"\n      id=\"path5\" onclick=\"toggle(5)\"/>\n    <path\n      style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n      d=\"m 124.27543,943.84158 -3.18433,-29.62899 12.10048,4.46028 2.22904,30.58476 z\"\n      id=\"path6\" onclick=\"toggle(6)\"/>\n    <path\n      style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n      d=\"m 182.54882,965.82437 -1.27374,-32.17771 14.32952,4.77887 -0.63686,31.85914 z\"\n      id=\"path7\" onclick=\"toggle(7)\"/>\n    <path\n      style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n      d=\"m 213.75533,978.24943 0.31843,-32.4963 15.60326,4.77887 -0.31843,33.77067 z\"\n      id=\"path8\" onclick=\"toggle(8)\"/>\n    <path\n      style=\"fill:none;stroke:#000000;stroke-width:1px;\"\n      d=\"m 146.08815,965.98367 -2.38825,-47.94798 23.24566,8.28337 0.79609,47.62939 z\"\n      id=\"path3022\"/>\n  </g>\n</svg></body></html>\n";
// Светодиоды расположены не в правильном порядке,
// и здесь мы задаём правильный порядок:
var map = [undefined,7,6,5,4,0,1,2,3];
// 8 светодиодов – по одному для каждого окна:
var rgb = new Uint8Array(3*8);
// Настраиваем SPI для коммуникации со светодиодами:
SPI2.setup({baud:3200000, mosi:B15});
// Эта функция передаёт данные светодиодам:
function setLights() {
  SPI2.send4bit(rgb, 0b0001, 0b0011);
}
function onPageRequest(req, res) {
  var a = url.parse(req.url, true);
  res.writeHead(200, {'Content-Type': 'text/html'});
  // Если запрошена страница «/set»...
  if (a.pathname == "/set" && a.query) {
    for (var l in a.query) {
      if (l.length==2 && l[0]=="l") {
        var n = map[parseInt(l[1],16)];
        var v = JSON.parse(a.query[l]);
        rgb[n*3+0] = v ? (32+128*Math.random()) : 0;
        rgb[n*3+1] = v ? (32+128*Math.random()) : 0;
        rgb[n*3+2] = v ? (32+128*Math.random()) : 0;
        setLights();
      }
    }
    res.end();
  } else {
    // В противном случае просто отправляем веб-страницу:
    res.end(page);
  }
}
// Теперь просто инициализируем WiFi и наш сервер:
var wlan;
function onInit() {
  wlan = require("CC3000").connect();
  wlan.connect( "AccessPointName", "WPA2key", function (s) {
    setLights();
    if (s=="dhcp") {
      console.log("Мой IP-адрес - это "+wlan.getIP().ip);
      require("http").createServer(onPageRequest).listen(80);
    }
  });
}
onInit();
</syntaxhighlight>
Вставьте этот код в правую часть [[Web IDE]] (не забудьте поменять [[WiFi]]-настройки, т.е. вписать пароль и название своей [[WiFi-сети]]). Затем кликните на кнопку отправки кода в центре [[Web IDE]].
На инициализацию [[CC3000]] может понадобиться некоторое время (примерно минута-две). После подключения [[Espruino]] напечатает свой [[IP-адрес]]. Теперь скопируйте его, вставьте в адресную строку своего веб-браузера и кликните {{клавиша|Enter}}.
После этого в [[браузер]]е должна открыться веб-страница с изображением домика. Клики по окнам этого домика будут зажигать соответствующие светодиоды в ленте светодиодов.
[[File:Graphical_Web_Interface_chrome|center]]


=См.также=
=См.также=


{{ads}}
 


=Внешние ссылки=
=Внешние ссылки=
Строка 19: Строка 251:
<references />
<references />


{{Навигационная таблица/Espruino}}
{{Навигационная таблица/Портал/Espruino}}
{{Навигационная таблица/Телепорт}}

Текущая версия от 19:55, 23 мая 2023

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


Графический веб-интерфейс[1]

В этом руководстве мы сделаем интерактивную графическую репрезентацию дома. При клике на окна этого дома будут загораться соответствующие светодиоды на полосе светодиодов.

Это можно сделать, встроив в HTML-файл SVG-изображение. С SVG-элементами можно обращаться как с обычными HTML-элементами – при клике на них можно запускать JavaScript-код и менять их атрибуты (в данном случае – чтобы поменять цвет на желтый, создав эффект загоревшегося света в окне).

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

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

Код

Сначала нам надо запустить программу Inkscape и нарисовать дом. Я просто обвёл линиями фото модели домика.

Теперь нажмите на File > Save As и выберите пункт Plain SVG. Это удалит из изображения все ненужные теги Inkscape. Вот исходный код моего изображения: 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!— Сделано в Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="400"
   height="400"
   id="svg2">
  <metadata
     id="metadata19">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs17" />
  <g
     transform="translate(0,-652.36218)"
     id="layer1">
    <path
       d="m 298.14029,720.42948 23.40489,71.44408 -7.4832,139.54296 -62.09459,78.69208 M 256.01376,857.36476 251.64895,1013.2945 81.605295,945.43453 65.389325,821.03539 M 100.3929,693.74746 56.130595,818.31663 250.69365,873.11433 299.09559,717.9604 z"
       id="path3002"
       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
       d="m 85.426505,868.97264 -2.8659,-29.62898 9.23458,-10.19492 11.782055,17.52251 1.9106,28.03603 z"
       id="path3004"
       style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
       d="m 116.63302,877.5746 -2.8659,-28.03603 8.59771,-9.23914 12.41892,14.6552 1.9106,28.03602 z"
       id="path3006"
       style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
       d="m 171.40364,894.45994 -1.59217,-30.58476 11.14518,-9.55774 13.37422,17.20393 0.31843,30.26617 z"
       id="path3008"
       style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
       d="m 208.02352,905.61063 -0.9553,-30.90335 12.10049,-9.23914 14.96638,18.47829 -0.63686,29.31039 z"
       id="path3010"
       style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
       d="m 96.571685,934.28384 -3.8212,-29.94757 12.737355,3.5045 3.50277,30.58476 z"
       id="path3012"
       style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
       d="m 124.27543,943.84158 -3.18433,-29.62899 12.10048,4.46028 2.22904,30.58476 z"
       id="path3014"
       style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
       d="m 182.54882,965.82437 -1.27374,-32.17771 14.32952,4.77887 -0.63686,31.85914 z"
       id="path3016"
       style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
       d="m 213.75533,978.24943 0.31843,-32.4963 15.60326,4.77887 -0.31843,33.77067 z"
       id="path3018"
       style="fill:#ececec;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
       d="m 146.08815,965.98367 -2.38825,-47.94798 23.24566,8.28337 0.79609,47.62939 z"
       id="path3022"
       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
  </g>
</svg>

Теперь удаляем метаданные, добавляем атрибуты onclick к каждому элементу path, который нужно сделать кликабельным, и меняем id на что-то более удобочитаемое (в коде ниже я их менять не стал). Наконец, помещаем это SVG-изображение внутрь HTML-файла вместе со скриптом, который будет запрашивать у Espruino веб-страницу при клике на каждое окно. 

<html><body>
<script>
  function toggle(n) {
    var e = document.getElementById("path"+n);
    var lit = e.style.fill != "rgb(236, 236, 236)";
    lit = !lit; // переключаем
    e.style.fill = lit ? "#ffff30" : "#ececec";
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","set?l"+n+"="+lit,false);
    xmlhttp.send();
  }
</script>
<svg
   width="400"
   height="400">
  <g
     id="layer1"
     transform="translate(0,-652.36218)">
    <path
       id="path3002"
       style="fill:none;stroke:#000000;stroke-width:1px;"
       d="m 298.14029,720.42948 23.40489,71.44408 -7.4832,139.54296 -62.09459,78.69208 M 256.01376,857.36476 251.64895,1013.2945 81.605295,945.43453 65.389325,821.03539 M 100.3929,693.74746 56.130595,818.31663 250.69365,873.11433 299.09559,717.9604 z" />
    <path
       style="fill:#ececec;stroke:#000000;stroke-width:1px;"
       d="m 85.426505,868.97264 -2.8659,-29.62898 9.23458,-10.19492 11.782055,17.52251 1.9106,28.03603 z"
       id="path1" onclick="toggle(1)"/>
    <path
       style="fill:#ececec;stroke:#000000;stroke-width:1px;"
       d="m 116.63302,877.5746 -2.8659,-28.03603 8.59771,-9.23914 12.41892,14.6552 1.9106,28.03602 z"
       id="path2" onclick="toggle(2)"/>
    <path
       style="fill:#ececec;stroke:#000000;stroke-width:1px;"
       d="m 171.40364,894.45994 -1.59217,-30.58476 11.14518,-9.55774 13.37422,17.20393 0.31843,30.26617 z"
       id="path3" onclick="toggle(3)"/>
    <path
       style="fill:#ececec;stroke:#000000;stroke-width:1px;"
       d="m 208.02352,905.61063 -0.9553,-30.90335 12.10049,-9.23914 14.96638,18.47829 -0.63686,29.31039 z"
       id="path4" onclick="toggle(4)"/>
    <path
       style="fill:#ececec;stroke:#000000;stroke-width:1px;"
       d="m 96.571685,934.28384 -3.8212,-29.94757 12.737355,3.5045 3.50277,30.58476 z"
       id="path5" onclick="toggle(5)"/>
    <path
       style="fill:#ececec;stroke:#000000;stroke-width:1px;"
       d="m 124.27543,943.84158 -3.18433,-29.62899 12.10048,4.46028 2.22904,30.58476 z"
       id="path6" onclick="toggle(6)"/>
    <path
       style="fill:#ececec;stroke:#000000;stroke-width:1px;"
       d="m 182.54882,965.82437 -1.27374,-32.17771 14.32952,4.77887 -0.63686,31.85914 z"
       id="path7" onclick="toggle(7)"/>
    <path
       style="fill:#ececec;stroke:#000000;stroke-width:1px;"
       d="m 213.75533,978.24943 0.31843,-32.4963 15.60326,4.77887 -0.31843,33.77067 z"
       id="path8" onclick="toggle(8)"/>
    <path
       style="fill:none;stroke:#000000;stroke-width:1px;"
       d="m 146.08815,965.98367 -2.38825,-47.94798 23.24566,8.28337 0.79609,47.62939 z"
       id="path3022"/>
  </g>
</svg>
</body></html>

Если кликнуть на второе окно, код выше запросит страницу /set?l2=true.

Сохраните этот HTML-файл на диск, а затем при помощи этого конвертера преобразуйте его в строку. Вы, конечно, можете просто сохранить этот HTML-файл на SD-карту (и в этом случае преобразование в строку не понадобится), но благодаря сохранению файла в переменную Espruino сможет использовать его, не имея никакой SD-карты вовсе.

Наконец, пишем Espruino-код, который будет обслуживать нашу веб-страницу – то есть включать и выключать светодиоды при запросе страницы /set. 

var page = "<html><body>\n<script>\n  function toggle(n) {\n    var e = document.getElementById(\"path\"+n);\n    var lit = e.style.fill != \"rgb(236, 236, 236)\";\n    lit = !lit; // переключаем\n    e.style.fill = lit ? \"#ffff30\" : \"#ececec\";\n    var xmlhttp=new XMLHttpRequest();\n    xmlhttp.open(\"GET\",\"set?l\"+n+\"=\"+lit);\n    xmlhttp.send();\n  }\n</script>\n<svg\n   width=\"400\"\n   height=\"400\">\n  <g\n     id=\"layer1\"\n     transform=\"translate(0,-652.36218)\">\n    <path\n       id=\"path3002\"\n       style=\"fill:none;stroke:#000000;stroke-width:1px;\"\n       d=\"m 298.14029,720.42948 23.40489,71.44408 -7.4832,139.54296 -62.09459,78.69208 M 256.01376,857.36476 251.64895,1013.2945 81.605295,945.43453 65.389325,821.03539 M 100.3929,693.74746 56.130595,818.31663 250.69365,873.11433 299.09559,717.9604 z\" />\n    <path\n       style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n       d=\"m 85.426505,868.97264 -2.8659,-29.62898 9.23458,-10.19492 11.782055,17.52251 1.9106,28.03603 z\"\n       id=\"path1\" onclick=\"toggle(1)\"/>\n    <path\n       style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n       d=\"m 116.63302,877.5746 -2.8659,-28.03603 8.59771,-9.23914 12.41892,14.6552 1.9106,28.03602 z\"\n       id=\"path2\" onclick=\"toggle(2)\"/>\n    <path\n       style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n       d=\"m 171.40364,894.45994 -1.59217,-30.58476 11.14518,-9.55774 13.37422,17.20393 0.31843,30.26617 z\"\n       id=\"path3\" onclick=\"toggle(3)\"/>\n    <path\n       style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n       d=\"m 208.02352,905.61063 -0.9553,-30.90335 12.10049,-9.23914 14.96638,18.47829 -0.63686,29.31039 z\"\n       id=\"path4\" onclick=\"toggle(4)\"/>\n    <path\n       style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n       d=\"m 96.571685,934.28384 -3.8212,-29.94757 12.737355,3.5045 3.50277,30.58476 z\"\n       id=\"path5\" onclick=\"toggle(5)\"/>\n    <path\n       style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n       d=\"m 124.27543,943.84158 -3.18433,-29.62899 12.10048,4.46028 2.22904,30.58476 z\"\n       id=\"path6\" onclick=\"toggle(6)\"/>\n    <path\n       style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n       d=\"m 182.54882,965.82437 -1.27374,-32.17771 14.32952,4.77887 -0.63686,31.85914 z\"\n       id=\"path7\" onclick=\"toggle(7)\"/>\n    <path\n       style=\"fill:#ececec;stroke:#000000;stroke-width:1px;\"\n       d=\"m 213.75533,978.24943 0.31843,-32.4963 15.60326,4.77887 -0.31843,33.77067 z\"\n       id=\"path8\" onclick=\"toggle(8)\"/>\n    <path\n       style=\"fill:none;stroke:#000000;stroke-width:1px;\"\n       d=\"m 146.08815,965.98367 -2.38825,-47.94798 23.24566,8.28337 0.79609,47.62939 z\"\n       id=\"path3022\"/>\n  </g>\n</svg></body></html>\n";

// Светодиоды расположены не в правильном порядке,
// и здесь мы задаём правильный порядок:
var map = [undefined,7,6,5,4,0,1,2,3];

// 8 светодиодов – по одному для каждого окна:
var rgb = new Uint8Array(3*8);
// Настраиваем SPI для коммуникации со светодиодами:
SPI2.setup({baud:3200000, mosi:B15});

// Эта функция передаёт данные светодиодам:
function setLights() {
  SPI2.send4bit(rgb, 0b0001, 0b0011);
}

function onPageRequest(req, res) {
  var a = url.parse(req.url, true);
  res.writeHead(200, {'Content-Type': 'text/html'});
  // Если запрошена страница «/set»...
  if (a.pathname == "/set" && a.query) {
    for (var l in a.query) {
      if (l.length==2 && l[0]=="l") {
        var n = map[parseInt(l[1],16)];
        var v = JSON.parse(a.query[l]);
        rgb[n*3+0] = v ? (32+128*Math.random()) : 0;
        rgb[n*3+1] = v ? (32+128*Math.random()) : 0;
        rgb[n*3+2] = v ? (32+128*Math.random()) : 0;
        setLights();
      }
    }
    res.end();
  } else {
    // В противном случае просто отправляем веб-страницу:
    res.end(page);
  }
}

// Теперь просто инициализируем WiFi и наш сервер:
var wlan;

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

onInit();

Вставьте этот код в правую часть Web IDE (не забудьте поменять WiFi-настройки, т.е. вписать пароль и название своей WiFi-сети). Затем кликните на кнопку отправки кода в центре Web IDE.

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

После этого в браузере должна открыться веб-страница с изображением домика. Клики по окнам этого домика будут зажигать соответствующие светодиоды в ленте светодиодов.

Файл:Graphical Web Interface chrome

См.также

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

  1. ↑ www.espruino.com - Graphical Web Interface
Партнерские ресурсы
Криптовалюты
Магазины
Хостинг
Разное
Справочник по API Espruino
Глобальные методы, переменные и объекты • acceleration() • analogRead() • analogWrite() • arguments • atob() • Объект Bluetooth • btoa() • changeInterval() • clearInterval() • clearTimeout() • clearWatch() • compass() • decodeURIComponent() • digitalPulse() • digitalRead() • digitalWrite() • dump() • echo() • edit() • encodeURIComponent() • eval() • FET • getPinMode() • getSerial() • getTime() • global • HIGH • Объект I2C1 • Объект I2C2 • Объект I2C3 • Infinity • isFinite() • isNaN() • load() • Объект LoopBackA • Объект LoopBackB • LOW • NaN • parseFloat() • parseInt() • peek16() • peek32() • peek8() • pinMode() • poke16() • poke32() • poke8() • print() • require() • reset() • save() • SCL • SDA • Объект Serial1 • Объект Serial2 • Объект Serial3 • Объект Serial4 • Объект Serial5 • Объект Serial6 • setBusyIndicator() • setDeepSleep() • setInterval() • setSleepIndicator() • setTime() • setTimeout() • setWatch() • shiftOut() • show() • Объект SPI1 • Объект SPI2 • Объект SPI3 • Объект Telnet • Объект Terminal • trace() • Объект USB • VIBRATE
Класс AES • decrypt() • encrypt()
Класс Array • Array() • concat() • every() • fill() • filter() • find() • findIndex() • forEach() • includes() • indexOf() • isArray() • join() • length • map() • pop() • push() • reduce() • reverse() • shift() • slice() • some() • sort() • splice() • toString() • unshift()
Класс ArrayBuffer • ArrayBuffer() • byteLength
Класс ArrayBufferView • buffer • byteLength • byteOffset • fill() • filter() • find() • findIndex() • forEach() • includes() • indexOf() • join() • map() • reduce() • reverse() • set() • slice() • sort()
Класс Bangle • accel • accelRd() • accelWr() • aiGesture • beep() • buzz() • charging • compassWr() • dbg() • drawWidgets() • F_BEEPSET • faceUp • gesture • getAccel() • getCompass() • getLCDMode() • getLogo() • GPS • GPS-raw • HRM • ioWr() • isCharging() • isLCDOn() • lcdPower • lcdWr() • loadWidgets() • mag • off() • project() • setCompassPower() • setGPSPower() • setHRMPower() • setLCDBrightness() • setLCDMode() • setLCDOffset() • setLCDPower() • setLCDTimeout() • setOptions() • setPollInterval() • showLauncher() • step • swipe • touch • twist
Класс BluetoothDevice • connected • gatt • gattserverdisconnected • passkey • passkeyRequest • rssi • sendPasskey()
Класс BluetoothRemoteGATTCharacteristic • characteristicvaluechanged • readValue() • startNotifications() • stopNotifications() • writeValue()
Класс BluetoothRemoteGATTServer • connect() • disconnect() • getPrimaryService() • getPrimaryServices() • getSecurityStatus() • setRSSIHandler() • startBonding()
Класс BluetoothRemoteGATTService • getCharacteristic() • getCharacteristics()
Класс Boolean • Boolean()
Библиотека CC3000 • connect()
Класс Console • log()
Библиотека crypto • AES • PBKDF2() • SHA1() • SHA224() • SHA256() • SHA384() • SHA512()
Класс DataView • DavaView() • getFloat32() • getFloat64() • getInt16() • getInt32() • getInt8() • getUint16() • getUint32() • getUint8() • setFloat32() • setFloat64() • setInt16() • setInt32() • setInt8() • setUint16() • setUint32() • setUint8()
Класс Date • Date() • getDate() • getDay() • getFullYear() • getHours() • getMilliseconds() • getMinutes() • getMonth() • getSeconds() • getTime() • getTimezoneOffset() • now() • parse() • setDate() • setFullYear() • setHours() • setMilliseconds() • setMinutes() • setMonth() • setSeconds() • setTime() • toISOString() • toJSON() • toString() • toUTCString() • valueOf()
Библиотека dgram • createSocket()
Класс dgramSocket • addMembership() • bind() • Функция close() • Событие close() • message • send()
Класс E • asm() • clip() • compiledC() • connectSDCard() • convolve() • CRC32() • defrag() • dumpFragmentation() • dumpFreeList() • dumpLockedVars() • dumpStr() • dumpTimers() • dumpVariables() • enableWatchdog() • errorFlag • FFT() • flashFatFS() • getAddressOf() • getAnalogVRef() • getBattery() • getConsole() • getErrorFlags() • getFlags() • getRTCPrescaler() • getSizeOf() • getTemperature() • HSBtoRGB() • hwRand() • init • kickWatchdog() • kill • lockConsole() • lookupNoCase() • mapInPlace() • memoryArea() • memoryMap() • nativeCall() • openFile() • pipe() • reboot() • reverseByte() • sendUSBHID() • setBootCode() • setClock() • setConsole() • setFlags() • setPassword() • setRTCPrescaler() • setTimeZone() • setUSBHID() • showAlert() • showMenu() • showMessage() • showPrompt() • srand() • sum() • toArrayBuffer() • toJS() • toString() • toUint8Array() • unmountSD() • variance()
Класс Error • Error() • toString()
Библиотека ESP8266 • crc32() • deepSleep() • dumpSocketInfo() • getFreeFlash() • getResetInfo() • getState() • logDebug() • neopixelWrite() • ping() • printLog() • readLog() • reboot() • setCPUFreq() • setLog()
Класс Ethernet • getHostname() • getIP() • getStatus() • setHostname() • setIP()
Класс File • close() • pipe() • read() • seek() • skip() • write()
Библиотека Flash • erasePage() • getFree() • getPage() • read() • write()
Класс Float32Array • Float32Array()
Класс Float64Array • Float64Array()
Библиотека fs • appendFile() • appendFileSync() • mkdir() • mkdirSync() • pipe() • readdir() • readdirSync() • readFile() • readFileSync() • statSync() • unlink() • unlinkSync() • writeFile() • writeFileSync()
Класс Function • apply() • bind() • call() • Function() • replaceWith()
Класс Graphics • asBMP() • asImage() • asURL() • buffer • clear() • clearRect() • createArrayBuffer() • createCallback() • createImage() • createSDL() • drawCircle() • drawEllipse() • drawImage() • drawImages() • drawLine() • drawLineAA() • drawPoly() • drawPolyAA() • drawRect() • drawString() • dump() • fillCircle() • fillEllipse() • fillPoly() • fillRect() • flip() • getBgColor() • getColor() • getFont() • getFontHeight() • getFonts() • getHeight() • getInstance() • getModified() • getPixel() • getWidth() • lineTo() • moveTo() • quadraticBezier() • reset() • scroll() • setBgColor() • setClipRect() • setColor() • setFont() • setFontAlign() • setFontBitmap() • setFontCustom() • setFontVector() • setPixel() • setRotation() • stringWidth() • toColor() • transformVertices()
Библиотека heatshrink • compress() • decompress()
Библиотека http • createServer() • get() • request()
Класс httpCRq • drain • end() • error • write()
Класс httpCRs • available() • close • data • error • headers • httpVersion • pipe() • read() • statusCode • statusMessage
Класс httpSRq • available() • close • data • headers • method • pipe() • read() • url
Класс httpSRs • close • drain • end() • headers • setHeader() • write() • writeHead()
Класс httpSrv • close() • listen()
Класс I2C • find() • I2C() • readFrom() • setup() • writeTo()
Класс Int16Array • Int16Array()
Класс Int32Array • Int32Array()
Класс Int8Array • Int8Array()
Класс InternalError • InternalError() • toString()
Класс JSON • parse() • stringify()
Класс Math • abs() • acos() • asin() • atan() • atan2() • ceil() • clip() • cos() • E • exp() • floor() • LN10 • LN2 • log() • LOG10E • LOG2E • max() • min() • PI • pow() • random() • round() • sin() • sqrt() • SQRT1_2 • SQRT2 • tan() • wrap()
Класс Microbit • accel() • accelOff() • accelOn() • accelWr() • gesture • mag() • MIC • MIC_ENABLE • play() • record() • SPEAKER
Класс Modules • addCached() • getCached() • removeAllCached() • removeCached()
Библиотека neopixel • write()
Библиотека net • connect() • createServer()
Библиотека NetworkJS • create()
Класс NodeMCU • A0 • D0 • D1 • D2 • D3 • D4 • D5 • D6 • D7 • D8 • D9 • D10
Класс NRF • characteristicsDiscover • connect • connect() • disconnect • disconnect() • filterDevices() • findDevices() • getAddress() • getAdvertisingData() • getBattery() • getSecurityStatus() • HID • nfcAndroidApp() • NFCoff • NFCon • nfcPair() • nfcRaw() • NFCrx • nfcSend() • nfcStart() • nfcStop() • nfcURL() • requestDevice() • restart() • security • sendHIDReport() • servicesDiscover • setAddress() • setAdvertising() • setConnectionInterval() • setLowPowerConnection() • setRSSIHandler() • setScan() • setScanResponse() • setSecurity() • setServices() • setTxPower() • setWhitelist() • sleep() • updateServices() • wake()
Класс Nucleo • A0 • A1 • A2 • A3 • A4 • A5 • D0 • D1 • D2 • D3 • D4 • D5 • D6 • D7 • D8 • D9 • D10 • D11 • D12 • D13 • D14 • D15
Класс Number • MAX_VALUE • MIN_VALUE • NaN • NEGATIVE_INFINITY • Number() • POSITIVE_INFINITY • toFixed()
Класс Object • assign() • clone() • create() • defineProperties() • defineProperty() • emit() • getOwnPropertyDescriptor() • getOwnPropertyNames() • getPrototypeOf() • hasOwnProperty() • keys() • length • Object() • on() • removeAllListeners() • removeListener() • setPrototypeOf() • toString() • valueOf()
Класс OneWire • OneWire() • read() • reset() • search() • select() • skip() • write()
Класс Pin • getInfo() • getMode() • mode() • Pin() • read() • reset() • set() • toggle() • write() • writeAtTime()
Класс Pixl • getBatteryPercentage() • lcdw() • menu() • setContrast() • setLCDPower()
Класс process • env • memory() • uncaughtException • version
Класс Promise • all() • catch() • Promise() • reject() • resolve() • then()
Класс Puck • accel • accel() • accelOff() • accelOn() • accelRd() • accelWr() • capSense() • getBatteryPercentage() • getTemperature() • IR() • light() • mag() • mag • magOff() • magOn() • magRd() • magTemp() • magWr() • selfTest()
Класс ReferenceError • ReferenceError() • toString()
Класс RegExp • exec() • RegExp() • test()
Класс Serial • available() • data • find() • framing • inject() • parity • pipe() • print() • println() • read() • Serial() • setConsole() • setup() • unsetup() • write()
Класс Server • close() • listen()
Класс Socket • available() • close • data • drain • end() • error • pipe() • read() • write()
Класс SPI • find() • send() • send4bit() • send8bit() • setup() • SPI() • write()
Библиотека Storage • compact() • debug() • erase() • eraseAll() • getFree() • list() • open() • read() • readArrayBuffer() • readJSON() • write() • writeJSON()
Класс StorageFile • erase() • getLength() • read() • readLine() • write()
Класс String • charAt() • charCodeAt() • endsWith() • fromCharCode() • includes() • indexOf() • lastIndexOf() • length • match() • padEnd() • padStart() • repeat() • replace() • slice() • split() • startsWith() • String() • substr() • substring() • toLowerCase() • toUpperCase() • trim()
Класс SyntaxError • SyntaxError() • toString()
Библиотека TelnetServer • setOptions()
Библиотека tensorflow • create()
Класс TFMicroInterpreter • getInput() • getOutput() • invoke()
Библиотека tls • connect()
Библиотека tv • setup()
Класс TypeError • toString() • TypeError()
Класс Uint16Array • Uint16Array()
Класс Uint24Array • Uint24Array()
Класс Uint32Array • Uint32Array()
Класс Uint8Array • Uint8Array()
Класс Uint8ClampedArray • Uint8ClampedArray()
Класс url • parse()
Класс Waveform • startInput() • startOutput() • stop() • Waveform()
Библиотека WiFi • associated • auth_change • connect() • connected • dhcp_timeout • disconnect() • disconnected • getAPDetails() • getAPIP() • getDetails() • getHostByName() • getHostname() • getIP() • getStatus() • ping() • probe_recv • restore() • save() • scan() • setAPIP() • setConfig() • setIP() • setSNTP() • sta_joined • sta_left • startAP() • stopAP() • turbo()
Класс WioLTE • A4 • A6 • D20 • D38 • I2C • LED() • setGrovePower() • setLEDPower() • UART
Библиотека WIZnet • connect()
Класс WLAN • connect() • disconnect() • getIP() • reconnect() • setIP()

Источник — http://wikihandbk.com/ruwiki/index.php?title=Espruino:Примеры/Графический_веб-интерфейс&oldid=7738372