How would you go to handle displaying tweets with working entities?

v.k.

How would you go to handle displaying tweets with working entities?

in Contributed Library Questions • 1 year ago

EDIT: code added as a reply in this thread.

Entities are the way Twitter calls links, medias embedded, users screen names and hashtags. Those should be displayed in a different color and be clickable linking to proper pages.

When you got a tweet (aka status) you get those like this:

Text: a string containing all the tweet text, including entities text.

Hashtag entities: an array containing the first and one after last indexes of the hashtag in the above string.

also, you have the text (only hash text) accessible by hashtag object.

this is the JSON:

"hashtags":[{"indices":[32,36],"text":"lol"}] //

URL entities: Similar to hashtags, but also containing both, expanded and shorted URL text in the object.

"urls":[{"indices":[32,52], "url":"http:\/\/t.co\/IOwBrTZR", "display_url":"youtube.com\/watch?v=oHg5SJ\u2026", "expanded_url":"http:\/\/www.youtube.com\/watch?v=oHg5SJYRHA0"}]

Mentions entities: Are the users mentioned in tweet, they must be linked to users pages. They came like this;

"user_mentions" : [ { "name" : "Twitter API" , "indices" : [ 4 , 15 ] , "screen_name" : "twitterapi" , "id" : 6253282 , "id_str" : "6253282" } ]

The media stuff is similar, but i'm not concerned with them now, I'll leave it out for now.

So I need to display this, changing colors and linking accordingly. I started by hashtags, and i managed to split the text string in the pieces that are not hashtags, like:

"this is a #test to display tweets. #hashtag. ok."

became:

piece 1: this is a

piece 2: to display tweets.

piece 3: . ok.

Remember that those can came in any order and amount in a tweet.

Than i started thinking that this may not be the best approach. If i repeat this for the other entities i'll end with a lot of pieces to assemble back together... Looks messy. And I thought to use text(x, y, width, height) but to use that I need all the text in the same string... and won't be able to change colors, right? I'll have to handle line brakes manually?

Than i thought, i may convert the text to a char array and work only with the indexes of entities. I could use textWidth(text preceding the hashtag) to create a bounding box for linking, but any way I'll have to make several calls to text() to change colors... (edit) Maybe an array of words would be best...

Is any of those the way to go?

thanks

EDIT: I'm asking about handling the string, coloring, linking and spacing it to display. I got the JSON reading stuff and bounding box linking working already. actually twitter4j has those working for me ;-)

I can provide a text file with some JSONs from twitter and the code for reading them if some one wants.

I don't have the code here, but i'll post it latter. I leave the code, but the code doesn't leaves me...

Replies(5)

PhiLho

Re: How would you go to handle displaying tweets with working entities?

1 year ago

Might I suggest that you read or re-read the forum guidelines, please?
About choosing the proper thread section...

v.k.

Re: How would you go to handle displaying tweets with working entities?

1 year ago

Well I asked my self if that would be the proper choice but, as my question isn't related to any specific library, though i'm using some, I thought that should be in programming questions. What I'm looking help for involves only text(), String manipulation and fill(). I mean any one could help me with this issues. Anyway if this is the wrong choice, please move it ;-)

I'll check the guidelines again.

And what about the question it self? No thoughts? :-)

PhiLho

Re: How would you go to handle displaying tweets with working entities?

1 year ago

OK, I have actually not moved the topic because I wasn't sure myself...

(about is that about the Twitter library or only a display problem).
Per my policy, generic questions without code to see should go to General Discussion. Programming questions is more about questions on real code, to fix or improve.
Showing a simple test sketch with some pseudo-tweet to display could help...

But, basically, if I understood the core of your problem, yes, you have to split the text and display it segment per segment, with proper fill() and such on each part. Not an easy task indeed, but Processing is a rather low-level API, where you have to do high level stuff yourself... or delegate it to some library.

v.k.

Re: How would you go to handle displaying tweets with working entities?

1 year ago

Thanks. I'll get you some code as soon as i get home. :) I might have waited, but i can't take this out of my mind... It is already started.

v.k.

Re: How would you go to handle displaying tweets with working entities?

1 year ago

This code will need the twitter4j library onky foe reading status NO KEY needed. I'm working in a version without the JSON.

This is the file with the jasons to be read:

.txt will open in a browser page to copy and paste

.txt.zip will download

file with 40 tweets in JSON

the code, the part of splitting the strings is just outputting to console so far. But there are stuff displayed in canvas already. Press n for next tweet and p for previous.

first tab:

import processing.opengl.*;
import twitter4j.Status;
import twitter4j.TwitterException;
import twitter4j.json.DataObjectFactory;
String[] rawData;
int i = 0;
int id = 0;
ArrayList <TweetDisplayer> displayer = new ArrayList<TweetDisplayer>();
void setup()
{
size (700, 500, OPENGL);
background(0);
smooth();
ConfigurationBuilder cb = new ConfigurationBuilder();
cb.setDebugEnabled(true);
cb.setJSONStoreEnabled(true);
rawData = loadStrings("saved3.txt");
try {
for (int i = 0; i < rawData.length; i++)
{
if (rawData[i].startsWith("{"))
{
Status status = DataObjectFactory.createStatus(rawData[i]);
displayer.add(new TweetDisplayer(status));
}
}
}
catch (TwitterException te) {
te.printStackTrace();
System.exit(-1);
}
}
void draw()
{
displayer.get(i).display();
}
void mousePressed()
{
//println("id = " + id + " x = " + mouseX + " y = " + mouseY);
//id++;
}
void keyPressed()
{
if (key == 'n')
{
if (i < displayer.size()-1)
{
i++;
displayer.get(i).debug();
println("\n");
}
}
if (key == 'p')
{
if (i > 0)
{
i--;
displayer.get(i).debug();
println("\n");
}
}
};

displayTweet tab :

class TweetDisplayer
{
float x = 100; // I'll remove this hard numbers later
float y = 100;
float sizeX = 200;
float sizeY = 124;
float border = 8;
PFont font = createFont("GilSans", 32);
Status status;
String profImageUrl;
PImage profImage ;
String userTwitter;
String scrName;
CompleteText name; /// completText has mouse test and linked url
CompleteText screenName;
String twText;
HashtagEntity[] htEnt;
int hashtagCount;
ArrayList<String> pieces = new ArrayList<String>();
TweetDisplayer(Status _status)
{
status = _status;
try {
User user = status.getUser(); /// several items are getted from user use object
//avatar
profImageUrl = user.getProfileImageURL().toString();
profImage = loadImage(profImageUrl, "png");
//names
scrName = user.getScreenName();
userTwitter = "https://twitter.com/" + scrName;
name = new CompleteText(user.getName(), 168, 133, font, 16, userTwitter);
screenName = new CompleteText("@"+scrName, 168, 151, font, 14, userTwitter);
//text
twText = status.getText();
// Entities
htEnt = status.getHashtagEntities();
hashtagCount = (htEnt == null)? 0:htEnt.length;
println(hashtagCount);
init();
}
catch (Exception e) {
e.printStackTrace();
System.out.println("algo errado: " + e.getMessage());
System.exit(-1);
}
}
void init()
{
StringBuilder sb = new StringBuilder(twText);
if (hashtagCount > 0) // there is hashtags!
{
int index;
// if starts with add the rest and process
// may not be in crescent order...
for (int i = 0; i < hashtagCount; i++)
{
if (htEnt[i].getStart() == 0) // starts with a hashtag?
{
pieces.add(sb.substring(htEnt[i].getEnd()));
println("*******" + sb.toString());
}
}
/// else...
for (int i = 0; i < hashtagCount; i++)
{
int initial = (i == 0)? 0:htEnt[i-1].getEnd();
println(initial + " " + htEnt[i].getStart() );
//check to see if next piece is a hashtag
if( initial != htEnt[i].getStart() - 1)
{
pieces.add(sb.substring(initial, htEnt[i].getStart()));
}
}
if(htEnt[hashtagCount-1].getEnd() != sb.toString().length()) pieces.add(sb.substring(htEnt[hashtagCount-1].getEnd()));
}
}
void debug()
{
for (int i = 0; i < pieces.size(); i++)
{
println(i + 1 + "º pedaço " + pieces.get(i));
}
}
void display()
{
fill(57);
rect(x, y, x + sizeX, y + sizeY);
fill(255);
noStroke();
//name
name.display();
screenName.display();
// avatar
noTint();
image(profImage, x + border, y + border, profImage.width, profImage.height);
//text
fill(250,255,255);
text(twText, 110, 167, 280, 120); // this is here, but gonna be replaced..
}
}// end of class
// linked text with mouse detect
class CompleteText {
String linkedText;
String linkTo;
float completeWidth;
float completeHeight;
float x;
float y;
PFont font;
float fontSize;
color baseColor = color(180);
color altColor = color(255);
CompleteText() {
}/// default
CompleteText(String _linkedText, float _x, float _y, PFont _font, int _fontSize, String _linkTo)
{
linkedText = _linkedText;
linkTo = _linkTo;
font = _font;
fontSize = _fontSize;
textFont(font, _fontSize);
completeWidth = textWidth(linkedText);
completeHeight = textAscent()+textDescent();
x = _x;
y = _y;
}
void display()
{
//rect(x, y - textAscent(), completeWidth, completeHeight);
noStroke();
color c = isOver()? altColor:baseColor;
fill(c);
textFont(font, fontSize);
text(linkedText, x, y);
if (isClicked()) link(linkTo);
}
boolean isOver()
{
float upperY = y - textAscent();
float lowerY = y + textDescent();
float rightX = x + completeWidth;
if (mouseY < lowerY && mouseY > upperY && mouseX > x && mouseX < rightX)
{
return true;
}
else
{
return false;
}
}
boolean isClicked()
{
return (isOver() && mousePressed);
}
}