How to embed any script in HTML web page

Parth786 · Jan 1, 2018

Hi guys,

I have written python script that blink LED. I want to make web page in HTML, contain button so when button will click on web page.Python script will be run on web server.

Here is html page

HTML:

<html>

<body>

<title>Raspberry PI</title>

<h1>LED</h1>

<form>
        <input type="Button" value="Blink LED">
</form>

</body>

</html>

Web browser display following page

I want to embed python script in HTML web page. I think have to do some change on html file. I was searching on google and I found some example

Code:

<a href="/home/pi/Documents/LED/led.py">.

<link rel="/home/pi/Documents/LED/led.py">

Where to add <href= "link location"> in my HTML Code. How to make complete HTML page that will run python script on browser ?

The python script is located in:
/home/pi/Documents/LED/led.py

Note : I am not talking only python script. I am looking way for any script like php,java or python. here I am just taking example of python script

GopherT · Jan 1, 2018

Then you need a module for python called Flask.

In flask, there is a basic web server that you can set up to call a python method from a few lines of java script code in the html page.

http://flask.pocoo.org/

Parth786 · Jan 1, 2018

GopherT said:
In flask, there is a basic web server that you can set up to call a python method from a few lines of java script code in the html page.

Flask is server and I am not talking about server

Do you think, HTML page is completely correct ? I don't think so I have missing point in program where I have to call python program. once my both program's are correct then I can setup server.

xox · Jan 2, 2018

Parth786 said:
Hi guys,

I have written python script that blink LED. I want to make web page in HTML, contain button so when button will click on web page.Python script will be run on web server.

Here is html page

HTML:

<html> <body> <title>Raspberry PI</title> <h1>LED</h1> <form> <input type="Button" value="Blink LED"> </form> </body> </html>

Web browser display following page

View attachment 142839

I want to embed python script in HTML web page. I think have to do some change on html file. I was searching on google and I found some example

Code:

<a href="/home/pi/Documents/LED/led.py">. <link rel="/home/pi/Documents/LED/led.py">

Where to add <href= "link location"> in my HTML Code. How to make complete HTML page that will run python script on browser ?

The python script is located in:
/home/pi/Documents/LED/led.py

Note : I am not talking only python script. I am looking way for any script like php,java or python. here I am just taking example of python script

The href link is not embedding a python script in an HTML file. It's just sending an HTTP request to your server to execute the script on the server (not within the browser!). So you put all the code that actually controls the LED in the python script, which will in turn send back a response to the client (browser) that can be used to update the page (to show the current status of the LED or what have you).

Probably the best route would be to send a static web page to the client and use XMLHttpRequest to fetch the result. Javascript within the page could then be used to update the DOM. Another option would be to just use one python script to generate EVERYTHING, meaning both the "landing page" and the status updates as a simple page refresh. But that's generally considered to be a bit of a "hackish" approach (and certainly less efficient/user-friendly).

Either way, you should study up on how HTTP, HTML, and Javascript actually work "under the hood" to get a clearer grasp of what you need to do in order to achieve so-and-so effect.

Parth786 · Jan 2, 2018

xox said:
you should study up on how HTTP, HTML, and Javascript actually work "under the hood" to get a clearer grasp of what you need to do in order to achieve so-and-so effect.

I have studied it but after many efforts I didn't understand embedding a python script in an HTML file. That's why I am asking, I have two different program html and python and i want to call python program from html file.

I think i am missing only one line in html but don't know what, It would be better if you can point out in the program.

This is just handy explanation

HTML:

<html><body>
<?
  run ("python_script.py");
?>
</body></html>

/download/python python_script.py
python_script.py

Code:

/*
*python script
*
*/

xox · Jan 2, 2018

Parth786 said:
I have studied it but after many efforts I didn't understand embedding a python script in an HTML file. That's why I am asking, I have two different program html and python and i want to call python program from html file.

I think i am missing only one line in html but don't know what, It would be better if you can point out in the program.

You CANNOT embed the file into an HTML page! That's just not how it works. Your browser executes code written in Javascript, presents content to the user using HTML, and communicates with the server via HTTP. Python scripts are executed on the server side by whatever HTTP server you're using (Apache, nginx, IIS, etc) to generate either "dynamic" HTML pages or even other data formats (JSON, CSV, plain text, whatever) which can be manipulated directly within a webpage (client-side) using AJAX-type requests.

So start by creating a web page that when you click on a button, a Javascript event-handler opens a connection to your web server and sends a text string grabbed from an input field to the python script, which in turn echoes back something like "server received: 'testing 1, 2, 3'" or some such. Once you have that working, move on to a more complex tasks (like turning on or off an LED).

Parth786 · Jan 2, 2018

xox said:
You CANNOT embed the file into an HTML page! That's just not how it works. Your browser executes code written in Javascript, presents content to the user using HTML, and communicates with the server via HTTP. Python scripts are executed on the server side by whatever HTTP server you're using (Apache, nginx, IIS, etc) to generate either "dynamic" HTML pages or even other data formats (JSON, CSV, plain text, whatever) which can be manipulated directly within a webpage (client-side) using AJAX-type requests..

Have you written some programs for raspberry ?

Look at this link http://davstott.me.uk/index.php/2013/03/17/raspberry-pi-controlling-gpio-from-the-web/
there are two programs html and python program but I don't understand how they work together if possible can you help me to understand this links program. which part of program link both programs
http://davstott.me.uk/index.php/2013/03/17/raspberry-pi-controlling-gpio-from-the-web/

xox · Jan 2, 2018

Parth786 said:
Have you written some programs for raspberry ?

Look at this link http://davstott.me.uk/index.php/2013/03/17/raspberry-pi-controlling-gpio-from-the-web/
there are two programs html and python program but I don't understand how they work together if possible can you help me to understand this links program. which part of program link both programs

The web page is basically set up using the first method I described. When you click a button, the Javascript handler creates an AJAX object which is used to send a command ('w' or 's') to the "doStuff.py" script. The script parses the text from the query string sent by the browser using the "urlparse.parse_qs" API and then acts accordingly. Make sense?

To get started, make sure you have your environment set up correctly. You should have:

1) The most current version of a raspberry-compatible Python package installed.

2) A raspberry-compatible web server installed, configured to be able to find and execute your python scripts, and running.

3) A "hello world" server-side python script and HTML file opened in your code editor. The python code should reside in whatever directory you have your server configured to look for them in. The HTML file can just be in the top-level of your server's HTTP directory.

Start by testing that you can see the HTML file in your web browser. Then type the name of the python script directly into the address bar and verify that the script is found and executed. Once you get all that working properly, you can get on with figuring out how to flash an LED.

Parth786 · Jan 2, 2018

xox said:
To get started, make sure you have your environment set up correctly. You should have:

I appreciate your help but I have already done that thing. I was turning on/off lamp light using raspberry. I had set apache server on which PHP program was running to control lamp light in local network.

I have told you previously I am just having problem to link tow programs. I can write two separate programs like shown in post #1. you have mentioned Javascript handler. Can you mention some program on which it explain how does both programs work together

xox · Jan 2, 2018

Parth786 said:
I appreciate your help but I have already done that thing. I was turning on/off lamp light using raspberry. I had set apache server on which PHP program was running to control lamp light in local network.

I have told you previously I am just having problem to link tow programs. I can write two separate programs like shown in post #1. you have mentioned Javascript handler. Can you mention some program on which it explain how does both programs work together

I gave you an ample explanation of how the two work together, and the source code in the blog post clearly shows how such a thing can be done. I think the missing variable in the equation here is your own hard effort. You've been pointed in the right direction, so get cracking already! If you get stuck somewhere along the way, fine, I'll be glad to help. But at this point you really need to do your own research, study, and practice.

Parth786 · Jan 2, 2018

xox said:
. But at this point you really need to do your own research, study, and practice.

I have already done what you said in post #8 and Your explanations in #4 and #6 is going over my head because lack of java script Ajax skills.

look at post #1 and post #5 Do you think my question doesn't show enough research effort. I have done my best as I can do it and also I am trying for my best.

I had incomplete html program and I was trying to complete it. All I need is to complete my html code.

I was expecting your help to complete html program.

HTML:

<head>
    <title>Hello from the Pi</title>
      <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
  </head>
  <body>
    <h1>Hello world from the Raspberry Pi</h1>
    <form>
        <input type="button" value="On" onclick="go('w')" style="font-size:200%;"><br />
        <input type="button" value="Off" onclick="go('s')" style="font-size:200%;">
    </form>
    <script type="text/javascript">
      function go(qry) {
        new Ajax.Request('doStuff.py?q=' + qry,
            {method: 'GET'}
        );
      }
    </script>
  </body>
</html>

eetech00 · Jan 2, 2018

Hi

This is what I do.
Just wrap the code with "script" tags. The following is to embed vbscript code:

Code:

<script language="vbscript" type="text/vbscript">

Function MyFunction()
' do some stuff
End Function

</script>

be80be · Jan 4, 2018

I don't see why this is so hard think about it.
Do you what someone to load a web page and turn off you lights NO.
Then you have to no where that light is so a webpage that goes no where can't run.
You should read up on BlueJ for the pi It's let's you do what you really want.
Everything that's been posted here I have told you the same.

You want a job be a programmer Read Up on one thing till you know it.
Jumping around get's you Know where.
This is food to think about if you owned the whole world where would you put it.
No where LOL
Same happens when you go from one thing to the next you end up no where.

Parth786 · Jan 4, 2018

be80be said:
I don't see why this is so hard think about it.
You want a job be a programmer Read Up on one thing till you know it.
Jumping around get's you Know where.
This is food to think about if you owned the whole world where would you put it.
.

I wanted to learn the way of programming for iot project. My goal was to run the sample program on Pi and then start writing the program. I think it is important to learn how does backend and frontend program work together. because I have to write a front end and backend program every time. so I took an example in which trying to call Python script in the HTML code.

I just want to run the program once and I think if my first program run correctly then I can go for further step's. I have followed some tutorials. but I did not understand that how they two work together I think the first simple program and project takes a lot time to work.

I am trying my best. I have started to learn basic java programming

Parth786 · Jan 4, 2018

If I ask question that I want to turn ON/OFF any device on Pi using internet in local server. so answer would be that I have to make HTML page after that I have to write program (python/java) to control the device and this program will run on web server.

I tried to follow the same procedure. I wrote my own HTML and Python program I followed some tutorials & links but I did not understand that how they two work together I wanted someone to tell me the program of HTML, In which I can call any programming script from this HTML page.

@xox tried to help me But I did not understand the explanation because I do not have knowledge about Ajax

I wanted to make things easier for myself that's why I wrote handy explanations.The only purpose I had in my post was to create a basic structure HTML program that could call any script python/java from HTML program But I have failed to do so lack of other programming languages

be80be · Jan 4, 2018

The Python is the code that the Pi runs to use the gpio of the pi.
You just make a page on the server that post the mouse pointer.
Have that invoke the .py and turn on a light
You can make the server make you log in to the server so only you get to see the page.
It's simple if you do it as been shown.
You can't make a html page that not on a sever. You could make you one that opens the login page
But a app would look better that's where blueJ comes in it let's you make a app you run on anything that can
run a java app which now's days that most any cell phone or computer

Parth786 · Jan 4, 2018

be80be said:
It's simple

It's not simple for me
First I wrote a python program, that was turning light on/off

Code:

import RPi.GPIO as GPIO   ## Import GPIO library
import time               ## import time library
GPIO.setmode(GPIO.BOARD)
GPIO.setup(26,GPIO.OUT)
while True:
     GPIO.output(18,True)
     time.sleep(2)   
     GPIO.output(18,False)
     time.sleep(2)

After that I made web page Web browser display following page

HTML:

<html>
<body>
<title>Raspberry PI</title>
<h1>LED</h1>
<form>
        <input type="Button" value="Blink LED">
</form>
</body>
</html>

I do not understand what to do next . Can you correct mistakes in my HTML page?

xox · Jan 4, 2018

Parth786 said:
It's not simple for me
First I wrote a python program, that was turning light on/off

Code:

import RPi.GPIO as GPIO ## Import GPIO library import time ## import time library GPIO.setmode(GPIO.BOARD) GPIO.setup(26,GPIO.OUT) while True: GPIO.output(18,True) time.sleep(2) GPIO.output(18,False) time.sleep(2)

After that I made web page Web browser display following page

HTML:

<html> <body> <title>Raspberry PI</title> <h1>LED</h1> <form> <input type="Button" value="Blink LED"> </form> </body> </html>

I do not understand what to do next . Can you correct mistakes in my HTML page?

Your python script is just flashing the LED within an infinite loop. What it should be doing is fetching the query string sent from the browser and then acting on the command that it's received. The HTML file should have a Javascript handler installed that invokes the script.

It might be a good idea to have the script send back a status response to indicate the current state of the LED and then display the result to the user (which you can simply assign to an output field's innerHTML attribute).

be80be · Jan 4, 2018

This is how you was doing it your server has PHP on it you poll the status file
That would of been where you should of started and learned how it was working.

Code:

import RPi.GPIO as GPIO
import urllib
import urllib2
GPIO.setmode(GPIO.BCM)
GPIO.setwarnings(False)
GPIO.setup(26,GPIO.OUT)
true = 1

while(true):
    try:
        response = urllib2.urlopen('[URL]http://your.sever.com/buttonStatus.php[/URL]')
        status = response.read()
    except urllib2.HTTPError, e:
        print e.code
    except urllib2.URLError, e:
        print e.args
    print status
    if status=='ON':
        print "setting GPIO 26"
        GPIO.output(26,True)
    elif status=='OFF':
        GPIO.output(26,False)

Why is that making smiley the gpio.output shows smiley
I had to space it out to not get a smiley
LOL I must of still been sleeping i used quote tag not code tag

be80be · Jan 4, 2018

Read these

Code:

<?php
$file = "buttonStatus.txt";
$handle = fopen($file,'w+');
if (isset($_POST['on']))
{
$onstring = "ON";
fwrite($handle,$onstring);
fclose($handle);
print "

then this

Code:

else if(isset($_POST['off']))
{
$offstring = "OFF";
fwrite($handle, $offstring);
fclose($handle);
print "

And this makes the mouse click post to the PHP file that the pi is polling with the python.py

Code:

<form action = "button.php" method = "POST">
<input class  = "btn btn-success" type = "submit" name ="on" id="on" value = "Turn On lights">
<input class  = "btn btn-danger" type = "submit" name ="off" id="off" value = "Turn Off lights">

Thread starter	Similar threads	Forum	Replies	Date
	How to make a Python script crash without a dialog	Programming & Languages	5	Jun 8, 2022
R	How to convert Github C code into Python script to talk to RTD Click board over Serial Peripheral Interface (SPI).	Programming & Languages	3	Apr 9, 2022
S	Help with VJTAG and TCL script	FPGAs (Field Programmable Gate Array)	0	Nov 27, 2021
J	How do I embed a python script into a web page?	Programming & Languages	2	May 6, 2019
	Need a sound player to embed in a stuffed toy	General Electronics Chat	16	Nov 14, 2017

How to embed any script in HTML web page

Join our Engineering Community! Sign-in with:

How to embed any script in HTML web page

Parth786

GopherT

Parth786

xox

Parth786

xox

Parth786

xox

Parth786

xox

Parth786

eetech00

be80be

Parth786

Parth786

be80be

Parth786

xox

be80be

be80be

You May Also Like

Arctic Semiconductor Introduces Novel Low-Power, All-in-One Transceiver

NXP Launches Open S32 CoreRide Platform for Software-Defined Vehicles

From Passives to Wi-Fi 7, New T&M Equipment Validates Next-Gen Devices

Microchip Shows Off Qi 2.0 Wireless Power Transmitter Reference Design