NOMTEK | tailor made Apps for iPhone, Android, Blackberry and other platforms

Flipcards – Flashcard app for training memory

Paweł — Tue, 25 Oct 2011 11:42:04 +0000

Flipcards – Flashcard app for training memory, is an educational application for everyone. The idea is based on flashcards – a set of pairs of words or pictures which are somehow related to each other. Each pair is exposed on both sides of a card. User can flip cards by tapping the screen, and browse them by simple swipe gesture.

While creating FlipCards we focused on simplicity and impressive graphics which make learning even more enjoyable.

FEATURES

simple and user-friendly interface
marvellous artwork
create your own flash cards in embedded editor
search and download flash cards from Quizlet.com (over 7 million flashcard sets)
upload your flashcards to Quizlet.com and share with other users
post your newly created sets on Facebook’s Wall
support for text and images
share your sets with friends via email
shuffle cards by shaking device
tap and swipe to interact with cards

SUPPORT

If you have any questions or issues with this app feel free to contact us at flipcards@nomtek.com

For any news you can follow us on Twitter: @NomtekMobile

AX4 Tracking application for AXIT AG released on AppStore!

Kamil — Fri, 06 May 2011 08:28:54 +0000

AX4 is a logistics IT-platform which improves, automates and controls the logistical chain across companies and simply and flexibly integrates all parties involved. It is used by over 52.000 users, available in 92 countries and 12 languages. Major customers are DHL, BMW, Ford, DB Schenker, BASF and alike.

We are very proud to announce that Nomtek has developed the mobile AX4 application for all iOS-based devices: iPhone, iPad and iPod. With our application it is possible to track statuses of AX4 shipments anywhere and anytime – just enter the shipment reference number and get detailed tracking information within seconds. Application automatically stores the list of recent shipments for future reference and provides useful bookmarking system called “Watchlist”. With push notifications user is instantly informed about tracking status updates for all shipments that he “watches”.

From the developer’s perspective, AX4 Tracking application introduces some advanced features. We have designed special table views that are made of native iOS UI components to achieve high performance (avoiding pitfalls of UIWebView), yet they are extremely flexible. Dedicated protocol that describes each table cell separately allows definition of font sizes, text and background colors, number of rows and columns, borders, images, buttons and much more!

Read about the application on iTunes, or see AX4 Tracking in action!

(Video: Watch this video on the post page)

AX4 Tracking

Adding 3rd dimension to the Page Flip effect on iPhone OS

Paweł — Tue, 11 Jan 2011 19:52:25 +0000

(Video: Watch this video on the post page)

3d page flip animation created using cocos2d framework.

My 3d concept of flipping a page is based on its 2d version. We will still reflect points that are in front of the symmetry axis but we will also modify the z coordinate of these points (see picture 5).

Pic.5. 3d version of page flip effect.

To understand the concept, imagine a cylinder with a large radius which is running on the same path as the symmetry axis. When the cylinder touches the paper, it begins to wrap around the cylinder until it reaches the cylinder’s top edge. After that, the piece of paper which has passed the cylinder’s top edge (actually the grid’s vertices that represent that piece of paper) should behave as if they were reflected across the symmetry axis. So the z value of the moveable points should be between 0 and 2*R (R is a radius of the cylinder).

Pic. 6. Cross section of the page wrapped around the cylinder.
The radius of the cylinder decreases in time.

To make the whole effect even more realistic the radius of the cylinder should decrease from its maximum value to zero in time. Below is a piece of code which does all mentioned stuff. In the code I use Vertex and Point data structures. I did an assumption that Vertex and Point represent points in 3d and 2d space respectively. But it’s fair to treat points as vertices with z = 0. So if you see p = 5 * v; it means that only x and y coordinates take part in calculation.

// time is a value from 0 to 1;
// 0 - begin of the effect,
// 1 - whole page has been flipped
void update(float time)
{
    const Point A, B', C, D;  // corners of the animated page (except B')
    const float t = sqrt(time);
    const Point P1 = lerp(B', A, t);
    const Point P2 = lerp(C, D, t);
    const Line line = CreateLineFromPoints(P1, P2);
    const Point N = GetNormalVectorFromLine(line);
    const float maxRadius = 0.5 * pageWidth * pi;
    float R;
    if (time <= 0.5)
    {
        // for the first half of the effect keep a fixed value of radius
        R = maxRadius;
    }
    else
    {
        // in the second half decrease the radius from its max value to 0
        const float s = sqrt( 2 * (1 - time) );
        // note that "2 * (1 - time)" is between 0 and 1, so is "s"

        R = (0, maxRadius, s);      // <=>  R = maxRadius * s;
    }

    const float invR = 1 / R;
    const float halfCylinderCircumference = π * R;    // π ≈ 3.14159
    Vertex v;
    for v in grid.vertices
    {
        const float dist = distance(v, line);
         if (dist > 0)
        {
               const Point p = v - N * dist;
              if (dist <= halfCylinderCircumference)
              {
                     const float alpha = dist * invR;
                     const float sinAlpha = R * sin(alpha);
                     v.x = p.x + N.x * sinAlpha;
                     v.y = p.y + N.y * sinAlpha;
                     v.z = (1 - cos(alpha)) * R;
              }
             else
             {
                   v.x = p.x - N.x * (dist - halfCylinderCircumference);
                   v.y = p.y - N.y * (dist - halfCylinderCircumference);
                   v.z = 2 * R;
             }
        }
    }
}

Summary

This is the easiest 3d version of page flip algorithm I can imagine. It’s not perfect. It’s still have artefacts when viewing in slow motion but when animation is fast enough it looks realistic. The best approach to the page curl simulation is to use cone instead of cylinder (see W. Dana Nuon blog for details). But no matter what solid you use, the idea is the same, only equations may vary.

EduCards

Paweł — Thu, 06 Jan 2011 08:14:15 +0000

EduCards is an educational application which can be used to study foreign languages, remember difficult words and meanings, etc. Educational cards (also known as flash cards) are pairs of words or pictures which are somehow related to each other. Each pair is exposed on both sides of each card. By tapping the card user flips the card and see the other side. While creating EduCards we focused on simplicity and impressive graphics which make learning even more enjoyable.

Features:

simple and learn-friendly interface
beautiful graphics
embedded editor for creating own EduCards packages
easy import and export via e-mail or iTunes
support for text and images
shaking device shuffles cards
tap and swipe to interact with cards
support for unicode characters

For any comments or questions regarding EduCards app please contact us at: educards@nomtek.com.

For any news you can follow us on Twitter:

@krout

@pleszkie

(Video: Watch this video on the post page)

Testing Mobile Web – phones and platforms to focus on

Stefan — Thu, 21 Oct 2010 10:19:26 +0000

Decision on what mobile phones/browsers to support for mobile web page project is not a trivial task. There are quite a lot of mobile platforms, each one with its own default mobile web browser, additionally there exist also third party browsers. The first thing you need to do is to look at some statistics as you have to decide on what platforms to focus on. StatCounter at http://gs.statcounter.com/ gathers web page statistics – we recommend to look in there. It is worth not only to look at worldwide statistics, but also regional statistics where your mobile web page will be mainly targeted – there are huge differences between different parts of the world. We will focus on European region, the results for USA will be similar. We also recommend to use rather line type of stats then bar type, because it gives information about trends, not only about current usage statistics (and you have to remember that you develop for some time in future not for now). So let’s see how it looks in case of mobile web browsers in Europe for September 2010 :

We can see two things: there are a few platforms that we should focus on and that generally web browsers usage is generated by platforms’ default browsers, with exception of third party Opera web browser, which is quite popular. In case of Opera we have two browsers: Opera Mini and Opera Mobile. Opera Mini displays web pages first processed in data centers (to make web page more tolerable for mobile phones and to reduce net bandwidth) thus its support for JavaScript is limited, whereas Opera Mobile is standard web browser and supports JavaScript, Ajax and Html5. We recommend to focus on Opera Mobile in case of more powerful web projects that need good support for those technologies. Summing it up we can define following recommendations:

Platforms that we recommend to focus on

iPhone/iPod (for Europe and North America)
Android (for Europe and North America)
Blackberry (for Europe and North America)
SymbianOS (for Europe only)
Opera Mobile web browser (for Europe only)

Test Phone Recommendations

Here we restrict ourselves to platforms listed above. Selection of platforms/phones to support depends on web technologies and phone’s functionalities you need during development. Thus we propose test recommendations for three categories (each one more restrictive then previous):

HTML 4.1, CSS and JavaScript support
HTML 4.1, CSS, JavaScript support with focus on phones with touchable screens
HTML 4.1, CSS, JavaScript support with reasonable support for HTML 5

Our general test recommendation is to perform the daily development tests on oldest acceptable version of each platform. Acceptable version means such version of given platform whose default browser supports all technologies required for your project. Also we recommend that for critical projects strong (deep) before release tests should be done not only on oldest acceptable version, but also on each available simulator/device. If your project requires lots of phone’s resources, then you should also consider testing on oldest device running newest available version of the platform (for example iPhone 3G with iOS 4) – this is device/platform configuration with worst performance and it might be helpful to assure that your project runs fine on it. Now lets turn our attention to each of the categories.

HTML 4.1, CSS and JavaScript support

Finding and recognizing oldest acceptable version is quite hard and we recommend to use results gathered by John Resig http://jquerymobile.com/gbs/, who needed to recognize supported platforms for JQuery Mobile project. We propose to focus on native column from his table, as its represents default web browser for each platform. Definitely you need to support A-grade platforms from this table: iOS v3.1.3, v3.2 and v4.0 (and newest v4.1); Symbian S60 v5.0; Blackberry OS v5.0, v6.0; Android v1.5, v1.6, v2.1, v2.2. In case of iOS and Android the situation is clear: all A-grade versions run on majority of those platforms devices. In case of Blackberry OS v6.0 runs only on few latest phones so we recommend to support also v5.0 that runs on lot of Blackberry devices that are currently in use. In case of Symbian S60 it is worth to support version 5.0 that runs on touchscreen devices and if you want to support also non touchable devices then you should suport Symbian S60 version 3.2 as well. Additionally you need of course to support latest Symbian^3 platform. As to Opera Mobile you can see from John’s table that latest version 10.0 of Opera Mobile should be supported, previous versions might gave you some trouble. Below is list of all recommended platforms and devices to consider:

iOS
- v3.1.3 :
  - iPhone 3G, iPod Touch 3rd generation
- v3.2 :
  - iPad
- v4.0, v4.1 :
  - iPhone 3GS, iPhone 4
- Recommended test device:
  - iPhone 3G
Android
- v1.5:
  - HTC: Dream (android dev phone 1 is htc dream also), Hero, Magic
  - Motorola: DEXT, ME600, MB300, i1, MB501
  - Huawei: U8230, U8220
  - Other: Acer beTouch E110, Sciphone N19, Dell Mini 3, Samsung M900 Moment, LG-GW620
- v1.6:
  - LG: GT540 Swift, LKH5200 Andro-1G, LU2300 Optimus Q;
  - Samsung: Behold II, i7500 Galaxy, i5700 Spica;
  - Sony Ericsson: XPERIA X10 Mini, Xperia X10;
  - Other: Acer: Liquid A1, SciPhone N21, CSL Spice, Garminfone, HTC Tattoo, ZTE Link
- v2.1:
  - Acer: Liquid E, Liquid Stream S110;
  - HTC: Aria, Desire, Droid Incredible, Legend, myTouch 3G Slide, Wildfire, Google Nexus One;
  - LG: VS740 Ally, KU9500,
  - Motorola: Charm, Droid X, Milestone XT701, XT720, Defy, Flipout;
  - Pantech: Sirius Sky, Sirius Izar, Sirius Vega;
  - Samsung: i5800 Teos, Galaxy A, i9000 Galaxy S, Acclaim, M910 Intercept
- v2.2:
  - HTC: Evo 4G, Desire HD;
  - Motorola Droid 2
- Recommended test device:
  - HTC: Dream (android dev phone 1 if available)
Blackberry
- v5.0
  - models: 8330, 8900, 9000, 9630, 9650, 9700, 9100, 9300, 8530, 9500, 9530, 9550
- v6.0
  - models: 9670, 9780, 9800
- Recommended test device:
  - 8520 – (its not listed above but should have upgrade to v5.0 available)
Symbian S60
- v3.2
  - Nokia: 5320 XpressMusic, 5630 XpressMusic, 5730 XpressMusic, 6210 Navigator, 6220 Classic, 6650 fold, 6710 Navigator, 6720 Classic, 6730 Classic, 6760 Slide, 6790 Surge, C5, E5-00, E52, E55, E71x, E72, E75, N78, N79, N85, N86 8MP, N96
  - Samsung: GT-i8510 (INNOV8), GT-I7110, SGH-L870
- v5.0 (also known as Symbian^1)
  - Nokia: 5230, 5233, 5235, 5250, 5530 XpressMusic, 5800 XpressMusic, 5800 Navigation Edition, C6-00, N97, N97 mini, X6
  - Samsung: i8910 Omnia HD
  - Sony Ericsson: Satio, Viva, Vivaz Pro
- Symbian^3
  - Nokia: C6-01, C7-00, E7-00, N8
- Recommended test device:
  - Nokia C5
Opera Mobile 10.0
- Recommended test device:
  - test on some Symbian S60 device: so again – Nokia C5

HTML 4.1, CSS, JavaScript support with focus on phones with touchable screens

In that case we have to narrow selection of supported platforms/devices. All iOS and Android platforms/devices uses touchscreen so for them the list is the same, in case of Blackberry the list of platforms doesn’t change but list of supported devices shrinks to 4 models. In case of Symbian S60 we have to remove v3.2 completely as it doesn’t run on any device with touchscreen. So below you can see list for supported devices with touchscreen:

iOS
- the same devices as in the previous section (“HTML 4.1, CSS and JavaScript support”)
- Recommended test device:
  - the same device as in the previous section
Android
- the same devices as in the previous section (“HTML 4.1, CSS and JavaScript support”)
- Recommended test device:
  - the same device as in the previous section
Blackberry
- v5.0
  - models: 9500, 9530, 9550
- v6.0
  - models: 9800
- Recommended test device:
  - one of 9500, 9530, 9550 models
Symbian S60
- v5.0 (also known as Symbian^1)
  - the same devices as in the previous section (“HTML 4.1, CSS and JavaScript support”)
- Symbian^3
  - the same devices as in the previous section (“HTML 4.1, CSS and JavaScript support”)
- Recommended test device:
  - Nokia 5230
Opera Mobile 10.0
- test on some Symbian S60 device: so again – Nokia 5230

HTML 4.1, CSS, JavaScript support with reasonable support for HTML 5

HTML 5 is not yet fully defined, so there is no such thing as a browser that fully supports HTML 5. But there are already quite a few well defined functions in this standard and they are already implemented in some browsers. If you want to go into deeper details please use this excellent tool for testing html5 compatibility: http://html5test.com or http://beta.html5test.com. In case of mobile web browsers we only have three platforms that support HTML 5: iOS from v3.1.3, Android from v2.1 and BlackBerry from v6.0. You might also consider to support Opera (please look at: http://www.opera.com/docs/specs/productspecs/), but here we assume that its HTML5 capabilities are not yet acceptable. This limits our choice of platforms/devices to the list below:

iOS
- the same devices as in the previous section (“HTML 4.1, CSS and JavaScript support”)
- Recommended test device:
  - the same device as in the previous section
Android
- v2.1
  - the same devices as in the previous section (“HTML 4.1, CSS and JavaScript support”)
- v2.2
  - the same devices as in the previous section (“HTML 4.1, CSS and JavaScript support”)
- Recommended test device:
  - HTC Desire
Blackberry
- v6.0
  - models: 9670, 9780, 9800
- Recommended test device:
  - one of models available for v6.0: 9670, 9780, 9800

In each case, we tried to choose the oldest model that supports the required platform and functions as a testing device. If you feel a little confused by all this platforms and devices now, please don’t worry . Here is a table that summarizes all of this in reference to recommended devices:

	HTML 4.1, CSS, JavaScript	HTML 4.1, CSS, JavaScript, touchable screens	HTML 4.1, CSS, JavaScript, support for HTML 5
iOS	iPhone 3G	iPhone 3G	iPhone 3G
Android	HTC Dream	HTC Dream	HTC Desire
Blackberry	8520	9500 or 9530 or 9550	9670 or 9780 or 9800
Symbian S60	Nokia C5	Nokia 5230	—

Information about available emulators

iPhone/iPod
- sdk (with simulator)
- the latest version of sdk has only the latest version of iOS simulator but here you can download older versions
- runs only on mac os
- default web browser is available under simulator
Android
- sdk (with emulator) page
  - jdk required – installed by default in snow leopard (try javac -version in cmd)
  - eclipse required – Caution: There are known issues with the ADT plugin running with Eclipse 3.6. Please stay on 3.5 until further notice. We recommend Eclipse Classic (versions 3.5.2)
  - ADT plugin for eclipse
- fortunately sdk (with ADT plugin) allows for having different platform versions installed and switching between them
- there is a default android web browser (called just “browser”) available under emulator
- in android simulator you can configure several devices with different screen sizes, here is an excellent introduction to developing/testing applications on screens with different sizes/densities
SymbianOS
BlackBerry
- in order to browse html pages via browser on the simulator you need to install BlackBerry Email and MDS Services Simulator Package
- separate simulators for each blackberry device (see Simulators section)
- simple post describing how to setup a simulator environment
- has default browser
- connects with internet via blackberry gateway
- BlackBerry simulator is only for Windows !
Opera Mobile
- opera mobile emulator
- dragonfly – excellent tool for debugging

Collection of useful links

Mobile web development and testing in general

Html5

Symbian

Android

Blackberry

Opera Mobile

Other

Mobile Device Emulators

Google TV Application Development

Krzysztof — Wed, 20 Oct 2010 18:03:24 +0000

Current situation

Interactive TV is not a new technology. Software stacks for set top boxes and digital TV standards like MHP, OCAP, MHEG are being developed and used for many years now. These software stacks have well-defined APIs that allow writing applications for TV screens. Example applications are EPGs (Electronic Program Guides) which are embedded into TV sets or STBs (Set Top Boxes). Most of the digital TV software stacks allow to broadcast applications together with video over the air/cable/satellite and bind them to the viewed TV channels/events/programs. For example football transmission event may be broadcast together with an app showing all results in the league – such app would be often accessible by pressing red/yellow/blue or green button on the TV remote controller. After the event is finished, the application would automatically close and would not be accessible any more, making place for apps specific for the next broadcast content. Browsing internet from TV set is also not a new idea – most of the stacks have embedded web browser and STBs can connect to the internet by various means.

So what is new about Google TV

Although Android is not as open as it could be, Google TV will probably be more open than any other significant initiative that the TV world has seen:

TV and STB manufacturers will have better access to the platform’s source code and will be able to contribute to it.
Google TV will support Android Market for downloading and installing applications selected / paid for by the user and created by any third party – in contrast to being limited to the apps provided by the broadcasters. For start, the users will be able to choose among hundreds of thousands of existing Android applications. For example, one thing I already know I’d like to do with my TV is to install existing Android TED application on it and watch TED talks.

This is a huge opportunity for existing mobile/internet businesses, new start-ups and application developers – this is first time app developers will have a mass scale way for their applications to get on people’s TV screens.

Risks

Involvement from Sony gives a great promise, but nobody really knows yet how well Google TV will sell on the market. Google TV will also have to catch up with new TV developments like 3D channels.

TV application development – what is specific?

TV screen is different to mobile and desktop computers, thus the TV applications need to be designed differently. I believe we still have to find the best design patterns for TV apps, but here are some things that already come to mind:

Like in the mobile world, TV apps will probably be used mostly for consuming the content (watching videos, reading news, blogs etc). Content creation (like writing blogs) is not very convenient on TV even with full-keyboard remote controller, so such features should be simplified on TV and implemented in desktop versions of the services.
Interestingly, like on the mobile screen, the TV screen should not contain too much content on single view. This is because of the high distance from TV to the user. Also, the user may be distracted by other activities he/she is performing at the same time in the same room, so must be possible to easily focus on the actions in the app.
Unlike in mobile touch-screen world, on TV it will be difficult to scroll the content, so all important info/options should be available on one screen.
TV apps should provide less interactivity and be more automated. For example, after user finished watching the video, the next video should start automatically. TV app user expects it to be working ‘in the background’.
TV app designers should consider the possibility of watching current TV channel and using the app simultaneously – they should devote part of the screen to the video even if the app is performing completely different tasks like instant messaging.

Consequences

Some people already say that Web is Dead – the world is going to use services not via Web but via applications that are better fit for purpose. TV applications have not been a huge success so far. TV screen is different than other platforms and we still have to discover how we want to use the applications on it. Google TV will unleash developer’s creativity and provide them with instant feedback from the users, who will be able to vote with their remote controllers by choosing apps to install. Interesting possibilities and era of TV innovation is coming!

Hint

If you need to hire a team of Google TV developers, graphics artists and usability experts? Please contact Nomtek with this Contact Form.

Implementing 2D Page Flip effect on iPhone OS

Paweł — Wed, 29 Sep 2010 12:51:43 +0000

(Video: Watch this video on the post page)

2d page flip animation created using cocos2d framework.

Page flip (or page curl) effect is very popular on the touch devices. It’s used as a transition effect between two views, often found in electronical books to move to the next page. There are many techniques of doing page flip effect. I would divide them into three groups:

2d animation
3d animation
animation based on set of images

In this article we will focus only on the first technique. I will show you how to make a simple page flip on a flat plane (2d) (see video above). A 3d version of that effect works similar but is more complicated and will be soon explained in a separate article. If you are interested in the approach based on the set of images you can visit Darknoon blog for more info.

A flat plane

The easiest algorithm that came to my mind is based on animating vertices of a grid spread across a page of a virtual book – see picture 1.

Pic.1. Two pages of a book. Right page is covered by a grid.

First you need to draw a bottom page of your book and then the grid covered with a texture of the top page (see picture 2). At this point I assume you know the basics of any graphics framework (e.g. OpenGL) and know how to draw a textured triangle. I’m not going to explain it in this article. All codes shown in this article apply only to update the effect and not to draw it.

Pic.2. Page flip in action.

All the rest of the algorithm consists in moving vertices in a proper way. So in every frame we will visit all vertices and update their position. In a pseudo-code it will look like:

Vertex v;
for v in grid.vertices
{
    update v;
}

To find out how to move vertices to simulate folding paper have a look at the image below (picture 3). As you can notice we will treat the edge of the folding page as a symmetry axis around which we will reflect vertices. Which vertices need to be reflected? All that are in front of the symmetry axis (or behind – depends on your line equation). In the picture 3, N is a normal vector of the symmetry axis which indicates the front of the axis, C is a sample point on the front side and C’ is a reflected point.

Pic.3. The edge of the folding page with the symmetry axis.

Updating vertices with reflection included is shown in the following code:

Line line;
Vertex v;
for v in grid.vertices
{
   const float distance = PointToLineDistance(v, line);
   if (distance > 0)
   {
      reflect(v, line);
   }
}

PointToLineDistance is a function which returns a distance between the line and the vertex v. When distance is less than 0 it means the vertex is behind the line. reflect function does a reflection of the vertex v across the line.

The final effect can be achieved by moving and rotating the symmetry axis in time (see picture 4).

Pic.4. An algorithm of animate the symmetry axis.

To move and rotate the symmetry axis properly let’s mark two points: P1 and P2. In every frame we will create the symmetry axis based on these points. The position of the point P1 will be determined by a linear interpolation between points B’ and A. Similar with the point P2. We will interpolate its position between points C and D. So why did we get point B’ instead of B? It’s because if we got point B our symmetry axis would be always vertical. Vertical symmetry axis is not bad but effect looks nicer if the symmetry axis is oblique.

The whole update function of two-dimensional page flip effect can look like the code below. The update function should be called only for the duration of the effect with the argument progressFactor with values between 0 and 1 (0 means the begining of the effect, 1 means the whole page has been flipped). There is a lerp(A, B, s) function used which interpolates A towards B by s. s is clamped between 0 and 1. When s = 0 it returns A. When s = 1 the result is B. When s = 0.5 it returns the average of A and B. lerp(A, B, s) can be evaluated to the following form: A*(1-s) + B*s.

A sqrt(x) is a square root of x. We use the sqrt function to make the symmetry axis moving faster at the beginning of the effect and slower at the end. Try to experiment with the s value, pass the result to the lerp function and see what you get. Note that both s and progressFactor values have the range from 0 to 1.

// progressFactor is a value from 0 to 1
void update(float progressFactor)
{
    // play with other values:
    // e.g.: s = progressFactor;  or  s = progressFactor * progressFactor;
    const float s = sqrt(progressFactor);
    Point P1 = lerp(B', A, s);
    Point P2 = lerp(C, D, s);
    Line line = CreateLineFromPoints(P1, P2);
    Vertex v;
    for v in grid.vertices
    {
        const float distance = PointToLineDistance(v, line);
        if (distance > 0)
        {
            reflect(v, line);
        }
    }
}

This is the whole magic of the 2d page flip effect. Note that only x and y point’s coordinates are modified. The z coordinate (depth) stays unchanged.

Summary

Algorithm presented in this article is very easy to understand and implement. If you still don’t understand how it works or have any doubts, it’s because of my inability to share technical knowledge:) If in doubt, feel free to leave a comment. The page flip effect presented in the video above is not perfect and can be improved in many ways. Below you have some hints on how to tweak the effect.

You don’t need to update all vertices all the time (in the first stage of the animation most of them stay unchanged).
Play with grid’s dimensions and find values that best meet your needs
In 2d case you don’t need to use a grid at all, it will be much faster if you use just a few triangles (at least four I guess) but it’ll be much more difficult to draw them properly.
Take into account a density of the grid, if you animate only right side of your book then left side doesn’t need to be covered by grid (or grid can be thinner on this side).
Think about adding some shadows/lights to make the effect more realistic (I would try to write a pixel shader or play with a shadow texture).
Note that the effect may look different on different platforms as it depends on many factors (e.g. camera settings, projection matrix, viewport resolution, etc.).

NOMTEK delivers iPhone and iPad App for MyHammer.DE

Tomasz — Wed, 15 Sep 2010 10:38:31 +0000

MyHammer.de is an online directory of small businesses and skilled individuals that can deliver services such as construction, plumbing, gastronomy, transport and many more. With over 6 million searches per month, MyHammer is the number 1 website for finding tradesmen and service providers in Germany, Austria and the United Kingdom.

Now with the help of the application written by NOMTEK it is possible to search the database using an iPhone or iPad in a convenient way.

Click Here to See the App in the Apple App Store.

New version of RKFinder demoed on iPad

Tomasz — Fri, 18 Jun 2010 17:10:32 +0000

The IPhone App we wrote for Restaurant-Kritik.de now runs natively on IPad. Check out this YouTube video (in German language):

(Video: Watch this video on the post page)

Working with pickers

Paweł — Wed, 02 Jun 2010 08:39:17 +0000

Recently we had to create a registration form which allows you to set some different data like country, language, first and last name, date of birth, etc. It’s not a problem to edit text-like properties. All you need is to create a UITextField. Everything else is done automatically. When a text field gets a focus (or becomes a first responder – using iPhone‘s language) a keyboard panel appears at the bottom and you can change the field’s content.

But for some other fields – I’d like them to behave like combo boxes. Instead of typing the whole name of a country I prefer to select it from the list. Cocoa Touch framework doesn’t have a combo box – known from desktop apps – but it has something called UIPickerView. A UIPickerView is in fact a kind of combo box adopted to a multitouch device. So is UIDatePicker. The problem I faced using iPhone’s pickers was how to link them to the text fields. I found a hacky solution which consists in using a UIButton instead of UITextField and showing up a picker manually when the button is tapped. But there is much better and proper solution – inputView.

InputView is a property of UIResponder class – so also of UITextFiled class. When you set it to any custom view that view will appear any time your control becomes a first responder. Cool and smooth solution, isn’t it?

Below is a a piece of code of hooking up a UIPickerView to the UITextField.

UIPickerView *countryPicker = [[UIPickerView alloc] initWithFrame:CGRectZero];
countryPicker.delegate = self;
countryPicker.dataSource = self;
[countryPicker setShowsSelectionIndicator:YES];
countryTextField.inputView = countryPicker;
[countryPicker release];

It’s all you need to show up a UIPickerView when you tap on a text field. Handling picker’s delegates is very easy.

For the UIPickerViewDataSource you just need to give a number of rows and columns of the picker view.

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 1;
}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    return countries.count;
}

UIPickerViewDelegate is used to:
- tell the control what values should be displyed at each row/column
- update the text field with already selected value

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    return [countries objectAtIndex:row];
}

- (void) pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    countryTextField.text = (NSString *)[countries objectAtIndex:row];
}

Of course you can assign your custom view not only to UITextField objects but also to other UIControl-derived objects (UIControl inherits from UIView and UIView from UIResponder).
If you want to use the inputView property with buttons you have to create a new class that derives from UIButton, make inputView property writable and override canBecomeFirstResponder method (see the code below).

Header file

@interface CustomButton : UIButton
{
    UIView *_inputView;
}

@property (nonatomic, retain) UIView *inputView;

@end

Source file

#import "CustomButton.h"

@implementation CustomButton

@synthesize inputView = _inputView;

- (BOOL) canBecomeFirstResponder
{
    return YES;
}

@end

Tip:

If you wonder how to display a toolbar or any other view above your keyboard or picker (see picture above) then have a look at inputAccessoryView – another property of UIResponder class. It works exactly the same as the inputView.

The sample code for this article can be found here.

NOMTEK | tailor made Apps for iPhone, Android, Blackberry and other platforms

Flipcards – Flashcard app for training memory

AX4 Tracking application for AXIT AG released on AppStore!

Adding 3rd dimension to the Page Flip effect on iPhone OS

EduCards

Testing Mobile Web – phones and platforms to focus on

Platforms that we recommend to focus on

Test Phone Recommendations

HTML 4.1, CSS and JavaScript support

HTML 4.1, CSS, JavaScript support with focus on phones with touchable screens

HTML 4.1, CSS, JavaScript support with reasonable support for HTML 5

HTML 4.1, CSS, JavaScript

HTML 4.1, CSS, JavaScript, touchable screens

HTML 4.1, CSS, JavaScript, support for HTML 5

Information about available emulators

Collection of useful links

Mobile web development and testing in general

Html5

Symbian

Android

Blackberry

Opera Mobile

Other

Google TV Application Development

Implementing 2D Page Flip effect on iPhone OS

NOMTEK delivers iPhone and iPad App for MyHammer.DE

New version of RKFinder demoed on iPad

Working with pickers