====== 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 [[http://raspberrypi.org|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 [[http://flipster.tv/doku.php?id=brainbox:young-coders:iot:html-coding:home|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: === {{ :brainbox:young-coders:iot:iot-light-640x360.jpg |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:** * **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** [[https://www.raspberrypi.org/learning/physical-computing-with-python/worksheet/|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, [[http://flipster.tv/34spicam/sfx-stream_zoom.html|OPEN THE LIVE VIDEO STREAM]]** (video not yet targeted on IoT devices and audio stream currently disabled). **Then, select an IoT Item...** - [[http://flipster.tv/34spi/rf/switch_11/on/|Bowler Hat ON]] (Safely turn ON office light using radio control 240V power switch) - [[http://flipster.tv/34spi/rf/switch_11/off/|Bowler Hat OFF]] (Safely turn OFF office light using radio control 240V power switch) - [[http://flipster.tv/34spi/rf/switch_12/on/|Solar House ON]] (turn ON solar house and lights ON for all houses in street) - [[http://flipster.tv/34spi/rf/switch_12/off/|Solar House OFF]] (turn OFF solar house and lights OFF for all houses in street) - [[http://flipster.tv/34spi/gpio/16/click/|Robbi the Robot]] (play music and make //Robbie// dance (music only audible at remote location)) - [[http://flipster.tv/34spi/gpio/2/click/|Play Remote Sound CB_1]] (play a different sound that is only audible at remote location) - [[http://flipster.tv/34spi/gpio/3/click/|Play Remote Sound CB_2]] (play a different sound that is only audible at remote location) - [[http://flipster.tv/iot/simple-sound.html|Play Local Sound 1]] HTML5 coded sound that is only audible at our own, local location. - [[http://flipster.tv/iot/simple-sound-click.html|Play Local Sound 2]] HTML5 code sound that is only audible at our own, local location. - [[http://flipster.tv/34spi/gpio/20/click/|Spider FORWARD]] Send forward command to $10 //Reject Shop// Ifrared controlled spider) - [[http://flipster.tv/34spi/gpio/21/click/|Spider ROTATE]]Send rotate command to Ifrared controlled spider) - [[http://flipster.tv/34spi/rf/switch_15/off/|RF Power Unit#3 All OFF]] (Send command to safely turn a group of 4 radio control power switches OFF) **Video & Camera Monitoring/Control: ** - [[http://flipster.tv/iot/twister00.php|Twister00 Generic]] Best way to control remote PTZ via low bandwidth (mobile phone, tablet etc.) - [[http://flipster.tv/iot/twister01.php|Twister01 Generic]] Best way to control remote PTZ via low bandwidth (mobile phone, tablet etc.) - [[http://flipster.tv/34spicam/sfx-stream_simple.html|34SPI SD Stream]] (RaspberryPi HD InfraRed Streaming & stop-motion video camera) - [[http://flipster.tv/34spicam/sfx-stream_zoom.html|34SPI SD Zoom]] (RaspberryPi HD InfraRed Streaming & stop-motion video camera) - [[http://flipster.tv/twister00/|MSWin/OSX Twister00 HD PTZ Duplex Stream]] (Live, two-way audio + video streaming) - [[http://flipster.tv/twister01/|MSWin/OSX Twister01 HD PTZ Duplex Stream]] (Live, two-way audio + video streaming) **NOT CURRENTLY ACTIVE** ThingyPi - [[http://flipster.tv/thingypi/|ThingyPI Control Panel]] (Browser based, master switch control panel on RaspberryPi) - [[http://flipster.tv/twister/cgi-bin/CGIProxy.fcgi?cmd=snapPicture&usr=admin&pwd=MyBxxxxx5|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:** - [[http://flipster.tv/34spicam/sfx-stream.html|IMPORTANT: CLICK HERE FIRST]] to view results in real time when lamp (next item) turned on/off. - [[http://flipster.tv/34spi/rf/switch_01/on/|Desk lamp ON]] (activate solar-cell powered dancing Hula/Flower devices) - [[http://flipster.tv/34spi/rf/switch_01/off/|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. * **[[http://flipster.tv/iot/|EXAMPLE MULTIMEDIA MENU - HTML5 CODE]]** This is explained in more detail on the [[http://flipster.tv/doku.php?id=brainbox:young-coders:iot:html-coding:home|WIK IoT HTML Coding Page]] \\ ---- ++++ MISC | **Mobile Device Format - 34SPI Control Panel** - [[http://flipster.tv/34spi/|34SPI Control Panel]] (Browser based, master switch control panel on RaspberryPi) - [[http://flipster.tv/iot/foscam-twister00.php|Twister00 HD PTZ Duplex Stream]] (Live PTZ video streaming) - [[http://flipster.tv/iot/foscam-twister01.php|Twister01 HD PTZ Duplex Stream]] (Live PTZ video streaming) ++++ ---- \\ ====== Example - Simple HTML5 Code for Inter-active Multimedia Content: ====== [[http://flipster.tv/iot/wps-map-00.html|{{ :brainbox:young-coders:iot:wps-map-example-bg.jpg?640x425 |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. - Example HTML5 Multimedia Code (Stage2 students) - Play [[http://flipster.tv/iot/simple-sound.html|Remote Sound 01]] - Example HTML5 Multimedia Code (by Stage2 students) - Play [[http://flipster.tv/iot/simple-video.html|Remote Video 01]] - Extension: To watch TV, click on the **[TV on]** button when you [[http://flipster.tv/iot/wps-map-03.html|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 [[http://flipster.tv/iot/wps-map-00.html|depending on location of mouse]] within student-specified co-ordinates. - Advanced: Create Web-based [[http://flipster.tv/iot/wps-map-03.html|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. * **Play using example [[http://flipster.tv/iot/simple-sound.html|remote sound code]]** \\ * **Play using example [[http://flipster.tv/iot/simple-video.html|remote video code]]** \\ The above files were created by students using 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. See the introductory and advanced [[:brainbox:young-coders:home|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 ((RaspberryPi 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 ((Radio Frequency switch)) |switch_01 |on |off | - | ^Switch 2 |34spi |rf |switch_02 |on |off | - | ^Sound 01 |34spifiles |((see example HTML5 code below)) |sound-01.mp3 | | | | ^Video 01 |34spifiles |((see example HTML5 code below)) |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 ++++ ----