Differences

This shows you the differences between two versions of the page.

--- pibot:lesson4:softwaremac [2021/11/06 21:12] – Fixed jstruebel
+++ pibot:lesson4:softwaremac [2022/10/20 19:53] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
+====== Software Setup ======
+  - Open the terminal app\\ \\ <WRAP round tip>Click the magnifying glass in the top right corner of the screen and type "terminal" to find the terminal app</WRAP>
+  - Type the following command and press enter to connect to the Raspberry Pi terminal via SSH\\ \\ <WRAP round important>Replace the text "pibot##" with the label on the PiBot</WRAP> <WRAP round important>The password to enter when prompted is "DogsAndCatsAreNice2." without the quotes. The '.' at the end is important!</WRAP><code>ssh pi@pibot##.local</code>
+  - Perform the following steps to enable the CSI interface on the Raspberry Pi board
+    - Type the following command and press enter to run the Raspberry Pi configuration utility\\ \\ <code>sudo raspi-config</code>
+    - Use the up and down arrow keys to select the "Interfacing Options" menu item and then press the enter key\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s1.png |Main Menu}}</WRAP>
+    - Use the up and down arrow keys to select the "Camera" menu item and press the enter key\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s2.png |Interface Menu}}</WRAP>
+    - Use the left and right arrow keys to select the "Yes" option and press the enter key\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s3.png |Camera Enable}}</WRAP>
+    - Select the "Ok" option and press the enter key\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s4.png |Camera Confirmed}}</WRAP>
+    - Use the left and right arrow keys to select the "Finish" option and press the enter key\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s5.png |Exit}}</WRAP>
+    - Use the left and right arrow keys to select the "Yes" option and press the enter key\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s6.png |Reboot}}</WRAP>
+  - Open the Visual Studio Code from the Applications directory on the flash drive
+  - Click on the small green square in the bottom left corner of the screen\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s7.png |VSCode Main Screen}}</WRAP>
+  - Select the "Connect Current Window to Host..." option\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s8.png |VSCode Remote-SSH}}</WRAP>
+  - Type "pi@pibot##.local" and press enter\\ \\ <WRAP round important>Replace the text "pibot##" with the label on the pibot</WRAP> <WRAP round important>The password to enter when prompted is "DogsAndCatsAreNice2." without the quotes. The '.' at the end is important!</WRAP> <WRAP round tip>It may take a couple of minutes while it installs some files on the PiBot</WRAP> <WRAP box>{{ :pibot:lesson4:softwaremac:s9.png |VSCode Remote Connection}}</WRAP>
+  - Click the "Open Folder" button\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s10.png |VSCode Open Folder}}</WRAP>
+  - Select the "pi" folder and click the "OK" button\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s11.png |VSCode Browse}}</WRAP>
+  - Open a terminal in Visual Studio Code from the Terminal->New Terminal menu
+  - Type the following commands and press enter after each line to download the MJPEG Streamer code for this lesson\\ \\ <code>wget http://osoyoo.com/driver/picar/webcam.sh
+wget http://osoyoo.com/driver/picar/camstart.sh
+bash webcam.sh</code>
+  - Type the following command and press enter to start the MJPEG Streamer server for this lesson\\ \\ <code>bash camstart.sh</code>
+  - Open the Safari App, type http://pibot##.local:8899 in the address bar, press enter, and click on the Stream link at the left to test the MJPEG Streamer software\\ \\ <WRAP round important>Replace the text "pibot##" with the label on the pibot</WRAP> <WRAP box>{{ :pibot:lesson4:softwaremac:s12.png |MJPEG streamer Test}}</WRAP>
+  - Open another terminal in Visual Studio Code from the Terminal->New Terminal menu
+  - Type the following commands and press enter after each line to download the Python and HTML code for this lesson\\ \\ <WRAP round tip>Answer "yes" or "y" when asked to install extra packages or continue</WRAP> <code>wget http://osoyoo.com/driver/picar/osoyoowebcar.sh
+bash osoyoowebcar.sh</code>
+  - Close the current folder in Visual Studio Code from the File->Close Folder menu
+  - Click the double pages icon on the left and click the "Open Folder" button\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s13.png |VSCode Open Folder}}</WRAP>
+  - Select the "osoyoowebcar" folder and click the "OK" button\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s14.png |VSCode Browse}}</WRAP>
+  - Select the webcar.py file in the list\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s15.png |VSCode webcar.py}}</WRAP>
+  - Replace the **192.168.0.32** on line 15 with **0.0.0.0**
+  - Save the change by using the File->Save menu
+  - Click on the templates directory and select the index.html file\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s16.png |VSCode index.html}}</WRAP>
+  - Replace the **192.168.0.32** on line 34 with **pibot##.local**\\ \\ <WRAP round important>Replace the text "pibot##" with the label on the pibot</WRAP>
+  - Save the change by using the File->Save menu
+  - Open a terminal in Visual Studio Code from the Terminal->New Terminal menu
+  - Type the following command and press enter to run the Python code for this lesson\\ \\ <code>sudo python3 webcar.py</code>
+  - Open the Safari App, type http://pibot##.local in the address bar, and press enter\\ \\ <WRAP round important>Replace the text "pibot##" with the label on the pibot</WRAP> <WRAP round important>You may need to adjust the mounting position of the camera holder to point straight forward</WRAP> <WRAP box>{{ :pibot:lesson4:softwaremac:s17.png |Webcar app}}</WRAP>
+====== Software Explanation ======
+The webcar.py file uses a Python library called Flask that handles the details of serving a webpage to your web browser. Using libraries like Flask is a powerful way to get advanced capabilities in your software without having to write a lot of code from scratch. By using the Flask library there are only a few lines of code that are required to make the PiBot drive around from your web browser.
+  - In the webcar.py file find the last line of code. What do you think this line does?\\ \\ <WRAP round tip>The app.run function is what calls the Flask library and tells it to send pages to your web browser.</WRAP> <WRAP round tip>Port 80 is the standard port used on the Internet when you type %%http://%% at the beginning of the web address</WRAP>
+  - In the webcar.py file, find where the action function is defined. What do you think this function does?\\ \\ <WRAP round tip>If you don't remember what a variable is, review the description from [[:pibot:lesson1:softwaremac#software_explanation|Lesson 1]]</WRAP> </WRAP round tip>The '@app.route' that appears above the action function is called a function decorator. It tells Python that this function has special meaning to the Flask library.</WRAP> <WRAP round tip>The @app.route decorator is used by Flask to run a function when a certain URL is accessed by your web browser. Every page displayed by your web browser can be accessed by a URL. Most URLs start with %%http://%% or %%https://%% and then the website name like google.com or yahoo.com. After the website, often there is a path that tells the web server exactly which web page you want to see. Flask uses that path to determine what function to run based on the @app.route decorator.</WRAP>
+  - How do the '<action>' and '<cmd>' values in the decorator relate to the parameters of the action function?\\ \\ <WRAP round tip>The '<action>' and '<cmd>' values in the call to the @app.route decorator are passed to the action function as the 'action' and 'cmd' parameters.</WRAP>
+  - What are some valid paths that will cause the the action function to do something? Find what the code does when that path is requested by your web browser.\\ \\ <WRAP round tip>Each path ends up calling another function in the code as determined by the 'if' statements. Find where those functions are defined in the code to see what happens when each path is requested.</WRAP>
+  - Add code to the action function so that when the path '/print/hello' is requested the text "Hello from PiBot" is printed out.
+  - Save your changes by using the File->Save menu
+  - Type control + C in the terminal window and then run the following command in the Visual Studio Code terminal to get your new code\\ \\ <code>sudo python3 webcar.py</code>
+  - In the Safari App type http://pibot##.local/print/hello in the address bar and press enter. What happens in the terminal window?\\ \\ <WRAP round important>Replace the text "pibot##" with the label on the pibot</WRAP>
+  - In the webcar.py file find the call to the render_template function. What is the name of the file that it will send?\\ \\ <WRAP round tip>The render_function template takes the file name that is passed as its parameter and sends it to the web browser that is accessing it. All of the files must be in the 'templates' directory for Flask to be able to send them.</WRAP>
+  - Open the 'index.html' file from the templates directory
+  - In the index.html file find where it requests one of the paths that you saw in the webcar.py file. What function is it part of?\\ \\ <WRAP round tip>The "GET" command is a standard HTTP command that web browsers use to request a URL from the web server. Some other commands are "POST", "PUT", and "CONNECT".</WRAP>
+  - Find the '<script>' line in the index.html file. \\ \\<WRAP round tip>The '<script> tag starts a block of Javascript code in the middle of an HTML file. Javascript allows a web page to be more interactive than simply displaying information. The index.html file uses Javascript functions to send the commands back to the Raspberry Pi so that you can control the PiBot.</WRAP>
+  - Find where one of the Javascript functions is called in the HTML above. What do you think causes the function to get called?\\ \\ <WRAP round tip>HTML uses tags that are contained between '<' and '>' brackets. The HTML tags are used to organize, format, and draw the elements that you see on a web page.</WRAP>
+  - Add a button to the HTML that when clicked will request the '/print/hello' URL that you added.\\ \\ <WRAP round tip>Don't forget to create a Javascript function to actually send the request. Copy one of the existing functions and modify it.</WRAP>
+  - Save your changes by using the File->Save menu
+  - Reload the web page in the Safari app to see your new button. Click on it and see if it prints the right message in the terminal window.
+  - When you're finished driving the PiBot around, hold down the control + C keys and type the following command in the Visual Studio Code terminal to shutdown the PiBot\\ \\ <code>sudo shutdown -h now</code>
+  - Click on the small green rectangle in the bottom left corner of the screen and select "Close Remote Connection"
+  - Wait 3-5 minutes for the green light on the Raspberry Pi to stop flashing and turn off the switch on the PiBot battery
+[[:pibot:lesson4#software|Return to Lesson 4]]