I have built a web interface to control my garage door remote via a GPIO pin on my Raspberry Pi 3 following instructions from this forum post. WebIOPi is a framework in Python that controls GPIO pins. On top of this is a javascript script and a CSS style fed into an HTML page.
Note I needed to patch the WebIOPi python script from here to make it compatible with the Pi 3.
This works great, but now I want to add a magnetic reed switch to the door so that I can tell if the door is already open or not.
I built a pull-down circuit for the magnetic reed switch copying this post.
This is the current hardware setup (except the blue JD-VCC to VCC jumper is removed):
I found a javascript from here that will read the GPIO pin and send raise it as an alert (pop-up box when the page is loaded/refreshed), and that works too, sending back '1' or a '0' depending on if the magnet is present. But I would prefer the notification just be a area on the screen that says 'open' or 'closed'.
Can someone please help me with a bit of javascript that would enable this?