Psychic Fortune Teller - en automat som läser hos Twitter (22 / 32 steg)
Steg 10: Techy - bygga visuella gränssnittet
Stirra djupt i kollektiva hjärnan...
En av de viktigaste funktionerna som jag ville ha för psykiska Fortune läsaren var att det vara möjligt att se in i dess sinne i realtid som det är scanning de kollektiva tankarna av Twitter samtalet. Skärmen på huvudet är ett fönster in i sin hjärna.
Det krävs också att ha en enkel form rutan område att tillåta användare att interagera genom att ange deras Twitter användarnamn.
Visualisera diskussionen
Jag ville ha visualisering är att vara en randomiserad animerade något, men jag inte var säker på vad som skulle fungera. Samtidigt vandrade på webben försöker få idéer, kom jag över en bra visualisering exempel av Jer Thorp. Respekt till honom för att sätta ut ett tydligt exempel. Hans visualisering är i huvudsak använder Twitter för att få en ordlista, och sedan presentera detta genom att visa dessa ord på måfå positioner på skärmen. Här är hans mycket beundransvärd och praktiska exempel.
http: // >>>>>>>>>>>>>>>>>>>>>>>> SEND THAT TWEET >>>>>>>>>>>>>>> blog.blprnt.com/blog/blprnt/updated-quick-tutorial-processing-twitter
Jers exempel har en enkel vit text på svart och fungerar genom beräkning av skärmens storlek och sedan slumpmässigt att placera texten inom dessa gränser. Jag spelade med denna kod. Jag hade inte en, utan fyra undergrupper av datatyper: ord, hashtags, användarnamn och webbadresser.
Jag gav dessa en utmärkande färg och storlek utbud. För varje typ av data visas orden med en distinkt färg och storlek varierar mellan min och max värde. Detta fungerade ganska fint.
Här är en visualisering av en diskussion på MuseumNext i Amsterdam maj 2013
Interaktion element i gränssnittet
Behovet av andra var för en användare inleveransområde. Detta sköttes av ett praktiskt bearbetning bibliotek som kallas ControlP5, skriven av Andreas Schlegel, en annan person förtjänar respekt för deras fria delar för detta mycket behändigt bibliotek.
www.sojamo.de/libraries/controlP5/
Form är mycket enkel och är en banner kompband, en textinmatning och en textetikett...