Bevingstweets

Samenvatting

BevingsTweets is een web app die live tweets over gaswinning en bevingen in Groningen op een kaart weergeeft en geluid laat maken.

Inleiding

Deze blogpost hoort bij de online web app BevingsTweets. [bestaat niet meer]

De web-app  geeft real time (max ongeveer 30 seconden vertraging) de tweets met betrekking tot de gaswinning en aardbevingen in Groningen weer. Dit gebeurt in de vorm van tekstboxjes op het scherm en door het afspelen van een windorgel-geluid.

Meestal zal er niet veel te beleven zijn,  maar er zullen pieken zijn als er bijvoorbeeld een beving is, of als er een debat in de Tweede Kamer is over dit onderwerp.

Als je het scherm permanent open laat staan, zou je aan het geluid moeten kunnen horen of er een beving is. Dat dit zich moeilijk laat testen, spreekt hopelijk voor zichzelf.

De tweets worden op de kaart getoond op basis van de lokatie-info die in de tweets staat. Als er geen info is, worden ze rechtsonder geplaatst.

De tweets blijven enige tijd in beeld en vormen dan een cirkel op de kaart die blijft staan.

Bij elke tweet wordt een geluidje afgespeeld: het geluid van een windorgel. Hoe meer tweets, hoe drukker het windorgel zal klinken.

Als er bepaalde trefwoorden worden aangetroffen, zullen deze uitgesproken worden. Denk aan woorden als Groninger Bodembeweging, Schokkend Groningen,  dialoogtafel, RTV Noord etc. Zo word je op een nieuwe tweet gewezen zonder te hoeven kijken. Het is een robotstem die niet erg plezierig klinkt helaas.

Beperkingen:

  • Soms hoor je wel iets maar zie je niks. Dan wordt er ergens ter wereld iets getweet dat wel opgepikt wordt maar uiteraard niet op het scherm verschijnt;
  • Er draaien twee scripts op een server waarvan ik de continuiteit niet kan garanderen. Er is niets geregeld voor als de server onverhoopt gereboot wordt;
  • De zoekopdracht is niet perfect, dus er zullen “false positives” zijn: tweets die wel getoond worden maar niets met het onderwerp (gaswinning en bevingen in Groningen);
  • De plaatsnaamtoewijziging gaat nog wel eens mis, en is een beetje klungelig;
  • De app heeft (nog?) geen geheugen, dus als je herlaadt, zijn alle cirkels verdwenen;
  • Er kan niet ingezoomd worden;
  • De app werkt het beste als het scherm actief is. Als het scherm niet actief is werkt het nog wel op desktops en laptops, maar op tablets  (voor zover ik weet) niet meer;
  • Het matchen op plaatsnamen is nog niet perfect. Er gebeuren af en toe gekke dingen;

Er is dus veel “ruimte voor verbetering”.

De app verbruikt niet al te veel data, maar als er veel tweets zijn, zal het gebruik oplopen.

Het installeren van updates

Updates worden automatisch geïnstalleerd. Het scherm zal zichzelf opnieuw laden als er een update is, en voila, de update is gerealiseerd. Op een tablet moet je even opnieuw op start drukken.

Tot zover de theorie. In de praktijk zal een en ander wel eens vastlopen en zal je zelf even opnieuw op refresh moeten klikken.

Technisch / Hoe werkt het?

  1. Er draaien twee scripts continu op de server. Deze halen via een http-verbinding die continu open blijft staan, de tweets binnen. Dit is dus geen polling waarbij er elke zoveel seconden een http-verbinding wordt opgezet, maar een nieuwere manier, waarbij de http-verbinding niet verbroken wordt. Er wordt gebruik gemaakt van de Twitter Streaming API;
  2. De tweets worden op de server opgeslagen;
  3. De tweets worden door de browser via een XMLHttpRequest elke paar seconden van de server gelezen en binnengehaald;
  4. De tweets worden via JavaScript bewerkt, in queues (JS objecten of arrays) geplaatst, uit queues gehaald, en op het scherm geplaatst en aan geluiden gekoppeld:
    • zijn er coordinaten meegestuurd, zo ja, sla deze in het object op;
    • is er een plaatsnaam in het profiel ingevuld, zo ja, sla deze naam in het object op;
    • zitten er speciale woorden (die ik in de configuratie aan kan geven) in, zo ja sla deze in een array in dit object op;
  5. De tweets worden ten eerste in de DOM geplaatst (tekstballonnetje) en ten tweede via canvas op het scherm getoond op dezelfde plek (via een cirkeltje). De DOM elementen worden op een gegeven moment na een bepaalde tijd uit de DOM verwijderd (via een boekhouding die gedaan wordt via het eerder genoemde JS-object). Als dit niet zou gebeuren zou de browser uiteindelijk vastlopen bij te veel tweets. Een canvas-element is beter geschikt;
  6. Aan elke tweet wordt een geluid gekoppeld en afgespeeld. Geluiden in de browser afspelen is een heel apart hoofdstuk waar ik veel tijd aan gespendeerd heb de afgelopen jaren. Lastig onderwerp.

De locatiegegevens worden als volgt gebruikt:

  1. Als er coordinaten aanwezig zijn, worden deze gebruikt;
  2. Zo niet dan wordt er een eventueel uit het profiel gehaalde plaatsnaam gebruikt;
  3. Zo niet dan wordt de tweet rechtsonder in beeld geplaatst.

To Do

Als ik de motivatie kan vinden, dan zou ik nog het volgende willen doen:

  • Betere User Interface bouwen:
    • zooming implementeren;
    • betere responsive design maken;
    • openen van links (vooral op tablets) verbeteren;
  • Design verbeteren;
  • Meer testen;
  • Betere queries maken;
  • Geofencing implementeren;
  • Betere forward geocoding implementeren, dat is nu echt niet best;
  • De tweets server-side strippen zodat alleen de relevante object keys naar de client gestuurd worden, waarmee bespaard wordt op data verkeer;
  • Betere hosting vinden;

Libraries

Er wordt gebruik gemaakt van de volgende libraries:

PHP

  • Phirehose

JavaScript

  • prefixfree
  • jQuery (allen voor DOMme dingen);
  • moment.js (voor het dealen met het JS Date object);
  • Google Maps API (om de kaart te creëeren en te gebruiken);
  • AlertifyJS (voor pop-ups);
  • createJS voor het preloaden en afspelen van geluid (alle windorgel-tonen en andere geluiden)