測定結果をビジュアルに④四つのBME680のデータを表示＜その2＞
前回、iframeで四つの画像を表示しました。ここでは、四つの画像ファイルを出力してtableタグで表示する方法を検討します。
●プログラム
tableのタグを埋め込みました。
pio.write_image(fig, savefile, format='png')
の実行のために、途中でOrcaが必要だというメッセージが出たので、そのままメッセージに従ってインストールしました。
while()文の手前で、ダミーデータを使って表組を完成させます。
import plotly.graph_objects as go
import time
import plotly.io as pio
dummy = 0
def drawGauge(value,legendgrouptitle_text,gauge_axis_dtick,gauge_bar_color,gauge_bgcolor,gauge_axis_range,title ,savefile):
fig = go.Figure(go.Indicator(
mode = "gauge+number",
value = value,
legendgrouptitle_text = legendgrouptitle_text,
domain = {'x': [0, 1.0], 'y': [0, 1.0]},
gauge_axis_dtick= gauge_axis_dtick,
gauge_axis_tickwidth=3,
gauge_bar_color=gauge_bar_color,
gauge_bar_line_width=1,
gauge_bar_thickness=0.85,
gauge_bgcolor=gauge_bgcolor,
gauge_axis_range=gauge_axis_range,
title = {'text': title}
))
pio.write_image(fig, savefile, format='png')
f = open('/home/pi/index.html','w')
f.write('<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">')
f.write('<META HTTP-EQUIV="Refresh" CONTENT="7"></head>')
f.write('<body><table width="800"><tr><td>')
Temp = dummy
drawGauge(value=Temp,legendgrouptitle_text="`C",gauge_axis_dtick=5,gauge_bar_color="RED",gauge_bgcolor="#efe",gauge_axis_range=list([0,60]),title="温 度[`C]",savefile="/home/pi/temp1.png")
time.sleep(2)
f.write('<img src="/home/pi/temp1.png" width="350">')
f.write('</td><td>')
Humi = dummy
drawGauge(value=Humi,legendgrouptitle_text="%",gauge_axis_dtick=10,gauge_bar_color="RED",gauge_bgcolor="#efe",gauge_axis_range=list([0,100]),title="湿 度[%]",savefile="/home/pi/temp2.png")
time.sleep(2)
f.write('<img src="/home/pi/temp2.png" width="350">')
f.write('</tr><tr><td>')
Press = dummy
drawGauge(value=Press,legendgrouptitle_text="hPa",gauge_axis_dtick=100,gauge_bar_color="RED",gauge_bgcolor="#efe",gauge_axis_range=list([600,1160]),title="気 圧[hPa]",savefile="/home/pi/temp3.png")
time.sleep(2)
f.write('<img src="/home/pi/temp3.png" width="350">')
f.write('</td><td>')
Air = dummy
drawGauge(value=Air,legendgrouptitle_text="ohm",gauge_axis_dtick=1000,gauge_bar_color="RED",gauge_bgcolor="#efe",gauge_axis_range=list([0,12000]),title="大気の汚れ[Ω]",savefile="/home/pi/temp4.png")
time.sleep(2)
f.write('<img src="/home/pi/temp4.png" width="350">')
f.write('</tr></table></body>\n')
f.flush()
while 1:
ft = open('/sys/bus/i2c/devices/1-0076/iio:device0/in_temp_input')
try:
Temp = round(int(ft.read()) / 1000.0, 1)
except:
Temp = 1
ft.close()
drawGauge(value=Temp,legendgrouptitle_text="`C",gauge_axis_dtick=5,gauge_bar_color="RED",gauge_bgcolor="#efe",gauge_axis_range=list([0,60]),title="温 度[`C]",savefile="/home/pi/temp1.png")
time.sleep(1)
fh = open('/sys/bus/i2c/devices/1-0076/iio:device0/in_humidityrelative_input')
try:
Humi = round(float(fh.read().replace( '\n' , '' )) , 1)
except:
Humi = 1
fh.close()
drawGauge(value=Humi,legendgrouptitle_text="%",gauge_axis_dtick=10,gauge_bar_color="RED",gauge_bgcolor="#efe",gauge_axis_range=list([0,100]),title="湿 度[%]",savefile="/home/pi/temp2.png")
time.sleep(1)
fp = open('/sys/bus/i2c/devices/1-0076/iio:device0/in_pressure_input')
try:
Press = round(float(fp.read()) , 1)
except:
Press = 1
fp.close()
drawGauge(value=Press,legendgrouptitle_text="hPa",gauge_axis_dtick=100,gauge_bar_color="RED",gauge_bgcolor="#efe",gauge_axis_range=list([600,1160]),title="気 圧[hPa]",savefile="/home/pi/temp3.png")
time.sleep(1)
fa = open(r'/sys/bus/i2c/devices/1-0076/iio:device0/in_resistance_input')
try:
Air = int(fa.read())
except:
Air = 1
fa.close()
drawGauge(value=Air,legendgrouptitle_text="ohm",gauge_axis_dtick=1000,gauge_bar_color="RED",gauge_bgcolor="#efe",gauge_axis_range=list([0,12000]),title="大気の汚れ[Ω]",savefile="/home/pi/temp4.png")
time.sleep(3.5)
f.flush()
#os.remove("/home/pi/temp1.png")
#os.remove("/home/pi/temp2.png")
#os.remove("/home/pi/temp3.png")
#os.remove("/home/pi/temp4.png")
f.close()
実行中の様子です。iframeに比べ、レスポンスがよいです。
