r0ket tr4cking

xAndy, schinken
March 24, 2012

What did we want to create?

• View r0kets at the event
• Find people
• Do some awesome HTML5 stuff

Why?

• Because the needed hardware was already setup.
• No one did this like we intent todo before
• Nearly every CCCamp'11 visitor owns a r0ket
• team r0ket selling them 28c3 (~700 pcs)

Hardware

• USB-Port (Mass-Storage, ...)
• m0dulbus with SPI, I²C, 3.3V, etc..
• LC-Display Nokia 1200 (96x68)
• 32-bit ARM Cortex-M3 with 32KB flash, 8KB SRAM
• 2.4 GHz Transceiver (OpenBeacon)
• ~4 MiB Dataflash

OpenBeacon

OpenBeacon is based on Open Source software and a very flexible and reprogrammable lowcost Open Source RFmodule.

http://www.openbeacon.org/

Decisions to make

• Which Platform? Browser
• Which Programming languages? Javascript
• Use and find some Demo-Data (BruCon, ...)
• Don't overthink everything -> start to code

First Version

• Data as DOM-Objects
• Animation with CSS3 and jQuery
• Fast to build (3-4 hours)
• No own code for animation needed (provided by jQuery)

Problems

• No livedata
• Connection problems
• Only one floor in the demo dataset
• Invalid data
• Wrong data (wrong floor numbers)

Demo Dataset

  "id":24732,
  "api":{"name":"openbeacon-tracker","ver":"0.5.9-dirty"},
  "time":1325193702,
  "packets":{
    "per_key":[5129439,1,6820,4102,6,0,0,0,0,129179], "rate":806,
    "invalid_protocol":651, "crc_error":56991, "crc_ok":5359854
    },
  "tag":[
    {"id":1726279719,"px":695,"py":734,"nick":"LongNose","reader":1118},
    {"id":1555753420,"px":563,"py":831,"nick":"devdsp","reader":1031,"button":true},
    {"id":3743092209,"px":768,"py":91,"nick":"MiDas","reader":1011,"button":true},
    ...
    {"id":530924798,"px":517,"py":831,"nick":"TurboJ","reader":1007,"button":true},
    {"id":2468362766,"px":542,"py":627,"nick":"klonfish","reader":1126,"button":true},
    {"id":54603,"px":528,"py":520,"key":2}
    ],
  "reader":[
    {"id":1007,"px":497,"py":832,"room":102,"floor":1,"group":2},
    {"id":1031,"px":633,"py":832,"room":102,"floor":1,"group":2},
    ...
    {"id":1686,"px":286,"py":492,"room":307,"floor":3,"group":2},
    {"id":1118,"px":676,"py":858,"room":308,"floor":3,"group":2}
    ],
  "edge":[

    ]

Lessons learned from v1.0

• Data consistency is crucial!
• Extremly slow when using CSS animations
• New features hard to implement

New approach

• Keep data consistent
  • Track floorchanges
  • r0kets appear/disappear
  • Reader disconnect
  • Remove unused data
• Use canvas instead of DOM
• Draw a floormap

Result

• CPU usage has gone down a lot
• You have to render everything each frame
• Aligning floors isn't easy
• OOP helps (even in JS)
• Javascript with canvas outperforms HTML + CSS animations
• Javascript performance tweaks (prototypes instead of lambdas)

Ideas

• Stalk a nickname
• Tracing pathes
• Highscore of walked distance
• Social graphs
• Epidemic simulations
  • e.g. Zombie apocalypse

About

• GitHub Project: http://bckspc.de/RTgit
• Project Wiki: http://bckspc.de/RTwiki
• Thx to the r0ket-Team for the amazing work
• Authors of tr4cking:
  • xAndy
  • schinken