![]()
Overview and Detail iPad Demo: Fullscreen UIScrollview and a sidebar that contains a UIScrollview with detail image clips. Tap on one of those UIImageView's to display the UIPopoverViewController with UIScrollview showing the detail clip. Zoom clip or share clip via integrated mail and twitter functionality. have fun!
I use this code in one of my iPad projects as fullscreen content view with an additional scrollview that's hide-able. The scrollview at the bottom or left is used as a clips container to enable easy access to detail clips made by a user. For sake of simplicity, the demo project contains a fixed scrollview with a predefined number of images and a predefined image in the overview scrollview. FYI: The images show the map of Berlin, Germany. Red dots indicate locations of flickr pictures made by tourist while blue spots show locations of flickr images made by Berlin residents. Sorry, but I don't know who rendered the images - I grabbed the image somewhere as CC source.
Note: iPad project with OS5 and ARC
Grab Source Code at GitHub: https://github.com/danielbierwirth/OverviewAndDetailPopoverProject


A metaphor of a virtual window into the personal space of your remote communication partner. This prototype application is a by-product of my master's thesis submitted in june 2011.
A video is transmitted between both devices. One device records the video and sends it to the other device wirelessly. The receiving device tracks the user's relative head position and modifies the video frame position and size accordingly. The video frames are rendered as head-coupled OpenGL texture using off-axis rendering to create the impression of 'looking through a real-world window'.
Imagine following scenario:
Your friend is at home hundreds of miles away an therefore couldn't join you for the great concert. Nowadays, high bandwidth and powerful mobile camera devices allow easy recording and content sharing at a reasonable quality. Several services such as UStream demonstrate location-based real-time video sharing using mobile devices.

You can easily share your personal experiences based on the metaphor of a virtual window into the remote space. The idea is to transmit video data in real-time between two or more devices. Additionally, all devices which receive video streams instrument their in-built front facing camera to track the viewer's relative head position. Based on the relative head position, it should be possible to modify the video data. The video frames are rendered as OpenGl textures in a 3D virtual scene, which is modified to create the impression of looking through a window. The window-like effect can be achieved by adaption of the field of view of the virtual scene according to the relative 3D head position. In addition, off-axis rendering is applied to reduce the distortion of virtual objects which occurs if the virtual camera is not axis aligned.

This is a project with the Human Computer Interaction Lab at Hasso Plattner Institute: http://www.hpi.uni-potsdam.de/baudisch/projects.html
I modified one of the Raphaël JS Library samples to represent a year-based calendar overview of all months and days as colored punch holes. The small JavaScript library is intended simplify your work with vector graphics on the web. The visualization makes use of color and size metrics to visually represent the amount of calendar entries per day. Interestingly, the visualization of a whole year as colored punch holes reveals peak times and might reveal recurring pattern.
After all, it can be simply used as slick visualization to represent the passed-by year. I'm looking forward to get a nice overview of 2011 in terms of calendar entries by the end of 2011.
You can try it here: Calendar view in action.
The bubbles or 'punch holes' indicate the number of calendar entries per day based on their size and color metrics. The circular radius is determined by taking the square root of the number of entries divided by PI. Both, PI and the resulting square root are factorized as shown below:
punchHoleRadius = min(round(Math.sqrt(totalEntires / (Math.PI*0.8)) * 4), maxSize);
The color metrics range from green to red. The actual HSV color for a certain amount of daliy entries results from:
punchHoleColor =[ (1 - punchHoleRadius / maxSize) * .5, 1, .75];
The *js approach is based on the data provided through an html table. The table contains all months with their daily calendar entries. You will need some kind of script to export the iCal information into the html table. I used the following script which supports automatic ftp upload.
Our project partners at the HPI School of Design Thinking have asked our team to do a design thinking project regarding following 'How might we...' question: 'How might we help middle to large size chain and franchise shop owners to increase the in-store shopping experience of their customers?'
Brief intro:
Nowadays, most shop owners selling groceries compete each other by price, quality, and by providing a wide range of low-cost as well as gourmet variations of certain products to satisfy most shopping types. However, the issue of customer loyalty cannot be answered only by providing special offers and price advantages.
We were asked to develop new and sustainable ways to enable chain and franchise shop owners to (1) increase in-store revenue, (2) raise customers satisfaction, (3) and strengthen the customer loyalty. In addition, the new service should use our project partner's femtocell-based information technology.
The following section will show how we proceeded based on a number of prototype iterations:
1. Prototype (Emma 3000)
The first Prototype focused on three important aspects which we previously identified when analyzing Jana’s shopping behavior:
(1) Need for structured shopping
(2) Need for navigation
(3) Wish for discounts and special offers
We made efforts to accommodate to the first need by enabling users to enter their shopping list to the system by either text input, speech input, taking a picture, or by uploading a prepared shopping list in advance from home.
In addition, we came up with the Basic Basket-Feature to offer shoppers the possibility of ordering staple and everyday food items, such as milk or sugar. The customer is able to more thoroughly shop for special food items while his/her Basic Basket is being prepared in the storage and eventually waiting for the customer at the check-out.
Frequently, customers get lost in the supermarket and are completely clueless in terms of the approximate location of a specific item within the store. In order to fulfill this need of guidance we introduced an interactive supermarket map. The femtocell tracks your approximate location and calculates an optimal route according to your shopping list which will then be displayed on the map on the customer’s mobile phone.
The Discount and Special Offers-Feature is an optional service which provides the customer with an overview of specials of the week, as well as, specials of the day as soon as the store has been entered.

1. Testing
We conducted our prototype testing in-store with both customers and store managers. The web-based prototype allowed test subjects to click through the features to get a more tangible idea of how the actual mobile supermarket assistant might look and feel like in the end.
Customers seemed to be very content with our conception, however, some people argued:
1. “we don’t use a shopping list”
2. “entering the list into the system takes way too long”
3. “collecting Basic Basket items directly by myself is more convenient, than selecting and ordering the items using the Basic Basket-Feature”
Testing indicated a similarly positive attitude of shop owners toward the prototype. Yet they raised concerns regarding the feasibility of the Basic Basket-Feature, arguing that the additional work load would be rather cost-inefficient. Furthermore, store managers remarked that keeping the interactive map up-to-date might be a problem due to the frequent rearrangement of shelves and items within the store.
2. Prototype
The implementation of the 2nd prototype focused on a totally different aspect of Jana’s needs. The circumstance that Jana is single disposed us to focus on the aspect of creating an environment and situation in which single people can meet without the initial inhibitions. Often times, when people shop in the supermarket they see someone they find attractive, however, they are too shy or scared to approach them.
The Flirt and Buddy-Option that we came up with enables single people to get in contact with each other without the feeling of awkwardness. Single people located within the same femtocell are able to see each other on their respective mobile phones. Additionally, the option of narrowing the assortment of potential partners down is provided through Food Preference Profiles. The set-up of a profile makes it possible to be matched up with people who have either similar or completely different food preferences.
Another alternative to grab a potential partner’s attention is the posting of so-called Crush Tags. Crush Tags basically are items, like fruits or other groceries that are available at the supermarket. When a Crush Tag has been sent, a picture of the item appears on the screen of the recipient’s mobile phone. In addition to the greeting the Crush Tagged person also receives a store discount for the respective product.
The intention of this playful overture is to create a situation in which a single person woos another one by inviting him/her to cook together by sending him/her the ingredients. At the end, you get to save money and have a nice evening with “the object of your desire”.

2. Testing
During the testing process we discovered that most people were rather scared of the flirt option. They mentioned various reasons why they were opposed to the flirt application. Most often, concerns about privacy were uttered since people were not pleased with the idea of being labeled as a single. Some said that the thought of being approached by other singles while shopping was rather disturbing and that they would feel annoyed. Few people even voiced that they would never return to the supermarket out of fear of stalkers.
In summary, it can be said that we nearly received no positive feedback for our flirt option at all, even though we believed that the community aspect would have been a great value for the supermarket. Especially, in consideration of the increasing popularity of Online Dating Websites and a number of surveys showing that supermarkets provide a good flirt environment.
3. Prototype (Final Prototype)
We used the results that we accumulated when testing the 2nd prototype and improved and refined them. For this process, conducting additional research and interviews were indispensible, as well as, undertaking additional brainstorming.
Eventually, we indentified a desperate need for inspiration. Most people have problems when it comes to structured grocery shopping. Many of them do not have a clue what to cook and therefore are indecisive when it comes to making purchases. Often, customers end up with various items in their shopping cart, yet, are not able to cook certain recipes because they forgot to buy essential ingredients. For instance, to most people it poses a huge challenge to ‘survive’ a certain period of time with their weekly budget, especially with the wrong groceries.
Hence, when trying to come up with our final prototype we focused on the aspect of providing inspiration with a recipe-based shopping approach. In order to use our prototype, customers simply have to choose one of our identified three major shopping types:
(1) Gourmet
(2) Eco-conscious
(3) Low budget
All recipes and saving offers are automatically adjusted according to the selected shopping type. With Recipe of the Day-recommendations store managers are able to sell a large quantity of certain products, like perishable produce. Each recipe also offers matching discounts, which makes it even more attractive for customers to cook the suggested recipe. Aside from the Recipe of the Day, customers also have the option to browse the recipe database.
When a certain recipe has been selected, the ingredients are automatically added to the shopping list, arranged according to their in-store location. Additionally, the customer’s mobile device notifies him/her as soon as he/she passes a product zone and tells him/her to pick up the needed ingredient(s) from this area.
Moreover, customers have the opportunity to access a personal shopping memo at home. The memo provides access to the recipe instructions and enables the customer to participate in the supermarket-cooking-community by uploading his/her own recipes. Other customers have the option to rate the recipe. People who share their own recipes by uploading them receive special discounts for their next shopping trips.
The prototype enables shop owners to improve customer loyalty. In addition, they could start affiliate programs with companies and celebrity chefs in terms of promoting the recipe of the day. The web-based prototype also provides space for leasing advertisements. Moreover, shop owners can track the items a certain customer type is shopping for.

