Textmarks keyword = Twitter hashtag

The challenge was to get the most possible users contributing to a communication system from my most possible devices while allowing all users to feel like they are contributing to the same thing and providing an added bonus for smartphone users. The solution is TweetMarks.

TweetMarks is a marriage of regular ol’ SMS and Twitter. It includes the most possible users while adding some cool functionality for smartphone users. Users who opt for the SMS version will receive tweets, and users who prefer the custom Twitter client will receive the text messages sent from the short code. Users are also free to use their preferred Twitter client. However the advantage of using the Twitter client, of course, is the ability to follow people who are at the event but you didn’t already know. It’s a web-based app, so users don’t have to worry about installing anything to their devices when they arrive at a museum, conference, bar, or club and find out there’s a cool communication tool available that they don’t have.

To achieve this I just added functionality to my Twitter client to send tweets as SMS through Textmarks. Likewise, SMS messages are tweeted. Hopefully this includes mostly everyone at an event who wishes to participate in a group communication, and users can use their preferred method of messaging. I’m really excited about this. There are limitless possibilities for this application not only at bars and clubs as originally envisioned, but any large space where people who don’t know each other gather.

On Wednesday, April 8 we will implement this system for singles night at Hugs in Brooklyn. We’re going to project all these messages onto a big screen. The system we customized for them looks great! Have a look. New messages slide in on the projection screen thanks to Scriptaculous. I didn’t do device detection on this one so you can check it out on the web or your mobile device. TweetMarks will also be the engine that drives BarTalk, our 1′ 2′ 10′ project.

Messaging client:
publk.com/hugs

Projection:
publk.com/hugs/projection

We imposed very tight restrictions on participants. Players communicated with us and each other with a live chat interface with camera controls. Due to the live and unpredictable nature of the storytelling, we knew that the chance was great for audience members to undermine the experience by chatting with one another and stealing control of the camera. We used AJAX to disable the controls for audience members not in turn, and PHP kept track of who was in turn. Hence only one person would have control of the camera and chat interface at a given turn, allowing the person to thoughfully pose a question without distraction.

players sit around a table, waiting for the camera to fall on them

After sending the question, it was Peng’s turn to respond from our admin page. After Peng’s response, he pressed a button that granted access to the camera to the person who just asked. This person would click “Spin The Camera” to spin the camera a random number of degrees. The camera would rest on another member. We would identify this member and give him or her access to chat and the whole process repeated itself. It was a lot of fun!

the IP camera sat in the middle of the table, and spun a random number of degrees to land on a random player

Here are the pages we used for the players and the admin. They are now read-only and don’t look like much, but we whipped this project up in just a few hours leading up to the presentation.

Admin Page, Player page

Technologies: IP camera,  JavaScript,  AJAX,  PHP, Flash Media Server

Notes:

• Axis API
• PTZ camera controls

Complete Source Code

Firstly, if you have never built a Firefox extension, use the wizard. I went through hell doing my Hello World extension using Mozilla’s instructions. Also, the Hello World example is a far cry from making an extension that has even the most limited functionality. Ted’s extension wizard gives you the framework and outlines the components perfectly.

Secondly, this may be common knowledge to JavaScript pros, but as someone who is relatively new to JavaScript, I discovered quite quickly that event listeners are my friends. Mozilla’s documentation was the best I found for a high level description of their purpose and parameters, and adding browser event listeners will add robustness to your extension.

With Jabber you trigger events on channels. You need one channel per event type and direction. Channels exist for incoming and outgoing messages, presence, and listening for iq packets, among others. According to SamePlace creator Massimiliano Mirra, “<iq>’s are used when you have to carry out a ‘conversation’ with a server or other entity following a predefined sequence, such as updating your profile or requesting a roster (contact list).  With iq events you listen to those packets, although you’d usually not set a listener for them and instead use the one-time listener given as third argument to send(), as in:

XMPP.send(account, <iq to=”some-entity”>…</iq>, function(reply) {
alert(reply.stanza) })

Remember that since your Jabber Firefox extension lives only on the client, events that affect both clients (chat partners) should be handled by both directions – ‘in’ and ‘out’ – of an event type. This means that if you are processing the text of a message in the same way for the sender and receiver, you must have two channels and two events – message ‘in’ and message ‘out.’

Play around with these ideas to get a feel for developing for Jabber. Also, don’t forget to download ChattyTime, a very exciting and brand new extension by Andrea Dulko and I. Thanks!

***

ChattyTime adds some exciting new features to SamePlace, the award-winning, extensible instant messaging client and Firefox extension based on the XMPP (Jabber) protocol. It is compatible with AIM/ICQ, GMail, MSN, Jabber, and Twitter, and it has a Jabber service of its own.

ChattyTime allows you to open “gift” pages right in your friend’s browser. Search news, Google, the dictionary, YouTube, and translate English/Spanish for your friend. Now there’s no excuse to say, “Just Google it,” because this feature is quicker to type! You might also like the location-based search feature, which will give your chat buddy search results in his or her zip code.

The other major feature that we here at ChattyTime are pretty excited about is the ability to browse the web with your friends. It’s ubiquitous browsing. By turning the feature on, no matter who clicks on what, you and your buddy will browse the same web pages. Use this feature for conferencing, YouTube, holiday shopping, or whatever you want.

Special characters determine the type of gift page to be sent. For example:

~economy opens the Spanish translation for “economy”
=pterodactyl opens Google results for “pterodactyl”
@pizza opens results for pizza in your friend’s zip code*

Here’s the current list of special characters (also available in the ChattyTime option under Firefox “Tools”):

= for Google search
; for YouTube
@ for location-based Google search
# for dictionary
~ for Spanish/English translations
! for New York Times
- plus any URL to send any web page you want

To browse the web with friends:

1. Each user sends :1 to begin session.
2. One user sends :0 to end session.

Some notes on group browsing with this version of ChattyTime:

1. You will send links to any opened chat window, so close the windows of the buddies that are not participating.
2. You will share all your browser activity with your buddy. Of course your buddy will not have access to your password protected sites, but you will still direct him or her to those pages.

*To use location-based search function, friends much have Loki installed.

www.chattytime.com

For the final project, we are going to create a Firefox extension with these principles on top of, to my knowledge, the only existing Jabber Firefox extension SamePlace. It is quite good. Here is a screenshot of how it looks in the browser:

If you are having trouble understanding how this works, imagine that this screenshot is your desktop. When you navigate to a different page, your chat partner automatically goes to that page as well. If you are planning your evening, you can both be on the same page without having to send links back and forth. The location-based search feature is activated right in the chat window by use of a special character. For example, @restaurants would produce search results for restaurants in my area, and #restaurants would produce search results in your area.

When our extension-upon-extension is complete, you and your chat partner will be able to pull up links for each other for group research, entertainment, or basically whatever you want. Of course we’ll keep the Loki feature, so even if you don’t know where your chat partner is, you can still give them search results based on their current location.

The project will be coded pretty much entirely in Javascript. There needs to be a database that will most likely need to contain a chat id or some other identifier that will be used to access the location info.

Here’s how it works:

Text ‘oscar’ (no quotes) followed by your message to 41411. For example:

oscar happy bday!
oscar you’re late

Send your text anytime tomorrow, and you’ll automatically be logged in for the evening. You can easily unsubscribe at any time via a reply (simple instructions included in message), but we don’t recommend that because you’ll be missing out on a crazy underground gossip convention. You will be unsubscribed automatically and forever the following morning anyway. If people use it and like it we’ll do it for every future TNO too.

Only one disclaimer: please don’t hurt anyone, just have fun with it!

Also, to whomever is actually hosting TNO, bartenders can get in on this too. They can offer a free beer to the next idiot who takes his shirt off, beer specials for first person to recite the contents of a message, and so on. Bartenders might want to participate too!

Ok everyone, please try this out, for real, cuz we think it’s cool and fun. We will appreciate your feedback after the night is over. Thanks and have fun!

A few questions answered

Q: How does this work?
A: Well it’s built on a service called Textmarks (www.textmarks.com). It’s free and great for prototyping mobile applications

Q: Is it really anonymous?
A: Well it is assuming that you are not already a member of Textmarks, where you’d have a username associated with your phone number. Even then people would have to know what your username is.

Q: Is this spam?
A: It’s an opt-in service, so no. Be aware that while we are testing this version, you will receive every message from every subscriber. In the future we hope to have more filtering options. You can unsubscribe at any time using instructions provided in messages you receive, and tomorrow morning we will manually forever unsubscribe anyone who has not already done so.

Q: What’s up with the ads? Are you clowns cashing in on this?
A: We wish. Since Textmarks is free, we have to give something back in the form of letting them put some stupid ads in the bottom of the messages. On this issue, Josh says, “Whatevs.”

Here is a screenshot of our mySQL message database. It’s clear that our service was being used as intended.

You can try it out for yourself using this sample script.

You’ll want to auto-subscribe users just to take out a step of the process. Just make sure they know they are being subscribed. To broadcast all messages to all subscribers, set up your Textmarks configuration something like this:

• This example is specific to New York City, and you can type in as little as just a cross street to get your address: Intersection Map

• If you have the Loki plugin installed, you’ll be able to see where you are, and your approximate address, upon hitting this link: Loki example

• This example simply plots multiple markers on a map, pulling address or latitude and longitude info from a database: mySQL Example

• This is my favorite, but for now it only works if you have a Mac and the Loki plugin installed. This example shows you where you are on a map, and depending where you are, it plays a song about the area or by an area artist! Only NYC is included at the moment, so if you do not live in NYC and click the link you won’t hear a song yet, but more areas are coming soon: Loki with Quicktime

These were done mainly with PHP and Javascript, neither of which I knew very much about more than 3 weeks ago. I’m really starting to enjoy working on web related projects.