Arduino Code For Temperature Sensing
ATMEGA168
#include <WiFi.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#include <WebServer.h>
// Pins for sensors
const int tempPin = 32; // GPIO pin for DS18B20 temperature sensor
const int lightPin = 35; // GPIO pin for LDR (Light Sensor)
String selectedTheme = "dance";
// DS18B20 Temperature setup
OneWire oneWire(tempPin);
DallasTemperature sensors(&oneWire);
// WiFi credentials
const char* ssid = "WiFi_Name"; // Replace with your WiFi SSID
const char* password = "Passwrd"; // Replace with your WiFi Password
// Create a web server on port 80
WebServer server(80);
// Variables for sensor readings
float temperatureC = 0.0; // Variable to store the temperature
int lightIntensity = 0; // Variable to store the light intensity (in Lux)
// HTML login page
const char* loginPage = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<style>
* {text-align: center; background-color: thistle; margin: 1%; padding: 1%; width:
auto;}
h1 {color: red;}
body {background-color: honeydew;}
.login-container {width: 200px; margin: 0 auto; background-color: aqua; padding:
55px;
border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
input {background: aliceblue;}
textarea {margin-top: 10px; background-color: white;}
</style>
<title>Tip Jar Login</title>
</head>
<body>
<h1>Tip Jar</h1>
<div class="login-container">
<form action="/submit" method="post">
<input type="text" name="username" placeholder="User ID"><br>
<input type="password" name="password" placeholder="Password"><br>
<input type="submit" value="Login"><br>
<textarea readonly="readonly" id="LoginStatus"></textarea>
</form>
</div>
</body>
</html>
)rawliteral";
// HTML content for measurements
const char* measurement = R"rawliteral(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Measurements</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
font-family: Arial, sans-serif;
background-color: thistle;
h1 { text-align: center; }
.circle {
position: relative;
width: 380px;
height: 380px;
border-radius: 50%;
border: 3px solid black;
background: conic-gradient(magenta, red, yellow, green, cyan, blue,
magenta);
margin: 20px 0;
.lcd-display {
width: 300px;
background-color: deepskyblue;
color: #787676;
font-family: Georgia, 'Times New Roman', Times, serif, monospace;
padding: 10px;
text-align: center;
.lcd-line { display: block; font-size: 20px; }
.pointer {
width: 5px;
height: 160px;
position: absolute;
top: 7.75%;
left: 49%;
transform-origin: bottom center;
.tempPointer { background-color: whitesmoke;
box-shadow: 1px 1px 2px 1px #4d5415;
width: 2px;
height: 160px;
.lightPointer { background-color: black; opacity: 0.7;
box-shadow: 2px 1px 2px 1px #e8eae9cd;
width: 2px;
height: 160px;}
.marker {
position: absolute;
width: 1px;
height: 10px;
background-color: black;
.label {
position: absolute;
font-size: 14px;
text-align: center;
transform-origin: center;
color: #c07204f8;
text-shadow: 1px 1px 2px silver, 0 0 1em white, 0 0 0.3em black;
.legend span {
display: block;
padding-top: 10%;
padding-bottom:10%;
</style>
</head>
<body>
<h1>The Vibe</h1>
<div class="lcd-display">
<span class="lcd-line" id="Temperature">%TEMPERATURE% °C</span>
<span class="lcd-line" id="Intensity">%INTENSITY% Lux</span>
</div>
<hr />
<div class="circle" id="circle">
<div class="pointer tempPointer" id="tempPointer"></div>
<div class="pointer lightPointer" id="lightPointer"></div>
</div>
<div class="legend">
<span><strong>Legend:</strong></span>
<span><div class="tempPointer" style="display:inline-block; width:50px;
height:5px; vertical-align: right;"></div> - Temperature</span>
<span><div class="lightPointer" style="display:inline-block; width:50px;
height:5px; vertical-align: middle;"></div> - Light Intensity</span>
</div>
<button class="button"
onclick="window.location.href='/control_page'">Controls</button>
<script>
const temperatureMin = -10, temperatureMax = 50;
const lightMin = 0, lightMax = 1200;
const numMarkers = 12;
// Function to position markers and labels around the circle
function addMarkers() {
const circle = document.getElementById('circle');
const radius = circle.clientWidth / 2;
for (let i = 0; i < numMarkers; i++) {
let angle = (i / numMarkers) * 360;
let angleRad = (angle - 90) * Math.PI / 180; // Adjust angle to start from top
(12 o'clock)
let tempValue = temperatureMin + (i / numMarkers) * (temperatureMax -
temperatureMin);
let lightValue = lightMin + (i / numMarkers) * (lightMax - lightMin);
// Positions for markers
let markerX = radius + (radius - 3) * Math.cos(angleRad);
let markerY = radius + (radius - 3) * Math.sin(angleRad);
// Positions for temperature labels (outside)
let tempLabelX = radius + (radius + 22) * Math.cos(angleRad);
let tempLabelY = radius + (radius + 15) * Math.sin(angleRad);
// Positions for light intensity labels (inside)
let luxLabelX = radius + (radius - 25) * Math.cos(angleRad);
let luxLabelY = radius + (radius - 25) * Math.sin(angleRad);
// Create marker
const marker = document.createElement('div');
marker.className = 'marker';
marker.style.left = `${markerX - 1}px`;
marker.style.top = `${markerY - 10.08}px`;
marker.style.transform = `rotate(${angle}deg)`;
circle.appendChild(marker);
// Create temperature label
const tempLabel = document.createElement('div');
tempLabel.className = 'label';
tempLabel.style.left = `${tempLabelX}px`;
tempLabel.style.top = `${tempLabelY}px`;
tempLabel.innerHTML = `${Math.round(tempValue)}°C`;
tempLabel.style.transform = `translate(-50%, -50%)`;
circle.appendChild(tempLabel);
// Create light intensity label
const luxLabel = document.createElement('div');
luxLabel.className = 'label';
luxLabel.style.left = `${luxLabelX}px`;
luxLabel.style.top = `${luxLabelY}px`;
luxLabel.innerHTML = `${Math.round(lightValue)} lux`;
luxLabel.style.transform = `translate(-50%, -50%)`;
circle.appendChild(luxLabel);
function updatePointers(temp, lux) {
const tempMin = -10, tempMax = 50;
const luxMin = 0, luxMax = 1200;
function mapToAngle(value, min, max) {
return ((value - min) / (max - min)) * 360;
}
const tempAngle = mapToAngle(temp, tempMin, tempMax);
const luxAngle = mapToAngle(lux, luxMin, luxMax);
document.getElementById('tempPointer').style.transform =
`rotate(${tempAngle}deg) translateX(-50%)`;
document.getElementById('lightPointer').style.transform =
`rotate(${luxAngle}deg) translateX(-50%)`;
function fetchData() {
fetch('/data')
.then(response => response.json())
.then(data => {
document.getElementById('Temperature').innerHTML =
`${data.temperature} °C`;
document.getElementById('Intensity').innerHTML = `${data.intensity}
Lux`;
updatePointers(data.temperature, data.intensity);
});
function updateCircleBackground(theme) {
const circle = document.getElementById('circle');
switch (theme) {
case 'dance':
circle.style.background = 'conic-gradient(magenta, red, yellow, green,
cyan, blue, magenta)';
break;
case 'chill':
circle.style.background = 'conic-gradient(peachpuff, orange, yellow,
brown, #c07204, lightyellow, tomato, peachpuff)';
break;
case 'event':
circle.style.background = 'conic-gradient(blueviolet, #560356bf,
lightblue, cyan, teal, lightgreen, purple, blueviolet)';
break;
default:
circle.style.background = 'conic-gradient(magenta, red, yellow, green,
cyan, blue, magenta)'; // Default
break;
addMarkers();
fetchData();
fetch('/get-background')
.then(response => response.text())
.then(theme => {
updateCircleBackground(theme);
});
setInterval(fetchData, 500);
</script>
</body>
</html>
)rawliteral";
// HTML content for controls page
const char control_page[] = R"rawliteral(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Controls</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
font-family: Arial, sans-serif;
background-color: thistle;
padding-top: 20%;
.menu {
padding-bottom: 10%;
#backgroundSelector {
background-color: aquamarine, coral, lightpink;
</style>
</head>
<body>
<div class="menu">
<label for="backgroundSelector">Choose Your Vibe: </label>
<select id="backgroundSelector" onchange="changeBackground()">
<option value="dance">Lit Vibe</option>
<option value="chill">Chilled Vibes</option>
<option value="event">Laid Back</option>
</select>
</div>
<button class="back-button" onclick="saveBackground()">Back to Home</button>
<script>
function changeBackground() {
const backgroundSelector =
document.getElementById('backgroundSelector');
const selectedTheme = backgroundSelector.value;
document.circle.style.background = selectedTheme;
}
function saveBackground() {
const selectedTheme =
document.getElementById('backgroundSelector').value;
fetch('/set-background?theme=' + selectedTheme, { method: 'POST' })
.then(() => window.location.href = '/measurements');
</script>
</body>
</html>
)rawliteral";
// Function to handle login
void handleLogin() {
String username = server.arg("username");
String password = server.arg("password");
if (username == "Mngomezulu" && password == "220383130") {
server.send(200, "text/html", measurement); // Redirect to measurement page if
login is correct
} else {
String failedPage = R"(
<script>
document.getElementById('LoginStatus').value = 'Login Failed';
</script>
)";
server.send(200, "text/html", loginPage + failedPage); // Update textarea with
'Login Failed'
// Function to serve the HTML page
void handleRoot() {
String page = measurement;
// Replace placeholders with real data
page.replace("%TEMPERATURE%", String(temperatureC));
page.replace("%INTENSITY%", String(lightIntensity));
server.send(200, "text/html", page);
// Function to serve measurement data as JSON
void handleData() {
String jsonResponse = "{\"temperature\": " + String(temperatureC) + ", \"intensity\": "
+ String(lightIntensity) + "}";
server.send(200, "application/json", jsonResponse);
// Setup WiFi and web server
void setup() {
Serial.begin(115200);
// Start DS18B20 temperature sensor
sensors.begin();
// Start the WiFi connection
WiFi.begin(ssid, password);
Serial.println("Connecting to WiFi...");
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
Serial.println("\nConnected to WiFi");
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
// Web server routes
server.on("/", []() {
server.send(200, "text/html", loginPage); // Serve login page
});
server.on("/submit", HTTP_POST, handleLogin); // Handle login submission
server.on("/measurements", handleRoot);
server.on("/data", handleData); // Serve sensor data as JSON
server.on("/control_page", []() {
server.send(200, "text/html", control_page); // Serve the control page
});
server.on("/set-background", HTTP_POST, []() {
if (server.hasArg("theme")) {
selectedTheme = server.arg("theme");
server.send(200, "text/plain", "Background updated");
} else {
server.send(400, "text/plain", "No theme provided");
});
// Define the route to retrieve the selected theme
server.on("/get-background", HTTP_GET, []() {
server.send(200, "text/plain", selectedTheme);
});
server.begin();
Serial.println("Server started");
void loop() {
// Update temperature sensor reading
sensors.requestTemperatures();
temperatureC = sensors.getTempCByIndex(0);
// Read light intensity from LDR sensor
int ldrValue = analogRead(lightPin);
lightIntensity = map(ldrValue, 0, 4095, 0, 1200);
// Print the readings to the console
Serial.print("Temperature: ");
Serial.print(temperatureC);
Serial.print(" °C, Light Intensity: ");
Serial.print(lightIntensity);
Serial.println(" Lux");
// Handle client requests
server.handleClient();
