====== BRAINBOX - IOT CODING HOWTO: ======
FIXME - Needs to be updated
**When Knowledge becomes free, only ideas will have value - Anon**
=== Students learn: ===
^Curriculum ^Core Learning Activities ^
|SCIENCE |Circuits & Simple machines |
|TECHNOLOGY |HTML coding + communications |
|ART |Blended multimedia elements |
|ENGINEERING |Interactive control of real-world devices|
|MATHEMATICS |Calculate timing & positioning|
----
=== HTML (web page) Coding For Beginners ===
{{ :brainbox:young-coders:coders-640x360.jpg |STEAMpunks - Young Coders}}
HTML is easy to learn. You can do some very neat things with HTML (a lot more than you would guess). You will enjoy it :)
**You will be using [[http://www.w3schools.com/html/|the W3Schools on-line HTML editor and tutorials]] to create some simple web pages.**
=== Task 01: ===
Using the [[http://www.w3schools.com/html/html_intro.asp|on-line editor]] you can edit the example HTML code (and/or create your own code), and click on a button to instantly view the result:
=== Figure 1. Example Web Page Coding Using On-line HTML Editor & Tutorials ===
{{ :brainbox:young-coders:html:lesson-01:lesson-01-html-01.jpg |W3cSchool On-line HTML Editor}}
====== Required Tasks - Lesson-01 ======
Using the [[http://www.w3schools.com/html/html_intro.asp|on-line editor]]:
- Create a [[http://www.w3schools.com/html/html_basic.asp|basic web page]] containing a heading and two paragraphs
- Create a web page with [[http://www.w3schools.com/html/html_links.asp|two links]] to your two favourite web sites
- Create a web page that displays[[http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position_percent|a background image]] when the page is viewed in a browser
- Create a [[http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_link|web page that contains an image]] or where an image can be used as a link.
Copy and paste each of your finished pages from the on-line editor into one or more files saved onto your own computer desktop or into your home folder.
====== Getting Started With The IOT ======
**Here is some information about how to control things connected to the Internet (the Internet Of Things):**
You do not need to spend hundreds or thousands of dollars on your ''things''.
Here are **some example [[http://amazing-toys.com.hk/v3/en-us/shop/connex|'things' to connect]]**
=== What you will do: ===
Using the information supplied below, create your own web page by creating code that can control the remote 'things' (devices and multimedia content) via the Internet.
=== How it works: ===
You will create web (HTML) links to things that are connected to the Internet at remote locations. Your web link will wok like a switch. Instead of using a 'real' switch', you will turn a remote device ON/OFF by clicking on your web link(s).
=== How To Create IOT Links: ===
You will need to create a link between the switch on your web page and the 'thing' that you wish to control.
Creating links to 'things' is like finding the route through a maze: You need to start at the beginning and 'join the dots' that take you on a clear path to the end of the maze.
You can figure out how to join the dots by using a table, such as Table 1. below. When used this way, you are starting to learn about some very useful things that are more commonly known as [[https://en.wikipedia.org/wiki/Truth_table|Truth Tables]]
For example, referring to Table 1 below, see how to 'join the dots' to create a valid link (URI). To create your link, adding each of the following items in the correct order:
- **Communication method** (protocol) for connection to remote site.
- Publicly advertised **Internet address** of remote site.
- Publicly advertised **name of remote server**.
- **Type of switch** at remote site.
- **Name or ID** of remote switch.
- Remote **switch action**.
Using the above items to create a link is a lot like using electrical components to create a electrical circuit. When you click on your link (switch) data (electricity) flows through the network (electrical circuit) to obtain the desired result.
If your circuit is incomplete or wrongly constructed, your IOT link (circuit) will not work.
====== Creating Your First IOT Link (Joining the dots) ======
=== The Information You Will Need To 'Join The Dots' ===
* Public server address (proxy): flipster.tv
* Public link to 34Spi server: flipster.tv/34spi/
|Thing name ^Comms type^ Internet Address or Site Name ^Server name ^Switch type ^Switch id ^Action ^
|Bowler Hat |http: |flipster.tv |thingypi |rf ((radio control)) |switch_04 |on |
|Bowler Hat |http: |flipster.tv |thingypi |rf |switch_04 |off |
|Table Lamp |http: |flipster.tv |thingypi |rf |switch_06 |on |
|Table Lamp |http: |flipster.tv |thingypi |rf |switch_06 |off |
|Sound 1 |http: |flipster.tv |34spi |gpio ((Raspberry Pi)) |18 |click |
|Sound 2 |http: |flipster.tv |34spi |gpio |19 |click |
|Robot Dance|http: |flipster.tv |34spi |gpio |10 |click |
|Solar On |http: |flipster.tv |34spi |rf |switch_08 |on |
|Solar On |http: |flipster.tv |34spi |rf |switch_08 |off |
|Spider Jump|http: |flipster.tv |34spi |ir ((infra red))|button_a|click |
http://flipster.tv/34spi/rf/switch_06/on/
=== To control a remote device: ===
If you were building a convetional electrical circuit, you would have to join all of the components together using some kind of electrical connector.
Similarly to create your IOT link, you must connect each component by using forward slashes '/' to join each component together, thus making an unbroken to make a link (circuit) to and from your browser (web page) to the remote IOT device.
**NOTE:** there must be **two slashes after the 'http:'** http:// but only a single slash / between each of the following elements.
For example, **to turn the bowler hat light ON**, the link in your web page your link would be something like this:
http://flipster.tv/thingypi/rf/switch_04/on/
To turn the bowler hat light **OFF**:
http://flipster.tv/thingypi/rf/switch_04/off/
=== To Monitor Your Actions Via Remote Video Stream ===
- **[[http://flipster.tv/thingycam/wps-stream.html|DP Office - ThingyPi IR Camera]]** REQUIRES NSWDET LOGIN! (RaspberryPi HD InfraRed Streaming & stop-motion video camera)
- **[[http://web1.wahroonga-p.schools.nsw.edu.au/iot/twister-generic.php|DP Office - Twister01 Low Res.]]** Best way to monitor remote actions via low bandwidth (mobile phone, tablet etc).
=== To play a remote sound: ===
You must create a link to 'join the dots' by using forward slashes "/" to join each part together to make a link from your browser to the remote device. You must also place your link within the correct HTML5 multimedia tags.
This is some example HTML5 code that you may add to your web page to create a link to **play a remote sound**:
=== To play a remote video: ===
And here is some example HTML5 code that you may add to your web page to create a link to **play a remote video:**
Here are two working example of files that include the above code:
- [[http://flipster.tv/34sfiles/simple-sound.html|Play remote sound]]
- [[http://flipster.tv/34sfiles/simple-video.html|Play remote video]]
Also, see WC3 Schools [[http://www.w3schools.com/HTML/html5_video.asp|HTML5 video]] and [[http://www.w3schools.com/HTML/html5_audio.asp|HTML5 audio]] coding tutorials.
**NOTE:** It may take a few seconds for a sound and/or video link to appear in the page...! If the link(s) fail(s) to appear after one minute, try refreshing your web page.
----
=== Optional Extra Tasks: ===
See the introductory and advanced [[:brainbox:young-coders:home|HTML coding information and examples]] for more help.
- Create a [[https://developer.mozilla.org/en-US/Learn/HTML/Write_a_simple_page_in_HTML|simple web page]] (HTML) & store it on your own workstation:
- Design a page or project [[http://www.w3schools.com/html/html_media.asp|using sound and video]]
=== Example - Simple HTML Coding to Create Multimedia Content: ===
- [[http://flipster.tv/34sfiles/simple-sound.html|Play Remote Sound 01]]
- [[http://flipster.tv/34sfiles/simple-video.html|Play Remote Video 01]]
----
====== Advanced HTML Coding For Simple Multimedia Games ======
{{ :brainbox:young-coders:iot:wps-map-example-bg.jpg?640x425 |Example - Coding Simple Interactive Games}}
=== Image 2. Example HTML Coding - Creating simple HTML interactive multimedia games ===
- [[http://flipster.tv/34sfiles/wps-map-00.html|Create Simple Web-based Multimedia Interactives]] - Hover mouse around over image areas (head,tummy,window,tree) to find hidden sounds/images! See the X/Y Co-ordinates at top right hand side of image - the co-ordinates are used in code to activate elements when user positions mouse within student-specified co-ordinate values.
- [[http://flipster.tv/34sfiles/wps-map-03.html|Create Simple Web-based Multimedia Interactives]] - More complicated: Some Youtube controls do not work from inside DoE - Click on TV screen to pause video using on-screen control if buttons not working!
----
=== Advanced HTML ===
Advanced HTML - How to add interactive multimedia to your web pages:
Students will be supplied with a complete set of files that they can download to experiment and play with. This allows the students to customise and edit all features found in the examples below, plus optionally incorporate their own original multimedia works:
=== Working With Interactive ImageMaps ===
- [[http://wps.flipster.org/steam/static/wps/wps-map-00.html|WPS ImageMap Example 00]]
- [[http://wps.flipster.org/steam/static/wps/wps-map-01.html|WPS ImageMap Example 01]]
- [[http://wps.flipster.org/steam/static/wps/wps-map-02.html|WPS ImageMap Example 02]]
- [[http://wps.flipster.org/steam/static/wps/wps-map-03.html|WPS ImageMap Example 03]]*
*NOTE: Example 03 requires access to youtube - The TV content may not work from inside school.
=== Working With Interactive Multimedia ===
- [[http://wps.flipster.org/steam/static/wps/sound.html|HTML5 Sound Embed Test]]
- [[http://wps.flipster.org/steam/static/wps/video.html|HTML5 video Embed Test]]
**ThingyPI:**
Your mission is to create one or more web pages that can switch the remote devices on/off
The things at the remote site are connected to a Raspberry Pi that is running a 'flask' web server. Using the information supplied below, create your own web page and add code that can control the remote 'things' via the Internet.
There is a real-time video streaming service that you can view (to monitor the changes at the remote site. There are also real-time sounds which you can be played when you make a change to things connected to the ThingyPi server.
Here are the links and tools that you will need to control the things on the PI server:
- Server IP address 10.145.169.27 (only from inside school at the moment - soon from home)
* Hostname: 34spi.schools-nsw.org
- Mains voltage (240V) radio control (RC) switches (to turn power on/off)
* Example: http://10.145.169.27/rf/switch_01/on
- Low voltage (3-12V), relays (to turn battery controlled devices on/off)
* Example: http://10.145.169.27/gpio/switch_01/on
- General Purpose In/Out (GPIO) (write your own code to control Rasperry Pi GPIO logic pins)
* GPIO Input: http://10.145.169.27/gpio/16/click/ - Actions: 'click' only
* GPIO Output:http://10.145.169.27/gpio/8/click/ - Actions: [on|off|click|flip]
- Streaming video with Pan, Tilt and Zoom (PTZ) controls (write your own code to control and/or embed live video stream in your own web page)
* Link: http://10.145.169.27:89/wps-stream.html
- Infrared streaming camera (write code to view and/or embed live video stream in your own web page)
* Link: http://10.145.169.16:88/videoMain
- Streaming Sound and Video 'on demand' (write your own code to play/embed remote sound effects in your page)
* FIXME
A range of example devices and toys are connected to the above switches. These will be updated and changed depending on availability and student ideas/suggestions/requests
====== ADVANCED - The ThingyPI Project: ======
Your mission is to create one or more web pages that can switch remote devices on/off and to then design your own device to connect to //The Internet of Things// (IOT).
Some 'test' things have already been connected to a RaspberryPi (named [[http://flipster.tv/thingypi|//thingypi//]]), at a remote location (Mrs Evans' Office).
=== Your Private IOT Web Site: ===
Each student has been provided with their own private web site, available from within school and via the public Internet. The site is protected by a unique login name and password.
You will login to your IOT web site using your DoE ID and password and login security is the responsibility of each student.
^IOT setup link ^ Enter your DoE ID ^ Enter your password ^
|http://flipster.tv/iot/ | joe.bloe@detnsw | * * * * * |
The above link will get you started.
* Some example files have already been copied into your personal web home folder
* You may copy, re-name, upload, edit or delete any of the example files.
* You may also upload your own files and then edit them using the admin.php file here on-line
* You should edit or delete the default file called 'index.html' and replace it with your own page.
You can also access and manage all of your files using a web browser via the public Internet.
The [[http://flipster.tv/iot/|default IOT login page]] contains a link to a your web that you can use to **view, edit, upload, create and copy files and folders**.
Once your you have logged in, on future visits you may add 'admin.php' to the end of your website link and login using your DoE username and password. An example link to and the admin.php file would look like this:
http://flipster.tv/iot/joe.bloe/admin.php
Where 'joe.bloe' is your DoE login name (without the extra '@detnsw')
----
{{ :brainbox:young-coders:iot:sfm-screenshot-01.jpg?641x518 |Simple File Manger IOT Admin Tool}}
----
=== Figure 1. The IOT on-line admin.php - Simple File & Content Manager ===
The **admin.php** app provides each student with their own full, personal web site admin functions, [[http://onedotoh.sourceforge.net/|Simple File Manager]]: You can use this (specially customised for WPS) single app to maintain your entire website, completely in-browser, from anywhere at any time and without needing any external programs.
{{ :brainbox:young-coders:iot:sfm-screenshot-02.jpg?640x649 |Simple File Manager - Using The Text Editor}}
=== Figure 2. The IOT on-line admin.php - Text editor ===
The app provides all the basic file management features, plus:
* A basic text editor with single-click html preview.
* Sort directory listings by file name, size, or type.
* Browser based view, edit, upload, download, copy, move and delete.
You can edit you web pages and preview the result but do not edit or delete the admin.php file (doing so will break your site!)
If you get lost, the direct link to your admin page will always be:
http://flipster.tv/iot/your.name/admin.php
Replace the 'your.name' with your own DoE login name.
To fully logout, you should always close your browser. If you do not close the browser, someone else may access your files. You are responsible for all of the content on your web site. You should not tell other people what your password is.
FIXME More details will be posted here in the next few days.
====== Getting Started With IOT ======
++++ Appendix |
=== Table 1. Example table of values to help build a link: ===
^Site name ^server/location name ^switch type ^switch name/number ^switch action ^
|flipster.tv |thingypi |gpio |switch_04 |on |
|flipster.tv |thingypi |gpio |8 |click |
|flipster.tv |thingypi |rf |switch_08 |off |
NOTE: The 'rf' (above is abbreviation of 'Radio Frequency' type switch. The 'gpio' is a RaspberryPi 'General Purpose In/Out' switch.
Take a look at the links above and see how to join them together using forward slashes to create a web link (URI) that you can enter into your own web page.
Here are the links to devices that you will use to control the things on the ThingyPi server:
- Mains voltage (240V) radio control (RC) switches (to turn power on/off)
* Example: http://flipster.tv/thingypi/rf/switch_01/on
- Low voltage (3-12V), relays (to turn battery controlled devices on/off)
* Example: http://flipster.tv/thingypi/gpio/switch_01/on
- General Purpose In/Out (GPIO) (write your own code to control Rasperry Pi GPIO logic pins)
* GPIO Input: http://flipster.tv/thingypi/gpio/16/click/ - Actions: 'click' only
* GPIO Output: http://flipster.tv/thingypi/gpio/8/click/ - Actions: [on|off|click|flip]
- FIXME Coming soon - Streaming video with Pan, Tilt and Zoom (PTZ) controls
* Link: http://flipster.tv/thingypi/wps-stream.html
- FIXME: Coming soon -Infrared streaming camera (write code to view and/or embed live video stream in your own web page)
- FIXME: Comin soon - Streaming Sound and Video 'on demand' (write your own code to play/embed remote sound effects in your page)
* FIXME
A range of example devices and toys are connected to the above switches. These will be updated and changed in the next few days - depending on availability and student ideas/suggestions/requests.
Please ask your teacher for your private IOT web site **URI**, **username** **password**
Some general information is [[:brainbox:young-coders:home|available here]]
++++
----