Шаблон класса / Class Template

Новые релизы, обновления и т.п.

Модератор: immortal

Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Шаблон класса / Class Template

Сообщение nick7zmail » Пт авг 31, 2018 8:31 pm

Я половину вопроса решил. Приконектился к вебсокету.
Осталось у Сергея выпытать как подписаться на обновление из яваскрипта)). Уже достал поди его.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
tarasfrompir
Сообщения: 3216
Зарегистрирован: Ср мар 02, 2016 8:18 pm
Откуда: Украина Пирятин
Благодарил (а): 223 раза
Поблагодарили: 815 раз

Re: Шаблон класса / Class Template

Сообщение tarasfrompir » Пт авг 31, 2018 10:48 pm

ну надеюсь о результатах отпишешся ?
Спасибо нам ПОМОЖЕТ..!
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Шаблон класса / Class Template

Сообщение nick7zmail » Сб сен 01, 2018 6:04 am

Конечно.

Отправлено с моего Xperia XZ1 Compact через Tapatalk

Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Шаблон класса / Class Template

Сообщение nick7zmail » Вс сен 02, 2018 9:27 am

Делюсь)) Правда немного в другой теме, но суть - всё работает))
https://majordomo.smartliving.ru/forum/ ... 328#p86328
За это сообщение автора nick7zmail поблагодарил:
tarasfrompir (Вс сен 02, 2018 12:13 pm)
Рейтинг: 1.16%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
tarasfrompir
Сообщения: 3216
Зарегистрирован: Ср мар 02, 2016 8:18 pm
Откуда: Украина Пирятин
Благодарил (а): 223 раза
Поблагодарили: 815 раз

Re: Шаблон класса / Class Template

Сообщение tarasfrompir » Вс сен 02, 2018 12:13 pm

nick7zmail писал(а):
Вс сен 02, 2018 9:27 am
Делюсь)) Правда немного в другой теме, но суть - всё работает))
https://majordomo.smartliving.ru/forum/ ... 328#p86328
Плохо поделился - в примере чего нибудь можна ?
Ато я только так хоть что то разберу ...
Я то понял что темп1 и есть та переменная в которую все попадает , но хоть для более глубокого понимания можна что то показать :oops: :oops: :oops: :?: :?: :?:
Спасибо нам ПОМОЖЕТ..!
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Шаблон класса / Class Template

Сообщение nick7zmail » Вс сен 02, 2018 3:45 pm

Ну я максимально коротко и по делу постарался....для виджетов на сценах - первая часть того сообщения отпадает, т.к. вебсокеты в сценах уже подключены. Остаётся только 2-я часть. Вот пример индикатора подключенного через %Объект.свойство% и его сравнение с таким же индикатором через сокеты.
ScreenCaptureProject3_1.gif
ScreenCaptureProject3_1.gif (8.71 МБ) 4271 просмотр
Сори за качество но пришлось его сильно урезать, чтобы гифку вставить. А теперь угадай где какой)))

Вот код первого
СпойлерПоказать

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

    <table>
        <tbody>
        <tr>
            <td width="100%">
                <canvas id="canvasRadial4" width="201" height="201"></canvas>
            </td>
        </tr>
    </tbody></table>


<script>
    var radial4;
	init2();

    function init2() {
        // Define some sections
        var sections = [steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
                        steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)') ],

            // Define one area
            areas = [steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)')],

            // Define value gradient for bargraph
            valGrad = new steelseries.gradientWrapper(  0,
                                                        100,
                                                        [ 0, 0.33, 0.66, 0.85, 1],
                                                        [ new steelseries.rgbaColor(0, 0, 200, 1),
                                                          new steelseries.rgbaColor(0, 200, 0, 1),
                                                          new steelseries.rgbaColor(200, 200, 0, 1),
                                                          new steelseries.rgbaColor(200, 0, 0, 1),
                                                          new steelseries.rgbaColor(200, 0, 0, 1) ]);


        radial4 = new steelseries.Radial('canvasRadial4', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 201,
                            section: sections,
                            area: areas,
                            titleString: "Title",
                            unitString: "Type4",
                            threshold: 50,
                            lcdVisible: true
                        });
		radial4.setValueAnimated(%Sensor_humidity02.value%);

    }

</script>
и второго
СпойлерПоказать

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

    <table>
        <tbody>
        <tr>
            <td width="100%">
                <canvas id="canvasRadial3" width="201" height="201"></canvas>
            </td>
        </tr>
    </tbody></table>
<script language='javascript'>
$.subscribe('wsConnected', function (_) {
         var payload;
         payload = new Object();
         payload.action = 'Subscribe';
         payload.data = new Object();
         payload.data.TYPE='properties';
         payload.data.PROPERTIES='sensor_humidity02.value';
         wsSocket.send(JSON.stringify(payload));
        });
function processPropertiesUpdate(data) {
         var obj=jQuery.parseJSON(data);
         var objCnt = obj.length;
           if (objCnt) {
              for(var i=0;i<objCnt;i++) {
               if (obj[i]['PROPERTY']=='sensor_humidity02.value') {
               rad3val=obj[i]['VALUE'];
               radial3.setValueAnimated(obj[i]['VALUE']);
      $.publish('sensor_humidity02.value.updated', obj[i]['VALUE']);}
              }
           }
        }$.subscribe('wsData', function (_, response) {
          if (response.action=='properties') {
           processPropertiesUpdate(response.data);
          }
          });
		  </script>

<script>
    var radial3;
	var rad3val;
	init();
    function init() {
        // Define some sections
        var sections = [steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
                        steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)') ],

            // Define one area
            areas = [steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)')],

            // Define value gradient for bargraph
            valGrad = new steelseries.gradientWrapper(  0,
                                                        100,
                                                        [ 0, 0.33, 0.66, 0.85, 1],
                                                        [ new steelseries.rgbaColor(0, 0, 200, 1),
                                                          new steelseries.rgbaColor(0, 200, 0, 1),
                                                          new steelseries.rgbaColor(200, 200, 0, 1),
                                                          new steelseries.rgbaColor(200, 0, 0, 1),
                                                          new steelseries.rgbaColor(200, 0, 0, 1) ]);


        radial3 = new steelseries.Radial('canvasRadial3', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 201,
                            section: sections,
                            area: areas,
                            titleString: "Title",
                            unitString: "Type4",
                            threshold: 50,
                            lcdVisible: true
                        });
    }

    function setRandomValue(gauge, range) {
        gauge.setValueAnimated(Math.random() * range);
    }


</script>
<script src="/js/tween-min.js"></script>
<script src="/js/steelseries-min.js"></script>
ну так, для сравнения. Для работы надо скачать файлики steelseries.min и tween-min из темы с оформлениями.
Так хоть понятнее стало?))
За это сообщение автора nick7zmail поблагодарили (всего 3):
tarasfrompir (Вс сен 02, 2018 8:10 pm) • Chainik (Пн сен 03, 2018 7:15 am) • samolet (Вт сен 22, 2020 8:50 pm)
Рейтинг: 3.49%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
tarasfrompir
Сообщения: 3216
Зарегистрирован: Ср мар 02, 2016 8:18 pm
Откуда: Украина Пирятин
Благодарил (а): 223 раза
Поблагодарили: 815 раз

Re: Шаблон класса / Class Template

Сообщение tarasfrompir » Вс сен 02, 2018 8:10 pm

nick7zmail писал(а):
Вс сен 02, 2018 3:45 pm
Ну я максимально коротко и по делу постарался....для виджетов на сценах - первая часть того сообщения отпадает, т.к. вебсокеты в сценах уже подключены. Остаётся только 2-я часть. Вот пример индикатора подключенного через %Объект.свойство% и его сравнение с таким же индикатором через сокеты.
ScreenCaptureProject3_1.gif
Сори за качество но пришлось его сильно урезать, чтобы гифку вставить. А теперь угадай где какой)))

Вот код первого
СпойлерПоказать

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

    <table>
        <tbody>
        <tr>
            <td width="100%">
                <canvas id="canvasRadial4" width="201" height="201"></canvas>
            </td>
        </tr>
    </tbody></table>


<script>
    var radial4;
	init2();

    function init2() {
        // Define some sections
        var sections = [steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
                        steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)') ],

            // Define one area
            areas = [steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)')],

            // Define value gradient for bargraph
            valGrad = new steelseries.gradientWrapper(  0,
                                                        100,
                                                        [ 0, 0.33, 0.66, 0.85, 1],
                                                        [ new steelseries.rgbaColor(0, 0, 200, 1),
                                                          new steelseries.rgbaColor(0, 200, 0, 1),
                                                          new steelseries.rgbaColor(200, 200, 0, 1),
                                                          new steelseries.rgbaColor(200, 0, 0, 1),
                                                          new steelseries.rgbaColor(200, 0, 0, 1) ]);


        radial4 = new steelseries.Radial('canvasRadial4', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 201,
                            section: sections,
                            area: areas,
                            titleString: "Title",
                            unitString: "Type4",
                            threshold: 50,
                            lcdVisible: true
                        });
		radial4.setValueAnimated(%Sensor_humidity02.value%);

    }

</script>
и второго
СпойлерПоказать

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

    <table>
        <tbody>
        <tr>
            <td width="100%">
                <canvas id="canvasRadial3" width="201" height="201"></canvas>
            </td>
        </tr>
    </tbody></table>
<script language='javascript'>
$.subscribe('wsConnected', function (_) {
         var payload;
         payload = new Object();
         payload.action = 'Subscribe';
         payload.data = new Object();
         payload.data.TYPE='properties';
         payload.data.PROPERTIES='sensor_humidity02.value';
         wsSocket.send(JSON.stringify(payload));
        });
function processPropertiesUpdate(data) {
         var obj=jQuery.parseJSON(data);
         var objCnt = obj.length;
           if (objCnt) {
              for(var i=0;i<objCnt;i++) {
               if (obj[i]['PROPERTY']=='sensor_humidity02.value') {
               rad3val=obj[i]['VALUE'];
               radial3.setValueAnimated(obj[i]['VALUE']);
      $.publish('sensor_humidity02.value.updated', obj[i]['VALUE']);}
              }
           }
        }$.subscribe('wsData', function (_, response) {
          if (response.action=='properties') {
           processPropertiesUpdate(response.data);
          }
          });
		  </script>

<script>
    var radial3;
	var rad3val;
	init();
    function init() {
        // Define some sections
        var sections = [steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
                        steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)') ],

            // Define one area
            areas = [steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)')],

            // Define value gradient for bargraph
            valGrad = new steelseries.gradientWrapper(  0,
                                                        100,
                                                        [ 0, 0.33, 0.66, 0.85, 1],
                                                        [ new steelseries.rgbaColor(0, 0, 200, 1),
                                                          new steelseries.rgbaColor(0, 200, 0, 1),
                                                          new steelseries.rgbaColor(200, 200, 0, 1),
                                                          new steelseries.rgbaColor(200, 0, 0, 1),
                                                          new steelseries.rgbaColor(200, 0, 0, 1) ]);


        radial3 = new steelseries.Radial('canvasRadial3', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 201,
                            section: sections,
                            area: areas,
                            titleString: "Title",
                            unitString: "Type4",
                            threshold: 50,
                            lcdVisible: true
                        });
    }

    function setRandomValue(gauge, range) {
        gauge.setValueAnimated(Math.random() * range);
    }


</script>
<script src="/js/tween-min.js"></script>
<script src="/js/steelseries-min.js"></script>
ну так, для сравнения. Для работы надо скачать файлики steelseries.min и tween-min из темы с оформлениями.
Так хоть понятнее стало?))
Сделал как все написано - неподнялось - не отображает метрометра
Спасибо нам ПОМОЖЕТ..!
Chainik
Сообщения: 1462
Зарегистрирован: Вс янв 10, 2016 11:05 am
Благодарил (а): 260 раз
Поблагодарили: 454 раза

Re: Шаблон класса / Class Template

Сообщение Chainik » Вс сен 02, 2018 8:32 pm

Подтверждаю - не отображает.
Файлы steelseries-min.js и tween-min.js в \htdocs\js\ положил.
Объект sensor_humidity02 со свойством value создал. Значение свойства value вписал.
Не "взлетело". Что может быть не доделано?
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Шаблон класса / Class Template

Сообщение nick7zmail » Вс сен 02, 2018 9:43 pm

Всё вписали в html блок? Или что-то в "дополнительный яваскрипт код"? Туда ничего не надо вписывать. Всё только в основное поле состояния.
И я так...просто ради примера накидал...не обязательно повторять...можно в своём чём нить пробовать))
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
tarasfrompir
Сообщения: 3216
Зарегистрирован: Ср мар 02, 2016 8:18 pm
Откуда: Украина Пирятин
Благодарил (а): 223 раза
Поблагодарили: 815 раз

Re: Шаблон класса / Class Template

Сообщение tarasfrompir » Вс сен 02, 2018 10:14 pm

https://canvas-gauges.com/documentation/examples/ даже это пробую прикрутить пока что с аниме - нифиге
Спасибо нам ПОМОЖЕТ..!
Ответить