Scribd
Upload
2 views

Arduino Code For Temperature Sensing

This Arduino code implements a temperature and light intensity sensing system using an ATMEGA168 microcontroller. It connects to WiFi and serves a web interface for user login, displaying real-time sensor data and allowing theme customization for the display. The system utilizes a DS18B20 temperature sensor and an LDR for light intensity measurement, with data served in both HTML and JSON formats.

Uploaded by

Sipheokuhle Baba KaFezi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Arduino Code For Temperature Sensing

This Arduino code implements a temperature and light intensity sensing system using an ATMEGA168 microcontroller. It connects to WiFi and serves a web interface for user login, displaying real-time sensor data and allowing theme customization for the display. The system utilizes a DS18B20 temperature sensor and an LDR for light intensity measurement, with data served in both HTML and JSON formats.

Uploaded by

Sipheokuhle Baba KaFezi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

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();

You might also like