[Модуль] Charts (charts)
Модератор: immortal
- xor
- Сообщения: 2039
- Зарегистрирован: Сб ноя 22, 2014 8:45 pm
- Благодарил (а): 286 раз
- Поблагодарили: 629 раз
Re: Модуль Charts
У того же автора кроме СтилСериез ещё индикаторы есть - Медуза - очень стильно
https://github.com/HanSolo/Medusa
https://github.com/HanSolo/Medusa
Последний раз редактировалось xor Вт дек 19, 2017 10:25 pm, всего редактировалось 1 раз.
win10 connect https://connect.smartliving.ru/profile/303
- Amarok
- Сообщения: 1425
- Зарегистрирован: Пт дек 14, 2012 12:24 pm
- Откуда: Россия, Нижняя Тура
- Благодарил (а): 460 раз
- Поблагодарили: 126 раз
- Контактная информация:
Re: Модуль Charts
Здоровские индикаторы. Можно их в модуль?
Алиска живёт на Ubuntu Server 14.04.3 LTS
connect, группа в Telegram, Яндекс.Деньги для благодарностей за помощь: 41001355945165
connect, группа в Telegram, Яндекс.Деньги для благодарностей за помощь: 41001355945165
Re: Модуль Charts
Господа, подскажите новичку как правильно разместив этот индикатор на сцене завести туда данные полученные, например по MQTT.
-
- Сообщения: 256
- Зарегистрирован: Сб янв 11, 2014 2:54 pm
- Благодарил (а): 12 раз
- Поблагодарили: 14 раз
Re: Модуль Charts
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
- Сообщения: 2039
- Зарегистрирован: Сб ноя 22, 2014 8:45 pm
- Благодарил (а): 286 раз
- Поблагодарили: 629 раз
Re: Модуль Charts
На сценах я их не использовал
Отправлено с моего Nexus 5 через Tapatalk
Отправлено с моего Nexus 5 через Tapatalk
win10 connect https://connect.smartliving.ru/profile/303
Re: Модуль Charts
Добрый день! Успешно воспользовался Вашим примером! Спасибо! Не могу решить вопрос в использовании лампы в СтилСериез. Изначально она выключена и включается через чекбокс. Как сделать так чтобы она была включена минуя чекбокс? Я о demoLightBulb.
Re: Модуль Charts
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
- Сообщения: 2039
- Зарегистрирован: Сб ноя 22, 2014 8:45 pm
- Благодарил (а): 286 раз
- Поблагодарили: 629 раз
Re: Модуль Charts
Обновил пост viewtopic.php?f=5&t=2810&start=70#p41624
Добавил обновление по аякс-запросу.
Эти индикаторы в сценах не использовал, там же какой-то другой (отличный от домашних страниц) механизм используется?
Добавил обновление по аякс-запросу.
Эти индикаторы в сценах не использовал, там же какой-то другой (отличный от домашних страниц) механизм используется?
win10 connect https://connect.smartliving.ru/profile/303
- xor
- Сообщения: 2039
- Зарегистрирован: Сб ноя 22, 2014 8:45 pm
- Благодарил (а): 286 раз
- Поблагодарили: 629 раз
Re: Модуль Charts
в коде страницы примера есть функцияvl17 писал(а):Добрый день! Успешно воспользовался Вашим примером! Спасибо! Не могу решить вопрос в использовании лампы в СтилСериез. Изначально она выключена и включается через чекбокс. Как сделать так чтобы она была включена минуя чекбокс? Я о demoLightBulb.
function setLight() {
lightBulb.setOn(document.getElementById('light').checked);
}
я так понимаю, что включение определяется значением аргумента lightBulb.setOn
и играться нужно с ним, заменив значение чекбокса document.getElementById('light').checked своими данными
win10 connect https://connect.smartliving.ru/profile/303