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 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!
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 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.
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
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:
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)
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
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.
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.).
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.
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.
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.
UIPickerViewDelegate is used to:
- tell the control what values should be displyed at each row/column
- update the text field with already selected value
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
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.
Restaurant-Kritik.de is one of the biggest german restaurant rating websites. We provided them with an App that lets their users find the most suitable restaurant nearby using a number of search criteria.
Read more about our application on iTunes.
Check this YouTube video (in German):
. Here is a table that summarizes all of this in reference to recommended devices:
