UnoR4WiFi_Webserver libraryがうごいた
/* main.cpp
* This example demonstrates how to create a multi-page web server with:
* - Home page with navigation
* - Temperature monitoring page
* - LED control page
*
* Hardware: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
* Library: UnoR4WiFi_WebServer
*/
#include <UnoR4WiFi_WebServer.h>
#include "home.h"
#include "temperature.h"
#include "led.h"
#include "arduino_secrets.h"
// WiFi credentials
const char WIFI_SSID[] = SECRET_SSID;
const char WIFI_PASSWORD[] = SECRET_PASS;
// LED configuration
#define LED_PIN 13
int ledState = LOW; // Track LED state
// Create web server instance
UnoR4WiFi_WebServer server;
// Helper function to send LED page with current status
void sendLedPage(WiFiClient& client) {
String ledStatus = (ledState == HIGH) ? "ON" : "OFF";
String response = LED_PAGE;
response.replace("%LED_STATUS%", ledStatus);
server.sendResponse(client, response.c_str());
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HOME_PAGE);
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = 25.5; // Simulated temperature value, you can replace with actual sensor reading
String response = TEMPERATURE_PAGE;
response.replace("%TEMP_C%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void handleLed(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
sendLedPage(client);
}
void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = HIGH;
digitalWrite(LED_PIN, ledState);
sendLedPage(client);
}
void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = LOW;
digitalWrite(LED_PIN, ledState);
sendLedPage(client);
}
void setup() {
Serial.begin(9600);
delay(1000);
// Initialize LED pin
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, ledState);
Serial.println("Arduino Uno R4 WiFi - Multi-Page Web Server");
// Connect to WiFi
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
delay(1000); // ここが大変重要で入れないとconnected 0.0.0.0でdhcpdがうごかん！
Serial.println(" connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
server.addRoute("/led", handleLed);
server.addRoute("/led/on", handleLedOn);
server.addRoute("/led/off", handleLedOff);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
ーーーーーーーーーーーーーhome.hーーーーーーーーーーーーーーーーーーーーーーーーーー
#ifndef HOME_H
#define HOME_H
const char HOME_PAGE[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>Arduino Web Server</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
background-color: #f5f5f5;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
margin-bottom: 30px;
}
.nav-menu {
list-style: none;
padding: 0;
margin: 0;
}
.nav-item {
margin: 15px 0;
}
.nav-link {
display: inline-block;
padding: 15px 30px;
text-decoration: none;
background-color: #007bff;
color: white;
border-radius: 5px;
font-size: 16px;
min-width: 200px;
transition: background-color 0.3s;
}
.nav-link:hover {
background-color: #0056b3;
}
.description {
margin: 30px 0;
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<h1>Arduino Uno R4 WiFi Web Server</h1>
<div class="description">
<p>Welcome to the Arduino web server demo!</p>
<p>Explore the features below:</p>
</div>
<ul class="nav-menu">
<li class="nav-item">
<a href="/temperature" class="nav-link">🌡️ Temperature Data</a>
</li>
<li class="nav-item">
<a href="/led" class="nav-link">💡 LED Control</a>
</li>
</ul>
<br><br><br><br>
This works with Arduino Uno R4 WiFi and <a href="https://diyables.io/products/diyables-stem-v4-iot-fully-compatible-with-arduino-uno-r4-wifi" target="_blank">DIYables STEM V4 IoT</a>
</div>
</body>
</html>
)rawliteral";
#endif
ーーーーーーーーーーーーーーーled.hーーーーーーーーーーーーーーーーーーーーーーー
#ifndef LED_H
#define LED_H
const char LED_PAGE[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>LED Control</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
.led-status {
font-size: 24px;
font-weight: bold;
color: #0000ff;
}
.button {
display: inline-block;
padding: 10px 20px;
margin: 10px;
text-decoration: none;
background-color: #007bff;
color: white;
border-radius: 5px;
border: none;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>LED Control Panel</h1>
<div>LED Status: <span class="led-status">%LED_STATUS%</span></div>
<p>Control the LED using the buttons below:</p>
<a href="/led/on" class="button">Turn LED ON</a>
<a href="/led/off" class="button">Turn LED OFF</a>
<br><br>
<a href="/">Back to Home</a>
<br><br><br><br>
This works with Arduino Uno R4 WiFi and <a href="https://diyables.io/products/diyables-stem-v4-iot-fully-compatible-with-arduino-uno-r4-wifi" target="_blank">DIYables STEM V4 IoT</a>
</body>
</html>
)rawliteral";
#endif
-------------------temperture.h-----------------------------
#ifndef TEMPERATURE_H
#define TEMPERATURE_H
const char TEMPERATURE_PAGE[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>Temperature Data</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
background-color: #f5f5f5;
}
.temperature-container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: inline-block;
margin: 20px;
}
.temperature-value {
font-size: 48px;
font-weight: bold;
color: #0066cc;
margin: 20px 0;
}
.info {
margin: 20px 0;
font-size: 16px;
color: #666;
}
.refresh-btn {
background: #0066cc;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
margin: 10px;
display: inline-block;
}
</style>
</head>
<body>
<h1>🌡️ Temperature Monitor</h1>
<div class="temperature-container">
<div class="temperature-value">%TEMP_C%°C</div>
<div class="info">
<p><strong>Status:</strong> Temperature reading</p>
<p><em>Refresh the page to see updated values</em></p>
</div>
<a href="/temperature" class="refresh-btn">🔄 Refresh</a>
<a href="/" class="refresh-btn">🏠 Home</a>
<br><br><br><br>
This works with Arduino Uno R4 WiFi and <a href="https://diyables.io/products/diyables-stem-v4-iot-fully-compatible-with-arduino-uno-r4-wifi" target="_blank">DIYables STEM V4 IoT</a>
</div>
</body>
</html>
)rawliteral";
#endif
0 件のコメント:
コメントを投稿