[Модуль] Charts (charts)

Разработка дополнительных модулей, подключение различных приложений.

Модератор: immortal

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

Re: Модуль Charts

Сообщение xor » Чт дек 15, 2016 10:49 pm

У того же автора кроме СтилСериез ещё индикаторы есть - Медуза - очень стильно
https://github.com/HanSolo/Medusa
Изображение
Последний раз редактировалось xor Вт дек 19, 2017 10:25 pm, всего редактировалось 1 раз.
Вернуться к началу
Аватара пользователя
Amarok
Сообщения: 1427
Зарегистрирован: Пт дек 14, 2012 12:24 pm
Откуда: Россия, Нижняя Тура
Благодарил (а): 460 раз
Поблагодарили: 126 раз
Контактная информация:
Контактная информация пользователя Amarok

Re: Модуль Charts

Сообщение Amarok » Пт дек 16, 2016 7:54 am

Здоровские индикаторы. Можно их в модуль?
Моя Алиска живёт на Proxmox в Debian 12
Вернуться к началу
feo
Сообщения: 6
Зарегистрирован: Ср июл 27, 2016 10:19 pm
Благодарил (а): 0
Поблагодарили: 0

Re: Модуль Charts

Сообщение feo » Ср дек 21, 2016 8:21 pm

Господа, подскажите новичку как правильно разместив этот индикатор на сцене завести туда данные полученные, например по MQTT.
Вернуться к началу
I_I_Imonder
Сообщения: 256
Зарегистрирован: Сб янв 11, 2014 2:54 pm
Благодарил (а): 12 раз
Поблагодарили: 14 раз

Re: Модуль Charts

Сообщение I_I_Imonder » Чт дек 22, 2016 11:45 am

xor писал(а):У меня сделано так:

https://yadi.sk/i/HNgZmnZy33YKfi
Использовались контролы SteelSeries
Код страницыПоказать

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

<body onload="init()">
<table width="100%" border="0">
<tr> 
<td width="20%" >
Часы 
</td>
<td width="20%" >
Температура Дом
</td>
<td width="60%" >
Температура Улица
</td> 
</tr>
 <tr> 
<td width="20%" >
<canvas id="canvasClock1" width="201" height="201"></canvas> 
</td>
<td width="20%" >
<canvas id="canvasTin" width="201" height="201"></canvas>
</td>
<td width="60%" >
<canvas id="canvasTout" width="201" height="201"></canvas>
</td> 
</tr>
<tr> 
<td width="20%" >
Ветер, направление 
</td>
<td width="20%" >
Ветер, скорость
</td>
<td width="60%" >
Давление
</td> 
</tr>

 <tr> 
<td width="20%" >
<canvas id="canvasWindDir1" width="201" height="201"></canvas>
</td>
<td width="20%" >
<canvas id="canvasWindSpeed" width="201" height="201"></canvas>
</td>
<td width="60%" >
<canvas id="canvasRadialPress" width="201" height="201"></canvas>
</td> 
</tr> 
</table>

 
<script>
    var scroll = false;
    var RadialTin;
    var RadialTout;
    var windDir1;
    var windSpeed;
    var RadialPress;
    var odometer1, n = 999997.7;

    function init() {
        // Initialzing gauge
         // Define some sections
        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)'),],

            sect_pr  = [steelseries.Section(745, 755, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(735, 745, 'rgba(220, 220, 0, 0.3)'),
                        steelseries.Section(755, 775, 'rgba(220, 220, 0, 0.3)') ],

            areas_pr = [steelseries.Section(700, 735, 'rgba(220, 0, 0, 0.3)'),
                        steelseries.Section(775, 800, 'rgba(220, 0, 0, 0.3)'),],

         clock1 = new steelseries.Clock('canvasClock1', {
                            width: 201,
                            height: 201
                            });

        windDir1 = new steelseries.WindDirection('canvasWindDir1', {
                            size: 201,
                            trendVisible: true,
                            lcdVisible: true
                            });
        RadialTin = new steelseries.Radial('canvasTin', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 201,
                            section: sections,
                            area: areas,
                            minValue:-30,
                            maxValue:30,
                            titleString: "Температура",
                            unitString: "Градусы",
                            threshold: 25,
                            lcdVisible: true
                        });
        RadialTout = new steelseries.Radial('canvasTout', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 201,
                            section: sections,
                            area: areas,
                            minValue:-40,
                            maxValue:40,
                            titleString: "Температура",
                            unitString: "Градусы",
                            threshold: 25,
                            lcdVisible: true
                        });
        windSpeed = new steelseries.Radial('canvasWindSpeed', {
                            gaugeType: steelseries.GaugeType.TYPE2,
                            size: 201,
                            //section: sections,
                            //area: areas,
                            minValue: 0,
                            maxValue: 20,
                            titleString: "Скорость ветра",
                            unitString: "м/с",
                            threshold: 5,
                            lcdVisible: true
                        });
        RadialPress = new steelseries.Radial('canvasRadialPress', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 201,
                            section: sect_pr,
                            area: areas_pr,
                            minValue:700,
                            maxValue:800,
                            titleString: "Атм давление",
                            unitString: "мм рт ст",
                            threshold: 765,
                            lcdVisible: true
                        });
       clock1.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       windDir1.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       RadialTout.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       RadialTin.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       windSpeed.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       RadialPress.setBackgroundColor(steelseries.BackgroundColor.WHITE);

        // Start the update
        setInterval(function(){ setDirValue(windDir1); }, 3100);
        setInterval(function(){ RadialTout.setValueAnimated(%weather_my.temp%); },2500);
        setInterval(function(){ RadialTin.setValueAnimated(%ws.tempInside%); }, 4500);
        setInterval(function(){ windSpeed.setValueAnimated(%ws.windLatest%); }, 4500);
        setInterval(function(){ RadialPress.setValueAnimated(%weather_my.pressure%); }, 4000);

}
    function setDirValue(gauge, range) {
        gauge.setValueAnimatedLatest(%ws.windBearing%);
        gauge.setValueAnimatedAverage(%ws.windavgBearing%);
    }


</script>

<script src="../SteelSeries/tween-min.js"></script>
<script src="../SteelSeries/steelseries-min.js"></script>
 </body>


Папка в архиве - ее распаковать в htdocs

Добавил индикаторы на сцену, но они появляются на секунду и пропадают, куда рыть?
Вернуться к началу
Аватара пользователя
xor
Сообщения: 2045
Зарегистрирован: Сб ноя 22, 2014 8:45 pm
Благодарил (а): 289 раз
Поблагодарили: 632 раза

Re: Модуль Charts

Сообщение xor » Чт дек 22, 2016 11:56 am

На сценах я их не использовал

Отправлено с моего Nexus 5 через Tapatalk
Вернуться к началу
vl17
Сообщения: 9
Зарегистрирован: Чт авг 18, 2016 9:48 am
Благодарил (а): 0
Поблагодарили: 0

Re: Модуль Charts

Сообщение vl17 » Вт янв 10, 2017 1:38 pm

Добрый день! Успешно воспользовался Вашим примером! Спасибо! Не могу решить вопрос в использовании лампы в СтилСериез. Изначально она выключена и включается через чекбокс. Как сделать так чтобы она была включена минуя чекбокс? Я о demoLightBulb.
Вернуться к началу
vl17
Сообщения: 9
Зарегистрирован: Чт авг 18, 2016 9:48 am
Благодарил (а): 0
Поблагодарили: 0

Re: Модуль Charts

Сообщение vl17 » Вт янв 10, 2017 2:57 pm

I_I_Imonder писал(а):
xor писал(а):У меня сделано так:

https://yadi.sk/i/HNgZmnZy33YKfi
Использовались контролы SteelSeries
Код страницыПоказать

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

<body onload="init()">
<table width="100%" border="0">
<tr> 
<td width="20%" >
Часы 
</td>
<td width="20%" >
Температура Дом
</td>
<td width="60%" >
Температура Улица
</td> 
</tr>
 <tr> 
<td width="20%" >
<canvas id="canvasClock1" width="201" height="201"></canvas> 
</td>
<td width="20%" >
<canvas id="canvasTin" width="201" height="201"></canvas>
</td>
<td width="60%" >
<canvas id="canvasTout" width="201" height="201"></canvas>
</td> 
</tr>
<tr> 
<td width="20%" >
Ветер, направление 
</td>
<td width="20%" >
Ветер, скорость
</td>
<td width="60%" >
Давление
</td> 
</tr>

 <tr> 
<td width="20%" >
<canvas id="canvasWindDir1" width="201" height="201"></canvas>
</td>
<td width="20%" >
<canvas id="canvasWindSpeed" width="201" height="201"></canvas>
</td>
<td width="60%" >
<canvas id="canvasRadialPress" width="201" height="201"></canvas>
</td> 
</tr> 
</table>

 
<script>
    var scroll = false;
    var RadialTin;
    var RadialTout;
    var windDir1;
    var windSpeed;
    var RadialPress;
    var odometer1, n = 999997.7;

    function init() {
        // Initialzing gauge
         // Define some sections
        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)'),],

            sect_pr  = [steelseries.Section(745, 755, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(735, 745, 'rgba(220, 220, 0, 0.3)'),
                        steelseries.Section(755, 775, 'rgba(220, 220, 0, 0.3)') ],

            areas_pr = [steelseries.Section(700, 735, 'rgba(220, 0, 0, 0.3)'),
                        steelseries.Section(775, 800, 'rgba(220, 0, 0, 0.3)'),],

         clock1 = new steelseries.Clock('canvasClock1', {
                            width: 201,
                            height: 201
                            });

        windDir1 = new steelseries.WindDirection('canvasWindDir1', {
                            size: 201,
                            trendVisible: true,
                            lcdVisible: true
                            });
        RadialTin = new steelseries.Radial('canvasTin', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 201,
                            section: sections,
                            area: areas,
                            minValue:-30,
                            maxValue:30,
                            titleString: "Температура",
                            unitString: "Градусы",
                            threshold: 25,
                            lcdVisible: true
                        });
        RadialTout = new steelseries.Radial('canvasTout', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 201,
                            section: sections,
                            area: areas,
                            minValue:-40,
                            maxValue:40,
                            titleString: "Температура",
                            unitString: "Градусы",
                            threshold: 25,
                            lcdVisible: true
                        });
        windSpeed = new steelseries.Radial('canvasWindSpeed', {
                            gaugeType: steelseries.GaugeType.TYPE2,
                            size: 201,
                            //section: sections,
                            //area: areas,
                            minValue: 0,
                            maxValue: 20,
                            titleString: "Скорость ветра",
                            unitString: "м/с",
                            threshold: 5,
                            lcdVisible: true
                        });
        RadialPress = new steelseries.Radial('canvasRadialPress', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 201,
                            section: sect_pr,
                            area: areas_pr,
                            minValue:700,
                            maxValue:800,
                            titleString: "Атм давление",
                            unitString: "мм рт ст",
                            threshold: 765,
                            lcdVisible: true
                        });
       clock1.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       windDir1.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       RadialTout.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       RadialTin.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       windSpeed.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       RadialPress.setBackgroundColor(steelseries.BackgroundColor.WHITE);

        // Start the update
        setInterval(function(){ setDirValue(windDir1); }, 3100);
        setInterval(function(){ RadialTout.setValueAnimated(%weather_my.temp%); },2500);
        setInterval(function(){ RadialTin.setValueAnimated(%ws.tempInside%); }, 4500);
        setInterval(function(){ windSpeed.setValueAnimated(%ws.windLatest%); }, 4500);
        setInterval(function(){ RadialPress.setValueAnimated(%weather_my.pressure%); }, 4000);

}
    function setDirValue(gauge, range) {
        gauge.setValueAnimatedLatest(%ws.windBearing%);
        gauge.setValueAnimatedAverage(%ws.windavgBearing%);
    }


</script>

<script src="../SteelSeries/tween-min.js"></script>
<script src="../SteelSeries/steelseries-min.js"></script>
 </body>


Папка в архиве - ее распаковать в htdocs

Добавил индикаторы на сцену, но они появляются на секунду и пропадают, куда рыть?
Вернуться к началу
Аватара пользователя
xor
Сообщения: 2045
Зарегистрирован: Сб ноя 22, 2014 8:45 pm
Благодарил (а): 289 раз
Поблагодарили: 632 раза

Re: Модуль Charts

Сообщение xor » Вт янв 10, 2017 9:48 pm

Обновил пост viewtopic.php?f=5&t=2810&start=70#p41624
Добавил обновление по аякс-запросу.

Эти индикаторы в сценах не использовал, там же какой-то другой (отличный от домашних страниц) механизм используется?
Вернуться к началу
Аватара пользователя
xor
Сообщения: 2045
Зарегистрирован: Сб ноя 22, 2014 8:45 pm
Благодарил (а): 289 раз
Поблагодарили: 632 раза

Re: Модуль Charts

Сообщение xor » Вт янв 10, 2017 11:39 pm

vl17 писал(а):Добрый день! Успешно воспользовался Вашим примером! Спасибо! Не могу решить вопрос в использовании лампы в СтилСериез. Изначально она выключена и включается через чекбокс. Как сделать так чтобы она была включена минуя чекбокс? Я о demoLightBulb.
в коде страницы примера есть функция
function setLight() {
lightBulb.setOn(document.getElementById('light').checked);
}
я так понимаю, что включение определяется значением аргумента lightBulb.setOn
и играться нужно с ним, заменив значение чекбокса document.getElementById('light').checked своими данными
Вернуться к началу
vl17
Сообщения: 9
Зарегистрирован: Чт авг 18, 2016 9:48 am
Благодарил (а): 0
Поблагодарили: 0

Re: Модуль Charts

Сообщение vl17 » Вс янв 15, 2017 1:59 pm

лампу не включил :-( . Нет опыта программирования :-(
Вернуться к началу
Ответить

Вернуться в «Модули и приложения»