Thursday, December 27, 2012

Tablet interface jQuery Mobile with Android Holo inspiration

In an earlier article of mine I laid out an Android Holo inspired theme for jQuery Mobile. This theme appropriate for smartphone form factors, but it lacks some support for tablets and TV-dongles running Android.

As of version 1.2.0 jQuery Mobile (JQM) still does not officially support tablet interfaces. There is a splitview plugin for JQM, but real support will only happen in version 1.2.1 of JQM. At this moment you will have to alter the JQM code base in order to make the splitview work. This is the reason that I used a different approach concerning the tablet interface. The source I used to make the solution I needed can be found on YouTube.

There is still one con to this solution. Although the interface looks like its splitted, you cannot scroll them separately. See the screenshots below to see the tablet and smartphone interface.





The screenshots are taken from my discontinued app called DroidPapers.

This is what you need (all will be included in the download below).

  • jQuery Mobile 1.2.0 framework.
  • Modified (minimum) stylesheet files.
  • Android Holo inspired theme for JQM.
  • Roboto Regular (normal text) and Roboto Thin (headers) fonts.
  • For the convenience i added PhoneGap (Cordova) 2.2.0. 
The download is complete and functional for web-apps that are deployed on the Android (2.3+) platform. I cannot guarantee that it will work in every browser or on Android versions lower than 2.3.

What does the download features?

  • Holo inspired theme, dark color (light also included, but you will have to adjust the title with Gimp, xcf file included).
  • More Android like titlebar.
  • Smartphone and tablet interface in one app (it detects screen size).
  • Android Roboto fonts for the headers and normal text.
  • Correct back-button behavior (Phonegap required for that one).
  • Example index.html (you can upload it to a webserver and test it with Google Chrome).

What did I change?

This is so you can secure it before upgrading to a newer platform of jQuery Mobile. The lines in the files that have /* Teusink.org */ are modified by me.
  • AndroidHoloDarkLight.css. It is a themeroller theme, but with some small modifications.
  • jqm-docs.css. CSS file copied from the source it self (JQM), but with small modifications.
  • jquery.mobile.structure-1.2.0.css. Official JQM css file, standard included in the framework.
So If you are curious what I changed, feel free to screen the code. I did not minify the files, so you can easily edit if needed. Want to minify the files? Check here.

And here is the download link to the interface package. Click here to get it from GitHub.

Thank you for reading my blog!


Copyright (c) 2015 Joram Teusink

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Thursday, September 27, 2012

Google Cars and its potential impact on society

Google Cars, a project that is being worked on by Google. Perhaps you already knew this, or perhaps you didn't. In short, Google is working on a system where cars don't need human drivers anymore. You can read more about this on the link below this page.

The reason I wanted to write a blog about Google Cars is because very recently I saw a news headline stating that Google has the ambition to market the system in roughly five years. That is tremendous fast, especially if you consider that, as Wikipedia also states, the laws in many countries are not ready for this kind of technology.

What I want to talk about is my vision of the possibilities such system can have for societies and the impact it could have on the way how we look at transportation.

A Day Made Of Glass

I recently saw a couple of demo videos with a futuristic view on technology and our way of life made by the company Corning. Of course I had a wow-feeling and was marveled about the visions people can have about the future. And thank god, for once, not so apocalyptic.

There was only one moment though that I thought could be a bit more 'futuristic'. And that was the moment that a person's steps in to the car and, manually, drives off. Seeing these videos and reading about near-future realistic technologies I realize that the future may be far more technological advanced or different, then we now even can imagen.

Google Cars and its potential impact on society

Driverless cars could solve many problems we face today concerning accidents, environmental pressure, traffic jams, parking problems and perhaps the stress people feel during the time they spend in their car.

Accidents

Accidents caused by alcoholism, mental illness, and stress is about 90% (source)! When cars operating without drivers are a common thing the number of accidents can potentially drop 80%, and probably even more (80% for facturing in errors by computer software).

The financial benefits of simply this fact are bigger then what the system even might cost. The future old-way of cars would almost be criminal to permit. There would be less accidents, less damage repairs, less human (fatal) injury, less medical healthcare, and less costs for insurances for either the car and person. And I am not even talking about the time-savings of the paperwork related to car accidents.

Environmental pressure

I am not a kind of person that could be described as a "tree-hugger" but the ecological environment we live in is rather important to me. Why damage our precious planet when we have the technology in our reach to improve our environment or at least to lessen the damage?

Many people that drive a car, me included, like to drive fast (within the boundaries of the law of course). Like to be the first that gets away when a traffic light jumps to green and likes to drive the maximum speed allowed, knowing that it will probably save only a couple of minutes, increases changes for accidents and definitely costs more fuel.

Cars that are driven automatically will drive at optimal speed at a steadier pace and will actually adjust that speed when its surroundings (more/less traffic) change. More optimal driving is less pressure on the environment because of more efficient use of the resources. And that also applies to electric cars which electricity is generated by power-plants that run on coal or gas.

Traffic jams

The amount of cars probably won't be less than it is today and therefore long rows of driving cars are still going to be a daily view on the road. But we can't speak of traffic jams. Every car is going to pick its optimal side on the road, cars will communicate with each other, drive more closely together, less accelerating and less braking. Cars can even anticipate on situations far ahead so that the right track and speed can be decided.

And as a driver you won't have to worry about the traffic and can relax or work during your ride.

One additional positive side effect is that the automated cars can respond and act accordingly to vehicles from police departments, hospitals and fire-stations. Traffic jams are no longer an issue then.

Parking problems

Problems concerning parking your car are increasing almost daily. Everyone wants to park near their destination and are sometimes stressed about finding a spot. Not to mention the loss in time and the pressure of the amount of cars in rather small centers of cities.

At this moment it is still obligated, even in the countries where Google lobbied to change the laws, to have a trained driver behind the steering wheel. I can imagen that when the society is more used to this form of transportation, the obligation of a trained driver in a car will be history.

That said and the assumption it will change, no one has to worry about parking their cars anymore. Just step out your vehicle at your destination and the car will find a parking spot by itself. When you are about to leave for home, you can summon your car by your phone, glasses or perhaps your watch and you are picked up at the place you are or want to be picked up.

Knight rider anyone?

Future bit farther away

It's even thinkable that in a future farther away that personal vehicles are simply gone. Human population is still growing and cities are getting bigger and bigger. It could be socially irresponsible to maintain the current situation we are used to now. I would not be surprised that it will eventually be even forbidden to drive your own car. Despite that there are many people that like to drive their car for their hobby.

With automated cars its possible to share them easily and deploy the cars far more efficiently. Perhaps one public car to every two households, instead of the current two private cars for every one household.

Not perfect just yet

The technology is not perfect just yet. Extreme weather conditions are not very well worked out, as stated by Google (think of snow and heavy rain). Besides that the law in many countries have to be changed on behalf of driver-less cars and the fact that people actually can call again in the car, even non-handsfree.

I, for sure, will switch to driver-less cars when they are affordable. The pros weight heavier then the cons for me.

Google Cars at Wikipedia: https://en.wikipedia.org/wiki/Google_driverless_car

Thank you for reading my blog!

Wednesday, September 26, 2012

Android Holo-inspired theme for jQuery Mobile

Recently I have created an app for Android with HTML5, CSS3, and jQuery Mobile. I soon found out that the standard theme of jQuery Mobile is much like of an clone of iPhone or a variation of it.

Then I decided that I wanted to create a theme that is much more like Android Holo theme. That theme was first introduced in Honeycomb and perfected in Ice Cream Sandwich and Jelly Bean.

The theme isn't an exact copy of Holo, but is inspired by it in terms of color scheme, fonts, and the corners for example. To make sure the theme can easily be ported to newer versions of jQuery Mobile, I basicly only changed the color's and font. The font is, obviously, Roboto, and to be more precise, Roboto Regular and Roboto Thin.

See the screenshot below. It has three styles: Holo Dark, Holo Light and Holo Light with Dark Bar.



In summary, what's in the package:
  • Holo theme colors:
    • Used from 1.0.1 till 1.3.1:
      • Roboto: 177BBD / 23,123,189 (dark cyan)
      • Charcoal: 222222 / 34,34,34 (dark grey)
      • Honest: 33B5E5 / 51,181,229 (cyan)
      • Imdur: 555555 / 85,85,85 (grey)
    • Used in 1.3.2:
      • Roboto: 0099CC (dark cyan)
      • Charcoal: 222222 (dark grey)
      • Honest: 33B5E5 (cyan)
      • Imdur: 555555 (grey)
      • Grey: 696969 (dim grey, action bar)
      • Grey: CCCCCC (border)
      • Grey: F9F9F9 (background)
  • Roboto Regular font.
The download RobotoFonts contains the fonts and its css-file (stylesheet). The other downloads for JQM contains the theme as css-files (compressed and non-compressed).

Extract the folders and load the stylesheets like below (change version number accordingly).
<link rel="stylesheet" href="web-holo/AndroidHoloDarkLight.min.css" />
<link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="roboto/fonts.css" />

Make sure the fonts are loaded last.

For jQuery Mobile 1.3.2: Get it here.
For jQuery Mobile 1.3.1: Get it here.
For jQuery Mobile 1.3.0: Get it here.
For jQuery Mobile 1.2.0: Get it here.
For jQuery Mobile 1.1.1: Get it here.
For jQuery Mobile 1.0.1: Get it here.
For Google Roboto Fonts: Get them here.

Feel free to use the theme, edit it, redistribute it, etcetera. If you have a nice new version please let me know so I can fine-tune the lay-out of my app(s) too. Thanks in advance!

Hope you enjoy it!

Thank you for reading my blog!

Copyright (c) 2015 Joram Teusink

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.