Another small step for a Tibetan keyboard on Android

There has been a lot of excitement this week about the robust support for the Tibetan written language in Apple’s iOS 4.2 for iPhone and iPad. This is a fantastic achievement that many contributed to, and that Apple should be loudly applauded for.

Unfortunately, the state of Tibetan on Android is still poor, but not hopeless. While Tom Meyer has provided a great starting point for rendering text properly, I still am not aware of any means for inputing Tibetan characters. With that in mind, I set out to investigate the ability to create a new Tibetan “Input Method” (as Google calls it) for Android, and quickly realized that one could just write a Language Pack add-on for the open-source AnySoftKeyboard project. This solution still requires you to root your phone and install the Dzongkha”རྫོང་ཁ font, but is still a step in the right direction!

You can find the open-source code for my new project, the Tibetan AnySoftKeyboard Language Pack on Github. If you would like to try it out, you must have a rooted device with the Dzongkha”རྫོང་ཁ font installed, then install the “AnySoftKeyboard” from the Android Market, then you can install the first test Add-on APK file, and the Tibetan option should come up in keyboard settings.

Below you can see a screenshot of the initial keyboard writing text into the OI Notepad app. It appears to be properly stacking characters as well, but I may be wrong. Also the current implementation does not yet support the SHIFT key or other modifiers. I would love to have some help setting up the rest of the QWERTY mappings in this XML file. Otherwise, any other comments, feedback, advice or pointers to other Android Tibetan keyboard work would be much appreciated!

Technologists Wanted: Join the New York State Senate Developers Network

Reposted from here: http://www.nysenate.gov/blogs/2010/oct/27/technologists-wanted-join-new-york-state-senate-developers-network

Over the past year and a half, the Office of the Chief Information Officer at the New York State Senate has worked to promote openness and transparency through the use of technology. Our goal is both to serve the needs of the Senate as an institution and also develop examples that other government bodies in New York and around the country can use, adapt and implement to further open up our government. Today, we’re taking the next step that effort by introducing the New York State Senate Developers Network.

The purpose of the network is to help any technologist interested in how technology is used in the Senate to easily find what they’re looking for, and to be able to interact directly with Senate technology staff.  We hope that such a network of developers will leverage the work that the Senate is already doing, both to serve their own needs and also to create more public benefit, at no additional cost to taxpayers.  We have created a Google Group Mailing List as well as an Internet Really Chat (IRC) at irc.freenode.net #NYSSDev to help and facilitate the discussion between our staff and all that are interested in talking with us.

In addition to the mailing lists and IRC room, we are also proud to announce the alpha release of our NYSenate.gov Application Programing Interface (API).  We hope that by providing a developer API to the treasure trove of information we have available on our website that technologists throughout New York State and the country will be able to create new and interesting tools for the public.

Along with our discussion groups and API, the New York State Senate Developers Network also provides a listing of RSS feeds available on our website as well as links to the Source Code that we have made available for our various projects, along with as our existing Open Legislation API.

Click Here to go to the New York State Senate Developers Network.

Searching and Playing YouTube Videos using Appcelerator Titanium

This tutorial is part of content I am developed for the NYU ITP course I am teaching this semester, “Social Activism using Mobile Technology”. You can find the original document posted here. This code comes from the open-source project (of which I am the lead developer) located here: http://github.com/nysenatecio/NYSenateMobileApp. If you want to see this code “in action”, download the NYSenate Mobile app for iPhone, iPad or Android.
This tutorial will demonstrate using the Appcelerator Titanium Mobile API, a Javascript-based cross-mobile-platform toolkit, how to accomplish the following feats in a mobile app:
  • Search for video by channel name or keyword from the YouTube API
  • Use the Titanium HTTP client for async XML requests and response handling
  • Retrieve video results from YouTube and display thumbnail & text in a table
  • Create a WebView window and use it to display YouTube video player
  • Hand-off YouTube video links to the OS for external playback

All in all, following this tutorial, you should be able to perform the basic functions you would need to build an app that front-ended video content stored on YouTube.

First, we declare our variables:

//this is the main app window

var win = Titanium.UI.currentWindow;
//this creates a spinning widget we can display while the user waits

var toolActInd = Titanium.UI.createActivityIndicator();
//this is the table we will load videos into

var tableview;
//and the data array for the table

var data = [];
//the window and webview for displaying youtube player (iOS only)

var webModal;

var webModalView;
//stores the current link being displayed in the web view

var currentLink;
//this is the network request object

var xhr = Ti.Network.createHTTPClient();

Now you need to declare a function that knows how to play YouTube videos on iOS and Android. Every YouTube video has a GUID (globally unique id – or at least unique for YouTube) and a title. You pass those two values to this function and it will either launch the YouTube player directly (Android) or display a thumbnail with playbutton that the user can launch (iOS).

function playYouTube (vtitle, vguid)
{
if (Titanium.Platform.name == ‘iPhone OS’)
{
var ytVideoSrc = “http://www.youtube.com/v/” + vguid;
var thumbPlayer = ‘<html><head><style type=”text/css”> body { background-color: black;color: white;} </style></head><body style=”margin:0″><br/><br/><center><embed id=”yt” src=”‘ + ytVideoSrc + ‘” type=”application/x-shockwave-flash” width=”100%” height=”75%”></embed></center></body></html>’;

showHTMLContent(vtitle,’http://www.youtube.com/watch?v=’ + vguid,thumbPlayer);
}
else //on android
{
//this call to openURL hands off the link to the operating
//system, and starts any player that supports youtube.com
Titanium.Platform.openURL(‘http://www.youtube.com/watch?v=’ + vguid);
}
}

The reason you show an embedded YouTube thumbnail player on iOS, is that it will allow the video to play inside of the app without leaving the context of the app. This was more a problem on the non-multitasking iOS 3.x, and is still an issue on the iPad until iOS 4.2.

In the function above, there is a showHTMLContent() function call. This function is not built-in, and is just a way to simplify the common need to show some bits of HTML markup within your app. The arguments for the function are a title of the page, an optional URL to the source content of the page, and the direct HTML markup content to display.

function showHTMLContent(wTitle, wUrl, wHTMLContent)
{

//store the link for later use
currentLink = wUrl;

//create the window to hold the web view
webModal = Ti.UI.createWindow({});

//set the orientation modes for basically any which way
webModal.orientationModes = [
Titanium.UI.PORTRAIT,
Titanium.UI.LANDSCAPE_LEFT,
Titanium.UI.LANDSCAPE_RIGHT
];

//create the webview aka the embedded web browser (webkit/safari)
webModalView = Ti.UI.createWebView();
webModalView.scalesPageToFit = true;

//add the web video to the modal window
webModal.add(webModalView);

//set the title of the window
webModal.title = wTitle;

//if you are using a tab UI in the app, this will open the window
Titanium.UI.currentTab.open(webModal,{animated:true});

//set the HTML to display to the markup passed into the function
webModalView.html = wHTMLContent;

};

Great, so now we have the ability to display a YouTube player within our app using an embedded WebView. Pretty awesome so far, and hopefully you see how might use components like WebView for other mashups of native and web content in your apps.

Now we need to demonstrate how to get the data from YouTube on what videos are available. For this, we create another function called “doYouTubeSearch()”. This function takes two parameters: you can specify the channel name to retrieve videos from, or you can specify a search term, and you can combine these as well, to search videos from a specific channel only.

function doYouTubeSearch (channel, searchTerm)
{

//first show a “loading” spinning indicator to the user
toolActInd.message = ‘Loading videos…’;

win.setToolbar([toolActInd],{animated:true});

toolActInd.show();
//create the YouTube API search URL from the function parameters
var searchUrl = ‘http://gdata.youtube.com/feeds/api/videos?alt=rss&author=’ + escape(channel) + ‘&q=’ + escape(searchTerm) + “&orderby=published&max-results=25&v=2”;

//use the xhr http client object to do an HTTP GET request to the URL
xhr.open(“GET”,searchUrl);
xhr.send();
}

That was all pretty straightforward, right? You build up a URL, and you make the request using it for data from YouTube. Now, how you receive the response to that request is our next step. To do this, you must define an “onload” function for the ‘xhr’ object.

It is in this function that you will receive the data back from YouTube (usually in JSON or XML format), and you can process it to display in your app.

xhr.onload = function()
{
try
{

//the doc object holds the response structure

var doc;

//check whether the data coming back is in XML format or not

if (!this.responseXML)
{
//if not XML you have to convert it to XML
doc = Titanium.XML.parseString(this.responseText).documentElement;
}
else
{
//if it is XML, then just set the doc variable
doc = this.responseXML.documentElement;
}

//now we can easily get a list of items from teh results
var items = doc.getElementsByTagName(“item”);

//some simple variables for tracking the loop
var x = 0;
var c;

//now just loop through the response array to see what videos we have

for (c=0;c<items.length;c++)
{
//get the current item
var item = items.item(c);

//get the text for the video title tag using standard DOM XML calls
var title = item.getElementsByTagName(“title”).item(0).text;

//build up a summary string to display below the title
var summary = “”;
if (item.getElementsByTagName(“pubDate”))
{
summary = item.getElementsByTagName(“pubDate”).item(0).text;
}

//get the link to the youtube video
var link = “”;

if (item.getElementsByTagName(“link”))
{
link = item.getElementsByTagName(“link”).item(0).text;
}

//now here is where we perform a trick
//we find the GUID code from within the link b/c we know the link format
var guid = link.substring(link.indexOf(“?v=”)+3);
guid = guid.substring(0,guid.indexOf(“&”));

//now we can use that guid to load up a thumbnail image
var thumbnail = “http://i.ytimg.com/vi/” + guid + “/2.jpg”;

//okay we have all the data we need for that item
//now we need to create a row to add to the table in order to display it

//create the row item and set the height to 80 pixels
var row = Ti.UI.createTableViewRow({height:80});

//set parameters for the row so we can get the youtube data out later
row.url = link;
row.guid = guid;
row.videotitle = title;

//create a label for displaying the title and add it to the row
var labelTitle = Ti.UI.createLabel({
text:title,
left:105,
top:10,
height:40,
font:{fontSize:16}
});
row.add(labelTitle);

//create a label for the summary and add it to the row
var labelSummary = Ti.UI.createLabel({
text:summary,
left:105,
top:45,
font:{fontSize:12}
});
row.add(labelSummary);

//create an image from the thumbnail, and add it to the row
var img = Ti.UI.createImageView({
url:thumbnail,
left:0,
height:80,
width:100
});
row.add(img);

//add the row to the data array
data[x++] = row;

}

//if tableview has been created, reset the data on the table
//you can update data on the table multiple times
if (tableview)
{
tableview.setData(data);
}
else
{

//if table has not been created, build it up with the data array
tableview = Titanium.UI.createTableView({
data:data
});

//add the table to the current window for display
Titanium.UI.currentWindow.add(tableview);

//add a ‘click’ listener so that when someone taps on a row
//the video will be played using the function we defined earlier
tableview.addEventListener(‘click’,function(e)
{
playYouTube(e.row.videotitle,e.row.guid);
});

}
}
catch(E)
{
//if anything bad happens, show the error to the user and log it
Titanium.API.debug(E);
Titanium.UI.createAlertDialog({title:’NY Senate’, message:’No videos were found for this search.’}).show();

}

//hide the spinning ‘loading’ widget
toolActInd.hide();
win.setToolbar(null,{animated:true});
};

Okay, so that was a lot I know, but go back through it a few times, and you will see it is not so hard. First, we get XML back from YouTube. Then, we turn that XML into an array of items. Them we loop through those items and build up an array of rows. Then, we set the table with that array, and display the table. Finally, we handle the ‘click’ or touch events on the row, and display the YouTube player in the embedded webview. Ta-da! You now have a customizable YouTube search and player app.

Now here are three examples how you might kick off all this activity.

First, in this case, we are doing a search for any video in the ‘NYSenate’ YouTube channel.

doYouTubeSearch(‘NYSenate’,”);

In this example, we are searching all of YouTube for a “skateboard dog”.

doYouTubeSearch(”,’skateboard dog’);

Finally, in this example, we are

doYouTubeSearch(‘NYSenate’,’Brooklyn’);

In review, this lesson has showed you how to display HTML web content, how to create YouTube players embedded in that content, how to make HTTP requests to web services and APIs, how to parse the XML returned from those services, and how to display data in a Table format.

This example was built upon code that comes from the open-source project located here: http://github.com/nysenatecio/NYSenateMobileApp so go grab the code there and use it as a basis of your own app!

Another Excellent Event: Open Video Conference, This Week in NYC

News from my work on The Guardian Project:

Nathan Freitas will be on a panel at the 2nd annual Open Video Conference in New York this Friday and Saturday. He will be on the panel entitled “Cameras Everywhere” led by our partners at Witness, on Saturday at 3pm.

Summary: Cameras Everywhere: Human Rights and Web Video – (2:45 PM – 3:30 PM)

Description: Once upon a time, video cameras were rare. Now they are ubiquitous—as are the opportunities to share, use, and re-use video. What are the limits and possibilities of an ethics of openness when it comes to human rights footage?

Videos (particularly mobile and online video) make it possible to document and publicize human rights struggles – from monks marching for freedom in Rangoon and Lhasa, and the election protestors in Tehran, to individual voices speaking out against injustice on YouTube and other online spaces. But despite the growing circulation of images of human rights violations, of victims and survivors, there is limited discussion of crucial safety, consent and ethical concerns – particularly for people who are filmed.

Issues around consent, representation and re-victimization and retaliation have emerged even more clearly in an open and networked online environment, as have concerns about intentionality and authenticity. Video is being reworked, remixed and recirculated by many more people. New possibilities for action by a global citizenry have arisen, but these carry with them substantial challenges, opportunities and dangers.

Presenters:
Sam Gregory — WITNESS
Gabriella Coleman — NYU
Nathan Freitas — The Guardian Project
Steve Grove – News and Politics, YouTube

Following the panel, there will be an open workshop, to continue the discussion and brainstorm new approaches and tools to address the issues raised. This feedback will be gathered and fed into the OVC Hackday, held at NYU ITP on Sunday. Team Guardian will join in with whoever shows up at the hackday, take the ideas from the previous day, and build prototyped mobile video solutions in response to them.

You can get more information and register for the hackday here: http://www.openvideoconference.org/hacklabs/

OVC hack labs: Sunday, October 3

Join us at NYU’s Interactive Telecommunications Program for an all-day open space gathering for innovators of all stripes. Meet and collaborate with conference attendees, HTML5 developers, transmedia storytelling experts, and more. Among the planned activities:

Make interactive HTML5 video using WebMadeMovies technology like popcorn.js
Map out a transmedia strategy for your content
Build a custom HTML5 player for your site
Create robust video sites using the free+open source Kaltura CE 2.0 self-hosted software stack
or just grab a room and hack on your project!

OVC hack labs are free and open to the public.

I’m on a Panel… October 6: the “(NY)TimesOpen 2.0: Open Government Event”

Personal note: It has been a little while since I’ve updated this blog, mostly because I seem to spend my blogging energy updating my beautiful 4-month old daughter’s blog (yay!). Now back to business…

I am excited to be a participating in this series of “Times Open” events hosted by the New York Times. I was invited to join by Derek Willis, The Times’s government API guru, who I met through my work as part of the New York Senate’s CIO Team and our Open Senate effort. Derek is doing brilliant work there, turning the venerable news organization into a true data platform, and helping them redefine what it means to “cover a story”.

Open Government

Next up in our TimesOpen 2.0 series is an evening about Open Government. Open Government allows for great governmental efficiency, transparency and citizen participation.

We’ve pulled together a lineup that will showcase government data from multiple angles — from the people who are opening up the data, to the developers who are putting the data to use, to how the data is being used in the Times newsroom.

TO2.0: Open Gov will be held Wednesday, October 6 from6:30–10 p.m. at The New York Times.Registration is now open.

Read the full post here: http://open.blogs.nytimes.com/2010/09/24/timesopen-2-0-open-government-event/?emc=eta1

Published
Categorized as General