Barry answered 3 years ago
I’ve been hacking on Example 2.5. I have added some labels to the controls and now I want to remove the “state = on/off” notation. I’ve done that in index.html. The text renders fine. The switch colors change.
However, I’ve broken websockets ability to inform another user of a state change. For as yet unknown reason, Switch #1 continues to work and notifys the other user of the state change (color changes). HOWEVER, switch/relay 2,3,4 do NOT notify of a state change.
I’ve stared at the code and haven’t found the error(s). It’s embarrassing to post stupid little mistakes, but apparently that’s the only way I can learn (8-(
<body>
<div class=”topnav”>
<h1>WiFi Relay Control</h1>
</div>
<div class=”content”>
<div class=”card-grid”>
<div class=”card”>
<p class=”card-title”> Relay 1</p>
<label class=”switch”>
<input type=”checkbox” onchange=”toggleCheckbox(this)” id=”2″>
<span class=”slider”></span>
</label>
<!–<p class =”state”>State: <span id=”2s”></span></p> –>
<p> <center><object type=”text/html” data=”/rlabel1.html”> </object></center></p>
</div>
<div class=”card”>
<p class=”card-title”> Relay 2 </p>
<label class=”switch”>
<input type=”checkbox” onchange=”toggleCheckbox(this)” id=”4″>
<span class=”slider”></span>
</label>
<!–<p class =”state”>State: <span id=”4s”></span></p>–>
<p> <center><object type=”text/html” data=”/rlabel2.html”> </object></center></p>
</div>
<div class=”card”>
<p class=”card-title”> Relay 3 </p>
<label class=”switch”>
<input type=”checkbox” onchange=”toggleCheckbox(this)” id=”14″>
<span class=”slider”></span>
</label>
<!–<p class =”state”>State: <span id=”14s”></span></p>–>
<p> <center><object type=”text/html” data=”/rlabel3.html”> </object></center></p>
</div>
<div class=”card”>
<p class=”card-title”> Relay 4</p>
<label class=”switch”>
<input type=”checkbox” onchange=”toggleCheckbox(this)” id=”12″>
<span class=”slider”></span>
</label>
<!–<p class=”state”>State: <span id=”12s”></span></p>–>
<p> <center><object type=”text/html” data=”/rlabel4.html”> </object></center></p>
</div>
</div>
</div>
<script src=”/script.js”></script>
</body>
Barry answered 3 years ago
Debugging deeper. Users: 1x pc, 1x Android phone
The server is responding to both users. Switch #1 works properly. Sw2,3,4 do not. If either use clicks sw2, the state on that client changes, the other client does Not.
The code works by toggling based on an event. I’ve verified that notification is called and I can see the “states”.
I’m reasonably sure there is an indexing problem. I just haven’t found it yet.
Using the gpio # as the ID complicates the index, rather than just 0,1,2…
Sara Santos Staff answered 3 years ago
Hi Barry,
Have you checked the Console for JavaScript on the browser to better understand what is going on?
I can’t find out what is wrong just by looking at the HTML file.
It would be better if you could provide all files. Can you share a link to google drive to your project folder?
Regards,
Sara
Barry answered 3 years ago
In Example 2.5. index.html I make only 2 changes as shown below.
1. Comment out the display of State.
2. Add in line to include external html (text) file which is a label for the function.
In operation, both of these changes work as expected. HOWEVER, the websockets notification to other user only works for GPIO 2. GPIO 4, 12, 14 change on the local browser as expected, but there is NO change to state on the other user’s browser.
<div class=”card”>
<p class=”card-title”> GPIO 2</p>
<label class=”switch”>
<input type=”checkbox” onchange=”toggleCheckbox(this)” id=”2″>
<span class=”slider”></span>
</label>
<!– <p class =”state”>State: <span id=”2s”></span></p> –>
<p> <center><object type=”text/html” data=”/antlabel1.html”> </object></center></p>
</div>
If I upload to dropbox.com, how do I give you access without making it public to the world?
Any assistance you can provide is very much appreciated.
Barry answered 3 years ago
Sara Santos Staff answered 3 years ago
Hi Bary.
I received your files and find out what’s the issue.
Basically, the issue is with the Javascript file.
You deleted the elements on the HTML file with the “2s”, “4s” ids, and so on. Those ids were being used in the JavaScript file. Because javascript couldn’t find those ids, it crashed and didn’t update anything else.
Basically, you need to delete everything on the JavaScript file that contains those ids.
To make it easier, I’ve copied the right JavaScript file for your project to this link: https://gist.github.com/sarasantos/a62734b3e64adfce1e7da1f55ad75f22
I tested it, and it works.
Let me know if it also works for you.
Regards,
Sara
Barry answered 3 years ago
Thank you so much. I’ve been working on this for so long, I’ve mentally lost track of all the changes I’ve made. You REALLY helped a lot with this.
obrigada
OBRIGADA!
Sara Santos Staff answered 3 years ago
Hi Barry.
Thank you. I’m glad it solved the problem.
Thanks for the compliments and for writing in Portuguese 🙂
I’ll mark this issue as resolved. If you need further help, you just need to open a new question in our forum.
Regards,
Sara