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

Выводим время в SVG-файл на семи сегментный индикатор. Шаг №70

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

Итак начнем с времени. Время как правило необходимо для удобства пользователя находящегося на странице, а также в нашем случае ели Вы следите за проектом, то у нас присутствует время в самом физическом устройстве. Так давайте, веб — интерфейс  контроллера, также немного подтянем.  Для этого мы используем javascript, а именно объект Date. В коде, ниже, использована следующая конструкция без аргументов var d = new Date (); — что значит вызов текущей даты и времени. Все! Переменная d ссылается на объект. Теперь нас интересует часы и минуты. Для их  вызова мы используем get-методы: getHours (), getMinutes ().
var min = d.getMinutes ();
var hour = d.getHours ();

Время в SVG-файле.

Вот в принципе и все время у нас в руках. Ниже код javascript , где мы получаем время, разделяем и соответственно той или иной цифре меняем цвет самого объекта сегмента. По умолчанию интерактивный web-interface при открытии страницы отображает текущее время. Цифры отображаются немного не синхронно,  что можно исправить уменьшением времени срабатывания функции etInterval (function ()), у себя оставил как есть. Также добавлен код отслеживания состояния кнопок. Верхняя запускает анимацию, которую мы рассмотрели в статье №66, которая отрабатывает один раз, и нижняя — снова запускает часы. Ниже кусок кода javascript.

//Получаем доступ к svg
window.svgload_html = function (evt) {
      //Получаем доступ к файлу, разделительным точкам для времени и кнопкам
      var svg = $(evt.target), f = false, p1=svg.find («#point1»);
      p2=svg.find («#point2»), b1=svg.find («#lake»), b2=svg.find («#lake1»);
      var dig = []; //Массив для хранения значения времени
      var i = 0; //Счетчик
      var dig1 = []; //Массив для хранения id объекта
.................
      var dig7 = [];
      var but1 = 0; //Переменные-защелки для включения анимации, времени
      var but2 = 1;
      /*Сохраняем и находим элементы по номеру  Я немного сократил. Как Вы понимате у нас сем массивов — для сегментов, по 4 элемента в каждом. Здесь немного похож код на Си, который мы писали для физического индикатора (статья №5)*/
      dig1[0]=svg.find («#dig11»), ................, dig7[0]=svg.find («#dig71»);
      dig1[1]=svg.find («#dig12»), ................, dig7[1]=svg.find («#dig72»);
      dig1[2]=svg.find («#dig13»), ................, dig7[2]=svg.find («#dig73»);
      dig1[3]=svg.find («#dig14»), ................, dig7[3]=svg.find («#dig74»);
//Опрос нажатия кнопок по сравнению изменения цвета из файла SVG (Смотри статью №65)
setInterval (function () {
           if (b1.attr («fill») == «#EF1818»){
           but1=1; but2=0; }
           if (b2.attr («fill») == «#EF1818»){
           but1=0; but2=1; }
      }, 10 );

//Меняем цвет текста и мигаем точками для времени (см. статью №62)
setInterval (function () {
         if (but1 == 0){
             f = !f;
             svg.children («#label2»).text ("Home T = "+result['t']);
             svg.children («#label2»).attr («fill», f ? «green» : «blue»);
             p1.attr («fill», f ? «#EF1818» : «#646464»);
             p2.attr («fill», f ? «#EF1818» : «#646464»); }
          }, 1000 );

//Выводим время на индикатор
setInterval (function () {
           if (but1 == 0){
                f = !f;
                var d = new Date ();
                var min = d.getMinutes ();
                var hour = d.getHours ();
//Разделяем часы и минуты по цифрам
                dig[0] = Math.floor (hour/10);
                dig[1] = Math.floor (((hour/10) — Math.floor (hour/10))*10); /*Здесь дополнительно использую Math.floor для более стабильной работы*/
                dig[2] = Math.floor (min/10);
                dig[3] = Math.floor (((min/10) — Math.floor (min/10))*10);
                if (i>=5)  //5 т.к. при 3 не выводится последний элемент при 4 виснет.
i=0;
/*Выбор цифры сохраненной в массиве, и изменение цвета в соответствующем сегменте. От 0 до 9. */
 if (dig[i]==0){
                   dig1[i].attr («fill», f ? «#646464» : «#EF1818»);
                   dig2[i].attr («fill», f ? «#646464» : «#EF1818»);
                   dig3[i].attr («fill», f ? «#646464» : «#EF1818»);
                   dig4[i].attr («fill», f ? «#646464» : «#EF1818»);
                   dig5[i].attr («fill», f ? «#646464» : «#EF1818»);
                   dig6[i].attr («fill», f ? «#646464» : «#EF1818»);
               }
               if (dig[i]==1){
                   dig2[i].attr («fill», f ? «#646464» : «#EF1818»);
                   dig3[i].attr («fill», f ? «#646464» : «#EF1818»);
               }
         ............................................................
               if (dig[i]==9){
                    dig1[i].attr («fill», f ? «#EF1818» : «#646464»);
                    dig2[i].attr («fill», f ? «#EF1818» : «#646464»);
                    dig3[i].attr («fill», f ? «#EF1818» : «#646464»);
                    dig4[i].attr («fill», f ? «#EF1818» : «#646464»);
                    dig6[i].attr («fill», f ? «#EF1818» : «#646464»);
                    dig7[i].attr («fill», f ? «#EF1818» : «#646464»);
                }     ++i;}
     }, 100);  };

Запускаем часы в SVG по событию.Как Вы  видите мы обращаемся к объекту в SVG файле и меняем его цвет, за счет чего создаем эффект динамической индикации. На рисунке слева пример запуска анимации по событию. Для рассмотрения шагов по проектированию веб-интерфейса смотрим статью-планирование №60. Пока на данной статье мы и остановимся с веб-интерфейсом. В следующих статьях мы с Вами начнем знакомится с ОС Android, синхронизацией AVR-устройств и Android, знакомство с микроконтрллерами на базе ARM и др. На этом мы сегодня и остановимся. Всем пока.

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

Я на 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