• Skip to main content
  • Skip to primary sidebar

RNTLab.com

The Ultimate Shortcut to Learn Electronics and Programming with Open Source Hardware and Software

  • Courses
  • Forum
    • Forum
    • Ask Question
  • Shop
  • Account
  • Blog
  • Login

ESP32 Webservers book: Modifying Websockets to have 2 cards

Q&A Forum › Category: ESP32 › ESP32 Webservers book: Modifying Websockets to have 2 cards
0 Vote Up Vote Down
Les Bowker asked 1 month ago

I’ve modified the Websockets example in Chapter 2.3 to display 2 cards.  Each cards has a number of buttons plus one response field to show the last button pressed & processed by the server.  Whenever I press a button on either card, it’s always the same response field that gets updated. How can I make the code update the response field relating to the card holding the button which was pressed?

I thought modifying the onMessage function in script.js might do it as shown below – but no.  I tried making the onMessage function trivial (see second version below).  But that didn’t update either response field.  Is onMessage even getting invoked???

Many thanks in advance for suggestions.
Les

Extract from Index.html

<div class=”content”>
<div class=”card-grid”>
<div class=”card”>
<p class=”card-title”><i class=”fas fa-lightbulb”></i>Speed</p>
<p>
<button class=”button-off” id=”bMedium”>Medium</button>
<button class=”button-off” id=”bFast”>Fast</button>
</p>
<p class=”state”>Speed: <span id=”speedNow”>%SPEEDNOW%</span></p>
</div>
<div class=”card”>
<p class=”card-title”><i class=”fas fa-lightbulb”></i>Direction</p>
<p>
<button class=”button-on” id=”bForward”>Forward</button>
<button class=”button-on” id=”bReverse”>Reverse</button>
</p>
<p class=”state”>Direction: <span id=”directionNow”>%DIRECTIONNOW%</span></p>
</div>
</div>
</div>
<script src=”script.js”></script>

Extract from script.js showing onMessage

function onMessage(event) {
if (event.data==’Forward’) {
document.getElementById(‘directionNow’).innerHTML = event.data;
}
else {
document.getElementById(‘speedNow’).innerHTML = event.data;
}
console.log(event.data);
}

Simpler OnMessage test version

function onMessage(event) {
document.getElementById(‘directionNow’).innerHTML = event.data;
document.getElementById(‘speedNow’).innerHTML = event.data;
console.log(event.data);
}

Question Tags: ESP32 Webserver. Chapter 2.3. Cards.
3 Answers
0 Vote Up Vote Down
Sara Santos Staff answered 1 month ago

Hi.

I don’t think the way the onMessage() function is built is appropriate for this scenario.

In your case, you’ll put the same data on both HTML elements (direction and speed) when you receive a message.
On the first function, you’ll only display forward. If you have reverse, it won’t be displayed on the direction HTML element. It will be displayed on the speed HTML element.

You need to rewrite your onMessage function. To better understand how it works, try to add console.log() throughout the function to understand how it is working.

Regards,
Sara

0 Vote Up Vote Down
Les Bowker answered 1 month ago

Thanks, Sara.
I’ve settled for a work-around to NotifyClients in which I now have just the one response field & I concatenate the values for the Speed & Direction and pass that to ws.textAll.

I’ll look into onMessage more later if I need to do more complex things.

Please now close the forum post.
(By the way, it’s been a few years since I’ve needed to do web server programming.  You may remember I tried to help you with some editing of v1 to v2 of the course book – and we chatted about favourite snacks in Portugal & the UK!)
Best regards to you & Rui,
Les

0 Vote Up Vote Down
Sara Santos Staff answered 1 month ago

Hi.
I’m glad you have found a workaround.
Ahhh. Yes I remember that perfectly. And thank you once again for helping us improve our eBook.
I’ll mark this issue as resolved. Let me know if you need help with anything else by opening a new question here. Or you can send me an email.
 
Regards,
Sara

Primary Sidebar

Login to Ask or Answer Questions

This Forum is private and it’s only available for members enrolled in our Courses.

Login »

Latest Course Updates

  • [eBook Updated] SMART HOME with RPi, ESP32, and ESP8266 (version 1.2) March 8, 2023
  • [eBook Updated] ESP32-CAM Projects (version 1.3) January 7, 2023

You must be logged in to view this content.

Contact Support - Refunds - Privacy - Terms - MakerAdvisor.com - Member Login

Copyright © 2013-2023 · RandomNerdTutorials.com · All Rights Reserved

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.