Myu: ESP32＋BME280　bottleコードの調整

ESP32からのデータをbottleで表示するコードを少し調整。スマホでの表示が見ずらいので少し調整してみたのがこちら

latest_cap = None
LOG_FILE = "cap_log.txt"
MAX_LINES = 200

def read_log():
    if not os.path.exists(LOG_FILE):
        return []
    with open(LOG_FILE, "r") as f:
        return f.readlines()

def write_log(lines):
    with open(LOG_FILE, "w") as f:
        f.writelines(lines)

latest_cap = None
LOG_FILE = "cap_log.txt"
MAX_LINES = 200
def read_log():
    if not os.path.exists(LOG_FILE):
        return []
    with open(LOG_FILE, "r") as f:
        return f.readlines()
def write_log(lines):
    with open(LOG_FILE, "w") as f:
        f.writelines(lines)
@app.route('/py/cap') 
def cap_handler():
    global latest_cap,latest_t,latest_p,latest_h
    latest_cap = None
    latest_t = None
    latest_p = None
    latest_h = None
    cap_value = request.query.cap  # ?cap=123 または ?cap=list10   list10だと最新の１０個データ表示
    
    t_value= request.query.t
    p_value= request.query.p
    h_value= request.query.h

if cap_value:
        if cap_value.startswith("list"):
            # ?cap=listN の場合
            try:
                n = int(cap_value[4:])
                lines = read_log()
                latest_lines = lines[-n:] if n > 0 else []
                response.content_type = 'application/json'
                # JSON形式で返す
                result = []
                for line in latest_lines:
                    dt_str, value_str,value_t,value_p,value_h = line.strip().split(',', 4)
                    result.append({
                     "datetime": dt_str,
                     "cap": int(value_str),
                     "temp": float(value_t),
                     "hpa": float(value_p),
                     "hum": float(value_h)
                     })
                return json.dumps(result)
            except ValueError:
                response.status = 400
                return "Invalid list parameter"
        else:
            # 数値の場合
            try:
                latest_cap = int(cap_value)
                latest_t=float(t_value)
                latest_p=float(p_value)
                latest_h=float(h_value)
                now_str = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
                line = f"{now_str},{latest_cap},{latest_t},{latest_p},{latest_h}\n"
                
                # ログを読み込んで追記
                lines = read_log()
                lines.append(line)
                # 最大行数を維持
                if len(lines) > MAX_LINES:
                    lines = lines[-MAX_LINES:]
                write_log(lines)

return f"Cap value {latest_cap} saved.\n"
            except ValueError:
                response.status = 400
                return "Invalid value"
    else:
        # パラメータなし → 最新値返す
        if latest_cap is not None:
            response.content_type = 'application/json'
            return json.dumps({"latest_cap": latest_cap})
        else:
            response.status = 404
            return "No data yet"
@app.route('/py/captable')
def captable():
    return """
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>灯油タンク残量概算</title>
<style>
body {
  font-family: sans-serif;
  margin: 1em;
}

/* 入力エリア */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
}
.controls label, .controls button {
  font-size: 1em;
}

/* テーブル */
table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 1em;
  font-size: 0.95em;
}
th, td {
  border: 1px solid #999;
  padding: 0.5em;
  text-align: center;
}

/* スマホ向け：フォント少し小さく、テーブル横スクロール可 */
@media (max-width: 600px) {
  body { font-size: 0.9em; }
  .controls { flex-direction: column; align-items: flex-start; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  th, td { padding: 0.4em 0.6em; }
}
</style>
</head>
<body>
<h3>残量データ一覧</h3>

const a = parseFloat(document.querySelector('#a').value);
  const b = parseFloat(document.querySelector('#b').value);

// 最新を上に
  data.slice().reverse().forEach(item => {
    const tr = document.createElement('tr');
    const conv = a * item.cap + b;
    tr.innerHTML = `
      <td>${item.datetime}</td>
      <td>${item.cap}</td>
      <td>${conv.toFixed(2)}</td>
      <td>${item.temp}</td>
      <td>${item.hpa}</td>
      <td>${item.hum}</td>
    `;
    tbody.appendChild(tr);
  });
}

document.querySelector('#reload').addEventListener('click', loadData);
loadData();
</script>
</body>
</html>
"""

@app.route('/py/dashboard2')
def dashboard2():
    return """
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>

/* 画面幅に応じて伸縮し、横スクロールが出ないようにする */
.framebox iframe {
    width: 100%;
    aspect-ratio: 16 / 9;   /* ← 高さ400pxの代わりにコレ！ */
    border: 1px solid #ccc;
}
</style>
</head>

<body>
<h2>Dashboard</h2>

</body>
</html>
"""

@app.route('/py/capgraph')
def capgraph():
    return """
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>残量グラフ</title>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>

// x軸ラベル
    const labels = data.map(d => d.datetime.slice(5, 16));  // "12-06 15:22"

loadGraphData();
</script>
</body>
</html>
"""

Myu

2025年12月6日土曜日

ESP32＋BME280　bottleコードの調整

0 件のコメント:

コメントを投稿

ブログアーカイブ

2025年12月6日土曜日

ESP32＋BME280 bottleコードの調整

0 件のコメント:

コメントを投稿

ESP32＋BME280　bottleコードの調整