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

Интерактивная карта контроллера. Шаг №61

Всем привет. В прошлой статье мы с вами определились с поставленной задачей по проектированию интерактивной карты, веб-интерфейса и разбора необходимых методов и технологий для этих целей. Мы начнем с интерактивной карты. Что же это такое – это, друзья, электронная карта,  которая представляет собой визуальную информацию, в отличии от обычной карты. Здесь кроме информации, которую мы получаем при чтении карты, также можем получить дополнительную информацию – наведя курсором на необходимую нам область.

В данной статье мы рассмотрим создание карты изображения с помощью HTML + javascript и подключаемых библиотек  jQuery на примере контроллера сбора данных. Все будем делать последовательно. Как всегда мы с Вами договоримся что основы того или иного языка/скрипта у нас имеются. Поэтому останавливать внимания на этом мы не будем. Ниже ссылка на кликабельную карту (http://ap-impulse.ru/Kontroler.php ) . К сожалению использование данной технологии не дало возможность с позиционировать карту в статье, поэтому открываем отдельной страницей и смотрим. Ниже рисунок нашей схемы. Такое представление дает наиболее скорейшее понимание  проекта и навигации.

Вот ее мы последовательно и разберем. Для визуальной навигации используем рисунок контроллера сбора данных нарисованный в программе Fritzing (впрочем все равно в чем рисовать, но для следующего шага это важно), на который наложим  кликабельные области. Используем HTML тег <map> </map>, который собственно говоря за карту изображения и отвечает. Ниже кусок кода с выделенной областью в виде прямоугольника, который задается в теге area, а также координаты прямоугольника, всплывающая подсказка, ссылка, и способ открытия страницы. При данном варианте, у нас будут всплывать подсказки при наведении на ту или иную область.

<html>
   <head>
       <title>Карта контролера</title>
   </head>
   <body style=" background-color:Silver; text-align:center;">
       <img src="kontroler.jpg"  alt ="Microcontroler vvoda-vyvoda"  title ="Microcontroler vvoda-vyvoda"  width="1000px" usemap="#Controller" />
       <map id="Controller" name="Controller">
           <area shape="rect" coords="10, 120, 230, 380" title="4 SEGM LED"  href=http://www.ap-impulse.ru/podklyuchaem-semisegmentnyj-indikator-i-pishem-programmu-shag-5/  target="_blank" />
       </map
       <p> Контроллер сбора данных </p>
   </body>
</html>

Но как говорится аппетит приходит во время еды. Здесь хочется добавить подсвечивание выделяемой области. Но функционал данного тега такое не позволяет. Для расширения функционала добавим  javascript – подсветка областей. А именно библиотеку  -  jQuery, которая фокусируется на взаимодействии JavaScript. В данном случае нас интересует функция подсветки области maphilight.js, но для начала друзья давайте установим библиотеку jQuery, которая нам  пригодится в дальнейшем. Скачиваем архив с сайта  http://jquery.com/download/ (желательно версии 1.x,  2.x,). Копируем в папку на сайт, например js/jquery.js . Подключение библиотеки будет выглядеть следующим образом
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.maphilight.min.js"></script>
<script type="text/javascript">$(function () {$('.map').maphilight ();});</script>
Либо данные библиотеки можно подгружать прямо с сервера (Например <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>), а можно установить отдельно, как у нас. Как видите мы подключили две библиотеки, где первая (компактная версия  jquery-1.12.4.min.js) используется для разработки веб-сайтов и скриптов. Вторая — MapHilight — динамическое выделение областей карты кликом. Третья строка – это запуск данного плагина (библиотеки) для подсветки областей. Немного разъясним функцию $() и jQuery () - это одно и то же и является основной функцией, function () – служебное слово для создания функции, .map-это класс нашей карты, maphilight () — метод для класса карты.
Если мы правильно подключили то у нас получаться подсвечиваемые области, как на рисунке слева.

Для проверки на работоспособность и правильное подключение jQuery, можно добавить следующей код, в результате выполнения которого будет появляться диалоговое окно, если библиотека подключена — jQuery on.
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
       if (window.jQuery) alert («jQuery on»);
       else alert («jQuery off»);
</script>

Как на рисунке ниже.

Ну и последнее, мы к карте справа добавили описание каждой области, которая при наведении выделяет соответствующую ей область. Здесь мы добавили javascript, которое срабатывает по событию — наведение курсором.

 

$('#LEDlink').mouseover (function (e) {
     $('#LED').mouseover ();
}).mouseout (function (e) {
       $('#LED').mouseout ();
}).click (function (e) { e.preventDefault (); });

Где событие onmouseover (mouseover) срабатывает, когда курсор мыши наводится на элемент, к которому добавлен атрибут onmouseover. Работает в связке с mouseout (onmouseout). Еще хочется добавить, что когда вы будете просматривать код страницы, то в теге area можете встретить атрибут data (универсальный атрибут в HTML5), добавляется к любому тегу и с помощью него, мы например можем изменить стиль выделяемой области:

<area id="LED" shape="rect" coords="10, 120, 230, 380" title="4 SEGM LED" data-maphilight='{"strokeColor":"ff0000","strokeWidth":2,"fillColor":"0000ff","fillOpacity":0.3}'  href="http://www.ap-impulse.ru/podklyuchaem-semisegmentnyj-indikator-i-pishem-programmu-shag-5/" target="_blank" />

Как видите код простой, здесь главное все разложить по полочкам. Каждой области задали id и соответствующую ссылку. Непосредственно на самой карте можете просмотреть код страницы, который состоит из выше описанных шагов.

Был соблазн конечно сделать на этой основе интерфейс, но функционал данных тегов этого не позволяет. Поэтому в следующей статье мы с вами познакомимся с SVG, и на этом же рисунке с помощью javascript начнем пошагово проектировать веб-интерфейс. На этом на сегодня и остановимся. Всем пока.

 

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

Я на Google+

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

Ваш 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