Archive

Set Brief 1 – Systems

Ardunio;

/*************************************************************************
This is an Arduino library for the Adafruit Thermal Printer.
Pick one up at –> http://www.adafruit.com/products/597
These printers use TTL serial to communicate, 2 pins are required.

Adafruit invests time and resources providing this open source code.
Please support Adafruit and open-source hardware by purchasing products
from Adafruit!

Written by Limor Fried/Ladyada for Adafruit Industries.
MIT license, all text above must be included in any redistribution.
*************************************************************************/

// If you’re using Arduino 1.0 uncomment the next line:
#include “SoftwareSerial.h”
// If you’re using Arduino 23 or earlier, uncomment the next line:
//#include “NewSoftSerial.h”

#include “Adafruit_Thermal.h”
#include “adalogo.h”
#include “adaqrcode.h”
#include <avr/pgmspace.h>

int printer_RX_Pin = 5; // This is the green wire
int printer_TX_Pin = 6; // This is the yellow wire

Adafruit_Thermal printer(printer_RX_Pin, printer_TX_Pin);

String inputString = “”; // a string to hold incoming data
boolean stringComplete = false; // whether the string is complete

void setup(){
Serial.begin(9600);
pinMode(7, OUTPUT); digitalWrite(7, LOW); // To also work w/IoTP printer
printer.begin();
// reserve 200 bytes for the inputString:
inputString.reserve(200);

/*
// Test inverse on & off
printer.inverseOn();
printer.println(“Inverse ON”);
printer.inverseOff();

// Test character double-height on & off
printer.doubleHeightOn();
printer.println(“Double Height ON”);
printer.doubleHeightOff();

// Set text justification (right, center, left) — accepts ‘L’, ‘C’, ‘R’
printer.justify(‘R’);
printer.println(“Right justified”);
printer.justify(‘C’);
printer.println(“Center justified”);
printer.justify(‘L’);
printer.println(“Left justified”);

// Test more styles
printer.boldOn();
printer.println(“Bold text”);
printer.boldOff();

printer.underlineOn();
printer.println(“Underlined text “);
printer.underlineOff();

printer.setSize(‘L’); // Set type size, accepts ‘S’, ‘M’, ‘L’
printer.println(“Large”); // Print line
printer.setSize(‘M’);
printer.println(“Medium”);
printer.setSize(‘S’);
printer.println(“Small”);

printer.justify(‘C’);
printer.println(“normal\nline\nspacing”);
printer.setLineHeight(50);
printer.println(“Taller\nline\nspacing”);
printer.setLineHeight(); // Reset to default
printer.justify(‘L’);

// Barcode examples
printer.feed(1);
// CODE39 is the most common alphanumeric barcode
printer.printBarcode(“ADAFRUT”, CODE39);
printer.setBarcodeHeight(100);
// Print UPC line on product barcodes
printer.printBarcode(“123456789123”, UPC_A);

// Print the 75×75 pixel logo in adalogo.h
printer.printBitmap(adalogo_width, adalogo_height, adalogo_data);

// Print the 135×135 pixel QR code in adaqrcode.h
printer.printBitmap(adaqrcode_width, adaqrcode_height, adaqrcode_data);
printer.println(“Adafruit!”);
printer.feed(1);

printer.sleep(); // Tell printer to sleep
printer.wake(); // MUST call wake() before printing again, even if reset
printer.setDefault(); // Restore printer to defaults
*/
}

// The following function calls are in setup(), but do not need to be.
// Use them anywhere! They’re just here so they’re run only one time
// and not printed over and over.
// Some functions will feed a line when called to ‘solidify’ setting.
// This is normal.

void loop() {
// print the string when a newline arrives:
if (stringComplete) {
Serial.println(inputString);
printer.println(inputString);
printer.println(“\n——————————–“);
printer.println(“”);
// clear the string:
inputString = “”;
stringComplete = false;
}
}
void serialEvent() {
while (Serial.available()) {
// get the new byte:
char inChar = (char)Serial.read();
// add it to the inputString:
inputString += inChar;
// if the incoming character is a newline, set a flag
// so the main loop can do something about it:
if (inChar == ‘\t’) {
stringComplete = true;
}
}
}

Processing;

//Build an ArrayList to hold all of the words that we get from the imported tweets
ArrayList<String> words = new ArrayList();
Twitter twitter;
import processing.serial.*;

Serial myPort; // Create object from Serial class
int val; // Data received from the serial port

int lineWidth = 32;

void setup() {
String portName = Serial.list()[0];
myPort = new Serial(this, portName, 9600);

//Credentials
ConfigurationBuilder cb = new ConfigurationBuilder();
cb.setOAuthConsumerKey(“dn4t7UY1vX3KZNTNOyjIw”);
cb.setOAuthConsumerSecret(“tWVT9FeRAbj4Bas5Vx2wxp01yGkfQabPej8Rv3MNyRo”);
cb.setOAuthAccessToken(“63141740-EM1IOlusFq2b6zNKexbEaQDQJ4dYwDex7Mod38”);
cb.setOAuthAccessTokenSecret(“08KgJInek97tzoslwKmYGvVJCjZfnORm7Ytxam6HKA”);

//Make the twitter object and prepare the query
twitter = new TwitterFactory(cb.build()).getInstance();

}

void draw() {

Query query = new Query(“#R.I.P”);
query.setRpp(1);

//Try making the query request.
try {
QueryResult result = twitter.search(query);
ArrayList tweets = (ArrayList) result.getTweets();

for (int i = 0; i < tweets.size(); i++) {
Tweet t = (Tweet) tweets.get(i);
String user = t.getFromUser();
String msg = t.getText();
Date d = t.getCreatedAt();
println(“Tweet by ” + user + ” at ” + d + “: ” + msg);
msg = msg.replace(“\n”,” “);
msg = msg.replace(“\t”,” “);
String msgToSend = “”;
String curLine = “”;
// Split lines
String[] wordList = msg.split(” “);
for (int j = 0; j < wordList.length; j++) {

if(curLine.length() + wordList[j].length() < lineWidth )
{
curLine += (wordList[j] + ” “);
} else
{
curLine += “\n”;
msgToSend += curLine;
curLine = wordList[j]+” “;
}
}

msgToSend += curLine;
myPort.write(msgToSend+”\t”);

/*
//Break the tweet into words
String[] input = msg.split(” “);
for (int j = 0; j < input.length; j++) {
//Put each word into the words ArrayList
words.add(input[j]);
}
*/
};
}
catch (TwitterException te) {
println(“Couldn’t connect: ” + te);
};
println(“——————————————————“);
delay(10000);
}

Advertisements

Video of my Thermo Printer printing out tweets from the hashtag R.I.P.
I am still struggling with getting the code right so that the text does not break half way through a word if it goes over 32 characters, but all I get is error messages or the code just not working. I think text wrapping is what will fix it, there has to be an easier way to set the maximum character length… either way its still a work in progress!

I don’t remember what I last posted about this project, it was probably suggesting that I was going to make a website. However I am not doing so anymore. Instead I am making an installation for two reasons. 1. I think that the screen is too restrictive and cannot fully show the scale and mass of tweets I want. 2. I just want to make something!

So I looked at the berg little printer but this was super complicated as you would need to make an app and so that you could then print, but one of my tutors explained to me how this could be done easily and she also had a project that involved this printer set up so we both worked on it today.

We initially started to see if we could connect the Arduino to the internet as this is important to be able to get live tweets. However uni’s ethernet connection is a bit off so it didn’t work. We then began to work on testing the printer and the set up to see if the thermo printer could receive the messages we were sending it.

There were some more issues, due to it being a thermo printer it needed a high amp so that there was enough power to keep the text consistently black as when there are more characters to print the marks made lose their intensity.

Eventually we managed to solve most of the issues and I have now purchased all of my own hardware ready to experiment further with typography and the general design of the tweets. It was a really interesting process and less scary than I imagined. I thought that programming you usually wrote it all from nothing, but there are a lot of great tutorials online where you can cut and paste bits from.

Websites I used:

GrepCode: twitter4j-core-2.2.5.jar – Java Project – Source Code
Twitter4J – A Java library for the Twitter API
UPDATED: Quick Tutorial – Processing & Twitter | blprnt.blg

photo-5
photo2
photo1

 

Code & Experiments

Screen Shot 2013-03-26 at 09.17.21 Screen Shot 2013-03-26 at 09.19.46

This slideshow requires JavaScript.

Below are screen shots of my creation of the Rest In Pixels webpage.

Screen Shot 2013-01-05 at 12.04.41

I tried my initial idea of using just squares to represent tweets, but to be honest it looks disgusting. So I decided to play around with some other ideas that I sketched out before.

Screen Shot 2013-01-05 at 13.43.26I included a strip across the top that allows the user to see each tweet once they click on it, they then can scroll across to the right to see older tweets or to the left to see newer tweets.

Screen Shot 2013-01-05 at 13.58.48I also looked at different ways to indicate the left and right scroll through. As well as this I added in a faint indicator to show the number of tweets to a specific point. I used a dashed line and kept the text to a small size as I did not want to interrupt the scrolling process. By using numbers the user can scroll down the page to find various totals and look through what was being said at a specific time.

Screen Shot 2013-01-05 at 14.04.51

Screen Shot 2013-01-05 at 14.09.05

Screen Shot 2013-01-05 at 14.15.32

Screen Shot 2013-01-05 at 14.15.10

I included an about section and contact area as I feel that when some people see this site they may have questions about the site, as well as the project. Therefor the about section is a quick explanation of my project or my feelings towards it and the contact area they can send me emails if there are any other questions. Perhaps I may add a question form on their or even create a FAQ tab if I get the same questions from people via email or face to face.

I’m relatively happy with it so far, I think I need some feedback from other and then I can work on the layout some more, but really I need to start coding it. This will probably start this term coming. Then over the holidays I hope to create an installation backed off this website.

Surprise, surprise i’ve been drawing again. I think with this project I need to set myself a definite deadline for example by the end of today I need a digital mock up and tomorrow will be the day I may edits and that will be it as I am dragging this out.

The drawing I have done has been productive, I have been looking at how I show that each “pixel” is a tweet and what number they are, as the amount of tweets is the most important part. I thought about literally numbering them but then I run into a problem as the square is going to bet a set size, so when the number reaches 1000,000,00000,00000000000000 (for example) It wont fit. Also the issue of each time the tweets update, how will they move across? Below I went for the straight forward approach of the numbers literally moving across one each time a new tweet shows up. However this is going to happen so quick as there are hundreds of tweets hash tagged and posted in a short space of time.

20130105-111947.jpgI thought about then updating the tweets in a set. For example if the row has ten squares, until there are ten new tweets, a new row will drop down. Sort of like Tetris.

20130105-111952.jpg

I then had a think about what this site actually needs in terms of visuals as well as what it needs to do – actions. This way it was much easier to draw up some ideas as I knew exactly what I needed to include.

20130105-112000.jpgContinuing the numbering theme, I also thought about ignoring the automatic update, so the user could look at tweets displayed as soon as they entered the site, but there would be an refresh button as well as notification so that the user new that there was 1000 new tweets to be added to the site. However I do sort of run into the issue of what if I run of of space? I think I need to work out some alternative for numbering unless I write 10K+ rather than the exact number…

20130105-111956.jpgI also thought it was important for the user to be able to click on each tweet and have a look at what they say, and from this they can scroll across to neighbouring tweets. I also thought about numbering the tweets, but these once again would have a problem in fitting into the box.

20130105-112011.jpgAs the tweets will be hidden I need to create a visual that will show what the box contains. I think simply the box just displaying #R.I.P will be the most effective, as this shows what the content is as well as when all the squares are viewed in a how section, it will slightly represent a memorial wall, with endless amounts of tributes.

20130105-112016.jpgTo concur the numbering issue I think that I will include breaks within the text that show 100k etc to give a rough idea to the user of how many tweets there actually is. However I may also move the sign posts to the side, as I don’t want to interrupt the scrolling process, so having the posts at the side will allow the marks to be a bit more subtle.

20130105-112021.jpgEnough drawing, time to make a mock up!

Still on the same point of this project, so it’s starting to get quite tedious. Perhaps its because I haven’t had anyone to talk to about the work I have done, therefore I’m only going by my own feedback. However I do feel like i’ve got a little further.

The main point I have been looking at today is what is more important – The actual individual tweets OR the shear amount of them. When thinking back to the beginning of this project I wanted to look at the way tradition was changing and that people were self publishing their feelings rather than going to a local paper and writing a piece for the obituary. Therefore it is more about the shear amount of tweets. However I do feel that it is important for people to be able to see the tweets.

20130103-170700.jpg
20130103-170713.jpg20130103-170719.jpg20130103-170731.jpgSo I have now decided to focus on the shear amount of tweets first and then allow the user to find out what each tweet says as a secondary part to the website. Initially I am thinking of creating a grid system that updates each time a new tweet is posted. Each box contains a tweet and has a number on the front which indicates what number tweet it is. Once clicking on a single box a pop up with show up with what the tweet actually says. I think in this pop up it should have arrows – < / > therefore you can skip between boxes without having to go back to the main page. I think it would also be key to add a search bar so that users could pick a number as well as a random tweet function.

I’m not sure how I will do this yet, or how it will look when each time there is a new tweet. Perhaps a full row has to be ready to update before it does? or maybe each number shifts along to the right. I will think about this small details some more before mocking up a full version.

20130103-170738.jpg

After making quick mock ups of the full-page-text-layout I have decided to go back a bit a make something more structured which shows clear navigation but still trying out different approaches to representing the tweets.
When researching into web design, one of my friends suggested this website called lessframework.com It contains a grid system that is flexible, and due to this flexibility it means that a web design can be consistent across all displays. At this moment in time I’m not so concerned with lots of devices, but perhaps keeping this in mind will help when trying to represent my vast amount of data and also save design issues later on.

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

lessframework_comWhile having a think about the design of this site, I also want to keep in mind “what is the point” of this site, what is its use? who will visit it? why will they?
Firstly I don’t think this is a site that people go for leisure or to be informed (in a traditional sense) but a site that brings awareness of a point, I have to remember that I am using a website as a digital platform to create a space to collect other people twitter data. So perhaps I am better off looking at non-tradtional websites.

I’ve done some quick sketches to try and think of visual ways to represent the data. Which I’m still struggling with. I think what my next plan should be to pick one sketch/ idea and then create it as a proper layout/ mock up. This way I can really see what works and what doesn’t.
20130102-204540.jpg20130102-204545.jpg20130102-204556.jpg20130102-204550.jpg
I have made progress though, typography! Using hierarchy to represent the date in which the tweet was posted.