Hardware steuern mit Javascript

Slides der Session auf der WDC 2014 Kompakt in Köln.

Transcript

1. Hardware  steuern  mit  JavaScript     Marcus  Ross  /  @zahlenhelfer  
2. <<<  „Hi,  I´m  Marcus!“   h3p://about.me/marcus.ross   Historie:   •  Developer   •  Weltenwandler   •  Trainer  /   DevCoach   •  Unbequem-­‐Frager  
3. Agenda   •  Das  Problem   •  Antworten   – HTML5   – Arduino   – Pebble   – Sphero   – AR.Drone   •  Die  Vision   hFps://c1.staIcflickr.com/9/8392/8470558224_091d7ddc73_z.jpg  
4. Jungs  und  ihr  Spielzeug   •  Als  ich  ein  kleiner  Junge  war  wollte  ich   immer...   hFp://www.flickr.com/photos/raijsi/4442087532/  
5. Aber  ich  bin  kein  Dipl.  Ing.  L   •  Keine  Ahnung  von:   – Elektronik   – Mikrocontrollern   – Protokollen   – EchtzeitkommunikaIon   hFp://knowyourmeme.com/photos/550800-­‐my-­‐liFle-­‐pony-­‐friendship-­‐is-­‐magic  
6. hFp://parterre.com/tag/dark-­‐hope/  
7. JavaScript  ist  überall   •  JS  ist  leicht  zu  lernen   •  High-­‐Level  Sprache   •  JS  ist  asynchron   •      •  HTML5   •  Bluetooth  &  TCP  Module   •  aber  auch  1st  CiIzen  SDKs   hFp://babysiFersclub.livejournal.com/1078745.html  
8.  &  Hardware   •  Hardwarezugriff  ist  in  HTML5  eingebaut   •  Ein  Beispiel:   <input  type="file"     accept="image/*;capture=camera“>     <input  type="file“     accept="video/*;capture=camcorder“>     <input  type="file“     accept="audio/*;capture=microphone">  
9. HTML   •  Take  a  picture  with  the  naIve  camera  via  HTML  Media   Capture   •  The  camera  returns  the  pictures  as  a  File  object  from   FileReader()   •  drawImage()  to  draw  the  image  object  in  canvas   •  getImageData()  to  obtain  an  ImageData  object   containing  a  copy  of  the  pixel  data  for  a  context,  then   tweak  the  pixels  (filter  effect)   •  canvas.toBlob()  to  store  the  blob  locally  with   IndexedDB*   •  Upload  the  final  photo  with  XHR2/CORS  
10. Arduino  &  JS  
11. Firmata  -­‐  C  like   #include  <Firmata.h>   byte  analogPin;   void  analogWriteCallback(byte  pin,  int  value)   {          pinMode(pin,OUTPUT);          analogWrite(pin,  value);   }     void  setup()   {          Firmata.setFirmwareVersion(0,  1);          Firmata.attach(ANALOG_MESSAGE,  analogWriteCallback);          Firmata.begin();   }     void  loop()   {          while(Firmata.available())  {                  Firmata.processInput();          }          for(analogPin  =  0;  analogPin  <  TOTAL_ANALOG_PINS;  analogPin++)  {                  Firmata.sendAnalog(analogPin,  analogRead(analogPin));            }   }  
12. JOHNNY-­‐FIVE   •  Node  Module   •  Wrapper   •  spricht  Firmata   •  miFlerweile  mehr  als   nur  für  den  Arduino   hFp://www.fantasIc-­‐plasIc.com/JohnnyFivephoto.jpg  
13. Prepare  to  rule  the  world   •  npm  install  johnny-­‐five   •  Download  der  arduino  IDE   •  „Standard  Firmata“   upload   •  blinky.js  bauen   •  node  blinky.js  
14. blinky.js   var  j5  =  require("johnny-­‐five");   var  board  =  new  j5.Board();       var  LEDPIN  =  13;   var  OUTPUT  =  1;       board.on("ready",  function(){      var  val  =  0;          //  Set  pin  13  to  OUTPUT  mode      this.pinMode(LEDPIN,  OUTPUT);          //  Create  a  loop  to  "flash/blink/strobe"  an  led      this.loop(  1000,  function()  {          this.digitalWrite(LEDPIN,  (val  =  val  ?  0  :  1));      });   });  
15. ...oder  noch  kürzer!   var  j5  =  require("johnny-­‐five");   var  board  =  new  j5.Board();   var  LEDPIN  =  13;     board.on("ready",  function(){      var  led  =  new  j5.Led(LEDPIN);      led.strobe();   });  
16. Smarte  Uhren  und  JS?  
17. Im  Überblick   •  ARM  Cortex-­‐M3  mit  80MHz   •  Display  aus  e-­‐paper   •  144x168  Pixel  auf  1.26  inch   •  LED  Backlight   •  GUI  in  C  /  Business-­‐Logik  in  JS   •  Full  JS-­‐Stack  mit  pebble.js  
18. Pebble  Dev  Setup   •  curl  -­‐sSL  https://developer.getpebble.com/ install.sh  |  sh  &&  source  ~/.bash_profile   •  pebble  new-­‐project  -­‐-­‐javascript  test_projekt  
19. pebble.js  (beta)   var  ajax  =  require('ajax');   ajax(      {          url:  URL,          type:  'json'      },      function(data)  {          console.log("Daten  erfolgreich  geladen");            var  location  =  data.name;          var  temperature  =  Math.round(data.main.temp  -­‐  273.15)  +  "C";          var  description  =  data.weather[0].description;          description  =  description.charAt(0).toUpperCase()  +  description.substring(1);            card.subtitle(location  +  ",  "  +  temperature);          card.body(description);      },      function(error)  {          console.log('Fehler  beim  Daten  laden:  '  +  error);      }   );  
20. pebble.js  (beta)   var  UI  =  require('ui');     var  cityName  =  'Hamburg';   var  URL  =  'http://api.openweathermap.org/data/2.5/weather?lang=de&q='  +  cityName;     var  card  =  new  UI.Card({      title:'Wetter',      subtitle:'Daten  holen...'   });     card.show();  
21. Der  Ball  ist  los...   •  72MHz  32  Bit  ARM  Cortex  M4  processor   •  Bluetooth  2.0   •  3-­‐Achsen  Gyroskop   •  iOS  /  Android  Apps   •  developer.gosphero.com  
22. Paket  Struktur  
23. node-­‐sphero   var  roundRobot  =  require('node-­‐sphero');   var  sphero  =  new  roundRobot.Sphero();     sphero.on('connected',  function(ball)  {      ball.setRGBLED(0,  255,  0,  false);   });     sphero.connect();  
24. AR.Drone  und  Nodecopter  
25. Technik  der  Drone   •  Parrot  AR.Drone  2.0     •  4  x  35,000  rpm  Motoren   •  ARM  Cortex  A8  1Ghz   •  1  GB  RAM   •  Wifi  b/g/n   •  BusyBox  Linux  2.6.32   •  Magnometer  /  Gyro   •  2x  Kameras  (720p  HD  &  QVGA)   hFp://www.flickr.com/photos/creaIve_stock/  
26. Hallo  Drone  –  Teil  1   •  nutze  AT  Kommandos  (ach  damals...)   •  konv.  Bit-­‐Arrays  zu  Integer  (arrrghhh!)   •  Benutze  einen  Zähler  (und  wiederhole  Dich)   Beispiel:   AT*REF=<seq>,<command><CR>
27. Hallo  Drone  -­‐  Teil  2  
28. Basiskommandos   •  Starten  der  Drone   AT*REF=1,290718208<CR> •  Landen  der  Drone   AT*REF=2,290717696<CR>
29. Wie  berechne  ich  Kommandos?   •  Ein    String     (AT*CONFIG  oder  AT*REF)   •  ein  signed  integer  –  als  Sequenznummer   •  ein  single-­‐precision  IEEE-­‐754  floaIng-­‐point  value   (auch  float).  AnstaF  dem  32-­‐bit  word  das  den   float  enthält  soll  es  ein  32-­‐bit  signed  integer   werden.   •  AT  Kommando:   AT*REF=1,290718208<CR>  
30. Alles  klar,  oder?  
31. Kontrolliert  Fliegen   •  Nutze  AT  Kommandos   •  float  in  32Bit  WORD  in  integers   •  Bsp.:  -­‐0.8  Grad  pitch   -­‐0.8f  =  BF4CCCCD  =  −1085485875   •  Ergebnis:   AT*PCMD=2,0,−1085485875,0,0,0,0    
32. Basis  Kommands   •  Bewegung  Links   AT*PCMD=3,1,-1090519040,0,0,0<CR>   •  Bewegung  Rechts   AT*PCMD=4,1,1056964608,0,0,0<CR>
33. bytebuffer.js   •  hFps://github.com/Imkurvers/byte-­‐buffer     Example: <script src="bytebuffer.js"></script> <script> b = new ByteBuffer(2, ByteBuffer.BIG_ENDIAN, true) alert(b.length); var floatValue = -0.8; b.writeFloat(floatValue); b.seek(-4); alert('int:'+b.readInt()); </script>
34. UDP  &  AR.Drone   1)  est.  wifi  with  the  drone   (192.168.1.1)   2)  send  CMD  through  UDP          (Port  5556)   AR.Drone   ⌘  
35. UDP  in  a  nutshell   •  UDP  =  User  Datagram  Protocol   •  RFC  768   •  Basiert  auf  dem  ISO/OSI-­‐Modell  (Transport-­‐L.)   •  unheimlich  schnell   •  sehr  unzuverlässig   •  eine  Arte  von  Schwester  des  TCP   Mehr  Info:   hFp://en.wikipedia.org/wiki/User_Datagram_Protocol  
36. UDP  Client  in  node   var  PORT  =  5556;   var  HOST  =  '192.168.1.1';     var  dgram  =  require('dgram');   var  message  =  new  Buffer('ein  AT-­‐Kommando');     var  client  =  dgram.createSocket('udp4');   client.send(message,  0,  message.length,  PORT,  HOST,   function(err,  bytes)  {          if  (err)  throw  err;          console.log('UDP  message  sent  to  '  +  HOST  +                                  ':'+  PORT);          client.close();   });  
37. Kleiner  Test   var  arDrone  =  require('ar-­‐drone');   var  client  =  arDrone.createClient();     client.takeoff();     client      .after(5000,  function()  {          this.clockwise(0.5);      })      .after(3000,  function()  {          this.animate('flipLeft',  15);      })      .after(1000,  function()  {          this.stop();          this.land();      });  
38. demo time 38 Welcome  Captain…   the  drone  is  ready  to  start   fasten  your  seatbelts   take  off!  
39. hFp://www.friedenskirche-­‐lueneburg.de/dymmedia/49/O/0/vision.jpg  
40. Was  könnte  das  ergeben?  
41. Kennst  Du  Ruzzle?  
42. Das  kann  passieren   •  hFp://www.albertosarullo.com/blog/lego-­‐plays-­‐ruzzle  
43. Espurino   •  54mm  x  41mm   •  STM32F103RCT6  32-­‐bit  72MHz  ARM  Cortex   M3  CPU   •  256KB  of  Flash  memory,  48KB  of  RAM   •  Vorbereitet  auf  Bluetooth   •  44  GPIO  Pins   •  100  %  JS!  
44. Coding  
45. Marcus Ross @zahlenhelfer