Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript JavaScript not doing what I expected

CyBaart

New Coder
Hello, although I have been coding for many years starting with basica, then quick basic, turbo pascal, turbo C etc. etc., I am new at this whole JavaScript thing and I obviously dont have something quite right and need some expert guidance.

I am making a controller for my hot tub using an ESP32, some solid state relays, a DS18B20 and a BME280. I want a webserver to display the water temperature from the DS18B20 and the ambient temperature, humidity and air pressure from the BME280 and also have two buttons to turn on and off two of the solid state relays. So, I found tutorials on the internet for displaying sensor readings and also controlling GPIO pins. Simple, all I need do is put the two together. My HTML, CSS and JavaScript code is shown below. The handleWebSocketMessage function for the ESP32 prints the incoming websocket message to the serial port and so I can see that it receives a getReadings message when I open or refresh the web page on any device on my WiFi network buit when I click either of the two buttons, it does not print anything and so I can assume that the websocket message related to these buttons is not being sent. I have not included the arduino (ESP32) code as it is working correctly.

Where am I going wrong?

Thanks, Steve

index.html;
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Hot Tub Control</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/png" href="favicon.png">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="topnav">
            <h1>Hot Tub</h1>
        </div>
        <div class="content">
            <div class="card-grid">
              <div class="card">
                    <p class="card-title"> Water Temperature</p>
                    <p class="reading"><span id="watertemp"></span> &deg;C</p>
                </div>
                <div class="card">
                    <p class="card-title"> Air Temperature</p>
                    <p class="reading"><span id="airtemp"></span> &deg;C</p>
                </div>
                <div class="card">
                    <p class="card-title"> Humidity</p>
                    <p class="reading"><span id="humidity"></span> %rh</p>
                </div>
                <div class="card">
                    <p class="card-title"> Air Pressure</p>
                    <p class="reading"><span id="pressure"></span> hpa</p>
                </div>
            </div>
        </div>
        <div class="button-grid">
            <div id="pwrled" class="%STATE%"></div>
            <div id="lightsled" class="%STATE%"></div>
            <button id="power">Power</button>
            <button id="lights">Lights</button>
          </div>
        <script src="script.js"></script>
    </body>
</html>

script.js;
JavaScript:
var gateway = `ws://${window.location.hostname}/ws`;
var websocket;
// Init web socket when the page loads
window.addEventListener('load', onload);

function onload(event) {
    initWebSocket();
}

function getReadings(){
    websocket.send("getReadings");
}

function initWebSocket() {
    console.log('Trying to open a WebSocket connection…');
    websocket = new WebSocket(gateway);
    websocket.onopen = onOpen;
    websocket.onclose = onClose;
    websocket.onmessage = onMessage;
}

// When websocket is established, call the getReadings() function
function onOpen(event) {
    console.log('Connection opened');
    getReadings();
}

function onClose(event) {
    console.log('Connection closed');
    setTimeout(initWebSocket, 2000);
}

// Function that receives the message from the ESP32 with the readings
function onMessage(event) {
    console.log(event.data);
    var myObj = JSON.parse(event.data);
    var keys = Object.keys(myObj);

    for (var i = 0; i < keys.length; i++){
        var key = keys[i];
        document.getElementById(key).innerHTML = myObj[key];
    }
}

// ----------------------------------------------------------------------------
// Button handling
// ----------------------------------------------------------------------------

function initButton() {
    document.getElementById('power').addEventListener('click', onPower);
    document.getElementById('lights').addEventListener('click', onLights);
}

function onPower(event) {
    websocket.send("power");
}
function onLights(event) {
    websocket.send("lights");
}

style.css;
CSS:
html {
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    text-align: center;
}
h1 {
    font-size: 1.8rem;
    color: white;
}
.topnav {
    overflow: hidden;
    background-color: #0A1128;
}
body {
    margin: 0;
}
.content {
    padding: 50px;
}
.card-grid {
    max-width: 500px;
    margin: 0 auto;
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: auto auto;
    
}
.button-grid {
    max-width: 500px;
    margin: 0 auto;
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: auto auto;
    justify-items: center;
}
.card {
    background-color: white;
    box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
}
.card-title {
    font-size: 1.0rem;
    font-weight: bold;
    color: #034078
}
.reading {
    font-size: 1.0rem;
    color: #1282A2;
}

.panel {
  display: grid;
  grid-gap: 3em;
  justify-items: center;
}

button {
  padding: .5em .75em;
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 -1px 1px #000;
  border: 1px solid #000;
  border-radius: .5em;
  background-image: linear-gradient(#2e3538, #73848c);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
  outline: none;
}
button:active {
  transform: translateY(2px);
}

.led-box {
  height: 30px;
  width: 25%;
  margin: 10px 0;
  float: left;
}

.led-green {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #ABFF00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
}

#pwrled {
  position: relative;
  width: 5em;
  height: 5em;
  border: 2px solid #000;
  border-radius: 2.5em;
  background-image: radial-gradient(farthest-corner at 50% 20%, #b30000 0%, #330000 100%);
  box-shadow: 0 0.5em 1em rgba(102, 0, 0, 0.3);
}
#pwrled.on {
  background-image: radial-gradient(farthest-corner at 50% 75%, red 0%, #990000 100%);
  box-shadow: 0 1em 1.5em rgba(255, 0, 0, 0.5);
}
#pwrled:after {
  content: '';
  position: absolute;
  top: .3em;
  left: 1em;
  width: 60%;
  height: 40%;
  border-radius: 60%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
}

#lightsled {
  position: relative;
  width: 5em;
  height: 5em;
  border: 2px solid #000;
  border-radius: 2.5em;
  background-image: radial-gradient(farthest-corner at 50% 20%, #b30000 0%, #330000 100%);
  box-shadow: 0 0.5em 1em rgba(102, 0, 0, 0.3);
}
#lightsled.on {
  background-image: radial-gradient(farthest-corner at 50% 75%, red 0%, #990000 100%);
  box-shadow: 0 1em 1.5em rgba(255, 0, 0, 0.5);
}
#lightsled:after {
  content: '';
  position: absolute;
  top: .3em;
  left: 1em;
  width: 60%;
  height: 40%;
  border-radius: 60%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
}
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom