Saturday, April 21, 2012

DropMsgBox: Dropbox Collaboration Message System

Recently, I've been using Dropbox for collaboration on a group assignment for school and while it's great, I've found that communicating with my team members is annoying. We could use e-mail, but I would much rather have all of the info right in the Dropbox. We used a plain text file for a while, but it posed problems, mainly that people running Linux (i.e., me) use different line endings than people running Windows, making everything appear as one giant line to them. So I decided to try to write a cool applet, completely in Javascript that accomplishes just this.

Go for a test drive


The idea itself is fairly simple: a messaging system that can work in not-real time; basically, an asynchronous IM client in your browser. 
  • Open source (duh)
  • Entirely Javascript and HTML; doesn't even require JQuery!
  • Custom Names for each team member
  • Timestamps each message
  • Auto-turns urls into links
  • Ability to add links to files in the Dropbox
  • Themes via CSS
  • Separate themes for each person! 
  • Can be pulled up on your mobile browser! (If placed in the "Public" folder.)
  • Can be set to auto-check for  new messages


This is really my first real foraging into Javascript and unfortunately, it's much more limited than I anticipated. Most of it is for security, but it's also the fact that each browser has their own javascript functions.

First off, this script will ask you for several permissions, mostly to write and "upload" files to your local hard drive. Secondly, it should display the messages in pretty much any browser out there, but you can only write a message in Firefox at this point, and possibly IE.

The reasoning behind this is that Mozilla provides a way for you to write files to the hard drive, as long as you've asked the user and IE uses ActiveX. But when it comes to Chrome or other browsers, I can find nothing about reliably writing to a file without having a "Save As" dialog pop up every time and having the user navigate to the correct file and folder.

Other limitations are:
  • Can only attach 1 file to a message right now
  • Some of the CSS is still a little wonky
  • No mobile formatted CSS (yet!)
  • The file-drop only works in Firefox
  • The auto-check only works in Firefox
Obviously, some of those limitations suck. I'd like to get it working on all major browsers, but that may be just a pipe dream.

Well, that's what I've been working on. I've had a ton of fun working with Javascript, and also a lot of frustration. I think this is a really nifty idea, but let me know what you think.

[UPDATE 4-21-2012]
I got a few things worked out in the demo, notably the ability to switch skins. I think the Linux skin is pretty tight, but I'm pretty new to CSS.

[UPDATE 4-22-2012]
I've fixed up the themes and made them mobile-compatible, though I'm decently sure that the static HTML sample I've supplied is not supported on mobile, so you'll have to download it and try it yourself. I also realized that the font I picked for the "Linux" theme was only on my machine, so I tried to pick another that looked Linux-y.

I also found a way to be able to read them on your phone, even if it's in a private folder.
  1. Install the Dropbox app
  2. Mark "Message.html", "messages.js", and every individual file in the "resources" file as a "Favorite" (so the app will auto-sync them with your phone)
  3. Open "Message.html" with "DB HTML Viewer".
Keep in mind, this is still limited to read-only, but I'm going to try to find a way to write javascript files with webkit and if I succeed, I'm guessing it will work for Android.

...Also, I fixed an issue where it would not save on Windows. Sorry, I've been developing it in Linux, and the Microsoft method of "\"s in the path didn't occur to me until just now. In any case, it should work now.

No comments:

Post a Comment