We were presented with the unique problem of creating a private message board system between students and tutors, all on the WordPress platform. WordPress is typically understood to be a blogging platform. However in the recent years, the community has added so many optional components, that WordPress can be used to create a highly customized site for many different purposes.

Our approach: we surveyed the WordPress plugin landscape, found all the necessary plugins, and we created the architecture for a private list of pages for students and tutors to log into, share information, such as test results, progress and feedback, securely. Tutors could only access their own students pages, and students could not access other students’ pages. This eliminated the need for email as a clumsy tool and replaced it with a centralized one for communication while allowing the administrative staff to also track all students progress.

Jay Koo and his staff found this very helpful and we are pleased that they have adopted this solution into improving their business and the opportunities of these students.

Website:http://jaykooacademy.com

Slide Chest is a web application aimed at becoming a means to tie content that you’ve gathered from the web and create a web presentation from it.  It currently works with Evernote, the premier web-clipping, note taking cross platform application to gather your content, then create slides and presentations with this content.

Redline Solutions created this concept for a design and application competition sponsored by Evernote in August 2011. The development and design cycle was extremely aggressive. The entire site and functionality was conceptualized, designed, and developed in 45 days, in time for the contest deadline. All features goals were completed in time and Redline was very proud of the result.

We encourage you to check out the site and offer your feedback and opinions!

Features:

• Use your Evernote notes and notebook as a source for content.
• Cut and paste text and images from your notes into slides (web images, photos)
• Simple interface for positioning and adding new text with font formating (colors, size)
• Organize slides into presentations.
• Save your news slides and presentation back into Evernote.
• View your presentations on the web from anywhere.

Website: Slidechest.com
Technologies: Java, JSP, HTML/Javascript/CSS, Linux host
Timeframe: 1.5 months

Screenshots

Demonstration:

Check out the theme page for details.

The San Francisco Art Institute, a neighbor and prestigious arts education organization, came to us to help them develop a new website for a community outreach project.  The City Studio project has helped under-served youth in the San Francisco community who have little access to arts education programs in their school systems.  We were happy to help develop the site for SFAI in collaboration with their student design team.

The project involved creating a custom built PHP powered website including a Wordpress Blog, mailing list sign up, Google Forms for student registrations and integration with YouTube and Twitter feeds for up-to-date image for and video galleries.

The collaboration went smoothly, resulting in a on-time launch date of April 27th, which is was pre-scheduled presentation of the site.  Our client was thrilled with the results and reception of the new site.  The site will help them tell the story about the City Studio project, allowing more exposure to potential new participants and to continued funding.

Client:  San Francisco Art Institute

Website:  Citystudio.org

Technologies:  PHP, Wordpress, HTML/Javascript/CSS, Google Apps

Timeframe: 1 month

Developed with: General Design, LLC

Website & Itunes:

http://www.readygetset.com

http://itunes.apple.com/us/app/readygetset/id417251396?mt=8

Screenshot:

Screenshots

Video of Waiting at MassMoca

Message Delay is an Android mobile application that allows you to compose and schedule text and email messages at a future delivery date.  The application is very useful for sending reminders to yourself and send congratulatory birthday and other messages.

The application was fully designed and developed with a custom user interface and using all of our internal tools and software for our client.  It’s was released to Android Market at the end of 2010.  The application works on all Android phones currently available.

Development Timeframe:

2 months

Screenshots:

Video:

Requirements:

• Download the XCode 3.2 or higher SDK
• A real IPad device (no simulation is available)
• An Apple brand video out cable
• Knowledge of Objective-C and UIKit IPhone libraries
• An external video display (TV or LCD)

Background:

First off, this new API is only available on the IPad using XCode 3.2 or higher.  You might find references on the web to a previously undocumented API for the IPhone OS (2.2.1 to 3.1.3) that allows for “video out” in applications.  That code will not work on the IPad and has been replaced by this new official API.

The second thing to note is that accessing the external screen is not based on “mirroring”.  The output that you see on the IPad is not automatically replicated to the secondary screen. The idea behind the API is that the application developer has full control over how to draw to the external display screen and it’s not based in hardware or is a simple bitblit copy.  You as the developer must set up a new area to draw to on the second display and render your application into it.

The new changes to the SDK that enable video our are fairly simple and straightforward.  Two Objective-C Cocoa Touch classes, UIScreen and UIWindow, have the additional functionality to make the code very easy to integrate into your existing code base.

Code:

For the code, I am assuming you understand Cocoa Touch and the UIKit classes.  Namely that you already use UIWindow and UIView to display your user interface.

Step 1. Determine if an external display screen is available

To begin, you’ll typically need to know if the external display is connected to the device.  You can perform this check at the start of your application.

NSArray* arrScreens = [UIScreen screens];
int numberOfScreens = [arrScreens count];
bool isExternalDisplayConnected = (numberOfScreens > 1);

However a better method would be to use the [notifyScreenConnected] notification message.  I will not show this method here, but will update the tutorial with this solution at a later time.

Once our secondary display is available, then the UIScreen array will contain more than one entry.  The first entry is the primary display on the IPad.  The second entry is the external display.  We will need a refence to this screen.

UIScreen* videoScreen = NULL;
videoScreen = (UIScreen*) [arrScreens objectAtIndex: 1];

Step 2. Create secondary UI

Now we need to create a new UIWindow and any other necessary views.  We can create them conditionally when we know the external screen is connected.

CGRect rect;
UIView* videoView;
if (isExternalDisplayConnected && videoScreen != NULL)
{
    rect = [videoScreen bounds];
    window = [[UIWindow alloc] initWithFrame: rect];
    window.screen = videoScreen;
    videoView = [[UIView alloc] initWithFrame:rect];
    videoView.layer.anchorPoint = CGPointMake(0.0f, 0.0f);
    videoView.layer.position = CGPointMake(0.0f, 0.0f);
    [window addSubview: evView];
    [window makeKeyAndVisible];
}

Note that there is nothing particularly different about creating a new UIWindow and UIView here.  The only difference is setting the screen property of the window object to the new video screen.  This is what allows the window to display on the external screen as opposed to the default IPad screen.  Also take note that the size of the external screen is determine by looking at the bounds property of the video screen.  I’ve set the new window and view to be the size of the external display so that it will appear full sized.

You should create any necessary subviews that your application would need to display on the external display and attach them to the primary view as necessary.  This may involve loading any views from an application Bundle.

Step 3. Update your display

If you application needs to refresh itself, remember that you must refresh both the main window’s views AND the external window’s views.  For the external screen view above, refreshing the UI would be a standard call.

[ videoView setNeedsDisplay ];

Step 4. Destroy UI when display disconnects

During your application’s lifecycle, you can poll the UIScreen screens array to see if the screen has disconnected or use the system notification when the display is not longer connected.  When the screen is disconnected, you should cease drawing to the screen and clean up any UIWindows and UIViews that you have created along the way for that window.  This allows you to start again from step 1 to repeat the cycle if the same or a new external display with a different resolution is re-connected to the IPad while the application is running.

Other Considerations:

As you can see, you will need two UI trees to render your application on two screens.  The system UI thread will deal with the redraw of the screens on each display.  If you have a game application or other application that needs to constantly refresh its user interface, then the application may need to render twice to keep the external screen up to date.  This all depends on the nature of your application.  You can decide to only refresh one screen, whether it is the internal or the external one.  However if you choose to refresh both displays, your application will certainly take more time and frame rates will be lower than rendering to only one display.

The importance of checking that the display is connected will help with this performance consideration.  Preventing any extraneous drawing updates to the windows when the screen is not connected will certainly improve your applications performance.

You can control the video modes of the external display by using the videoModes property of the UIScreen object.  You can then choose which video mode to use for that screen.  By default, the highest resolution video mode is enabled.

Also take note the secondary display will not receive any form of user input and it will not have a status bar.

Project demo:

You can take a look at “Waiting For Google”, a sample IPad application that uses the internal and external screen simultaneously.  It synchronously draws to both displays to make for an interactive experience on the IPad and for visual presentation displayed through a digital projector.

That wraps up things for this tutorial!  I hope it was helpful and gives you some insight to using this feature in one of your own applications.

Cheers!

Jose Rojas

Waiting For Google is a IPhone/IPad application developed for an art exhibit.  The colorful “waiting” logo spins mysteriously on the screen and is projected on to a real life spinning disk mounted on a wall in the gallery.  The interactive element of the art exhibit is being able to spin the disk on the screen as fast or as slowly as you would like, and thus affecting the projected image on the real disk.  Art Exhibit by Brian Kane.

Features:

• Color wheel spins on its own or responds to user touch to affect its spin.
• Spin the wheel very fast to see an amazing blur of colors
• The wheel will gradually slow down, simulating real physical inertia and momentum.
• The application supports both IPad and IPhone platforms
• Video out support is enabled on the IPad

Technology:

The project is built on my own IPhone application framework.  XCode 3.2 was used for compilation, simulation and testing.

Website:

Brain Kane – Waiting for Google

Demonstration:

Photos:

Current Features:

• Interactive front page game catalog
• Framework to add new games in within minutes
• A community login system
• Integration with Facebook Connect for Facebook login
• Many great Flash games!

Upcoming Features:

• High score tracking for player in game community
• Customized player profiles
• Share high scores and game play progress on Facebook
• Allow easy integration for each game into Facebook directly
• Game challenges and co-operation modes
• More great Flash games!
• Game reviews for Flash and Mobile games
• Rotating banner ads and video interstitial ads for revenue

Timeline: 2 man months.  Site design and development was handled by Jose Rojas.  This project builds upon already existing game server, scoring, and Facebook integration technologies built in previous projects.

Technology:

The site is built upon our on Java webpage templating server and Javascript AJAX framework.  This allows for complete reuse of the particular components across all pages on the website and quick integration with new flash games of various dimensions dynamically.

Facebook Connect is integrated using Facebook’s AJAX libraries along with our own plugin model to collect user identity and manage it on our own server.

The Flash games interact directly with the game server and various plugin Javascript libraries on the client side for score tracking and profile management.

Website: http://www.remixedgames.com

Screenshots: