Hi, Im trying to get an esp8266 to serve a few images and webpage files from spiffs to use web buttons for controlling relays. A temp/hum sensor data updated in realtime and a webserial console can someone please assist me ive been trying for years, made many attempts many different files versions and lots of burnt out esp devices.
Here are my files:
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- LINK JQUERY -->
<style type="text/css" id="tts-styles"></style>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script type='text/javascript' src='jquery-3.3.1.js'></script>
<script type='text/javascript' src='script.js'></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>System Controls</title>
</head>
<body>
<h1>VanServer</h1>
<img src="banner.jpg" alt="Banner" class="banner"> <!-- Banner image -->
<audio id="switchSound" src="switchSound.wav" preload="auto"></audio>
<div class="central-div">
<div id="temp">
<p>
<i class="fas fa-thermometer-half" style="color:#059e8a;"></i>
<span class="dht-labels">Temperature</span>
<span id="temperature">%TEMPERATURE%</span>
<sup class="units">°C</sup>
</p>
</div>
<div id="hum">
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humidity</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
</p>
</div>
</div>
</div>
<div id="allButtonContainer">
<div class="left-box buttonBox" id="box1">
<button class="button" onclick="changeButtonState('lite1')">
<img class="lightSwitch" alt="off" src="off2.jpg" id="lite1" />
</button>
</div>
<div class="left-box buttonBox" id="box2">
<button class="button" onclick="changeButtonState('lite2')">
<img class="lightSwitch" alt="off" src="off2.jpg" id="lite2" />
</button>
</div>
<div class="left-box buttonBox" id="box3">
<button class="button" onclick="changeButtonState('lite3')">
<img class="lightSwitch" alt="off" src="off2.jpg" id="lite3" />
</button>
</div>
<div class="left-box buttonBox" id="box4">
<button class="button" onclick="changeButtonState('lite4')">
<img class="lightSwitch" alt="off" src="off2.jpg" id="lite4" />
</button>
</div>
</div>
<!-- fan section-->
</div>
<div class="parent">
<div class="side-div" id="electricfan">
<div class="left-box buttonBox fanBox" id="fan">
<button class="button" onclick="startFan(fanToggle)" id="fanBoxy">
<img class="fanSwitch" id="fanToggle" alt="off" width="100px" height="100px" src="fanOff.png" />
</button>
</div>
</div>
<div class="side-div" id="electricheat">
<div class="left-box buttonBox heatBox" id="heat">
<button class="button" onclick="startHeat(fanToggle)" id="heatBoxy">
<img class="fanSwitch" id="heatToggle" alt="off" width="100px" height="100px" src="heaterOff.png" />
</button>
</div>
</div>
</div>
<div id="utilityContainer">
</div>
</body>
</html>
script.js
$(document).ready(function () {
// Call the function to attach click event handlers to each button
});
function changeButtonState(buttonId) {
const img = document.getElementById(buttonId);
// Play the sound
const sound = document.getElementById('switchSound');
sound.play();
// Check the current image source and toggle it
if (img.src.includes("off2.jpg")) {
img.src = "on2.jpg"; // Change to the 'on' image
img.alt = "on"; // Update alt text
} else {
img.src = "off2.jpg"; // Change back to the 'off' image
img.alt = "off"; // Update alt text
}
}
let fanPlaying = false; // Variable to track fan state
const fanSound = document.getElementById('fanToggle'); // Get the fan sound element
/* function toggleFan() {
if (fanPlaying) {
fanSound.pause(); // Pause the fan sound
fanSound.currentTime = 0; // Reset to start
fanPlaying = false; // Update state
document.getElementById('fanToggle').src = 'fanOff.png'; // Change image to off
} else {
fanSound.play(); // Play the fan sound
fanPlaying = true; // Update state
document.getElementById('fanToggle').src = 'fanOn.gif'; // Change image to on
}
} */
function startFan(buttonId) {
const img = document.getElementById('fanToggle');
// Play the sound
const sound = document.getElementById('switchSound');
sound.play();
// Check the current image source and toggle it
if (img.src.includes("fanOff.png")) {
img.src = "fanOn.gif"; // Change to the 'on' image
img.alt = "on"; // Update alt text
} else {
img.src = "fanOff.png"; // Change back to the 'off' image
img.alt = "off"; // Update alt text
}
}
function startHeat(buttonId) {
const img = document.getElementById('heatToggle');
// Play the sound
const sound = document.getElementById('switchSound');
sound.play();
// Check the current image source and toggle it
if (img.src.includes("heaterOff.png")) {
img.src = "heaterOn.gif"; // Change to the 'on' image
img.alt = "on"; // Update alt text
} else {
img.src = "heaterOff.png"; // Change back to the 'off' image
img.alt = "off"; // Update alt text
}
}
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("temperature").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 10000 ) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("humidity").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/humidity", true);
xhttp.send();
}, 10000 ) ;
style.css
body {
display: flex;
flex-direction: column;
/* Stack elements vertically */
align-items: center;
/* Center items horizontally */
flex-wrap: wrap;
/* Allow wrapping if needed */
height: 100vh;
/* Full height of the viewport */
margin: 0;
/* Remove default margin */
padding: 0;
/* Remove default padding */
background-image: url('3d.jpg');
/* Set the background image */
background-size: cover;
/* Cover the entire body */
background-position: center;
/* Center the background image */
position: static;
/* Position relative for absolute children */
/* float:left; */
}
.banner {
position: absolute;
/* Position the banner absolutely */
top: 0;
/* Align it to the top */
left: 0;
/* Align it to the left */
width:max-content;
/* Full width */
height: auto;
/* Maintain aspect ratio */
z-index: 1;
max-width:100%;
/* Ensure it's above the background */
}
h1 {
margin-bottom: 20px;
/* Space below the heading */
font-size: 2.5em;
/* Increase font size */
color: rgba(255, 255, 255, 0);
/* Make the heading transparent */
z-index: 2;
/* Ensure the heading is above the banner */
position: relative;
/* Position relative for z-index */
}
.buttonBox {
vertical-align: middle;
margin: 5px;
/* Small margin around each button box */
/* height: 300px; */
/* max-height:fit-content; */
}
.liteSwitch{
height:30%;
/* max-height:30%; */
}
.button {
background-color: #000000;
/* Button background color */
border: solid white 2px;
/* Remove default border */
color: white;
/* Text color */
/*padding: 15px 32px; Padding*/
text-align: center;
/* Center text */
text-decoration: none;
/* Remove underline */
display: inline-block;
/* Inline-block for button layout */
font-size: 16px;
/* Font size */
margin: 4px 2px;
/* Margin */
cursor: pointer;
/* Pointer cursor on hover */
border-radius: 8px;
/* Rounded corners */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.2);
/* Shadow for 3D effect */
transition: all 0.3s ease;
/* Smooth transition */
}
.button:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
/* Enhanced shadow on hover */
transform: translateY(-2px);
/* Lift effect on hover */
}
.button:active {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
/* Shadow for pressed state */
transform: translateY(2px);
/* Push down effect when pressed */
}
#utilityContainer {
/* z-index: 3; */
margin-top: 146px;
/* Adjust as necessary to position the fan button */
}
img#fanToggle {
width: 192px;
aspect-ratio: auto 100 / 100;
height: 149px;
}
img#heatToggle {
width: 192px;
aspect-ratio: auto 100 / 100;
height: ;
}
img {
overflow-clip-margin: content-box;
overflow: auto;
}
img.fanSwitch#fanToggle {
max-width: 100%;
max-height: 100%;
object-fit: fill;
}
img.heatSwitch#heatToggle {
max-width: 100%;
max-height: 100%;
object-fit: fill;
}
html {
font-family: Arial;
/* display: inline-block; */
/* margin: 0px auto; */
text-align: center;
}
h2 { font-size: 3.0rem; }
p {font-size: 1rem;}
.units { font-size: 1.2rem; }
.dht-labels{
font-size: 34px;
vertical-align:middle;
padding-bottom: 15px;
/* padding:2px; */
text-align: left;
color:orange;
}
#temperature, #humidity{
/* border:4px solid indigo; */
-webkit-box-direction: normal;
/* padding:3px; */
text-align:left;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color:white;
/* font-size:small; */
}
.parent {
display: ruby;
/* justify-content: space-between; */
height: auto;
width: auto;
max-width: min-content;
margin-top: -2%;
margin-left: -67%;
background-color: transparent;
float: left;
position: relative;
max-height: min-content;
}
.side-div {
flex: 1; /* Makes both divs equally sized */
margin: 5px; /* Optional: adds space between the divs */
background-color: transparent; /* Optional: background color for visibility */
left: auto;
padding-left: 10px;
height: auto;
width: min-content;
}
.central-div {
width: fit-content;
text-align: left; /* Center text */
margin-top: -5px; /* Space above the central div */
/* background-color: lightgreen; */ /* Optional: background color for visibility */
align-items:start;
padding: 5px; /* Optional: padding for content */
float:left;
margin-left: -390px;
}
.flex-container {
display: flex;
flex-direction: column;
}
#allButtonContainer {
display: -webkit-inline-box;
/* Use flexbox for the container */
flex-wrap: wrap;
/* Allow wrapping */
gap: 10px;
/* Space between buttons */
z-index: 2;
/* Ensure buttons are above the background */
/* position: relative; */
/* Position relative for z-index */
margin-top: 2%;
/* Push buttons down */
padding-bottom: 15px;
margin-left: 30%;
margin-right: 30%;
height: auto;
width: auto;
max-width: -webkit-fill-available;
max-height: initial;
}
#electricfan{
width:140px;
height:140px;
}
#electricheat{
width:140px;
height:140px;
}
[data-tts-block-id].tts-active {
background: rgba(206, 225, 255, 0.9) !important;
}
[data-tts-sentence-id].tts-active {
background: rgba(0, 89, 191, 0.7) !important;
}
site images:
click sound of buttons
cant upload here
please can someone assist me getting it all working ive added spiffs debugging output to serial to check if uploaded files exist and its working but webclient only displays response took too long to respond maybe someone could get this project working then explain how please