steel series на домашних страницах

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

Модератор: immortal

Аватара пользователя
xor
Сообщения: 2038
Зарегистрирован: Сб ноя 22, 2014 8:45 pm
Благодарил (а): 284 раза
Поблагодарили: 629 раз

steel series на домашних страницах

Сообщение xor » Вс фев 19, 2017 3:00 pm

Может, кому-то пригодится:

Приложение к viewtopic.php?f=5&t=2810&start=70#p41624
пример вывода одиночного спидометра
СпидометрПоказать

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

<body onload="init()">

<canvas id="canvasTin" width="201" height="201"></canvas>
 
<script>
    var scroll = false;
    var RadialTin;
    function init() {
        // Initialzing gauge
        // Define some sections
        //раскрасим шкалу -15..+15 голубой
        //15...25 зеленый
        //-30...-15,25...30 желтый
        var sections = [steelseries.Section(-15, 15, 'rgba(0, 0, 220, 0.3)'),
                        steelseries.Section(15, 25, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(-30, -15, 'rgba(220, 220, 0, 0.3)'),
                        steelseries.Section(25, 30, 'rgba(220, 220, 0, 0.3)') ],

            // Define one area
            // розовый сектор
            areas = [steelseries.Section(30, 40, 'rgba(220, 0, 0, 0.3)'),
                     steelseries.Section(-40, -30, 'rgba(220, 0, 0, 0.3)'),],
            //treshold = 25 - лампочка начинает мигать
        RadialTin = new steelseries.Radial('canvasTin', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 201,
                            section: sections,
                            area: areas,
                            minValue:-40,
                            maxValue:40,
                            titleString: "Температура",
                            unitString: "Градусы",
                            threshold: 25,
                            lcdVisible: true
                        });
       RadialTin.setBackgroundColor(steelseries.BackgroundColor.WHITE);

        //upd
        live_upd("/pChart/?op=value&p=ws.tempInside", RadialTin); //сразу обновим  ////// вставьте свое Объект.Свойство
        

        // Start the update
        //читаем данные каждые 7 с
        setInterval(function(){ live_upd("/pChart/?op=value&p=ws.tempInside", RadialTin); },7000); // вставьте свое Объект.Свойство
}

    function live_upd(url,gauge) {
             $.ajax({
             url: url,
             }).done(function(data) { 
              if (data!='') {gauge.setValueAnimated(parseFloat(data));}
             });
     }


</script>

 
<script src="../SteelSeries/tween-min.js"></script>
<script src="../SteelSeries/steelseries-min.js"></script>
</body>
Одиночный одометр
ОдометрПоказать

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

<body onload="init()">
<canvas id="canvasOdometer1" width="189" height="40"></canvas>

 
<script>
    var odometer1, n = 999999997.7;
    function init() {
       odometer1 = new steelseries.Odometer('canvasOdometer1', {
 
 digits:12,
 decimals:2
 });

  

        // Start the update
        //читаем данные каждые 2 с
        setInterval(function(){ live_upd("/pChart/?op=value&p=ThisComputer.cycle_execsRun", odometer1); },2000);  // вставьте свое Объект.Свойство
}

    function live_upd(url,gauge) {
             $.ajax({
             url: url,
             }).done(function(data) { 
              if (data!='') {gauge.setValueAnimated(parseFloat(data));}
             });
     }


</script>

 
<script src="../SteelSeries/tween-min.js"></script>
<script src="../SteelSeries/steelseries-min.js"></script>
</body>
Полный комплект свойств можно увидеть при просмотре файла steelseries.js
Например, для одометра

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

            height = (undefined === parameters.height ? 0 : parameters.height),
            digits = (undefined === parameters.digits ? 6 : parameters.digits),
            decimals = (undefined === parameters.decimals ? 1 : parameters.decimals),
            decimalBackColor = (undefined === parameters.decimalBackColor ? '#F0F0F0' : parameters.decimalBackColor),
            decimalForeColor = (undefined === parameters.decimalForeColor ? '#F01010' : parameters.decimalForeColor),
            font = (undefined === parameters.font ? 'sans-serif' : parameters.font),
            value = (undefined === parameters.value ? 0 : parameters.value),
            valueBackColor = (undefined === parameters.valueBackColor ? '#050505' : parameters.valueBackColor),
            valueForeColor = (undefined === parameters.valueForeColor ? '#F8F8F8' : parameters.valueForeColor),
            wobbleFactor = (undefined === parameters.wobbleFactor ? 0.07 : parameters.wobbleFactor) 
За это сообщение автора xor поблагодарили (всего 3):
serghei (Вс фев 19, 2017 4:31 pm) • ipz (Вт май 09, 2017 11:04 pm) • andrey1509 (Сб янв 13, 2018 8:57 pm)
Рейтинг: 3.49%
serghei
Сообщения: 2575
Зарегистрирован: Пт ноя 06, 2015 10:22 am
Откуда: Кишинёв
Благодарил (а): 303 раза
Поблагодарили: 282 раза

Re: steel series на домашних страницах

Сообщение serghei » Вс фев 19, 2017 4:29 pm

A-A-A-A--- ))))) Громадное спасибо!!!! Буду попробывать ))) ! Теперь только пуля меня остановит )))) !!!!!!
Здорово смотрится , но вот надо же одометр в рамку забыли одеть ((((((
Осталось разобраться с цветными линейными приборами. Что то браузеру не нравится
СпойлерПоказать

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

     // Define value gradient for bargraph
        var 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) ]);
Ну и картинка
СпойлерПоказать
Тест страницы.jpg
Тест страницы.jpg (167.11 КБ) 9303 просмотра
Еще раз спасибо !!!
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
ipz
Сообщения: 238
Зарегистрирован: Чт ноя 26, 2015 10:54 pm
Благодарил (а): 38 раз
Поблагодарили: 45 раз

Re: steel series на домашних страницах

Сообщение ipz » Вт май 09, 2017 11:17 pm

Вопрос к знающим. Не стоит ли вынести строки

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

<script src="../SteelSeries/tween-min.js"></script>
<script src="../SteelSeries/steelseries-min.js"></script>
На уровень
/templates/application.html, /freeboard/index.php и т.п.
Не будут ли эти библиотеки подгружаться из каждого шаблона или домашней страницы? Или не важно?

PS: Кстати, в библиотеке по-умолчанию не работают RadialBargraph. Даже в примерах из поставки. Как будто из там нет))
Clipboard01.jpg
Clipboard01.jpg (5.38 КБ) 8846 просмотров
Нужно внести изменения в исходниках
как написано здесь / точнее здесь. Автор почему-то не исправил за полгода.
Выглядят очень даже, по-моемуПоказать
Clipboard02.jpg
Clipboard02.jpg (44.38 КБ) 8845 просмотров
За это сообщение автора ipz поблагодарил:
serghei (Сб янв 13, 2018 10:58 am)
Рейтинг: 1.16%
andrey1509
Сообщения: 87
Зарегистрирован: Ср ноя 09, 2016 10:21 am
Откуда: Липецкая обл.
Благодарил (а): 22 раза
Поблагодарили: 2 раза

Re: steel series на домашних страницах

Сообщение andrey1509 » Пт янв 12, 2018 7:57 pm

Здравствуйте.
Не могу заставить считать одометр из примера
Меняю так - //читаем данные каждые 2 с
setInterval(function(){ live_upd("/pChart/?op=value&p=ElectroCounter.Total", odometer1); },2000); // вставьте свое Объект.Свойство
} - но в ответе одни нули. В Объект.Свойство значение меняется.
Что не так ?
Debian Linux 7,Linux 3.2.0-4-686-pae on i686
Intel(R) Celeron(R) CPU 1.70GHz, 1 cores
serghei
Сообщения: 2575
Зарегистрирован: Пт ноя 06, 2015 10:22 am
Откуда: Кишинёв
Благодарил (а): 303 раза
Поблагодарили: 282 раза

Re: steel series на домашних страницах

Сообщение serghei » Пт янв 12, 2018 10:55 pm

А что при этом не нравиться браузеру ? Какие ошибки выдает? Остальные спидометры работают?
На картинке видно , что все работает , а батарейка не нравиться )) (Это на ардуине. Смысл тот же).(( Это ж ровно год прошёл...))
СпойлерПоказать
Steel_AMS.jpg
Steel_AMS.jpg (289.69 КБ) 7825 просмотров
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
Аватара пользователя
xor
Сообщения: 2038
Зарегистрирован: Сб ноя 22, 2014 8:45 pm
Благодарил (а): 284 раза
Поблагодарили: 629 раз

Re: steel series на домашних страницах

Сообщение xor » Сб янв 13, 2018 1:04 am

По приведённому выше коду
183 строка battery1 = new steelseries.Battery(...
196 line batVal=battery1; <---- так можно?

По заданному ранее вопросу ответил в личку
За это сообщение автора xor поблагодарил:
serghei (Сб янв 13, 2018 1:06 am)
Рейтинг: 1.16%
serghei
Сообщения: 2575
Зарегистрирован: Пт ноя 06, 2015 10:22 am
Откуда: Кишинёв
Благодарил (а): 303 раза
Поблагодарили: 282 раза

Re: steel series на домашних страницах

Сообщение serghei » Сб янв 13, 2018 1:08 am

Спасибо! В МД вроде получается. Буду разбираться с ардуиной.

Классно получилось. Жаль только цифрового вывода нет. Только по цвету и длине " батарейки" ориентироваться.

А вот с БарГрафом что то не взлетело. В библиотеке добавил код. ....Ну уже завтра добью......
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
Аватара пользователя
xor
Сообщения: 2038
Зарегистрирован: Сб ноя 22, 2014 8:45 pm
Благодарил (а): 284 раза
Поблагодарили: 629 раз

Re: steel series на домашних страницах

Сообщение xor » Сб янв 13, 2018 1:25 am

Да, и общее замечание:
вместо
/pChart/?op=value&p=object.property
можно пользоваться
/objects/?op=get&object=object&p=property
serghei
Сообщения: 2575
Зарегистрирован: Пт ноя 06, 2015 10:22 am
Откуда: Кишинёв
Благодарил (а): 303 раза
Поблагодарили: 282 раза

Re: steel series на домашних страницах

Сообщение serghei » Сб янв 13, 2018 10:58 am

Получилось добавить батарейку ! Проблема оказалась в том, что она не вписывается в общую канву индикаторов

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

  function setValue(gauge, range)
  {
      gauge.setValueAnimated(range);
  } 
. Для неё пришлось создать отдельную функцию

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

    function setValue_bat(gauge, range)
  {
      gauge.setValue(range);
  }
А вот с RadialBargraph не пошло. Добавил в Steelseries.js

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

        var minMeasuredValue = maxValue;
        var maxMeasuredValue = minValue; 
но браузер ругается
СпойлерПоказать

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

            } else {
                niceRange = (maxValue - minValue);
                niceMinValue = minValue;
                niceMaxValue = maxValue;
                range = niceRange;
                //minorTickSpacing = 1;  // тут ошибка , хотя закомментировано
                //majorTickSpacing = 10;
                majorTickSpacing = calcNiceNumber(niceRange / (maxNoOfMajorTicks - 1), true);
                minorTickSpacing = calcNiceNumber(majorTickSpacing / (maxNoOfMinorTicks - 1), true); 
ipz, если у Вас получилось, выложите полный код , пожалуйста!
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
Аватара пользователя
xor
Сообщения: 2038
Зарегистрирован: Сб ноя 22, 2014 8:45 pm
Благодарил (а): 284 раза
Поблагодарили: 629 раз

Re: steel series на домашних страницах

Сообщение xor » Чт янв 18, 2018 1:31 am

Там мало js править, нужно после правки ещё файлы c min пересоздать
<script src="../SteelSeries/tween-min.js"></script>
<script src="../SteelSeries/steelseries-min.js"></script>
За это сообщение автора xor поблагодарил:
serghei (Чт янв 18, 2018 1:42 am)
Рейтинг: 1.16%
Ответить