0

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

Community
  • 1
  • 1
Corentoulf
  • 15
  • 8

1 Answers1

0

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
Daan
  • 49
  • 3
  • Thank you for your reply. Indeed, that could be a good way to do it. But I'm afraid my Web page code need to be a little more complex in the future and that it becomes hard to work on it into a python script. Do you think the contrary is possible? – Corentoulf Dec 02 '15 at 17:38
  • This is a quick and basic example, you can structure everything more cleanly so it is maintainable. If you write it in any other language you will have the same problem. Python is compact and clean, so ideal for doing this. Build some basic scripts for switching stuff, make them as a REST service and the rest can be plain HTML in combination with javascripts. – Daan Dec 04 '15 at 13:32