Обновление HTML блока по State

Использование системы в различных ситуациях, вопросы программирования сценариев.

Модератор: immortal

Ответить
PavloP
Сообщения: 13
Зарегистрирован: Пт авг 05, 2016 11:52 am
Благодарил (а): 6 раз
Поблагодарили: 0

Обновление HTML блока по State

Сообщение PavloP » Пн ноя 20, 2017 7:04 pm

Доброго времени суток
Появилась проблемка. Создал блок, который показывает значение температуры и хотел в случае если температура упадёт ниже чем заданное значение чтобы фон становился синеватым. То есть создал HTML-блок, в котором создал статус Normal, код для обычного белого фона(background-color:white) и вывода значения с условием "если значение выше либо равно заданному" и создал статус Low, в коде тот же блок, только с измененным background-color и условие "если значение ниже заданного". Так вот эта система работает, но только через перезагрузку страницы. То есть охладил сенсор - он всё так же белый. Перегрузил страницу - сразу же синий фон. Нагрел обратно - всё ещё синий, перегрузил странцу - фон белый.

Подскажите пожалуйста, можно ли сделать смену цвета по смене статуса без перегрузки страницы?
Majordomo на Raspberry Pi 3. Датчики Xiaomi Home и подключенные через NodeJS
Аватара пользователя
Vovix
Сообщения: 1155
Зарегистрирован: Пн янв 27, 2014 1:43 am
Откуда: г.Ижевск
Благодарил (а): 60 раз
Поблагодарили: 531 раз
Контактная информация:

Re: Обновление HTML блока по State

Сообщение Vovix » Вт ноя 21, 2017 9:33 am

PavloP писал(а):Доброго времени суток
Появилась проблемка. Создал блок, который показывает значение температуры и хотел в случае если температура упадёт ниже чем заданное значение чтобы фон становился синеватым. То есть создал HTML-блок, в котором создал статус Normal, код для обычного белого фона(background-color:white) и вывода значения с условием "если значение выше либо равно заданному" и создал статус Low, в коде тот же блок, только с измененным background-color и условие "если значение ниже заданного". Так вот эта система работает, но только через перезагрузку страницы. То есть охладил сенсор - он всё так же белый. Перегрузил страницу - сразу же синий фон. Нагрел обратно - всё ещё синий, перегрузил странцу - фон белый.

Подскажите пожалуйста, можно ли сделать смену цвета по смене статуса без перегрузки страницы?
а где блок то создали?
в домашних страницах? на сцене?

все это решается штатными средствами - механизмы обновления данных работают в MJD через WebSockets или AJAX
Но если хочется "поизвращаться" (я так иногда делаю), то можно пойти своим путем, вот вам для "затравки" мой
код применяемый мной на одной из домашних страниц (отображаемые данные меняются каждые 2 сек.) :
как это выглядитПоказать
Скриншот 2017-11-21 10.29.16.png
Скриншот 2017-11-21 10.29.16.png (88.57 КБ) 3347 просмотров
код этого безобразияПоказать

Код: Выделить всё

<script type="text/javascript">
 
function htmlspecialchars(html) { 
      // Сначала необходимо заменить & 
      html = html.replace(/&/g, "&"); 
      // А затем всё остальное в любой последовательности 
      html = html.replace(/</g, "<"); 
      html = html.replace(/>/g, ">"); 
      html = html.replace(/"/g, """); 
      // Возвращаем полученное значение 
      return html; 
}
 
 
// функция получения cookie по имени
function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
 
  if ( results )
    return ( unescape ( results[2] ) );
  else
    return null;
}

 // запуск таймера на 2 секунды
setInterval(function() {

 
$.get("../objects/", { object:(get_cookie ('PingObjName')), op:"get", p:"description" })
.done(function(data) {
 $("#nameust").html(data=="" ? get_cookie ('PingObjName') : data);
 
 switch (get_cookie('linked')) {
  case "1":
         $("#ccc1").html("привязан");
         $("#ccc1").removeClass('label-danger');
         $("#ccc1").addClass('label-success');
    break;
  default:
          $("#ccc1").html("НЕТ ПРИВЯЗКИ");
         $("#ccc1").removeClass('label-success');
         $("#ccc1").addClass('label-danger');       
}

 $("#bbb0").html((get_cookie('linked'))=="1" ? get_cookie ('PingObjName') : "нет связанного объекта");
});

$.get("../objects/", { object:(get_cookie ('PingObjName')), op:"get", p:"online" })
.done(function(data) {

 switch (data) {
  case "1":
         $("#ccc2").html("ON LINE");
         $("#ccc2").removeClass('label-danger');
         $("#ccc2").removeClass('label-default');
         $("#ccc2").addClass('label-success');
    break;
  case "2":
         $("#ccc2").html("OFF LINE");
         $("#ccc2").removeClass('label-success');
         $("#ccc2").removeClass('label-default');
         $("#ccc2").addClass('label-danger');
    break;
  default:
          $("#ccc2").html("не известно");
         $("#ccc2").removeClass('label-success');
         $("#ccc2").removeClass('label-danger');
         $("#ccc2").addClass('label-default');       
}

});
 
 
$.get("../objects/", { object:(get_cookie ('PingObjName')), op:"get", p:"different" })
.done(function(data) {
 $("#bbb1").html(data=="" ? "нет данных" : data);
});

$.get("../objects/", { object:(get_cookie ('PingObjName')), op:"get", p:"vendor" })
.done(function(data) {
$("#bbb2").html(data=="" ? "нет данных" : data);
}); 

$.get("../objects/", { object:(get_cookie ('PingObjName')), op:"get", p:"IPint" })
.done(function(data) {
$("#bbb3").html(data=="" ? "нет данных" : data);
});
 
$.get("../objects/", { object:(get_cookie ('PingObjName')), op:"get", p:"MAC" })
.done(function(data) {
$("#bbb4").html(data=="" ? "нет данных" : data);
});

$.get("../objects/", { object:(get_cookie ('PingObjName')), op:"get", p:"IPext" })
.done(function(data) {
$("#bbb5").html(data=="" ? "нет" : data);
}); 
 
$.get("../objects/", { object:(get_cookie ('PingObjName')), op:"get", p:"htmlDo" })
.done(function(data) {
$("#bbb6").html(htmlspecialchars(data=="" ? "нет данных" : data));
}); 

}, 2000);
</script>

<div align="center" style="font-size:14px;">
    <span style="font-size:24px; color:orange;">
        <b id="nameust"></b>
     </span>
    <br>
    <span id="ccc1" class="label label-success" style="font-size:11px;"></span>
    <span id="ccc2" class="label label-success" style="font-size:11px;"></span>
    <br><br>
 
    <table class="table table-striped table-condensed">
     
        <tbody>
            <tr>
                <td id="aaa0">Связанный объект:&nbsp;</td>
                <td align="right"><span id="bbb0" style="font-size:12px; color:orange;"></span></td>
            </tr>
            <tr>
                <td id="aaa1">Описание:&nbsp;</td>
                <td align="right"><span id="bbb1" style="font-size:12px; color:orange;"></span></td>
            </tr> 
            <tr>
                <td id="aaa2">Производитель:&nbsp;</td>
                <td align="right"><span id="bbb2" style="font-size:12px; color:orange;"></span></td>
            </tr> 
            <tr>
                <td id="aaa3">Внутренний IP:&nbsp;</td>
                <td align="right"><span id="bbb3" style="font-size:12px; color:orange;"></span></td>
            </tr>
             <tr>
                <td id="aaa4">MAС адрес:&nbsp;</td>
                <td align="right"><span id="bbb4" style="font-size:12px; color:orange;"></span></td>
            </tr>
             <tr>
                <td id="aaa5">Внешний IP:&nbsp;</td>
                <td align="right"><span id="bbb5" style="font-size:12px; color:orange;"></span></td>
            </tr>
            <tr>
                <td id="aaa6">Код для <br>управления <br>из меню:&nbsp;</td>
                <td align="right"><pre id="bbb6" style="font-size:10px; text-align:left; color:black; background-color:grey; padding:3px; margin:2px"></pre></td>
            </tr>
<!--      <tr>
                <td id="aaa7">Внешний IP:&nbsp;</td>
                <td align="right"><span id="bbb7" style="font-size:12px; color:orange;"></span></td>
            </tr>
-->
        </tbody>
     
    </table>

</div>
Мой -CONNECT-
Windows 7(PHP 7.2) + Raspberry Pi(освещение на 1-Wire) + MP751(управление) + ESP8266(сенсоры) + LAN(сенсоры)
-=: Если вам помогло моё сообщение, нажмите кнопку "Поблагодарить за сообщение автора: Vovix" (кнопка Спасибо) справа! :=-
PavloP
Сообщения: 13
Зарегистрирован: Пт авг 05, 2016 11:52 am
Благодарил (а): 6 раз
Поблагодарили: 0

Re: Обновление HTML блока по State

Сообщение PavloP » Вт ноя 21, 2017 1:00 pm

HTML-блок создал на сцене.
Есть вопрос - откуда вы запускаете javascript? Я попробовал просто в консоль матюкнуться из этого же HTML-блока, но в консоли запись появилась только дважды при перегрузке страницы
Majordomo на Raspberry Pi 3. Датчики Xiaomi Home и подключенные через NodeJS
Аватара пользователя
Vovix
Сообщения: 1155
Зарегистрирован: Пн янв 27, 2014 1:43 am
Откуда: г.Ижевск
Благодарил (а): 60 раз
Поблагодарили: 531 раз
Контактная информация:

Re: Обновление HTML блока по State

Сообщение Vovix » Вт ноя 21, 2017 4:43 pm

PavloP писал(а):HTML-блок создал на сцене.
Есть вопрос - откуда вы запускаете javascript? Я попробовал просто в консоль матюкнуться из этого же HTML-блока, но в консоли запись появилась только дважды при перегрузке страницы
в сценах для Javascript есть специальные поля (места, блоки)!
Мой -CONNECT-
Windows 7(PHP 7.2) + Raspberry Pi(освещение на 1-Wire) + MP751(управление) + ESP8266(сенсоры) + LAN(сенсоры)
-=: Если вам помогло моё сообщение, нажмите кнопку "Поблагодарить за сообщение автора: Vovix" (кнопка Спасибо) справа! :=-
Аватара пользователя
sergejey
Site Admin
Сообщения: 4284
Зарегистрирован: Пн сен 05, 2011 6:48 pm
Откуда: Минск, Беларусь
Благодарил (а): 75 раз
Поблагодарили: 1559 раз
Контактная информация:

Re: Обновление HTML блока по State

Сообщение sergejey » Ср ноя 22, 2017 1:08 pm

Вообще-то условный статус должен штатно переключать блок без перезагрузки страницы. Ошибка скорее в том, что страница не отлавливает событие изменения условий. Попробуйте открыть сцену с дополнительным параметром в адресной строке disable_websockets=1

Сергей Джейгало, разработчик MajorDoMo
Идеи, ошибки -- за предложениями по исправлению и развитию слежу только здесь!
Профиль Connect -- информация, сотрудничество, услуги
Ответить