Annoy The Principal - A School IoT project:
EXAMPLE LIVE IoT DEVICE CONTROLS:
Example - Simple HTML5 Code for Inter-active Multimedia Content:
Example HTML5 Multimedia Code Created By Stage2 Students:

Annoy The Principal - A School IoT project:

- 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):

The resources are all located in the school but are all available from home for authorised users. All of the toys are cheap, off-the-shelf items that require minimal, modification
All of the controls and resources are fully compatible with with modern web browser and accessible via desktop computer, tablet or smart-phone.
Students create their own code and user interfaces to control and integrate everything using simple HTML web pages alone!
Students have full control over the look and feel of their user interface using whatever images, sound or other multi-media elements they may choose to integrate.
All of the HTML5 code may be created and stored independently and at no cost by each student using only a simple text editor.

EXAMPLE SCHOOL IoT LINKS:

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:

Radio Frequency 240V switches (suitable for all standard household appliances)
Infrared Remote Controls - Full control of TV's PVR's, Toys and any other standard IR Device.
Low Voltage Relays - Full on-off control of any low voltage device.
Interactive Radio Control - Real-time control of RC drones, cars and similar devices.
WIFI control of specialised remote devices such as Pan, Zoom and Tilt security cameras.
Full multimedia integration for user interface design and for output
FUll HD, remote controlled video/audio streaming

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…

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

Video & Camera Monitoring/Control:

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

NOT CURRENTLY ACTIVE ThingyPi

ThingyPI Control Panel (Browser based, master switch control panel on RaspberryPi)
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:

IMPORTANT: CLICK HERE FIRST to view results in real time when lamp (next item) turned on/off.
Desk lamp ON (activate solar-cell powered dancing Hula/Flower devices)
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.

EXAMPLE MULTIMEDIA MENU - HTML5 CODE

This is explained in more detail on the WIK IoT HTML Coding Page

MISC

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

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.

Example HTML5 Multimedia Code (Stage2 students) - Play Remote Sound 01
Example HTML5 Multimedia Code (by Stage2 students) - Play Remote Video 01
Extension: To watch TV, click on the [TV on] button when you view this example ImageMap
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.
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>

Play using example remote sound code

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

Play using example remote video code

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

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.

Here is some information about how to use RaspberryPi server(s) to control the Internet Of Things:

The links to 'things' is like finding the route map: you need to start at the beginning and 'join the dots' that take you on a clear path to the destination.

Viewing Table 1 can help you 'join the dots' (creating a valid URI) by joining the correct site name, server name, switch type and the switch action:

The Information You Will Need To 'Join The Dots'

Public server address (DoE proxy): flipster.tv
Private server address (LAN direct): 10.145.169.17

Name	Location	Switch type	GPIO/device number/id	Valid actions
Relay 01	34spi	gpio ¹⁾	12	-	-	flip
Relay 02	34spi	gpio	16	-	-	flip
Button 1	34spi	gpio	8	-	-	click
Button 2	34spi	gpio	9	-	-	click
Switch 1	34spi	rf ²⁾	switch_01	on	off	-
Switch 2	34spi	rf	switch_02	on	off	-
Sound 01	34spifiles	³⁾	sound-01.mp3
Video 01	34spifiles	⁴⁾	video-01.mp4

To control a remote device:

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:

For example (from within school LAN only):

To turn Relay 01 on/off: http://10.145.169.17/34spi/gpio/12/flip
To turn Relay 02 on/off: http://10.145.169.17/34spi/gpio/16/flip
To turn Switch 2 on: http://10.145.169.17/34spi/switch_02/on
To turn Switch 2 off: http://10.145.169.17/34spi/switch_02/off
To press Button 1: http://10.145.169.17/34spi/gpio/8/click

¹⁾

RaspberryPi GPIO

²⁾

Radio Frequency switch

³⁾ , ⁴⁾

see example HTML5 code below

Table of Contents