Created
February 27, 2021 19:19
-
-
Save olofk/c6447aaac80af387e4fffaca0f281235 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Nexys A7 WebSocket</title> | |
| </head> | |
| <body> | |
| <input type="button" id="btConn" name="btConn" value="Extend into an immersive alternative reality"> | |
| <br /><br /> | |
| <object id="nexys-svg" data="nexys-a7-export.svg" type="image/svg+xml" width="50%" height="50%"> | |
| </body> | |
| <script type="text/javascript"> | |
| var ws; | |
| var connected = false; | |
| var ledstate = false; | |
| function toggleLED() { | |
| var visible = "cls-4" | |
| var invisible = "cls-7" | |
| console.log(`hello ${this.getAttribute('id')}`) | |
| console.log(this) | |
| var up = this.querySelector(`[data-name="LIGHT"]`) || this.querySelector("#LIGHT") | |
| console.log(up.className.baseVal) | |
| if (up.className.baseVal == visible) { | |
| up.className.baseVal = invisible | |
| }else{ | |
| up.className.baseVal = visible | |
| } | |
| } | |
| function doConnect(addr) { | |
| var msg; | |
| /* Do connection. */ | |
| ws = new WebSocket(addr); | |
| /* Register events. */ | |
| ws.onopen = function() | |
| { | |
| connected = true; | |
| document.getElementById("btConn").value = "Withdraw into the real world"; | |
| }; | |
| document.getElementById("btConn").onclick = function() | |
| { | |
| if (connected == false) | |
| { | |
| doConnect("ws://localhost:8081"); | |
| } | |
| else | |
| { | |
| ws.close(); | |
| connected = false; | |
| document.getElementById("btConn").value = "Connect!"; | |
| } | |
| }; | |
| /* Deals with messages. */ | |
| ws.onmessage = function (evt) | |
| { | |
| if (ledstate == false && evt.data == "1") { | |
| toggleLED(); | |
| ledstate = true; | |
| } else if (ledstate == true && evt.data == "0") { | |
| toggleLED(); | |
| ledstate = false; | |
| } | |
| }; | |
| /* Close events. */ | |
| ws.onclose = function(event) | |
| { | |
| document.getElementById("btConn").value = "Extend into an immersive alternative reality"; | |
| connected = false; | |
| }; | |
| } | |
| document.addEventListener("DOMContentLoaded", function(event) { | |
| /* Connect buttom. */ | |
| document.getElementById("btConn").onclick = function() | |
| { | |
| if (connected == false) | |
| { | |
| doConnect("ws://localhost:8081"); | |
| } | |
| else | |
| { | |
| ws.close(); | |
| connected = false; | |
| document.getElementById("btConn").value = "Connect!"; | |
| } | |
| }; | |
| /* | |
| document.getElementById("sw").onclick = function() | |
| { | |
| if (sw == true) | |
| { | |
| ws.send("Switch is off"); | |
| document.getElementById("sw").src = "swoff.png"; | |
| sw = false; | |
| } else { | |
| ws.send("Switch is on"); | |
| document.getElementById("sw").src = "swon.png"; | |
| sw = true; | |
| } | |
| };*/ | |
| }); | |
| const nexysObject = document.getElementById('nexys-svg') | |
| nexysObject.addEventListener("load", function() { | |
| const nexys = nexysObject.contentDocument; | |
| const SW15 = nexys.getElementById('SW15').onclick = toggleSwitch; | |
| const SW14 = nexys.getElementById('SW14').onclick = toggleSwitch; | |
| const SW13 = nexys.getElementById('SW13').onclick = toggleSwitch; | |
| const SW12 = nexys.getElementById('SW12').onclick = toggleSwitch; | |
| const SW11 = nexys.getElementById('SW11').onclick = toggleSwitch; | |
| const SW10 = nexys.getElementById('SW10').onclick = toggleSwitch; | |
| const LD15 = nexys.getElementById('LD15').onclick = toggleLED; | |
| const LD14 = nexys.getElementById('LD14').onclick = toggleLED; | |
| function toggleSwitch() { | |
| var visible = "cls-8" | |
| var invisible = "cls-7" | |
| console.log(`hello ${this.getAttribute('id')}`) | |
| console.log(this) | |
| var up = this.querySelector(`[data-name="UP"]`) || this.querySelector("#UP") | |
| console.log(up.className.baseVal) | |
| if (up.className.baseVal == visible) { | |
| up.className.baseVal = invisible | |
| ws.send("Switch is off"); | |
| }else{ | |
| up.className.baseVal = visible | |
| ws.send("Switch is on"); | |
| } | |
| var down = this.querySelectorAll(`[data-name="DOWN"]`)[0] || this.querySelector("#DOWN") | |
| console.log(down.className.baseVal) | |
| if (down.className.baseVal == visible) { | |
| down.className.baseVal = invisible | |
| }else{ | |
| down.className.baseVal = visible | |
| } | |
| } | |
| },false); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment