カテゴリー: あれこれ

AsyncWebServerRequest *request; #requestというオブジェクトを作成
request->send(SPIFFS,"/hogehoge.hoge",String(),false,processor);

// 必要なライブラリのインクルード
#include <wifi.h>　
#include <spi.hamp>
#include <webserver.h>
#include <spiffs.h>
#include <adafruit_gfx.h>
#include <adafruit_ssd1306.h>


byte hdr, data_h, data_l, chksum;
String inputString = "";
float distance=0;
float new_distance=0;
float val=0.00f;

// ピンの定義
#define wifyOn 4 // wify 接続OK
#define wifyOff 2 // wify 未接続

//OLE
#define OLED_RESET     -1 
#define SCREEN_ADDRESS 0x3C //< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 32 // OLED display height, in pixels

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

// WiFi接続情報（固定IP）
const char* ssid = "*************";
const char* password = "**********";
const IPAddress ip(192, 168, 2, 30);
const IPAddress gateway(192, 168, 2, 2);
const IPAddress subnet(255, 255, 255, 0);
const IPAddress dns1(192, 168, 2, 2);


// WebServerオブジェクトの初期化
WebServer server(80);

// セットアップ関数
void setup() {

  Serial.begin(115200); // シリアル通信の開始
  Serial2.begin(9600,SERIAL_8N1,16,17);

//OLE開始
  if(!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
    Serial.println(F("SSD1306 allocation failed"));
    for(;;); // Don't proceed, loop forever
  }

  display.display();
  delay(2000); // Pause for 2 seconds

  // Clear the buffer
  display.clearDisplay();

 //OLE初期設定
  display.setTextSize(2);             // Draw 2X-scale text
  display.setTextColor(SSD1306_WHITE);
  display.print(F("wify-set"));
  display.display(); 

  pinMode(wifyOn, OUTPUT);
  pinMode(wifyOff, OUTPUT);

  digitalWrite(wifyOn, LOW);
  digitalWrite(wifyOff, HIGH);
  
   // SPIFFSの初期化
  if(!SPIFFS.begin(true)){
    Serial.println("SPIFFSのマウントに失敗しました");
    return;
  }

  // WiFi接続
  if (!WiFi.config(ip,gateway,subnet,dns1)){
      Serial.println("Failed to configure!");
  }
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
      delay(500);
      Serial.print(".");
  }

  digitalWrite(wifyOn, HIGH);
  digitalWrite(wifyOff, LOW);

  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  // Webサーバーのルート設定
  server.on("/", HTTP_GET, []() {
    server.send(200, "text/html", SPIFFS.open("/index.html", "r").readString());
  });

  // '/distance'で距離を返す設定
  server.on("/distance", HTTP_GET, []() {
    server.send(200, "text/plain", String(measureDistance()));
  });

  server.begin(); // サーバーの開始
}

// メインループ
void loop() {
  server.handleClient(); // クライアントのリクエストを処理
}

// 距離測定関数
float measureDistance() {
  char m[50];
   Serial2.write("S");
  if (Serial2.available())
  {
    hdr = (byte)Serial2.read();
    if (hdr == 255){
      data_h = (byte)Serial2.read();
      data_l = (byte)Serial2.read();
      chksum = (byte)Serial2.read();

      if (chksum == ((hdr + data_h + data_l)&0x00FF)){
        distance = data_h * 256 + data_l;

        //if(distance!=new_distance){
          display.clearDisplay();
          new_distance=distance;
          dtostrf(new_distance, 6, 1, m);
          Serial.print(m);
          Serial.println(" mm");
          display.setCursor(0, 0);
          display.println("distance= ");
          display.print(m);
          display.println(" mm");
          display.display(); 
         // delay(100);
          //return new_distance;
        //}      
      }
    }
  }
   delay(100); 
  return distance;
 
}

// 距離測定関数
float measureDistance() {
　digitalWrite(trigPin, LOW);
　delayMicroseconds(2);
　digitalWrite(trigPin, HIGH);
　delayMicroseconds(10);
　digitalWrite(trigPin, LOW);
　long duration = pulseIn(echoPin, HIGH);
　float distance = (duration * 0.0343) / 2;*/
　return distance;
}

float measureDistance() {
　while (Serial.available()) {
　　　char inChar = (char)Serial.read();
　　　inputString += inChar;
　　　if (inChar == '\n') {
　　　　　distance=inputString.toFloat();
　　　　　inputString="";
　　　　　return distance;
　　　}
　}
　return distance;
}

// 必要なライブラリのインクルード
#include <WiFi.h>
#include <WebServer.h>
#include <SPIFFS.h>

// ピンの定義
#define trigPin 5 // 超音波センサのトリガーピン
#define echoPin 18 // 超音波センサのエコーピン

// WiFi接続情報
const char* ssid = "Your SSID";
const char* password = "Your Password";

// WebServerオブジェクトの初期化
WebServer server(80);

// セットアップ関数
void setup() {
  Serial.begin(115200); // シリアル通信の開始
  pinMode(trigPin, OUTPUT); // トリガーピンを出力として設定
  pinMode(echoPin, INPUT); // エコーピンを入力として設定

  // SPIFFSの初期化
  if(!SPIFFS.begin(true)){
    Serial.println("SPIFFSのマウントに失敗しました");
    return;
  }

  // WiFi接続
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi connected");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Webサーバーのルート設定
  server.on("/", HTTP_GET, []() {
    server.send(200, "text/html", SPIFFS.open("/index.html", "r").readString());
  });

  // '/distance'で距離を返す設定
  server.on("/distance", HTTP_GET, []() {
    server.send(200, "text/plain", String(measureDistance()));
  });

  server.begin(); // サーバーの開始
}

// メインループ
void loop() {
  server.handleClient(); // クライアントのリクエストを処理
}

// 距離測定関数
float measureDistance() {
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);
  long duration = pulseIn(echoPin, HIGH);
  float distance = (duration * 0.0343) / 2;
  return distance;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水位計</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
            font-size: 20px;
        }
        #container {
            width: 90%;
            height: 50%;
        }
        .settings {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }
        .settings > div {
            margin: 0 10px;
        }
        .alert {
            display: none;
            color: red;
            text-align: center;
            position: absolute;
            width: 100%;
            bottom: 10%;
        }
        #title {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="title">Water Level monitoring</div>
    <div class="settings">
        
        <div>
            <label for="minDistance">0% Distance (cm): </label>
            <input type="number" id="minDistance" value="2">
        </div>
        <div>
            <label for="maxDistance">100% Distance (cm): </label>
            <input type="number" id="maxDistance" value="15">
        </div>
    </div>
    <div id="container"></div>
    <div id="alert" class="alert">Alert: The value is below 20%</div>

    
    <script>
        var minDistance = parseFloat(document.getElementById('minDistance').value);
        var maxDistance = parseFloat(document.getElementById('maxDistance').value);

        document.getElementById('minDistance').addEventListener('change', function() {
            minDistance = parseFloat(this.value);
            updateChart();
        });

        document.getElementById('maxDistance').addEventListener('change', function() {
            maxDistance = parseFloat(this.value);
            updateChart();
        });


        // Highchartsのゲージオプション設定
        var gaugeOptions = {
            chart: {
                type: 'solidgauge',
            },
            title: null,
            pane: {
                startAngle: -120,
                endAngle: 120,
                background: {
                    backgroundColor: '#EEE',
                    innerRadius: '60%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            },
            tooltip: {
                enabled: false
            },
            yAxis: {
                stops: [
                    [0.1, '#DF5353'], // 高い値で青系
                    [0.5, '#DDDF0D'], // 中間値で黄色
                    [0.9, '#55BF3B']  // 低い値で赤系
                ],
                lineWidth: 0,
                minorTickInterval: null,
                tickAmount: 2,
                min: 0,
                max: 100,
                title: null,
                labels: {
                    y: 16
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Distance',
                data: [100], // 初期値
                dataLabels: {
                    format: '<div style="text-align:center"><span style="font-size:30px">{y}%</span></div>'
                }
            }]
        };

        // Highchartsのゲージを作成
        var chart = Highcharts.chart('container', Highcharts.merge(gaugeOptions, {
            series: [{
                data: [100] // シリーズにも初期値をセット
            }]
        }));

        // ゲージの値を更新する関数
        function updateGauge(value) {
            // minDistanceとmaxDistanceを使用して値を計算
            var newVal = ((maxDistance - value) / (maxDistance - minDistance)) * 100;
            
            // newValが0未満の場合は0に、100を超える場合は100に制限する
            newVal = Math.max(0, Math.min(newVal, 100));    
            newVal = Math.round(newVal); // 小数点以下を四捨五入して整数に
            chart.series[0].points[0].update(newVal);

            // 値が20以下の場合、アラートを表示
            if (newVal <= 20) {
                document.getElementById('alert').style.display = 'block';
            } else {
                document.getElementById('alert').style.display = 'none';
            }
        }

        // ESP32からデータを取得してゲージを更新する
        // HTML内のJavaScriptの一部
        // HTML内のJavaScriptの一部
        setInterval(function () {
            fetch('/distance')
                .then(response => response.text())
                .then(distance => {
                var dist = parseFloat(distance);
                updateGauge(dist); // ゲージを更新する関数に距離データを渡す
                })
                .catch(function (error) {
                console.error('Error fetching distance:', error);
                });
        }, 1000); // 1秒ごとに更新
    </script>
</body>
</html>