First to show you the effect, and feel very satisfied please continue to read the full text:
Knowledge: Python Bottle HTML Javascript JQuery Bootstrap AJAX and of course Linux
I go, so much ... I'll talk about it at 1.1.
Paste the final source code first:
#!/usr/bin/env python3from Bottle Import get,post,run,request,template@get ("/") def index (): Return Template ("index") @ Post ("/cmd") def cmd ():p rint ("pressed button:" +request.body.read (). Decode ()) return "OK" Run (host= "0.0.0.0")
Yes, just 10 sentences, I say one sentence:
1. #!/usr/bin/env Python3, tell the shell that this file is a Python source code, let bash call Python3 to interpret this code
2. From bottle import Get,post,run,request,template, import the methods, objects I used from the bottle framework
The following sentence defines 2 routes, one is "/" one is "/cmd", the former is a get type (decorated with @get), and the latter is the post type (with the @post decoration)
The first route is simply to read the index template (the template is an HTML) and send it to the client (browser), because the path is "/" that is, for example, the IP address of the Raspberry Pi is: 192.168.0.10
That with http://192.168.0.10:8080 access to our "/" route (bottle default port is 8080)
Similarly, the path to the second route is "/cmd", which means that access to Http://192.168.0.10:8080/cmd accesses the second route
The last sentence: run (host = "0.0.0.0") is called the bottle Run method, set up an HTTP server, so that we can access our interface through the browser.
Let me explain in detail what these codes do:
The function of the first route is to throw the browser an HTML (INDEX.TPL) document that displays this interface:
The source code for this file is as follows:
Remote Raspberry Pi
This is a bit more, but it's easy to refer to the two front-end frames of jquery bootstrap, with 5 buttons (the code between them). Of course I used the bootstrap built-up up and down to stop these icons, the 5-button ID resolution is defined as up,down,left,right,stop, and then wrote the following key code:
$ (function () {$ ("button"). Click (function () {$.post ("/cmd", This.id,function (Data,status) {});});
Yes, just the three lines of code ...
1th, 2 line to all the buttons (button) bound a click of the event, the third line calls the jquery post method to send This.id (the ID of the clicked button), sent to "/cmd" This path, at this time, our Python code of the second route to work, Received the ID of the clicked button on the webpage, and printed out the "pressed button: XXX"
Of course, here are a few if statements to judge, you can follow the actual needs to do some real control, well, such as call wiringpi2 for Python control Raspberry Pi Gpio.
On the use of Python simple implementation of the Raspberry Pi Web control of the relevant content to introduce so much, I hope to help you!