How the web is going physical
•
11 likes•2,356 views
By 2020 there will be 24 billion Internet connected things on the planet, most of which won't have a screen. Web designers and developers are uniquely placed to play in the physical computing world. With skills in information design and working with numerous technologies at the same time, the skills of the web practitioner are directly transferable to the Web of Things and are leading much of the exploratory work occurring around the world right now. Lots of examples of Web Things in the real world as well as live demonstrations (links to projects for slide share viewers) should inspire viewers to get started with the web of things. ** Note there is a momentary audio drop out just prior to 4 minutes into the presentation. If you skip ahead to the next slide you'll regain the audio (about 25 secs of content missing).
Recommended
Recommended
More Related Content
What's hot
What's hot (10)
Similar to How the web is going physical
Similar to How the web is going physical (20)
More from Andrew Fisher
More from Andrew Fisher (16)
Recently uploaded
Recently uploaded (20)
How the web is going physical
- 1. How the web is going physical Web Directions South 14 October, 2011 @ajfisher
- 4. “ The future is here, it's just not evenly distributed yet William Gibson
- 5. Photo (CC): Flickr alanenglish
- 7. Photo (CC): Flickr chromatic
- 8. Photo (CC): Flickr st3f4n
- 9. “ Access to cheap, flexible tools removes many of the barriers to trying new things ” Clay Shirky, Cognitive Suplus
- 10. Get ideas from 8 year olds Photo (CC): Flickr edventures
- 11. Hardware is now becoming open Photo (CC): Flickr gnomehose
- 15. Yes, electrons can kill you Photo (CC): Flickr zigazou76
- 16. Build a web thing in 90 Code here: http://gist.github.com/1290685 seconds
- 21. Send HTML
- 23. Screenshot of live version, post presentation
- 25. Nike+
- 30. Visualising our environment Immaterials: Light painting WiFi | Timo (Vimeo)
- 31. Using data to keep these alive Photo (CC): Flickr rosipaw
- 32. pachube.com
- 34. Tweeting garden Code here: http://github.com/ajfisher/garduino
- 35. Getting physical with information Photo (CC): Flickr wworks
- 36. Information radiation Generic networked light code: http://gist.github.com/1290670
- 37. Send a tweet now with this hashtag #wdsphysical Order light code: http://github.com/ajfisher/arduino-django-visualiser Twitter keyword hunter code: http://gist.github.com/1290545
- 38. technorama.ro | Yahoo Farm
- 39. technorama.ro | Yahoo Farm
- 40. technorama.ro | Yahoo Farm
- 42. Instaprint.me
- 45. Can water have presence? NOAA NDBC Buoy 46075
- 46. Photo: creativeapplications.net | Work: David Bowen
- 47. Community Connected Things Photo (CC): Flickr Andrijbulba
- 48. Photo (CC): Flickr Ennuipoet
- 50. Measuring radiation Photo (CC): Flickr Home of Chaos
- 51. Sparkfun.com | Shigeru Kobayashi
- 52. Fukushima radiation data pachube.com | feed 36048
- 54. Robot controlled by Web Sockets via Pusher | @kevinrohling
- 55. Getting started Networked arduino – freetronics.com @freetronics Arduino IDE – arduino.cc@arduinoteam Electronics starter kit – littlebirdelectronics.com @lbhq makezine.com instructables.com hackaday.com
- 56. Prizes EtherTen networked arduino Freetronics Melbourne @freetronics Arduino starter kit. Little Bird Electronics @lbhq
Editor's Notes
- I'm really glad to see a bunch of you who are interested in physical computing. So much so that you're happy to go for a double dose after the presentation by Mike this morning.
- As all of this stuff is going to be up at slideshare and the code on github you shouldn't need to take notes. Instead I want you to jot down ideas, sketch concepts of the sorts of things you could do with the stuff I'm talking about.
- Today I'm going to talk about some uses of the Web of things and the skills you'll use for physical computing and I'm also going to touch on how the technologies and tools we use are starting to take over the physical world too.
- The Web of Things is largely the future – it's something that's only just now starting to be even conceived – driven by ubiquitous Internet access and cheap computation. Like the start of the desktop and then mobile web, this is the time where we can play around and actually start to shape what the future looks like - and everyone in this room can get involved.
- The physical world is very much the new frontier for the web I'd like to dispel a preconceived notion at that start though. A lot of web types, particularly programmers think that hardware is hard. http://www.flickr.com/photos/alanenglish/3075705671/
- Don't be put off by the electronics, most of these things these days are very well documented and you use several components over and over and over again. It's like your building blocks in web design and development, your grid systems and css frameworks. You use the same techniques all the time. http://www.flickr.com/photos/oskay/437342078
- 20 years ago, If you wanted to make a thing that talked to some other thing you pretty much needed a degree in Electrical Engineering and probably software design as well to be able to do such a thing. Now, One of the side effects of Moore's law is that the same computing power gets cheaper and cheaper over time. http://www.flickr.com/photos/chromatic/956400675
- Eventually it becomes so cheap you can throw it into things like a McDonald's happy meal toy. You start to have so much fractional computation around you it starts to permeate every part of our existence. The impact of this is profound when this is all networked because it allows the web to come to life. http://www.flickr.com/photos/st3f4n/4488605177/
- This is the way technology advances so if you were put off electronics more than 5 or 6 years ago then you'd be really surprised at what's now available. Hardware is becoming just like software and just as things like Jquery or Django allow us to get to our ideas faster, hardware is going the same route.
- The average 8 year old with a box of lego mind storms and a couple of hacks now has the potential to conceive, build and program an Internet connected thing in their bedroom. When I was 8 lego was pretty much just space ships and fire trucks. http://www.flickr.com/photos/edventures/4533077202
- The open source community has embraced hardware too making hardware designs that are free to use, modify and build upon, so we're seeing an explosion of iteration just like we have on the Web on the software side. http://www.flickr.com/photos/gnomehost/3611675722/
- So hardware is no longer hard, it's becoming soft, malleable and accessible. And we're at a really interesting point as cheap and accessible technologies meet the distribution and tools of the web and so we're starting to see an explosion of interesting, innovative uses. And all of you can get involved with it.
- So let's explore some web connected things, from the personal to the global and talk about how you can start getting involved in this new area. To start with, you're going to need a platform
- I like arduino and will talk about it a bit today. Arduino uses C++, which is a very powerful and well documented language and there is a huge community and groundswell around the platform that has a great mix of designers, developers, engineers of all skill levels so is a great community to be part of. **Get Arduino IDE at http://arduino.cc **
- I have to give you the boring warning I know but at least I've said it. Batteries work just fine 99% of the time And from personal experience I can tell you even a 12 Volt car battery will give you a bit of shock. Don't play with mains electricity unless you really know what you're doing http://www.flickr.com/photos/zigazou76/3702501888/
- So to show you very quickly how easy it is to get up and running I'm going to show here a little demo.
- So first of all we take one of these, This is a network enabled arduino. It has a network connector on the end so we can just plug it into the network. Networked Arduino from www.freetronics.com
- Here's some some boiler plate code that's freely available and in the public domain. Uses the basic WEBSERVER sketch in the Arduino IDE from Tom Igoe and David Mellis
- Let's add a sensor to this - temperature in this case.
- A few lines of code to grab the temperature from the sensor. This is again all documented online.
- Then we just spit out some HTML to create a page. .
- What we're going to do is turn it on, plug it in and there you go.
- This is the hello world of the Internet of Things Switch browsers RIGHT– thank Charlie Simple huh – only took a minute - 90 seconds and now you have an internet connected thing. Once you know how to do that, you can network just about anything you can dream of. So now we know the basics of what's involved lets look at some Web Things.
- So starting small and local, we can take the Things that are around us and enchant them. Sometimes making them smarter, sometimes allowing them to collect data that make us smarter but all the while enhancing our personal lives and spaces.
- This is no doubt familiar to many people and is a great example of how a relatively dumb device can enhance our lives. The beauty of this is that it's really a great example of the total service design that sits around it, taking the data, providing it back to us so that we can measure our performance, compete against others and ultimately making us fitter which is the whole point of owning running shoes.
- Let's look at some things you can interact with locally. We can use the web to control things or interact with things but the at a local context– it is almost useless when we're a fair distance from it.
- You might be wondering what this thing is down the front of the stage. Well this is our locally interactive thing for today. I'm sure you're all familiar with the concept of Tug of War. Well this is a machine version which you can play indoors without having to get out of your chairs. http://www.flickr.com/photos/barsk/2855280391/
- So what I want you all to do is go to this address on your phone. You'll need iOS or Firefox on Android to use this. You'll be asked to create a username and from there you'll be allocated to either the red team or the green team. The red team is going to pull to the left of stage, and the green to the right side. Now to pull on the rope you have to shake your phone as vigorously as possible. The more you shake the harder your side will pull. You dont have to shake yet I'll count you down to start. Switch screens.LEFT
- So with a mobile web browser, a bit of web socket code and an arduino with a motor you can create a game that people can play collectively or individually.
- So moving a bit bigger now. With the web of things One of the biggest areas being explored is the use of data and particularly the visualisation of data. First of all if we can capture data then it allows us to take action upon it. By seeing something and understanding it then we can gain insight and change behaviour. Say in the case of a sensor that streams information to the web in real time like my temperature sensor you can all jump on there now and can see what the temperature is. So let's have a look at an example http://vimeo.com/20412632
- How many of you have plants at home? How many of you water them too much or too little as in my case? So this project captures data about temperature, light and moisture from the garden. http://www.flickr.com/photos/rosipaw/5141066692/
- Now to make it useful the data is streamed in real time to Pachube – which is a data brokerage – you can send data up to it and they can hold it and you can process it – it has an api around it.
- So one of the cool things pachube does is that visualise data streams over time so you can look at the last 5 minutes, or 5 hours or 5 months if you want. So once I have this data which I can see on my phone, on my tablet or any other device with a web browser. I can then start seeing quickly which plants specifically need watering or not and what the weather is doing. Because all of this data is available on the web and Pachube exposes an API around all of this, I can now use scripts to trigger events – Pachube even allows some basic triggering that hits URLs based on certain criteria.
- So of course, being a programmer – I went and created some urls it could hit so now I can trigger each of my potplants to @ me on twitter when they need a drink so I don't forget. And if I'm away I can ask someone else to do it. Yes I'm kind of geeky about my strawberries but now I don't just come home from work and water things indiscrimately
- So we've talked about getting data out of our environment and up onto the web but what about the flip side, physicality is a big motivator for us humans. We like to use all our senses to experience information - sometimes you need to understand something in a deeply tangible and experiential manner and that can't be done in a web browser. Sometimes you just need to get a bit up close and personal – touch it, see it, hear it all together. So the web of things allows us to merge the data and connections of the web with the physicality of the real. http://www.flickr.com/photos/wwworks/2313927146
- So we can take web data and visualise it, displaying it in some fashion that allows us to utilise it and see it better than we would on a screen So another demo. This light is displaying tweets as they occur in real time that are tagged with #wds11 and flashing every time one comes through the twitter Streaming API.
- If you send a tweet now with #wdsphysical then you can actually make it flash a different colour. This one here was something I built for a client of mine and every time an order goes through on their website it causes a pulse on this light and the duration of the pulse indicates the amount of spend. So the higher the spend, the longer the pulse. So these are just interesting ways of displaying data as it arrives and there's nothing particularly magical about this. It's just hooking into apis that gets the data, doing some processing on it to do something like 1 tweet equals 1 second. Then it sends a message down to the arduino and then causes the light to pulse. https://gist.github.com/1290545
- So you can do some fun things with this. This hackathon project shows how easy it is to turn pretty mundane data into meaningful and fun points of interactivity. http://www.tehnorama.ro/the-yahoo-farm/
- So the diorama they created here has different backgrounds on motors that show the weather from yahoo weather. http://www.tehnorama.ro/the-yahoo-farm/
- A voice sings out yahoooo every time a new email arrives. Birds sing when you get tweets and the sheep come out of the barn every time one of their friends come online so they can start to see presence. So this is an interesting and novel way of visualising this data. Imagine having that on the end of your desk at work or in your office. http://www.tehnorama.ro/the-yahoo-farm/
- This is the instaprint – built by Breakfast NY. It uses a polaroid printer to trawl instagram for the event tags of where it's located and then queues up and prints out photos along with the message Http://instaprint.me
- This is a really nice way of turning media that is largely now digital and never sees the light of day back into a physical artifact which is how photos always were up until only about a decade ago.
- This guy decided that he wanted to know every time the International Space Station passed overhead as a little reminder that we now have a permanent home and human presence in space. Http://open-notify.org/iss
- If you could visualise anything what would you choose? What piece of data just makes you want to make something with it. You've got access to all this data what would you display, how could you display it? Feel free, jot down notes, sketch stuff out in your notebooks. Show me after and I'll tell you how to build it.
- How about wave data from a buoy in the Pacific ocean
- but you take that data and put it an atrium in the National Museum of Poland? And you recreate the wave from the data that is being captured from the buoy. Switch screens Right – ATAB Vid This visualisation connects the viewer to the data, showing what the sea is doing a miles and miles away from where it's being displayed. I could actually sit and watch this for hours. http://www.dwbowen.com/tele_waterWRO.html
- In this next part I'm going to talk about community connected things. So when we're looking at hooking up Things at the scale of communities – towns or cities or countries or even globally – because these things require such a commitment to do it, the only real way to achieve it is to use the infrastructure we've already got and the web is the best way we've got to do it – it's the only platform that's been created that can connect 2 billion people and more and it's becoming easier and easier to do it. So this is the scale where your web skills come back into the picture as here we can use our design and development knowledge to build services that are valuable experiences not just meaningless streams of data http://www.flickr.com/photos/andrijbulba/977292731
- In many large cities particularly old cities they have a problem where during storms if there is a lot of rain in a short period you get flash flooding of storm water. This storm water gets into the sewage system which then causes it to overflow, sending raw sewage potentially in the street and definitely in the rivers and harbour with all the problems that creates and it pretty much devastates marine life. http://www.flickr.com/photos/ennuipoet/
- A project in NY called dontflush.me aims to help this issue by installing sensors in the sewage system to illustrate it's current capacity and then feed that back to residents via text message, a web site and even via a lightbulb in their bathroom. And when it turns on people are informed as to whether they can avoid flushing if they can avoid it until the worst of the storm water has passed then it will help keep capacity down. This project is coupling sensor networks with ambient display to try and change people's behaviour and is a good illustration of the direction of smart cities are going to take and the idea that it's going to be driven by bottom up actions created locally rather than top down architecture of what the government beauracracy think people need. I really like this as a concept it's almost creating the technology or sensor commons if you like.
- After the Fukushima incident earlier in the year there were obviously a lot of people concerned about radiation escaping into the atmosphere and particularly where it was going because it can carry on the wind. Many people expressed concern at the time around the official line produced by the power company and government http://www.flickr.com/photos/home_of_chaos/5571367545
- so some makers decided to produce radiation sensors, open up the plans and get loads of them built and connected them up to Pachube where we could then see in real time the radiation levels that were being generated. http://www.sparkfun.com/news/579
- Very quickly, Within only a few days of the incident there were dozens of sensors all over Japan – some were in existence already but some were new and all around the pacific rim there were these radiation sensors starting to pop up - Measuring some of this data in Realtime.
- Developers started getting hold of this raw data and visualising it on google maps. You can see this one I've got up here of the current view of what's going on just in japan but there's not as much data up there now as there was a few months ago All of this data was flowing through and what's really interesting about this is that you've got these tools available for people to build these sorts of things but no one orchestrated it, it just self-assembled from like minded people. And the web was the facilitator for all of it. http://japan.failedrobot.com/
- The web is the dominant platform on the desktop and increasingly on mobile because of it's x-platform nature, it is fast to iterate with and it is designed to interconnect, creating more than the sum of its parts. While the physical world will not be using the browser, it is being dominated by web practitioners who are building the tools of the physical world, porting the tools that have been so successful in the digital one. We're already starting to use web approaches using things like HTTP, JSON and Web Sockets in the physical world – tools we work with every day and you can all be part of this as well. http://kevinrohling.wordpress.com/2011/09/14/world-domination-using-arduinos-and-websockets/
- So hopefully some of the things you've seen this morning will inspire you to have a go but to make it even easier for you here's the only things you need to write down:
- For the two top shakers in the tug of war I have a couple of prizes.