Send the result of python cgi script to HTML

Question

I have a toggle button on a page 'index.html'. When I click on it, it executes a python cgi script that changes the state of something on my raspberry.

To do so, I do this :

HTML :

<form id="tgleq"  method="POST" action="/cgi-bin/remote.py" target="python_result">
<input id="toggle-eq" type="checkbox" data-toggle="toggle" name="toggle-eq" value="">

<script>
$(function() {
  $('#toggle-eq').change(function() {
    tgl_state = $('#toggle-eq').prop("checked")
    var toggle = document.getElementById("toggle-eq");
    toggle.value = tgl_state;
    document.getElementById("tgleq").submit();
  })
})
</script>

CGI :

#!/usr/bin/env python

import cgi
import cgitb

cgitb.enable()

print "Content-type: text/html\n\n"
print

form=cgi.FieldStorage()
arg1 = form.getvalue('toggle-eq')

And then I do what I want to do with my arg1.

Now, what I want is, when you open the web interface page, to get the state of the raspberry component to initialize the toggle on the right position.

To do so I send a form on page load that launch a script looking at the state of the component. But how can I get it back in the html ?

I tried urllib and httplib2 but nothing worked for me... Any suggestions ?

Thanks

Answer 1

If I understand your question correctly you want to show the current-state of your switchable component on the webpage. Currently it looks like you have a pure HTML page and an CGI page, so I think you have multiple options, one of them is to combine the HTML and CGI into one page.

The code below is an example of this idea and probably doesn't work correctly, so not a copy/paste solution.

#!/usr/bin/env python
import cgi
import cgitb

cgitb.enable()
print "Content-type: text/html\n\n"
print
active="""
<form id="tgleq"  method="POST" action="/cgi-bin/remote.py" target="python_result">
<input id="toggle-eq" type="checkbox" data-toggle="toggle" name="toggle-eq" value="">
"""
inactive="""
<form id="tgleq"  method="POST" action="/cgi-bin/remote.py" target="python_result">
<input id="toggle-eq" type="checkbox" data-toggle="toggle" name="toggle-eq" value="checked">
"""
generic = """
<script>
$(function() {
  $('#toggle-eq').change(function() {
    tgl_state = $('#toggle-eq').prop("checked")
    var toggle = document.getElementById("toggle-eq");
    toggle.value = tgl_state;
    document.getElementById("tgleq").submit();
  })
})
</script>
"""

def set_state(option):
    if (option==True):
        actual_state_Setting_here = 1 # <-magic happens here
    else:
        actual_state_Setting_here = 0 # <-magic happens here

def get_state():
    return actual_state_Setting_here # <- read actual value here

form = cgi.FieldStorage()
if ( form.getvalue('toggle-eq')=="checked" ):
    set_state(True)
else:
    set_state(False)

if ( get_state()==True ):
    print(active) #show as currently active
else:
    print(inactive) #show as currently inactive
print(generic) #show rest of the page