Scribd
Upload
8 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 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
We take content rights seriously. If you suspect this is your content, claim it here.
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