VPythonAndTheVirtualWorld < AFNOG

Tags: view all tags

%SLIDESHOWSTART%
---+ Reading the Color Sensor and the Virtual World
<h2 align="center">Session 3 of the AFNOG tutorial <br />on !IoT sensors<br /><br />Uli Raich</h2>

---+++ 
---+ How to create the Virtual World

We have seen the image of <br /><br />
   * the ultra-sonic sensor
   * the color sensor
   * the colored paper
Having a closer look we see that it is composed of simple 3d objects:<br /><br />
   * cylinders
   * boxes
   * a sphere
<img alt="scene-1.png" height="503" src="%ATTACHURL%/scene-1.png" title="scene-1.png" width="412" />

---+++ 
---+ Videos

Some of the examples in the slides are videos captured from the screen.

It is more difficult to insert these into the TWiki pages than into the slides.

I uploaded mpeg video clips and added links such by clicking them

you can download and/or visualize the clips.

---+++ 
---+ VPython

VPython makes it easy to create and display these 3d objects.

VPython creates the scene in a separate windows and <br /><br />
   * Lets you move the viewpoint (3rd mouse button)
   * Lets you scale the image (2nd mouse button)
<img alt="moveAndResize.png" height="377" src="%ATTACHURL%/moveAndResize.png" title="moveAndResize.png" width="594" />

and here is the video clip:

%ATTACHURL%/virtualWorld.mpeg

---+++ 
---+ VPython Doc

The documentation of VPython explains how to create and change the objects

<img alt="VPythonDoc.png" height="500" src="%ATTACHURL%/VPythonDoc.png" title="VPythonDoc.png" width="822" />

You can find it at [[http://vpython.org/][vpython.org]]

Now we will go through a few simple examples which will enable us to assemble the scene.

---+++ 
---+ Create a cylinder

First we must import the methods allowing to create the objects and then create the cylinder.
| <img alt="cylinder-1Code.png" height="106" src="%ATTACHURL%/cylinder-1Code.png" title="cylinder-1Code.png" width="407" /> | <img alt="cylinder-1.png" height="522" src="%ATTACHURL%/cylinder-1.png" title="cylinder-1.png" width="493" /> |
---+++ 
---+ The !FutureWarning

When running the code you will see a warning:

<img alt="futureWarning.png" height="192" src="%ATTACHURL%/futureWarning.png" title="futureWarning.png" width="804" />

It turns out that I did not have this problem on my older version of

Raspbian which runs a slightly older version of Python.

It must have appeared only with a very recent Python-2.7 version.

It is only a warning and does not prevent the program from running.

If it annoys you, you have 2 options: <br /><br />
   * Correct the code of VPython or
   * simply suppress the warning
The warning can be suppressed by the following code:

<img alt="suppressWarning.png" height="56" src="%ATTACHURL%/suppressWarning.png" title="suppressWarning.png" width="710" />

---+++ 
---+ Add a sphere

Now we want to add a sphere at position 0,0,0 and move the cylinder to the left of the x-axis.
| <img alt="cylinderAndSphereCode.png" height="123" src="%ATTACHURL%/cylinderAndSphereCode.png" title="cylinderAndSphereCode.png" width="418" /> | <img alt="cylinderAndSphere.png" height="448" src="%ATTACHURL%/cylinderAndSphere.png" title="cylinderAndSphere.png" width="421" /> |
---+++ 
---+ Change Size and Color

Next we want to make the cylinder longer but slimmer,

change the color of the sphere and make it real small.
| <img alt="sizeAndColorCode.png" height="165" src="%ATTACHURL%/sizeAndColorCode.png" title="sizeAndColorCode.png" width="541" /> | <img alt="sizeAndColor.png" height="448" src="%ATTACHURL%/sizeAndColor.png" title="sizeAndColor.png" width="421" /> |
---+++ 
---+ The Virtual Paper Sheet

Finally let’s add a virtual paper sheet in form of a very thin (in x-direction) box

simulating the paper sheet:
| <img alt="virtualPaperCode.png" height="195" src="%ATTACHURL%/virtualPaperCode.png" title="virtualPaperCode.png" width="669" /> | <img alt="virtualPaper.png" height="448" src="%ATTACHURL%/virtualPaper.png" title="virtualPaper.png" width="421" /> |

---+++ 
---+ Move the paper

Once the static part is done we have to figure out how to move the paper

(depending of the distance of the real paper to the distance detector)

and how to change its color (depending on the color found by the color sensor)

Let's first do this without reading the sensors by just displaying the paper at a certain

position before moving it on and by changing its color and displaying it for a time before

changing it.
| <img alt="paperMoveCode.png" height="380" src="%ATTACHURL%/paperMoveCode.png" title="paperMoveCode.png" width="647" /> | <img alt="paperMove.png" height="218" src="%ATTACHURL%/paperMove.png" title="paperMove.png" width="210" /> |
and here is the corresponding video clip again:

%ATTACHURL%/movePaper.mpeg

---+++ 
---+ Change the Paper Color
| <img alt="paperColorCode.png" height="441" src="%ATTACHURL%/paperColorCode.png" title="paperColorCode.png" width="651" /> | <img alt="virtualPaper.png" height="448" src="%ATTACHURL%/virtualPaper.png" title="virtualPaper.png" width="421" /> |
again, here is the video clip:

%ATTACHURL%/colors.mpeg

---+++ 
---+ Text in VPython

In our case it might be interesting to print the current distance to the paper in text form.
| <img alt="vPythonTextCode.png" height="475" src="%ATTACHURL%/vPythonTextCode.png" title="vPythonTextCode.png" width="803" /> | <img alt="vpythonText.png" height="222" src="%ATTACHURL%/vpythonText.png" title="vpythonText.png" width="240" /> |
the video clip shows the result:

%ATTACHURL%label.mpeg

---+++ 
---+ A model of the distance sensor

This is the model of the ultrasonic distance sensor.

First the blue base plate is creates on which we have 2 cylinders

representing the loudspeaker and the microphone.

On top of each white cylinder I put a very thin black cylinder.

In addition we see the quartz implemented as a box

Understanding this code will allow you to easily create the model of the color sensor.

<img alt="distanceSensorModelCode.png" height="100" src="%ATTACHURL%/distanceSensorModelCode.png" title="distanceSensorModelCode.png" width="1007" />

---+++ 
---+ Integrating the measurements

To be added:<br /><br />
   * Create a pi object connecting our program to the pigpiod daemon
   * Create a colorSensor instance
   * Create a usSensor instance (us stands for ultra-sonic)
   * Calibrate the colorSensor with black and white
In an endless loop:<br /><br />
   * Read the distance sensor
   * If the paper is close to the distance sensor, read the color
   * Adapt the distance and the color of the model paper
---+++ 
---+ Color reading only close by

Why do we read the color only when the paper is close to the color sensor?

The color found by the sensor depends on the light intensity

reflected by the paper and this changes with distance

<br />If we measure the color far away from the sensor little light will fall

onto the sensor and the color will come out dark.

<br />Therefore put the paper close to the color sensor at first and keep the same

color when the paper is moving away from the sensor.

---+++ 
---+ Time to experiment

Enough lectures, enough talking!

It is time to experiment. Hopefully you now have the information needed to play with
   * the Python language
   * sensors and actuators
   * VPython to create realistic models
Of course 2 days are too short to go into detail of !IoT sensors and actuators.

The Raspberry Pi offers you many more possibilities:
   * different hardware interfaces
      * !I2C bus
      * SPI bus
      * camera interface ....
   * and of course you can write your !IoT code in a different language

---+++ 

%SLIDESHOWEND%

-- %USERSIG{UliRaich - 2018-04-25}%

---++ Comments

%COMMENT%

Attachments

Topic attachments
I	Attachment	History	Action	Size	Date	Who
png	VPythonDoc.png	r1	manage	97.5 K	2018-04-25 - 17:36	UliRaich
mpeg	colors.mpeg	r1	manage	1244.0 K	2018-04-25 - 17:37	UliRaich
png	cylinder-1.png	r1	manage	21.6 K	2018-04-25 - 17:35	UliRaich
png	cylinder-1Code.png	r1	manage	10.1 K	2018-04-25 - 18:04	UliRaich
png	cylinderAndSphere.png	r1	manage	10.2 K	2018-04-25 - 17:35	UliRaich
png	cylinderAndSphereCode.png	r1	manage	11.8 K	2018-04-25 - 18:14	UliRaich
png	distanceSensorModelCode.png	r1	manage	40.4 K	2018-04-25 - 18:34	UliRaich
png	futureWarning.png	r1	manage	22.4 K	2018-04-25 - 18:04	UliRaich
mpeg	label.mpeg	r1	manage	864.0 K	2018-04-25 - 17:38	UliRaich
png	moveAndResize.png	r1	manage	21.5 K	2018-04-25 - 17:35	UliRaich
mpeg	movePaper.mpeg	r1	manage	612.0 K	2018-04-25 - 17:39	UliRaich
png	paperColorCode.png	r1	manage	58.5 K	2018-04-25 - 18:41	UliRaich
png	paperMove.png	r1	manage	2.7 K	2018-04-25 - 18:29	UliRaich
png	paperMoveCode.png	r1	manage	48.2 K	2018-04-25 - 18:29	UliRaich
png	scene-1.png	r1	manage	16.4 K	2018-04-25 - 17:35	UliRaich
png	sizeAndColor.png	r1	manage	6.6 K	2018-04-25 - 18:18	UliRaich
png	sizeAndColorCode.png	r1	manage	19.9 K	2018-04-25 - 18:18	UliRaich
png	suppressWarning.png	r1	manage	9.7 K	2018-04-25 - 18:04	UliRaich
png	vPythonTextCode.png	r1	manage	71.2 K	2018-04-25 - 18:46	UliRaich
png	virtualPaper.png	r1	manage	7.1 K	2018-04-25 - 18:21	UliRaich
png	virtualPaperCode.png	r1	manage	29.7 K	2018-04-25 - 18:21	UliRaich
mpeg	virtualWorld.mpeg	r1	manage	732.0 K	2018-04-25 - 17:39	UliRaich
png	vpythonText.png	r1	manage	5.1 K	2018-04-25 - 18:50	UliRaich
png	vpythonText.png.png	r1	manage	5.1 K	2018-04-25 - 18:46	UliRaich

Topic revision: r1 - 2018-04-25 - UliRaich