Подписаться на получение новых статей на почту:

SVG. Web-интерфейс. Подключение, GET-параметры. Статья №62

Всем привет. Как Вы, помните, в предыдущей статье мы с вами разобрали способ построения интерактивной карты. Для которой рисовали схему устройства в программе Fritzing. Так вот теперь в этой же программе сохраним рисунок как формат svg, как на рисунке ниже. С этого момента начнем знакомство с векторной графикой. На базе которой будем проектировать интерфейс.

 SVG ( Scalable Vector Graphics) — язык разметки масштабируемой векторной графики, входит в подмножество расширяемого языка разметки XML и используется для двумерной векторной и смешанной векторно/растровой графики в формате XML. Несмотря  на то, что данный язык относительно старый (разрабатывается с 1991 года) он является актуальным и на сегодняшний день. Также следует добавить, что рисунок данного формата имеет свой DOM, что делает возожным применять CSS-правила и управлять старым добрым JavaScript'ом. Где DOM (Document Object Model — «объектная модель документа») — это не зависящий

экспорт svgот платформы и языка программный  интерфейс, позволяющий  программам  и  скриптам  получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов. Также необходимо добавить, что данный формат является открытым стандартом.

Вернемся к нашему проекту. Т.е. наш рисунок в этом формате это сплошные координаты и фигуры, как код карты-изображения. Только в отличие от последнего имеет широкий функционал, в виде различных геометрических фигур, широкого спектра визуального свойств, использования обработчика событий, анимации и сценариев, возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG. Данный формат мы можем спокойно редактировать с помощью обычного текстового редактора. И многое другое. Сегодня наша с Вами задача, подключить и получить доступ к svg-файлу из html используя javascript. Вывести Get –параметры. Ниже основная структура файла:

1. Стандартный XML-заголовок (объявление указывающее версию XML и кодировку символов (encoding))
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2. Заголовок DOCTYPE, определяющий тип документа (может и небыть)
<!DOCTYPE svg PUBLIC «-//W3C//DTD SVG 1.1//EN» «http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd»>
3. И последняя корневой элемент документа с указанием пространства имен SVG.
Завершается документ всегда закрытием корневого тега </svg> .

Вы можете просмотреть данный формат, открыв код страницы (http://ap-impulse.ru/interface.php) и найти файл <embed type="image/svg+xml"  src="Untitled Sketch_bb.svg" />, который мы получили в программе Fritzing. Но как вы понимаете мы можем и сами рисовать -  просто набирая нужые фигуры с нужными координатами. Ниже вид нашего интерфейса, который находится по ссылке выше.

интерактивный web-интерфейс

Как видите наш рисунок идентичен карте, которую разбирали в прошлой статье за исключением того что вверху я добавил фигуру прямоугольник и поместил в нее текст. Давайте разберемся как можно подключить данный файл к себе на страницу. Способов несколько: через тег <img>, CSS: через свойство background-image, через одноимённый тег <svg >, через свойство @font-face, через теги <object>, <iframe> и <embed>. Я использовал последний <embed>.

<embed type="image/svg+xml"  src="Untitled Sketch_bb.svg" />. Смотрим код страницы по ссылке выше. 

Проверили изображение выводится на страничку. Теперь самый важный шаг – это получить доступ к элементам svg-файла. Для этого мы впишем часть скрипта непосредственно в svg файл. Для начала вписываем в заголовок svg:
onload="svgload_svg (evt);"

Ну и сам скрипт:
<defs>
     <script type="application/ecmascript"><![CDATA[
           function svgload_svg(evt) {
                var w = window, w0 = null;
                while (w && !w.svgload_html && w != w0) {
                    w0 = w;
                    w = w.parent;
                }
           if (w)
              w.svgload_html(evt);
           }
     ]]></script>
</defs>

И еще кусок кода вставляем в html, где с помощью jQuery происходит взаимодействие:
window.svgload_html = function (evt) {
     var svg = $(evt.target), f = false;
     setInterval (function () {
         f = !f;
         svg.children («#label2»).text ("Home T = «+result['t']);
         svg.children („#label2“).attr („fill“, f ? „green“ : „blue“);
     }, 1000);
};

Как Вы видите мы получаем доступ к тексту, где первый раз записываем какой то текст, второй раз меняем цвет с периодичностью 1 сек. И последние занесем в этот текст get - параметры, используя следующий код:
function getUrlVar (){
     var urlVar = window.location.search;  //получаем параметры из урла
     var arrayVar = []; //массив для хранения переменных
     var valueAndKey = []; //массив для временного хранения значения и имени переменной
     var resultArray = [];  //массив для хранения переменных
     arrayVar = (urlVar.substr (1)).split ('&'); //разбираем урл на параметры
     if (arrayVar[0]==»") return false;   //если нет переменных в урле
     for (i = 0; i < arrayVar.length; i ++) { // перебираем все переменные из урла
         valueAndKey = arrayVar[i].split ('='); // пишем в массив имя переменной и ее значение
         resultArray[valueAndKey[0]] = valueAndKey[1]; // пишем в итоговый массив имя переменной и ее значение
     }
     return resultArray; // возвращаем результат
}
// вывод сообщения со значением переменной «t» в коде выше
var result = getUrlVar ();

GET-параметр

На рисунке слева пример работы выше приведенного кода, ручного ввода параметра в картинку. Напомню что GET — запрос и параметры мы рассмотрели в статье №59.

Все друзья мы получили доступ и вывели значения прибора на страницу.  Как Вы понимаете получая доступ к каждому элементу мы можем спроектировать интерактивность на свой вкус как угодно. В следующий раз когда мы вернемся к интерфейсу мы сделаем кликабельную кнопку которая будет выполнять определенное действие, например менять картинку на индикаторе а также рассмотрим обращение к устройству с интерфейса, посылая ему GET – запрос.  На данный момент все. Пока что немного отложим данный проект и в следующих статьях рассмотрим  ПИД — регулятор на микроконтроллере на реальном примере, после чего вернемся к нашему интерфейсу. Всем пока.

Просмотрено 1724 раз.

Я на Google+

SVG. Web-интерфейс. Подключение, GET-параметры. Статья №62: 3 комментария

  1. Спасибо за информацию. С нетерпением жду когда интерфейс станет кликабельным.

  2. Разработчики nw.js приложили немало усилий для обеспечения единого event loop и построения “моста между контекстами node.js и chromium. Здесь можно почитать подробнее о технических деталях и проблемах, возникших при реализации этой задумки.

Добавить комментарий

Ваш e-mail не будет опубликован.

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting