This is not-so-technical presentation and main info about engine will come later as separate post.

Here are some thoughts on future shift from old html web sites to new native application format, which we are experiencing at mobile segment right now. 

Old approach to global web was simple – the bunch of static pages with links between them. It seemed at that ancient times that everything can be filled in that concept. But when site owners started to give users a lot of functionality that foundation began to shake. HTML was designed to write the books but users now want complex services. Nowadays we see dynamic pages everywhere with lots of AJAX, JQuery, etc. Single-page web interfaces is now wide spread common practice. In truth it is an effort to create the application inside the web page using outdated methods and instruments.

And here comes mobile age! Mobile devices exposed new problems of html web-format – complex pages are too heavy for mobile, interfaces are not fast enough, interaction is limited. Facebook tried to create their first mobile client as HTML5 – but later Zuckerberg said it was a mistake. So they switched to native applications for iOS and Android. And it happened not because HTML5 was not ready at that time, imho. I think it will never be ready as true cross-platform development solution for complex apps.

At mobile field we experience the switch from web-sites to native applications more clearly. What the consumer wants now is not just mobile version of site, but true mobile application (people don’t really surf on smartphones).

In 2014 only 14% of user time on mobile devices is spent in the web browser (source) and this percentage is reduced every year

At desktop segment the switch is not so obvious but there are some movements here too. For example, i have Evernote as MacOs application, where i could use it as a site instead. And i imagine almost every serious site would benefit from conversion to native app form.

So what the problem? There are several main factors which postpone the shift:

The main problem is high development cost. There are no true cross-platfrom development solutions for the most platforms and you must code for every platform separately. And good desktop/mobile developers are not cheap. I work in that direction attempting to create some framework that has ability to create apps for mobile and desktop systems in one shot. I will write separately about it when at least one solid product will be available on market with support of wide range of systems. Im sure there is some work in that direction not only on my part.

The second missing link which separates now web-pages from the apps is the lack of content-based search inside the applications. Index robots now can’t scan mobile apps and you can’t see the results in Google search. But that will change soon! Google made first move in right direction and some parts of Android apps can be indexed by their search machine if app developer provided certain list of links inside the app. Here is more information about it – App Indexing. I did not test it yet – but it looks promising and i will definitely try it in action.

The last step is the instant installation of new apps. At the moment we used to see the apps as second step: we have the couples – the site and the mobile client app for that site. Common use case is that user is already aware of what he want to install and so he can endure some installation waiting. But if we consider the app as full replacement of site, the installation process should be reduced to almost nothing. I think its not so serious problem as a production cost. As bandwidth goes up installation time will be reduced and I’m sure platforms will come up with some fast installation solution. Application managers should handle it on modern mobile platforms like iOS, Android, etc. As for desktops – Apple has App Store and there were some Click-to-install tries from Microsoft for their .Net apps.

The last concern is the quality of apps. We have a lot of crappy sites all over the web and user don’t want to install such ‘crappy’ apps into the system. Or at least we want to have strong sandboxing and easy way to clean up the mess. Apple has complicated approval policy to prevent such bad quality apps from their market. Its good for clients in some way but its nightmare for devs. In any case this is some problem to solve on the way to new ‘app-sites’ world.

In any way you can expect to see more and more apps in near future. The apps which will take the place of web sites.

My new tool at android play market – you can find it here. This is stylish planner/tracker for your trip’s budgets – planning and logging as one fast and fancy instrument.

More information and screens can be found below…

As this is beta version – the following details were modified from version 1.0 and will be changed in future to reflect recent updates.  

Typical workflow is the following – you create new trip and add planned expenses (which are divided by simple categories and are very easy to add). You can create several versions of the same trip and compare final estimated values. After that you switch from plan mode into ‘spending’ mode and log actual expenses. These modes are highlighted by different colors (orange for plans and blue for real expenses) to make it easy to distinguish from each other.

When you enter price you can also provide text comment, multiplicator, tax/discount and specify that expense is shared between several people. This data can be modified later in the list of expenses.

In main settings you can add the list of money sources and track their balance. Such sources also can have values of another currency. When you enter tracked expense the value will be automatically subtracted from selected source.

The app uses gps sensor to log expenses locations. This gives you ability to plot tracked points on the map and find the places you liked later. Also you have ability to make photos and attach them to expenses (such as receipts and so on).

You have a lot of view modes for the lists of expenses. Two differed styles for the lists, several types of plots and special map view. The list can be filtered by main category sections, users, money sources. Also there are grouping options – you can group data by days or categories. See more screens below at updates section.

The app automatically converts expense values into base currency using public rates from open sources (like European Central Bank, etc) which are updated every day (internet connection is required). You can also set your fixed currency rates for each trip budget.

As for design – i tried to make it as modern looking as possible (while maintaining the best usability). There is support for the tablets – special horizontal layout when upper panel shifts to left side to get better scrolling area. Note that design is targeted for retina-like devices as it has thin fonts.

But also i added a bit of customization. At the moment you can select one of high res backgrounds (travel related). The image has slight movement as well as minor parallax effect.

Incoming updates will also provide cloud synchronisation of trips and expenses.

You can switch between interface languages at real time. At the moment supported languages are: English, Russian, Español, French, Dutch, Italian. If you found some mistakes in translation or want to help with translation to your language – go to the end of this document – there is information about crowd translation there.

Application is powered by my cross-platform engine – so iOS release is coming soon enough (as soon as beta ends).

THE UPDATES:

v1.007

The count of supported currencies was greatly increased (and there are several sources now). You can now enter custom currency exchange rates for each trip.

The currency selectors were considerably changed – now its alphabetic list and the most used currencies will go up to the top of the list for easy usage.

App now uses standard android keyboard (the ‘custom’ keyboard was there as part of engine – now it should support standard android keyboard).

Also you can delete old trips now (long press on trip list to see delete dialog).

v1.010

For better usability at horizontal layout the design has been refactored. When your device is landscape oriented the upper bar moves to left side to make the scrollable area fit all height of the screen. So the expense entry keyboard is supposed to fit without any scrolling.

The settings now have new ‘suggestions’ section from which you can go to the forums and write your ideas. Big thanks for all who will do it.

v1.012

This version introduces two major improvements – multiple trip participants and money sources.

Money sources contain such types as debit cards, credit cards and cash. When you log expense in ‘real’ spending mode the amount will be converted into currency of source automatically and will be subtracted from selected source balance. This will help to track your estimate sources during your journey.

Each trip now has additional section in options where you can add the participants to the list.

When you entering expense you can select who was participating in each spending action. Its also possible to set for who you have to pay if you have to pay not only for yourself. For example, if you are travelling as couple with pair of your friends, you still have to pay for your companion only – which makes 50% of 4 ppl expense and this is possible to track easily now. You also can select money source as DEBT from another participant (the list to track your debts will be added as well).

The list of expenses was improved to support new expense parameters – you can see expenses grouped by participants (to see overall spent amount and total debts) and also check impact on your money source in corresponding section. Clicking on each source or participant will provide the list of connected expenses.

v1.013

New version adds ability to add custom expense categories. You can find new configurable list inside application settings. There are large set of possible icons, but if you think there is something missing – feel free to write below in comments.

There is also new ability to hide selected categories from front panel.

v1.014

+ Ability to attach photos to expenses
+ Grouping by days and categories in expense lists
+ Two types of time-based graphs for expenses
+ Ability to change date of expense

1.015

+ support of immersive mode under Android 4.4 with translucent menus
+ new functions for money sources (add balance, delete)

1.016

+ New languages: español, french and dutch
+ Ability to enter fraction of expense value
+ Fix for crash while setting currency rates
+ Application now has default cache for currency rates
+ Clicking on currency at main tabs opens currency options
+ Additional exit button under Immersive mode
+ Modification of tabs for better usability

1.018

+ Italian language

1.019

+ New design and functions of expense view
+ Ability to view expense on the map
+ Ability to delete trip participants
+ Main sections are automatically reordered by usage frequency
+ Fixes for italian localization
+ Minor stability fixes

1.020

+ New view mode for expenses list – view expenses on map. We are using Nokia maps here.
+ Ability to modify category of expense.
+ Click on maps will open system map or navigator. So now you can build routes to tracked locations using your favourite gps-navigator in just couple of clicks.
+ Optimizations for large lists of expenses should really improve UI speed on not-so-fast devices.

INCOMING FEATURES

Here is small preview of what coming inside next updates.

– Cloud synchronisation

– Export of trip plan / log

– Additional trip options

– Additional statistics

– New tools for sharing with friends

INSTALL

ADDITION

TripBudget was featured by XDA – http://www.xda-developers.com/android/keep-your-travel-expenses-under-control-with-tripbudget/  You can join the discussion here: http://forum.xda-developers.com/showthread.php?t=2644669

TRANSLATION

If you want to help with crowd translation of TripBudget to your language – you can help using translation page. THANKS A LOT. Current state – RU, ES, NL, FR, IT langs are already at market.

NOTE:  Any reports and suggestions are highly welcome in comments.

What is parallax effect? There are some more complex definitions but i would define as simple as the following – you move your phone/device in space and some objects inside your application are shifting accordingly to compensate this movement. This allows to create some strong feeling of 3d interface as well as nice interaction effect.

As good example you can check out my live wallpaper (link on market), which is using this effect while rendering particle system of moving objects. More information about this application can be found here.

To create parallax effect we need to grab data from accelerometer sensor (as i found out gyroscope is not present at majority of phones while accelerometer gives enough of data to be happy with it), convert sensor data to relative rotation angles and shift some parts of application interface accordingly. 3 steps:

1. Get data from accelerometer

You can read here about usage of motion sensor inside android sdk. (I provide some code here for Android just as sample – approach should be same for iOS)

sensorManager = (SensorManager)context.getSystemService(Context.SENSOR_SERVICE);

gravitySensor = sensorManager.getDefaultSensor(Sensor.TYPE_GRAVITY);

sensorManager.registerListener(this, gravitySensor, SensorManager.SENSOR_DELAY_FASTEST);

As any measurement system sensor has noise and you can filter input data using one of signal filters such as low-pass filter – but the most simple way to do it is the following:

static double gravityFilterK = 0.8;

gravityVector[0] = gravityVector[0] * gravityFilterK + (1 – gravityFilterK) * x;

gravityVector[1] = gravityVector[1] * gravityFilterK + (1 – gravityFilterK) * y;

gravityVector[2] = gravityVector[2] * gravityFilterK + (1 – gravityFilterK) * z;

Filtering constant can depend on sensor frequency, but the tricky part is that you cant get frequency as some property and have to measure it directly. Speed can vary from device to device considerably from 7 Hz to 100Hz (source). I found that under 25Hz effect becomes less entertaining and should be disabled, unless you make prediction approximation and perform heavy smooth on input data.

2. Convert accelerometer data to rotation angles

Second task is to get device orientation angles from gravity vector. I use the following formula to get roll and pitch values (desired angles):

roll = atan2(gX, gZ) * 180/M_PI;

pitch = atan2(gY, sqrt(gX*gX + gZ*gZ)) * 180/M_PI;

Note that if device orientation was changed to landscape mode you need to swap roll and pitch values. Also atan2 function can produce 2pi jumps and we can just ignore such events. We dont need absolute angle values – only difference with previous device state (dgX, dgY):

// normalize gravity vector at first

double gSum = sqrt(gX*gX + gY*gY + gZ*gZ);

if (gSum != 0)

{

    gX /= gSum;

    gY /= gSum;

    gZ /= gSum;

}

if (gZ != 0)

    roll = atan2(gX, gZ) * 180/M_PI;

pitch = sqrt(gX*gX + gZ*gZ);

if (pitch != 0)

    pitch = atan2(gY, pitch) * 180/M_PI;

dgX = (roll – lastGravity[0]);

dgY = (pitch – lastGravity[1]);

// if device orientation is close to vertical – rotation around x is almost undefined – skip!

if (gY > 0.99) dgX = 0;

// if rotation was too intensive – more than 180 degrees – skip it

if (dgX > 180) dgX = 0;

if (dgX < -180) dgX = 0;

if (dgY > 180) dgY = 0;

if (dgY < -180) dgY = 0;

if (!screen->isPortrait())

{

    // Its landscape mode – swap dgX and dgY

    double temp = dgY;

    dgY = dgX;    

    dgX = temp;

}

lastGravity[0] = roll;

lastGravity[1] = pitch;

So we have angle shifts inside dgX, dgY variables and can proceed to final step.

3. Perform interface shift 

And as final step we need to shift some elements inside application to compensate device rotation. In my case that was particle system – for each particle we perform x/y shift proportionally current particle depth (if it’s 3d environment you can also perform some rotations to make ideal compensation) .

// Parallax effect – if gravity vector was changed we shift particles

if ((dgX != 0) || (dgY != 0))

{

    p->x += dgX * (1. + 10. * p->z);

    p->y -= dgY * (1. + 10. * p->z);

}

Only practice can help to find optimal coefficients for such shifts which are different for every application. You can shift background details or foreground decorations.

Couple of small details: sensor events and rendering should be done in separate threads. And when device goes to sleep you should unregister sensor listener (and so dont waste battery).

Any feedback is welcome in comments.

Current implementation of WebGL is using GL ES 2.0 – the same as all mordern android / iOS phones/tablets. So i decided to test if i can use these shaders at mobile applications – and tested their performance on Sumsung Galaxy Note II. Of course i tested only relatively simple shaders expecting them to run slow…

The results were quite disappointing to me. Only very very simple shaders were working fine. More complex shaders (which were the point of interest) were running at 1 fps or less. Looks like even such modern phone as Note II has no driver optimization for such shaders and even more – some shaders became corrupted – see next picture:

So today unfortunately we cant use such shaders at mobile production. But i hope situation will change in future.

UPD (28.12.20013): I performed some tests on Google Nexus 5 phone and got slightly more positive results. Not trivial (but not so complex) shaders began to work – not so smooth as it should be but fps is above 20. I even added 2 example experimental effects to Alive numbers 2 alive wallpaper on Android (they are visible in elite mode as bonus experimental content). Under Samsung Note 2 these animations do not work at all, but under Nexus 5 they run more or less.

Later i will perform some test on new IPad mini with retina screen. May be it will show even better results. I expect tablets to show better results.

Main key features:

• Full screen (Use whole screen of device).
• Minimalism. No heavy shadows, bezels, gradients, etc. Borderless buttons.
• A lot of white space.
• Key color.
• Single font (but dynamic size).
• Minimalistic light single-color icons.
• Dynamic layout with no fixed hardcoded sizes.

Specific Apple features:

• Translucent elements hint content behind them. And here they mean specific blurred gradients.
• Control center could be swiped from bottom of screen.

As you see – only last block of features is related to actual new apple platform. First list can be easily applied to Android or WP. So now apple tries to reach main market tendency to minimalistic design. Not something new. I wonder for how long this fashion will last, but at the moment that style is new standard across all mobile devices.

This brief is based on “Designing for iOS 7” and “iOS 7 UI Transition Guide” official documents from apple development  site.

Download stylish multiplatform timer with synchronization between devices. 
You can control your timer from your PC, your iPhone or iPad, your android tablet and more. 
And even get more fun sharing timer with your friends.

http://synctimer.calibvr.com/