Собственно идея была в следующем, чтобы экономить электричество, но и при этом не сильно вымораживать дом надо прийти к какому-то оптимуму, но делать десятки пунктов меню было некошерно, хотелось красоты и наглядности. Собственно идея проста: тянем мышью "столбик" диаграммы меняем данные в массиве температур. Но идея хорошо, реализовать сложнее)) в Excel такое есть, осталось найти что-то похожее для браузера. целый вечер поиска в сети привел к такому замечательному плагину:
HIGHCHARTS DRAGGABLE POINTS
это то, что нам нужно!
дальше мысль пошла, что надо бы группировать периоды по дням недели ... оказывается заморские товарищи и это придумали
GROUPED CATEGORIES
собственно дело за малым осталось придумать как хранить 10, 20, 30 значений целевой температуры, чтобы это было удобно. Решил хранить в виде строки с разделителями " | " ("пробел|пробел"). В результате в системе сейчас строка такого вида:
25 | 18 | 18 | 18 | 25 | 18 | 18 | 18 | 26 | 18 | 18 | 18 | 26 | 18 | 18 | 18 | 26 | 18 | 18 | 20 | 26 | 23 | 23 | 23 | 26 | 23 | 21 | 19
собственно что нужно сделать:
1. скачиваем дистрибутивы со страниц по ссылкам выше и сохраняем в папки (соотвеnственно):
C:\_majordomo\htdocs\highcharts\js\plugins\draggable-points-master
C:\_majordomo\htdocs\highcharts\js\plugins\grouped_categories-master
2. создаем объект Heating_profile_01
в нем свойства:
number_of_Periods_in_Day - число периодов в сутки = 4
temp_Profile - целевая температура (28 значений это 4 периода*7 дней) = 25 | 18 | 18 | 18 | 25 | 18 | 18 | 18 | 26 | 18 | 18 | 18 | 26 | 18 | 18 | 18 | 26 | 18 | 18 | 20 | 26 | 23 | 23 | 23 | 26 | 23 | 21 | 19
average_temperatures_of_Week - средние температуры за период с начала недели до текущей даты = 20.4 | 19.82 | 18.07 | 18.09 | 20.55 | 19.89 | 18.17
3. создаем домашнюю страницу с кодом:
Код: Выделить всё
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<script src="../highcharts/js/highcharts.js"></script>
<script src="../highcharts/js/plugins/grouped_categories-master/grouped-categories.js"></script>
<script src="../highcharts/js/plugins/draggable-points-master/draggable-points.js"></script>
<script language="javascript" type="text/javascript" src="/middle/middle_object.js"></script>
<script language="javascript" type="text/javascript" src="/middle/middle_connector.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
//var mydata=[10, 15, 15, 15,
// 30, 17, 17, 17,
// 30, 17, 17, 17,
// 30, 17, 17, 17,
// 30, 17, 17, 17,
// 30, 17, 17, 17,
// 30, 17, 17, 17
// ];
// заполнение массива с целевыми температурами
var xxxx= "%Heating_profile_01.temp_Profile%";
mydata = xxxx.split(' | ') ;
var mydata_double = new Array (mydata.length);
var mydata_double_output = new Array (mydata.length);
for (var i = 0; i < mydata.length; i++) {
mydata_double[i]=parseFloat(mydata[i]);
mydata_double_output[i]=parseFloat(mydata[i]);
}
//str_from_arr = mydata_double.join(" | ")
// заполнение массива со средними температурами
var xxxx1= "%Heating_profile_01.average_temperatures_of_Week%";
mydata_average_temp = xxxx1.split(' | ') ;
var mydata__average_temp_double = new Array (mydata_average_temp.length);
for (var i = 0; i < mydata_average_temp.length; i++) {
mydata__average_temp_double[i]=parseFloat(mydata_average_temp[i]);
}
///str_from_arr = mydata_double.join(" | ")
//alert (str_from_arr);
// построение графика highcharts
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false
},
title: {
text: 'Профиль отопления'
},
exporting: {
enabled: true
},
xAxis: {
categories: [{
name : "понедельник",
categories: ['00-06', '06-12', '12-18','18-24']
}, {
name : "вторник",
categories: ['00-06', '06-12', '12-18','18-24']
}, {
name : "среда",
categories: ['00-06', '06-12', '12-18','18-24']
}, {
name : "четверг",
categories: ['00-06', '06-12', '12-18','18-24']
}, {
name : "пятница",
categories: ['00-06', '06-12', '12-18','18-24']
}, {
name : "суббота",
categories: ['00-06', '06-12', '12-18','18-24']
}, {
name : "воскресенье",
categories: ['00-06', '06-12', '12-18','18-24']
}
]},
plotOptions: {
series: {
// pointPadding: 0
point: {
events: {
drag: function (e) {
// alert (e.y);
// if (e.y > 10) {
// округляем текущее значение после "протяжки"
// e.y = Math.round (e.y);
// this.y = Highcharts.numberFormat(this.y, 0);
// this.y = Math.Round(e.y);
// return false;
// }
$('#drag').html(
'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.y, 2) + '</b>');
},
drop: function () {
// округляем текущее значение после "протяжки"
this.y = Math.round(this.y);
// определяем период (день недели) в котором было изменение целевой температуры на графике
num_period= (this.x + 1);
if (num_period >= 10) {
num_period = num_period;
}
else
{
num_period ='0'+ num_period;
}
name_period = 'Heating_period_' + num_period ;
// записываем числовые данные в массив, а затем объединяем в строку
mydata_double_output[this.x]=parseFloat(this.y);
str_from_arr = mydata_double_output.join(" | ");
// передаем новое значение переменной в MDM (взял из middle connector у Alex)
url_string ='/objects/?object=Heating_profile_01&op=set&p=temp_Profile&v='+ str_from_arr;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url_string, true);
xmlhttp.send(null);
$('#drop').html(
'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>');
}
}
},
stickyTracking: false
},
column: {
// stacking: 'normal'
pointPadding: 0,
groupPadding: 0
// borderWidth: 0
},
line: {
cursor: 'ns-resize'
}
},
tooltip: {
valueDecimals: 0
},
series: [{
name: "Целевая температура",
data: mydata_double,
//draggableX: true,
draggableY: true,
dragMinY: 1,
dragMaxY: 30,
type: 'column',
minPointLength: 2
}, {
name: "Средние температуры",
data: mydata__average_temp_double,
draggableY: false
} ]
});
});
</script>
</head>
<body>
<div id="container" style="height: 500px"></div>
<div id="drag"></div>
<div id="drop"></div>
</body>
</html>
5. пишем метод у объекта Heating_profile_01
метод tempProfileChanged
Код: Выделить всё
$day_month=(int)date('w');
$h=(int)date('G',time());
//$h=23;
if ($day_month == 0) {
$day_month = 7;
}
else
{
$day_month = $day_month ;
}
$num_period_of_day = floor($h/24*gg('Heating_profile_01.number_of_Periods_in_Day'));
$num_of_position_in_array = ($day_month - 1)*gg('Heating_profile_01.number_of_Periods_in_Day') + ($num_period_of_day + 1);
$string = gg('Heating_profile_01.temp_Profile');
$arr = explode(" | ", $string);
//say ('targetTemp'.($arr[$num_of_position_in_array-1]));
sg('ElKotel.tempTarget',$arr[$num_of_position_in_array-1]);
Вот такое небольшое украшательство. Летом думаю прикошачу этот же способ к управлению поливом.
скриншот