使用AJAX执行拍摄照片的python脚本（raspberry pi）

Question

I am working on a project for which I need to build a web interface that will allow interaction with a Raspberry Pi camera. I am using Django and python for the back end. I want to be able to press a button on the web interface that will execute a python script to take a picture with the pi camera. I am thinking I need to use AJAX to complete this, but I don't really understand how I would set this up. I am relatively new to Django itself.

Answer 1

So let's assume you have a Python function that takes a picture with the camera and returns the path to the file.

from my_module import take_pic

my_pic = take_pic()
print(my_pic)  # '/path/to/the/picture'

You're saying you don't know what the views.py should look like so I'll assume that you don't have any Django code ready. To create a Django project, install Django and use django-admin startproject NAME .

So what you need is a Django view and it's associated URL. Let's begin with the URL:

# urls.py
from . import views

urlpatterns = [
    url(r'^take_pic/', views.take_picture, name='take_pic'),
]

Now, create the views.py module in the same folder that urls.py is in.

# views.py
from django.http import JsonResponse

from my_module import take_pic


def take_picture(request):
    my_pic = take_pic()
    return JsonResponse({'path': my_pic})

Finally in your Javascript code (most probably in an Django HTML template, rendered with another view, but I'll leave that as an exercise):

// this example uses JQuery, but you can find plain Javascript examples on the net

<button id="my-button"></button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>

  $(document).ready(function () {

    $('my-button').click(function() {

      // url name here is what you wrote in urls.py
      $.getJSON('{% url "take_pic" %}', function (data) {

        var picture_path = data.path;
        // add an HTML <img> tag where you need it, using the picture path
        // note that your view might need to return a relative path, not absolute
      });

    });

  });

</script>

I think this is a good place to start!