Table of Contents

Annoy The Principal - A School IoT project:

FIXME - Restricted access - Currentl limited to authorised network users only


SYNOPSIS: Some test things have been connected to a Raspberry Pi at a remote location (located somewhere in school).

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) to annoy the principal.

NOTE: Access to school devices is restricted.


SCHOOL IOT - CONTROLLING THE INTERNET OF THINGS (IoT):

IOT Remote Control Lamp

Image 1. IOT Remote Control (Turn remote lamp on/off to activate a solar hula toy)

The current WPS student IOT systems include the remote control of:

Physical Computing With Python Using a Raspberry Pi for simple sensing, switching and coding.

HINT: First open a streaming video link and then open a separate browser window to implement your controls. This provided almost instant feedback (depending on network quality), so that you can to see what is happening at the remote end when you press a control button on your browser.

NOTE: Each of the following links opens in a new browser tab - Close the new, unwanted tab to return to this page (this is a wiki limitation only)

EXAMPLE LIVE IoT DEVICE CONTROLS:

34SPi Remote Control System (Located in school)

First, OPEN THE LIVE VIDEO STREAM (video not yet targeted on IoT devices and audio stream currently disabled).

Then, select an IoT Item…

  1. Bowler Hat ON (Safely turn ON office light using radio control 240V power switch)
  2. Bowler Hat OFF (Safely turn OFF office light using radio control 240V power switch)
  3. Solar House ON (turn ON solar house and lights ON for all houses in street)
  4. Solar House OFF (turn OFF solar house and lights OFF for all houses in street)
  5. Robbi the Robot (play music and make Robbie dance (music only audible at remote location))
  6. Play Remote Sound CB_1 (play a different sound that is only audible at remote location)
  7. Play Remote Sound CB_2 (play a different sound that is only audible at remote location)
  8. Play Local Sound 1 HTML5 coded sound that is only audible at our own, local location.
  9. Play Local Sound 2 HTML5 code sound that is only audible at our own, local location.
  10. Spider FORWARD Send forward command to $10 Reject Shop Ifrared controlled spider)
  11. Spider ROTATESend rotate command to Ifrared controlled spider)
  12. RF Power Unit#3 All OFF (Send command to safely turn a group of 4 radio control power switches OFF)

Video & Camera Monitoring/Control:

  1. Twister00 Generic Best way to control remote PTZ via low bandwidth (mobile phone, tablet etc.)
  2. Twister01 Generic Best way to control remote PTZ via low bandwidth (mobile phone, tablet etc.)
  3. 34SPI SD Stream (RaspberryPi HD InfraRed Streaming & stop-motion video camera)
  4. 34SPI SD Zoom (RaspberryPi HD InfraRed Streaming & stop-motion video camera)
  5. MSWin/OSX Twister00 HD PTZ Duplex Stream (Live, two-way audio + video streaming)
  6. MSWin/OSX Twister01 HD PTZ Duplex Stream (Live, two-way audio + video streaming)

NOT CURRENTLY ACTIVE ThingyPi

  1. ThingyPI Control Panel (Browser based, master switch control panel on RaspberryPi)
  2. Webcam Snapshot (Take a real-time snapshot from the remote webcam - includes time-stamp on image)

Quick Demo Switch with Close-up Infrared Video Stream:

  1. IMPORTANT: CLICK HERE FIRST to view results in real time when lamp (next item) turned on/off.
  2. Desk lamp ON (activate solar-cell powered dancing Hula/Flower devices)
  3. Desk lamp OFF (de-activate solar-cell powered dancing Hula/Flower devices)

How To Integrate Remote Control/Multi-media Content Into Your Web Page(s):

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 explained in more detail on the WIK IoT HTML Coding Page



MISC



Example - Simple HTML5 Code for Inter-active Multimedia Content:

Example - Coding Simple Interactive Games

Click image to see simple, HTML5 interactive multimedia content

The HTML5 sound and video examples have been created by Stage2 students. The advanced ImageMap files are supplied for example of extended challenge for Stage3 students.

  1. Example HTML5 Multimedia Code (Stage2 students) - Play Remote Sound 01
  2. Example HTML5 Multimedia Code (by Stage2 students) - Play Remote Video 01
  3. Extension: To watch TV, click on the [TV on] button when you view this example ImageMap
  4. Another Example: 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 to activate user interaction depending on location of mouse within student-specified co-ordinates.
  5. Advanced: Create Web-based Inter-active ImageMaps. Some Youtube controls do not work from inside DoE - Click on TV screen to pause video using on-screen control if buttons not working!


Example HTML5 Multimedia Code Created By Stage2 Students:

The resources are all located in the school but are all available from home for authorised users.

This is some example HTML5 code that you may add to your personal web page to create a link to play a remote sound and/or video.

<audio controls>
<source
    src="http://flipster.tv/iot/sound01.mp3"
    type="audio/mpeg">
</audio>


<video
    src='http://flipster.tv/iot/video-01.mp4'
    type='video/mp4' width'210' height='210' controls>
</video>


The above files were created by students using WC3 Schools HTML5 video and HTML5 audio coding tutorials.

See the introductory and advanced HTML coding information and examples for more detailed instructions and help.



Appendices


1)
RaspberryPi GPIO
2)
Radio Frequency switch
3) , 4)
see example HTML5 code below