FLIPSTER
STEAMpunks WIKI
Join The Parade, New South Wales - Ph:+61-2-1234-5678

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

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 the W3Schools on-line HTML editor and tutorials to create some simple web pages.

Task 01:

Using the 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

W3cSchool On-line HTML Editor

Required Tasks - Lesson-01

Using the on-line editor:

  1. Create a basic web page containing a heading and two paragraphs
  2. Create a web page with two links to your two favourite web sites

- Create a web page that displaysa background image when the page is viewed in a browser

  1. Create a 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 '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).

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

  1. Communication method (protocol) for connection to remote site.
  2. Publicly advertised Internet address of remote site.
  3. Publicly advertised name of remote server.
  4. Type of switch at remote site.
  5. Name or ID of remote switch.
  6. 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 1) 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 2) 18 click
Sound 2 http: flipster.tv 34spi gpio 19 click
Robot Dancehttp: 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 Jumphttp: flipster.tv 34spi ir 3)button_aclick

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

  1. DP Office - ThingyPi IR Camera REQUIRES NSWDET LOGIN! (RaspberryPi HD InfraRed Streaming & stop-motion video camera)
  2. 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:

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

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:

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

Here are two working example of files that include the above code:

Also, see WC3 Schools HTML5 video and 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 HTML coding information and examples for more help.

  1. Create a simple web page (HTML) & store it on your own workstation:
  2. Design a page or project using sound and video

Example - Simple HTML Coding to Create Multimedia Content:

Advanced HTML Coding For Simple Multimedia Games

Example - Coding Simple Interactive Games

Image 2. Example HTML Coding - Creating simple HTML interactive multimedia games

  1. 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.
  2. 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

*NOTE: Example 03 requires access to youtube - The TV content may not work from inside school.

Working With Interactive Multimedia

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:

  1. Server IP address 10.145.169.27 (only from inside school at the moment - soon from home)
    • Hostname: 34spi.schools-nsw.org
  2. Mains voltage (240V) radio control (RC) switches (to turn power on/off)
  3. Low voltage (3-12V), relays (to turn battery controlled devices on/off)
  4. General Purpose In/Out (GPIO) (write your own code to control Rasperry Pi GPIO logic pins)
  5. 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)
  6. Infrared streaming camera (write code to view and/or embed live video stream in your own web page)
  7. 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 //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 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')


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, 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.

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


1)
radio control
2)
Raspberry Pi
3)
infra red
 
 
brainbox/young-coders/iot/html-coding/home.txt · Last modified: 25/06/2019/ 20:26 (external edit)