javascript in python .py

feverish · Tue Aug 26, 2014 11:11 am

Firstly, apologies for not understanding what 'code tags' meant. I think I now may.

For the first time, I need to use python with javascript in a practical project. I have a .py file as below, in the course of development and am trying to develop it a step at a time.

Code: Select all

import cherrypy

class DAL_Heater(object):
     @cherrypy.expose
     def index (self):
         return """<html>
             <head>
             
             </head>
           
             <body style="background-color:darkgreen;">
             <!comment . . . make a container for the whole active display. Colour of container is dark green>
             <! header setup>
             <div id="header" ><h1 style="text-align:center;font-family:arial;font-size:45px;color:yellow">Heater Control</h1></div>
           
             <div id="spacer1" style="height:40px;width:230px;"</div>
           
             <!ON/OFF visual telltale>
             <div id="container2" style="text-align:center;margin-bottom:30px;background-color:yellow;height:100px;width:270px;">
             <div id="word1" style="font-size:20px;color:green;margin-top:30px;"> Heater has been switched</font></div>
             <div id="heaterstatus"  style="font-size:250%;color:green;margin-top:15px;"> OFF</div>
             </div> 

             <div id="spacer2" style="height:30px;width:230px;"</div>
           
             <div id="container3" style="text-align:center;background-color:yellow;height:140px;width:270px; margin-    bottom:30;margin-top:30px;float:left; ">
             <div id="vapour" style="margin-top:10px;font-size:150%;color:darkblue;"> Vapour temp is now</div>
             <div id="tempdata" style="font-size:300%;color:darkblue;">XYZ</font></div> 
             <div id="tempinf"style="font-size:150%;color:darkblue;"> degrees Farenheit</div>
             </div>

             <!ON/OFF button below>
             <div id="clicking"><button type="button"  onclick="onofffunction()" name="ONOFFBTN" style="background-color:white;  height:35px;width:350px;margin-top:20px;float.left;border-radius: 25px;font-size:150%;font-color:darkblue;">Toggle Heater ON or OFF</button></div>
             

             <p id="onoff"></p>
             <div id="spacer3" style="height:40px;width:30px;"</div>
             <!after Ajax and .php setup, do time, duration, measurement interval, etc details>
             <div id="footer" style="background-color:#FFA500;height:50px;width:600px;text-align:center;margin-top:20px;float-left;font-size:50%; color:darkblue">
             NB See uncoded comments for later action</div>
             <script>
             function onofffunction()
                  {
                  document.getElementById("container2").style.background-color="white";
                  document.getElementById("heaterstatus").innerHTML = "ON";
                  document.getElementById("heaterstatus").color:red;
                  document.getElementById("heaterstatus").font-size:300%;
                  document.getElementById("heaterstatus").value = "ON";
                  document.getElementById("heaterstatus").style="background-color:white;
                  }

             </script>
             </body>
             </html>"""
   
if __name__ == '__main__':
     cherrypy.quickstart(DAL_Heater())

This displays OK in a browser. When I click the button, I want to change the 'OFF' indication on the disdplayed HTML file to 'ON', and variopus colours to those I have included between the <script></script> tags, using the 'onclick()' button code, but nothing happens when I use the mouse to left-click the button displyed,and I suspect I have made serious mistakes in calling and implementing the javascript, but depite days of trawling through tutorials and examples do not have a clue about where I have gone wrong, so if anyhone out there can be bothered to tell me, I'd be a very happy bunny.

paddyg · Tue Aug 26, 2014 5:21 pm

It's quite hard working out javascript, why the names of things vary from css I don't know - keep looking at the w3schools examples etc. and use the browser inspect element thing to debug your code.

Code: Select all

<html>
             <head>
                 <script type="text/javascript">
                 function onofffunction()
                      {
                      document.getElementById("container2").style.backgroundColor = "white";
                      document.getElementById("heaterstatus").innerHTML = "ON";
                      document.getElementById("heaterstatus").style.color = "red";
                      document.getElementById("heaterstatus").style.fontSize = "20px";
                      document.getElementById("heaterstatus").value = "ON";
                      document.getElementById("heaterstatus").style.backgroundColor = "white";
                      }

                 </script>
             </head>
               
             <body style="background-color:darkgreen;">
                 <!comment . . . make a container for the whole active display. Colour of container is dark green>

AndrewS · Tue Aug 26, 2014 6:55 pm

AFAICT you're currently only using Python to output a static HTML page (with embedded javascript)?
So for debugging purposes it might be better to just create it as a standalone .html page, use that to debug your javascript, and then copy the 'fixed' version back into your python file, ready for further development?

feverish · Tue Aug 26, 2014 7:59 pm

paddyg wrote:It's quite hard working out javascript, why the names of things vary from css I don't know - keep looking at the w3schools examples etc. and use the browser inspect element thing to debug your code.

Code: Select all

<html>
             <head>
                 <script type="text/javascript">
                 function onofffunction()
                      {
                      document.getElementById("container2").style.backgroundColor = "white";
                      document.getElementById("heaterstatus").innerHTML = "ON";
                      document.getElementById("heaterstatus").style.color = "red";
                      document.getElementById("heaterstatus").style.fontSize = "20px";
                      document.getElementById("heaterstatus").value = "ON";
                      document.getElementById("heaterstatus").style.backgroundColor = "white";
                      }

                 </script>
             </head>
               
             <body style="background-color:darkgreen;">
                 <!comment . . . make a container for the whole active display. Colour of container is dark green>

Thank you for that, and for the comment on CSS vs javascript.
I copied your corrections into the .py file, including moving the <Script> contents into the <head> tag as you showed, and including the <script type etc I had previously left out in error.. It all loaded perfectly into the browser but did nothing else visible when the button was clicked, so it seems I have yet more to learn . If I may trouble you further, do you know if there is a way to step-by-step through the .py file, please, a simple 'OK to here' message like a python 'alert' would be a useful debigging aid? .

feverish · Tue Aug 26, 2014 8:09 pm

AndrewS wrote:AFAICT you're currently only using Python to output a static HTML page (with embedded javascript)?
So for debugging purposes it might be better to just create it as a standalone .html page, use that to debug your javascript, and then copy the 'fixed' version back into your python file, ready for further development?

I had not considered doing that previously, and thank you for the suggestion. You are correct about my (small) progress to date and I will give it a try if I can't get a grip on the problem reasonably quickly. Do you have a debugger app you can recommend or will I need to suck-it-and-see? I'd prefer to do any debugging on my windows PC rather than on the raspi, which can be a slow process.

paddyg · Tue Aug 26, 2014 8:26 pm

On firefox and chrome you right click somewhere on the page and choose 'Inspect Element'. You then get Console,Inspector,Debugger,StyleEditor,Profiler,Network tabs. To see where your javascript stopped you can look in the console where it should give you a line number.

As Andrew says (and I did) get the html working on its own before trying to get the python to render it working.

PS in python I just stick in print()s but that won't help here as it seems that the python works ok (as you say you get a web page rendered) but the javaScript doesn't work.

AndrewS · Tue Aug 26, 2014 9:52 pm

paddyg wrote:PS in python I just stick in print()s but that won't help here as it seems that the python works ok (as you say you get a web page rendered) but the javaScript doesn't work.

http://www.w3schools.com/jsref/met_win_alert.asp

paddyg · Tue Aug 26, 2014 11:56 pm

yes alert() is handy and even more useful is console.log (once you've got the hang of using the inspect element, developer tools).

iinnovations · Wed Aug 27, 2014 1:27 am

I second the use of firebug and element inspector in firefox. They are absolutely critical to my development process. You can also execute javascript/jQuery in the active console, as well as modify and unselect css properties, as well as see where the applied rules are being read from.

Another piece of advice I wish I'd received earlier: take a look at jQuery for your DOM manipulation. It will make your life much, much easier.

Colin

feverish · Thu Aug 28, 2014 9:01 am

SOLVED!!!
Entirely due in the end to the invaluable help you folks have given me in this topic. The final advice on how to debug using Firefox's inspect Element proved definitive.

After fighting my way transcribing the HTML data from Raspi to Windows and using Firefox on it, I hit on trying to use the same technique on Iceweasel in Raspi while running the .py script app. This saved a lot of Windows work trying to install Cherrypy before I could test the whole thing and this worked like a dream and speeded things up no end!

javascript in python .py

javascript in python .py

Re: javascript in python .py

Re: javascript in python .py

Re: javascript in python .py

Re: javascript in python .py

Re: javascript in python .py

Re: javascript in python .py

Re: javascript in python .py

Re: javascript in python .py

Re: javascript in python .py