plotlyでゲージを二つ

　plotlyライブラリは、図形をWebに表示します。

環境

• ラズパイ4　5.10.63
• Python　3.9.2
• plotly　5.4.0

Gaugeはsubplotsでは複数の表示ができないみたいな気がする

　iframeをつかって二つのGaugeデータを、一つのWebページに表示します。
　図形Gaugeの一つは、ラズパイのCPUのクロックです。1.5GHzや1.8GHzが最高クロックで、CPUが熱くなると700MHzなどに下がります。もう一つのGaugeはCPUの温度です。どちらもvcgencmdコマンドで取得できますが、数値以外に文字が引っ付いているので、除去します。
　どちらも関数にしました。関数の最後で、fig.write_html("/home/pi/temp-plot.html")とfig2.write_html("/home/pi/temp-plot2.html")のうように、それぞれのページに画像データをhtmlで書き込んでいます。
　それらを/home/pi/index.htmlページに、iframeで合成します。
f.write('<iframe id="igraph1" scrolling="no" style="border:none;" seamless="seamless" src="/home/pi/temp-plot.html" height="525" width="500"></iframe>')
f.write('<iframe id="igraph2" scrolling="no" style="border:none;" seamless="seamless" src="/home/pi/temp-plot2.html" height="525" width="500"></iframe>')

import plotly.graph_objects as go
import subprocess
import time

def p1():
    clk = subprocess.getoutput("vcgencmd measure_clock arm").split('=')
    CLK = int(clk[1])/1000000.0
    fig = go.Figure(go.Indicator(
        mode = "gauge+number",
        value = CLK,
        legendgrouptitle_text = 'hPa',
        domain = {'x': [0, 1], 'y': [0, 0.9]},
        gauge_axis_dtick= 200,
        gauge_axis_tickwidth=3,
        gauge_bar_color='red',
        gauge_bar_line_width=1,
        gauge_bar_thickness=0.85,gauge_bgcolor='#efd',
        gauge_axis_range=list([400,2000]),
        title = {'text': "クロック[MHz]"}
        ))
    fig.write_html("/home/pi/temp-plot.html")

def p2():
    temp = subprocess.getoutput("vcgencmd measure_temp").split('=')
    T = float(temp[1].split("'")[0])
    fig2 = go.Figure(go.Indicator(
        mode = "gauge+number",
        value = T,
        legendgrouptitle_text = 'hPa',
        domain = {'x': [0, 1], 'y': [0, 0.9]},
        gauge_axis_dtick= 20,
        gauge_axis_tickwidth=3,
        gauge_bar_color='red',
        gauge_bar_line_width=1,
        gauge_bar_thickness=0.85,gauge_bgcolor='#dfd',
        gauge_axis_range=list([-20,110]),
        title = {'text': "温度[℃]"}
        ))
    fig2.write_html("/home/pi/temp-plot2.html")

f = open('/home/pi/index.html','w')
f.write('<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">')
#f.write('<META HTTP-EQUIV="Refresh" CONTENT="5">')
f.write('<iframe id="igraph1" scrolling="no" style="border:none;" seamless="seamless" src="/home/pi/temp-plot.html" height="525" width="500"></iframe>')
f.write('<iframe id="igraph2" scrolling="no" style="border:none;" seamless="seamless" src="/home/pi/temp-plot2.html" height="525" width="500"></iframe>')

while 1:
    p1()
    p2()
    time.sleep(5)
    f.close()

　f.write('<META HTTP-EQUIV="Refresh" CONTENT="5">')で自動リフレッシュをさせたのですが、Gaugeの描画に時間がかかるため、Webが真っ白になっている時間が長かったので、見ている人が自分でリロードするようにしました。