Построение графиков параметров метеостанции.
dat1=[ 2 , 1 , 8 , 4 , 3 , 5 , 3 , -1 , -3 , -2 , 1 , 4 , -2 , 1 ];
# Server. Master.
# Получаем данные по I2C, преобразуем, расчитываем значения, записываем в файл.
filename = '/var/www/html/meteost.ru/public_html/js/znach.js' # Путь к создаваемому файлу znach.js
filename1 = '/var/www/html/meteost.ru/public_html/Temper_1.txt' # Путь к создаваемому файлу Temper_1.txt
filename2 = '/var/www/html/meteost.ru/public_html/Data.txt' # Путь к создаваемому файлу Data.txt
filename3 = '/var/www/html/meteost.ru/public_html/Pres.txt' # Путь к создаваемому файлу Temper_2.txt
filename4 = '/var/www/html/meteost.ru/public_html/Veter_cr.txt' # Путь к создаваемому файлу Temper_2.txt
filename5 = '/var/www/html/meteost.ru/public_html/Veter_max.txt' # Путь к создаваемому файлу Temper_2.txt
vrem = 0
while True:
from smbus import SMBus # Импортируем модуль SMBus для работы с I2C.
bus = SMBus(1) # Для raspberry pi4 значение SMBus должно быть 1.
from time import * # Импортируем модуль таймера.
from datetime import * # Импортируем модуль системного времени
i = 1
Skorost_1,Skorost_m = 0,0
while i < 50 : # Цикл для расчёта среднего и максимального значения скорости ветра.
# Запрашиваем блок из устройства 8 в колличестве 14 значений данных.
# Полученные данные сохраняем в переменные data(1-13).
data1,data2,data2_1,data3,data4,data5,data6,data7,data8,data9,data10,data11,data12,data13 = bus.read_i2c_block_data(0x8, 0x0C, 14)
# В переменных храняться данные из полуслова, в 2 переменных одно слово.
# Поэтому значение 1 переменной (11111111) смещаем
# на 8 бит влево (1111111100000000) и добавляем знакение 2 переменной
# с помощью логического ИЛИ (1111111111111111).
Temperature = data1 << 8
Temperature = Temperature | data2
znak = data2_1
Pozicion = data3 << 8
Pozicion = Pozicion | data4
Skorost = data5 << 8
Skorost = Skorost | data6
Perimetr = data7
Vlazhnost = data8 << 8
Vlazhnost = Vlazhnost | data9
Press = data10 << 8
Press = Press | data11
# Вычисляем среднюю и максимальную скорость ветра.
Skorost_1 = Skorost_1 + Skorost
if Skorost_m < Skorost :
Skorost_m = Skorost
sleep(1) # Пауза 1 сек.
i+=1
Skorost_sr = int(Skorost_1 / 50)
today = datetime.today()
today1 = today.strftime('%X')
today2 = today.strftime('%x')
hou = today.hour
# Определение направления ветра по азимуту (0-360)
if 0 <= Pozicion and 11 > Pozicion : Azm = 'С'
if 11<= Pozicion and 34> Pozicion : Azm = 'ССВ'
if 34 <= Pozicion and 56 > Pozicion : Azm = 'СВ'
if 56 <= Pozicion and 79 > Pozicion : Azm = 'ВСВ'
if 79 <= Pozicion and 101 > Pozicion : Azm = 'В'
if 101 <= Pozicion and 124 > Pozicion : Azm = 'ВЮВ'
if 124 <= Pozicion and 146 > Pozicion : Azm = 'ЮВ'
if 146 <= Pozicion and 169 > Pozicion : Azm = 'ЮЮВ'
if 169 <= Pozicion and 191 > Pozicion : Azm = 'Ю'
if 191 <= Pozicion and 214 > Pozicion : Azm = 'ЮЮЗ'
if 214 <= Pozicion and 236 > Pozicion : Azm = 'ЮЗ'
if 236 <= Pozicion and 259 > Pozicion : Azm = 'ЗЮЗ'
if 259 <= Pozicion and 281 > Pozicion : Azm = 'З'
if 281 <= Pozicion and 304 > Pozicion : Azm = 'ЗСЗ'
if 304 <= Pozicion and 326 > Pozicion : Azm = 'СЗ'
if 326 <= Pozicion and 349 > Pozicion : Azm = 'ССЗ'
if 349 <= Pozicion and 360 > Pozicion : Azm = 'С'
# Выводим на экран параметры метеомтанции.
#print('\n')
#print('\tПараметры метеостанции.')
#print('\n')
#print('\n\tТемпература = ',Temperature,' C')
#print('\n\tНаправление ветра = ',Azm)
#print('\n\tСкорость ветра максимальная = ',Skorost_m,' м/с')
#print('\n\tСкорость ветра средняя = ',Skorost_sr,' м/с')
#print('\n\tСостояние охранного периметра (0-норма,1-авария) = ',Perimetr)
#print('\n\tВлажность воздуха = ',Vlazhnost,' %')
#print('\n\tДавление воздуха = ',Press,' мм.рт.ст')
#print('\n\tДата и время измерения показаний метеостанции: ',today1,' ',today2)
#print('\n')
# Запись в файл.
if znak == 0:
Temperature = Temperature * -1
Temperature1 = str(Temperature)
Skorost_m1 = str(Skorost_m)
Skorost_sr1 = str(Skorost_sr)
Perimetr1 = str(Perimetr)
Vlazhnost1 = str(Vlazhnost)
Press1 = str(Press)
Pozicion1 = str(Pozicion)
with open(filename, 'w') as f:
f.write("var temper = '" + Temperature1 + "';")
f.write("\nvar napr = '" + Azm + "';")
f.write("\nvar napr1 = '" + Pozicion1 + "';")
f.write("\nvar skor_m = " + Skorost_m1 + "; ")
f.write("\nvar skor_s = " + Skorost_sr1 + "; ")
f.write("\nvar vlash = '" + Vlazhnost1 + "'; ")
f.write("\nvar davl = '" + Press1 + "'; ")
f.write("\nvar vrm = '" + today1 + "'; ")
f.write("\nvar vrm1 = '" + today2 + "'; ")
f.write("\nvar elt = document.getElementById('temper'); ")
f.write("\nelt.textContent = temper;")
f.write("\nvar elv = document.getElementById('vlash');")
f.write("\nelv.textContent = vlash;")
f.write("\nvar eln = document.getElementById('napr'); ")
f.write("\neln.textContent = napr;")
f.write("\nvar eln_n = document.getElementById('napr1'); ")
f.write("\neln_n.textContent = napr1;")
f.write("\nvar els_s = document.getElementById('skor_s'); ")
f.write("\nels_s.textContent = skor_s;")
f.write("\nvar els_m = document.getElementById('skor_m'); ")
f.write("\nels_m.textContent = skor_m;")
f.write("\nvar eld = document.getElementById('davl'); ")
f.write("\neld.textContent = davl; ")
f.write("\nvar eld_t = document.getElementById('vrm'); ")
f.write("\neld_t.textContent = vrm; ")
f.write("\nvar eld_t1 = document.getElementById('vrm1'); ")
f.write("\neld_t1.textContent = vrm1; ")
# Задаём время срабатывания опроса данных для построения графиков
# Опрос в 11 часов и в 23 часа
if 0 < hou and 11 > hou:
vrem = 0
if 12 <= hou and 23 > hou:
vrem = 0
if hou == 11 or hou == 23 :
if vrem == 0:
vrem = 1
# Чтение данных из файла с показаниями температуры
# первое значение не сохраняется все остальные значения
# сохраняем в переменные.
with open(filename1) as f:
lines = f.readlines()
i = 0
for line in lines:
i = i+1
if i == 4: z1 = str(line.rstrip())
if i == 6: z2 = str(line.rstrip())
if i == 8: z3 = str(line.rstrip())
if i == 10: z4 = str(line.rstrip())
if i == 12: z5 = str(line.rstrip())
if i == 14: z6 = str(line.rstrip())
if i == 16: z7 = str(line.rstrip())
if i == 18: z8 = str(line.rstrip())
if i == 20: z9 = str(line.rstrip())
if i == 22: z10 = str(line.rstrip())
if i == 24: z11 = str(line.rstrip())
if i == 26: z12 = str(line.rstrip())
if i == 28: z13 = str(line.rstrip())
z14 = str(Temperature1)
# Пишем значения температуры в файл из которого данные
# используются для построения графика
with open(filename1, 'w') as f:
f.write("dat1=[ \n")
f.write(z1 + " \n")
f.write(",\n")
f.write(z2 + " \n")
f.write(",\n")
f.write(z3 + " \n")
f.write(",\n")
f.write(z4 + " \n")
f.write(",\n")
f.write(z5 + " \n")
f.write(",\n")
f.write(z6 + " \n")
f.write(",\n")
f.write(z7 + " \n")
f.write(",\n")
f.write(z8 + " \n")
f.write(",\n")
f.write(z9 + " \n")
f.write(",\n")
f.write(z10 + " \n")
f.write(",\n")
f.write(z11 + " \n")
f.write(",\n")
f.write(z12 + " \n")
f.write(",\n")
f.write(z13 + " \n")
f.write(",\n")
f.write(z14 + " \n")
f.write("];")
# Чтение данных из файла с датой
# первое значение не сохраняется все остальные значения
# сохраняем в переменные.
with open(filename2) as f:
lines = f.readlines()
i = 0
for line in lines:
i = i+1
if i == 4: u1 = str(line.rstrip())
if i == 6: u2 = str(line.rstrip())
if i == 8: u3 = str(line.rstrip())
if i == 10: u4 = str(line.rstrip())
if i == 12: u5 = str(line.rstrip())
if i == 14: u6 = str(line.rstrip())
if i == 16: u7 = str(line.rstrip())
if i == 18: u8 = str(line.rstrip())
if i == 20: u9 = str(line.rstrip())
if i == 22: u10 = str(line.rstrip())
if i == 24: u11 = str(line.rstrip())
if i == 26: u12 = str(line.rstrip())
if i == 28: u13 = str(line.rstrip())
u14 = str(today2 + ' ' + today1)
# Пишем значения с датой в файл из которого данные
# используются для построения графика
with open(filename2, 'w') as f:
f.write("dat2=[ \n")
f.write(u1 + " \n")
f.write(",\n")
f.write(u2 + " \n")
f.write(",\n")
f.write(u3 + " \n")
f.write(",\n")
f.write(u4 + " \n")
f.write(",\n")
f.write(u5 + " \n")
f.write(",\n")
f.write(u6 + " \n")
f.write(",\n")
f.write(u7 + " \n")
f.write(",\n")
f.write(u8 + " \n")
f.write(",\n")
f.write(u9 + " \n")
f.write(",\n")
f.write(u10 + " \n")
f.write(",\n")
f.write(u11 + " \n")
f.write(",\n")
f.write(u12 + " \n")
f.write(",\n")
f.write(u13 + " \n")
f.write(",\n")
f.write("'" + u14 + "' \n")
f.write("];")
# Чтение данных из файла с показаниями атм. давления
# первое значение не сохраняется все остальные значения
# сохраняем в переменные.
with open(filename3) as f:
lines = f.readlines()
i = 0
for line in lines:
i = i+1
if i == 4: x1 = str(line.rstrip())
if i == 6: x2 = str(line.rstrip())
if i == 8: x3 = str(line.rstrip())
if i == 10: x4 = str(line.rstrip())
if i == 12: x5 = str(line.rstrip())
if i == 14: x6 = str(line.rstrip())
if i == 16: x7 = str(line.rstrip())
if i == 18: x8 = str(line.rstrip())
if i == 20: x9 = str(line.rstrip())
if i == 22: x10 = str(line.rstrip())
if i == 24: x11 = str(line.rstrip())
if i == 26: x12 = str(line.rstrip())
if i == 28: x13 = str(line.rstrip())
x14 = Press1
# Пишем значения атм. давления в файл из которого данные
# используются для построения графика
with open(filename3, 'w') as f:
f.write("dat3=[ \n")
f.write(x1 + " \n")
f.write(",\n")
f.write(x2 + " \n")
f.write(",\n")
f.write(x3 + " \n")
f.write(",\n")
f.write(x4 + " \n")
f.write(",\n")
f.write(x5 + " \n")
f.write(",\n")
f.write(x6 + " \n")
f.write(",\n")
f.write(x7 + " \n")
f.write(",\n")
f.write(x8 + " \n")
f.write(",\n")
f.write(x9 + " \n")
f.write(",\n")
f.write(x10 + " \n")
f.write(",\n")
f.write(x11 + " \n")
f.write(",\n")
f.write(x12 + " \n")
f.write(",\n")
f.write(x13 + " \n")
f.write(",\n")
f.write(x14 + " \n")
f.write("];")
# Чтение данных из файла с показаниями Средней скорости ветра
# первое значение не сохраняется все остальные значения
# сохраняем в переменные.
with open(filename4) as f:
lines = f.readlines()
i = 0
for line in lines:
i = i+1
if i == 4: h1 = str(line.rstrip())
if i == 6: h2 = str(line.rstrip())
if i == 8: h3 = str(line.rstrip())
if i == 10: h4 = str(line.rstrip())
if i == 12: h5 = str(line.rstrip())
if i == 14: h6 = str(line.rstrip())
if i == 16: h7 = str(line.rstrip())
if i == 18: h8 = str(line.rstrip())
if i == 20: h9 = str(line.rstrip())
if i == 22: h10 = str(line.rstrip())
if i == 24: h11 = str(line.rstrip())
if i == 26: h12 = str(line.rstrip())
if i == 28: h13 = str(line.rstrip())
h14 = Skorost_sr1
# Пишем значения Средней скорости ветра в файл из которого
# данные используются для построения графика
with open(filename4, 'w') as f:
f.write("dat4=[ \n")
f.write(h1 + " \n")
f.write(",\n")
f.write(h2 + " \n")
f.write(",\n")
f.write(h3 + " \n")
f.write(",\n")
f.write(h4 + " \n")
f.write(",\n")
f.write(h5 + " \n")
f.write(",\n")
f.write(h6 + " \n")
f.write(",\n")
f.write(h7 + " \n")
f.write(",\n")
f.write(h8 + " \n")
f.write(",\n")
f.write(h9 + " \n")
f.write(",\n")
f.write(h10 + " \n")
f.write(",\n")
f.write(h11 + " \n")
f.write(",\n")
f.write(h12 + " \n")
f.write(",\n")
f.write(h13 + " \n")
f.write(",\n")
f.write(h14 + " \n")
f.write("];")
# Чтение данных из файла с показаниями Максимальной скорости ветра
# первое значение не сохраняется все остальные значения
# сохраняем в переменные.
with open(filename5) as f:
lines = f.readlines()
i = 0
for line in lines:
i = i+1
if i == 4: y1 = str(line.rstrip())
if i == 6: y2 = str(line.rstrip())
if i == 8: y3 = str(line.rstrip())
if i == 10: y4 = str(line.rstrip())
if i == 12: y5 = str(line.rstrip())
if i == 14: y6 = str(line.rstrip())
if i == 16: y7 = str(line.rstrip())
if i == 18: y8 = str(line.rstrip())
if i == 20: y9 = str(line.rstrip())
if i == 22: y10 = str(line.rstrip())
if i == 24: y11 = str(line.rstrip())
if i == 26: y12 = str(line.rstrip())
if i == 28: y13 = str(line.rstrip())
y14 = Skorost_m1
# Пишем значения Максимальной скорости ветра в файл из которого
# данные используются для построения графика
with open(filename5, 'w') as f:
f.write("dat5=[ \n")
f.write(y1 + " \n")
f.write(",\n")
f.write(y2 + " \n")
f.write(",\n")
f.write(y3 + " \n")
f.write(",\n")
f.write(y4 + " \n")
f.write(",\n")
f.write(y5 + " \n")
f.write(",\n")
f.write(y6 + " \n")
f.write(",\n")
f.write(y7 + " \n")
f.write(",\n")
f.write(y8 + " \n")
f.write(",\n")
f.write(y9 + " \n")
f.write(",\n")
f.write(y10 + " \n")
f.write(",\n")
f.write(y11 + " \n")
f.write(",\n")
f.write(y12 + " \n")
f.write(",\n")
f.write(y13 + " \n")
f.write(",\n")
f.write(y14 + " \n")
f.write("];")
bus.close()
sleep(900)
Ну вот, пожалуй всё.
Все упомянутые в статье файлы можно скачать с яндекс диска.
Напишите отзыв.
Построение графиков с помощью утилиты highcharts.
Данная статья является продолжением статьи «Сервер на Raspberry PI4 для метеостанции». Здесь рассмотрим способ построения графиков параметров метеостанции и отображение графиков в web браузере. В этих стараниях нам поможет утилита «highcharts.js». Данная утилита есть в свободном доступе в интернете. Но, чтобы быть независимым от «дяди», который в любой момент закроет доступ, я решил скачать необходимые утилиты (утилиты расположены в архиве, скачать можно по кнопке в конце статьи). Так же скачал утилиту «jquery.min.js» - данная утилита необходима для корректной работы highcharts.js, это сокращённая версия jquery.
Сначала рассмотрим «отладочную версию». Здесь рассмотрим только построение графиков, далее рассмотрим «оконечную версию» где интегрируем графики в файл, расположенный на сервере.
Для работы графиков в одной папке с файлом «График.html» создаём следующие файлы:
- Data.txt – здесь хранятся данные о дате и времени проведения измерений в течении семи дней;
- Pres.txt – здесь хранятся данные о атмосферном давлении измеренные в течении семи дней;
- Temper_1.txt – здесь хранятся данные о температуре измеренные в течении семи дней;
- Veter_cr.txt – здесь хранятся данные о средней скорости ветра, измеренные в течении семи дней;
- Veter_max.txt – здесь хранятся данные о максимальной скорости ветра, измеренные в течении семи дней;
- Здесь же располагаем утилиты highcharts.js и jquery.min.js.
Во всех файлах (кроме утилит) структура файлов одинаковая, разные только значения, в файле «Data.txt» значения даты заключены в одинарные кавычки, в остальных файлах кавычек нет. Это связано с тем, что файл «Data.txt» содержит данные отображаемые на оси абсцисс (ось Х). Остальные файлы содержат данные отображаемые на оси ординат (ось Y) и являются данными значения графиков, в то время как на оси абсцисс значения отображаются автоматически, а затем заменяются надписями, содержащимися в кавычках.
Ниже приведено содержание одного из файлов, остальные файлы создаются по аналогии.
Как видно все данные разнесены на отдельные строки. Данная конфигурация нужна для дальнейшего копирования отдельных строк с данными и записи их в переменные, после чего данный файл будет перезаписан. В новом файле будут отсутствовать первое значение и добавляться последнее. Данную процедуру производит программа, написанная на «Python» - i2c_Data.py. i2c_Data.py будет обновлять вышерассмотренные файлы два раза в сутки в 11 и 23 часа. Таким образом графики будут изменяться два раза в сутки.
В отладочной версии программа i2c_Data.py не используется, но в любом случае файлы должны иметь необходимое заполнение. В архиве имеются данные файлы доступные по кнопке в конце статьи.
Теперь рассмотрим файл «График.html». Данный файл содержит три контейнера в которых будут отображаться графики. Для отображения одного графика используются два файла - один Data.txt, а второй файл со значениями параметра.
Скрипты на «javascript» записывают из файлов данные в массивы dat1, dat2, dat3, dat4, dat5. В каждый контейнер программы на «javascript» выводят построение графиков используя данные массивов.
Ниже приведен html код файла «График.html».
<!DOCTYPE HTML PUBLIC >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>График</title>
<!-- Прописываем пути к библиотекам создания графиков -->
<script src="jquery.min.js" type="text/javascript"></script>
<script src="highcharts.js" type="text/javascript"></script>
<!-- Прописываем пути к файлам содержащим массив данных "Температуры" -->
<script type="text/javascript">
var dat1=[0];
</script>
<script src="Temper_1.txt" type="text/javascript"></script>
<!-- Прописываем пути к файлам содержащим массив данных "Даты" -->
<script type="text/javascript">
var dat2=[0];
</script>
<script src="Data.txt" type="text/javascript"></script>
<!-- Прописываем пути к файлам содержащим массив данных "Атм. Давления" -->
<script type="text/javascript">
var dat3=[0];
</script>
<script src="Pres.txt" type="text/javascript"></script>
<!-- Прописываем пути к файлам содержащим массив данных "Средней скорости ветра" -->
<script type="text/javascript">
var dat4=[0];
</script>
<script src="Veter_cr.txt" type="text/javascript"></script>
<!-- Прописываем пути к файлам содержащим массив данных "Максимальной скорости ветра" -->
<script type="text/javascript">
var dat5=[0];
</script>
<script src="Veter_max.txt" type="text/javascript"></script>
<!-- График температуры - данные читаются из двух файлов
(для оси ординат и абсцисс соответственно) -->
<script type="text/javascript">
var chart;
$(document).ready(function(){
chart = new Highcharts.Chart({
chart: {renderTo: 'container'},
series: [{name: 'Температура',data: dat1,
zones: [{value: 0,color: '#00ade9'},{color: '#f6a655'}] }],
title: {text: 'График температуры.'},
xAxis: {categories: dat2,},
yAxis: {title: {text: 'Температура (\xB0C)'}},
plotOptions: {line: {dataLabels: {enabled: true}}}, }); });
</script>
<!-- График Атм. давления - данные читаются из двух файлов (для оси ординат и
абсцисс соответственно) -->
<script type="text/javascript">
var chart1;
$(document).ready(function(){
chart1 = new Highcharts.Chart({
chart: {renderTo: 'container1'},
series: [{name: 'Давление',data: dat3 ,color: '#6a6cb0'}],
title: {text: 'График давления.'},
xAxis: {categories: dat2,},
yAxis: {title: {text: 'Атм. давление (мм.рт.ст.)'}},
plotOptions: {line: {dataLabels: {enabled: true}}},
});
});
</script>
<!-- График Скорости ветра (средняя и максимальная) - данные читаются из трёх файлов
(два для оси ординат и один абсцисс соответственно) -->
<script type="text/javascript">
var chart2;
$(document).ready(function(){
chart1 = new Highcharts.Chart({
chart: {renderTo: 'container2'},
series: [{name: 'Скорость ветра средняя',data: dat4 ,color: '#008180' ,dashStyle: 'longdash'},
{name: 'Скорость ветра максимальная.',data: dat5 ,color: '#00aca5' ,dashStyle: 'shortdot'} ],
title: {text: 'Скорость ветра средняя.'},
xAxis: {categories: dat2,},
yAxis: {title: {text: 'Скорость ветра (м/c)'}},
plotOptions: {line: {dataLabels: {enabled: true}}},
});
});
</script>
<!-- Выводим графики в отдельные контейнеры -->
<body>
<div
id="container" style="width: 700px; height: 400px ">
</div>
<div
id="container1" style="width: 700px; height: 400px ">
</div>
<div
id="container2" style="width: 700px; height: 400px ">
</div>
</body>
</head>
</html>
На этом с построением графиков всё, далее рассмотрим интеграцию данного кода в код метеостанции.
Ну вот и добрались до «оконечной версии». Здесь рассмотрим интеграцию выше рассмотренного кода в код сервера метеостанции рассмотренный в статье «Сервер на Raspberry PI4 для метеостанции».
Выше рассмотренные текстовые файлы (Data.txt, Pres.txt, Temper_1.txt, Veter_cr.txt, Veter_max.txt) остаются без изменения и размещаются на сервере по адресу – /var/www/html/meteost.ru/public_html. По этому-же адресу располагаются файлы «highcharts.js», «jquery.min.js» и «index.html». Папка JS располагается там же, в папке расположен файл «znach.js» - смотрите в «Сервер на Raspberry PI4 для метеостанции».
В файл «index.html» добавляем код вышеупомянутого файла «График.html». В итоге получаем модернизированный файл «index.html», код файла приведён ниже.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Метеостанция</title>
<!-- CSS описание страницы -->
<style type="text/css">
body {
width: 700px;
font-family: Arial, Verdana, sans-serif;
font-size: 110%;
color: #666;
background-color: #f8f8f8;
margin: 10px auto auto auto;}
h1 {margin: 0px auto 0px 230px;}
table {
border-spacing: 0px;
margin: 0px auto 0px auto;}
th, td {
padding: 5px 30px 5px 10px;
border-spacing: 0px;
font-size: 95%;
margin: 0px;}
th, td {
text-align: left;
background-color: #e0e9f0;
border-top: 1px solid #cbd2d8;
border-right: 1px solid #cbd2d8;}
tr.head th {
color: fff;
background-color: #90b4d6;
border-bottom: 2px solid #547ca0;
border-right: 1px solid #749abe;
border-top: 1px solid #90b4d6;
text-align: center;
text-shadow: -1px -1px 1px #666;
letter-spacing: 0.15em;}
td {
text-shadow: 1px 1px 1px #fff;
text-align: center;}
tr.even td, tr.even th {
background-color: #e8eff5;}
tr.head th:first-child {
border-top-left-radius: 5px;}
tr.head th:last-child {
border-top-right-radius: 5px;}
fieldset {
width: 310px;
margin-top: 20px;
border: 1px solid #d6d6d6;
background-color: #ffffff;
line-height: 1.6em;}
legend {
font-style: italic;
color: #666666;}
input[type="text"] {
width: 120px;
border: 1px solid #d6d6d6;
padding: 2px;
outline: none;}
input[type="text"]:focus, input[type="text"]:hover {
background-color: #d0e2f0;
border: 1px solid #999;}
input[type="submit"] {
border: 1px solid #006633;
background-color: #009966;
color: #ffffff;
border-radius: 5px;
padding: 5px;
margin-top: 10px;}
input[type="submit"]:hover {
border: 1px solid #006633;
background-color: #00cc33;
color: #ffffff;
cursor: pointer;}
.title {
float: left;
width: 160px;
clear: left;}
.submit {
width: 310px;
text-align: right;}
td.lef {text-align: left;}
div {margin: 10px auto auto auto;}
</style>
<!-- Прописываем пути к библиотекам создания графиков -->
<script src="jquery.min.js" type="text/javascript"></script>
<script src="highcharts.js" type="text/javascript"></script>
<!-- Прописываем пути к файлам содержащим массив данных "Температуры" -->
<script type="text/javascript">
var dat1=[0];
</script>
<script src="Temper_1.txt" type="text/javascript"></script>
<!-- Прописываем пути к файлам содержащим массив данных "Даты" -->
<script type="text/javascript">
var dat2=[0];
</script>
<script src="Data.txt" type="text/javascript"></script>
<!-- Прописываем пути к файлам содержащим массив данных "Атм. Давления" -->
<script type="text/javascript">
var dat3=[0];
</script>
<script src="Pres.txt" type="text/javascript"></script>
<!-- Прописываем пути к файлам содержащим массив данных "Средней скорости ветра" -->
<script type="text/javascript">
var dat4=[0];
</script>
<script src="Veter_cr.txt" type="text/javascript"></script>
<!-- Прописываем пути к файлам содержащим массив данных "Максимальной скорости ветра" -->
<script type="text/javascript">
var dat5=[0];
</script>
<script src="Veter_max.txt" type="text/javascript"></script>
<!-- ------------- Создаём таблицу с данными полученными от метеостанции ------------- -->
</head>
<body>
<h1>Метеостанция</h1>
<p>В таблице отображаются параметры переданные с внешнего (уличного) блока метеостанции (с. Троицкое).</p>
<table>
<tr class="head">
<th>Параметр</th>
<th>Значение</th>
<th>Ед. изм.</th>
</tr>
<tr>
<th>Температура на улице</th>
<td id="temper"></td>
<td class="lef">°С</td>
</tr>
<tr class="even">
<th>Влажность на улице</th>
<td id="vlash"></td>
<td class="lef">%</td>
</tr>
<tr>
<th>Направление ветра</th>
<td id="napr"></td>
<td id="napr1" class="lef">
</td>
</tr>
<tr class="even">
<th>Скорость ветра (сред.)</th>
<td id="skor_s"></td>
<td class="lef">м/с</td>
</tr>
<tr class="even">
<th>Скорость ветра (макс.)</th>
<td id="skor_m"></td>
<td class="lef">м/с</td>
</tr>
<tr>
<th>Атм. Давление</th>
<td id="davl"></td>
<td class="lef">мм.рт.ст</td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
</tr>
<tr>
<th>Дата и время измерения показаний метеостанции</th>
<td id="vrm"></td>
<td id="vrm1"></td>
</tr>
</table>
<script src="js/znach.js"></script>
<p></p>
<!-- ------------------- Построение графиков ---------------------- -->
<!-- График температуры - данные читаются из двух файлов (для оси ординат и абсцисс соответственно) -->
<script type="text/javascript">
var chart;
$(document).ready(function(){
chart = new Highcharts.Chart({
chart: {renderTo: 'container'},
series: [{name: 'Температура',data: dat1,
zones: [{value: 0,color: '#00ade9'},{color: '#f6a655'}] }],
title: {text: 'График температуры.'},
xAxis: {categories: dat2,},
yAxis: {title: {text: 'Температура (\xB0C)'}},
plotOptions: {line: {dataLabels: {enabled: true}}}, }); });
</script>
<!-- График Атм. давления - данные читаются из двух файлов (для оси ординат и абсцисс соответственно) -->
<script type="text/javascript">
var chart1;
$(document).ready(function(){
chart1 = new Highcharts.Chart({
chart: {renderTo: 'container1'},
series: [{name: 'Давление',data: dat3 ,color: '#6a6cb0'}],
title: {text: 'График атмосферного давления.'},
xAxis: {categories: dat2,},
yAxis: {title: {text: 'Атм. давление (мм.рт.ст.)'}},
plotOptions: {line: {dataLabels: {enabled: true}}},
});
});
</script>
<!-- График Скорости ветра (средняя и максимальная) - данные читаются из трёх файлов (два для оси ординат и один абсцисс соответственно) -->
<script type="text/javascript">
var chart2;
$(document).ready(function(){
chart1 = new Highcharts.Chart({
chart: {renderTo: 'container2'},
series: [{name: 'Скорость ветра средняя',data: dat4 ,color: '#008180' ,dashStyle: 'longdash'},
{name: 'Скорость ветра максимальная.',data: dat5 ,color: '#00aca5' ,dashStyle: 'shortdot'} ],
title: {text: 'Скорость ветра средняя и максимальная.'},
xAxis: {categories: dat2,},
yAxis: {title: {text: 'Скорость ветра (м/c)'}},
plotOptions: {line: {dataLabels: {enabled: true}}},
});
});
</script>
<!-- Выводим графики в отдельные контейнеры -->
<div
id="container" style="width: 700px; height: 400px ">
</div>
<div
id="container1" style="width: 700px; height: 400px ">
</div>
<div
id="container2" style="width: 700px; height: 400px ">
</div>
</body>
</html>
В принципе если сейчас запустить файл «index.html», то мы получим готовую Html страницу, просматриваемую через браузер.
Для того чтобы графики обновлялись два раза в сутки (в 11 и 23 часа , в архиве имеется файл в котором время устанавливается 1 и 13 часов), а старые данные недельной давности удалялись, необходимо модернизировать файл «i2c_Data.py». Данный файл расположен на сервере по адресу - /home/ubuntu. Файл «i2c_Data.py» должен быть в автозагрузке при запуске ОС (См. «Сервер на Raspberry PI4 для метеостанции»).
Данная программа будет копировать данные с текстовых файлов, удалять данные недельной давности, добавлять последние измеренные данные и переписывать в те же самые файлы.
Ниже представлен код (написанный на Python) модернизированного файла «i2c_Data.py».
Далее загружаем фал на сервер по вышеуказанному адресу. Настройки сервера смотрите в «Сервер на Raspberry PI4 для метеостанции».
Перезагружаем сервер и заходим на сервер через браузер с внешнего компьютера.
В результате должна появиться подобная картинка.
