Monday, July 25, 2016

What Google related Web Service APIs are there in Intel XDK? - Part 1

The version I have is Intel XDK 3400. In the Intel XDK user interface, I have basically Google Analytics API and Google Places API.

The next image shows what these API's can provide for you.


GoogleAPIinIntelXDK.jpg

Google Places allows you to query place related information. Geographical references, points of interest, etc.

In order to use these API's you need to get the API key. Here is the type of detail you should have to track page views in your blog, for example how many page Views your blog, or article have been recorded.


GooglePageViewTrack_03.jpg

Here is the blog post article that I am planning to track in my next post:

 














GooglePageViewTrack_01.jpg

Keep watching this URL for updates on this topic:
http://hodentekMobile.blogpost.com

Can Nokia come back to making high-end smartphones?

This market is getting tighter by the day. Should Nokia get into this at this late hour?
Looks like it wants to.

Two Nokia android phones are slated for the end of 2016 or early 2017. Size-wise they follow the general guide lines, 5.2" and 5.5", give or take a fraction. They will have metal bodies. There is going to be a great camera based on the latest in material science, a form Carbon called graphene. It will have better sensors for gesture interaction.

Features:
Water and dust protection IP 68 (perhaps it was meant to be IP67)
Fingerprint Sensors
OLED displays
Android Nougat (Presently only Nexus line can use it)

This article is based on the article referenced earlier.

Tuesday, July 19, 2016

Intel XDK: Controls 6: Using the Google Map Widget

In this post, I consider configuring the Google Maps widget in the Intel XDK.

Start a new blank, Standard HTML5 project in Intel XDK (version 3400 used in this post). Enable the Use App Designer checkbox.

 
GMaps_00

Click Continue at the bottom of the above page (image is clipped). In the pop-up window provide a name for the project, GMaps in this case. Downloading and creating window is displayed.

For the next screen that shows after, click No Thanks unless you want a quick tour.

The Select a Framework screen is displayed with App Framework v3.

 
GMaps_01

Click Select (top right).

You have the Mainpage displayed as in my other posts. I have just added a HEADER control and named it 'Google Map' as shown.

 
GMaps_02

Google Maps widget is in the 'other' category under controls as shown.

GMaps_03

Click on Google Maps, hold, drag and drop it on the page as shown. Just before you drop you should see the dropped area go orange in color.

GMaps_04

The various properties that needs to be configured also gets displayed as shown.

GMaps_05

Choose a place you want to map, here for example the latitude and longitude of Statue of Liberty is Binged as shown. I also try another, that of Taj Mahal.

GMaps_06
GMaps_06_1

One of the important items you need to configure for this widget is the Google Maps API Key which you can get from here:
https://developers.google.com/maps/documentation/javascript/get-api-key

I have another post that shows how to get the key. I just picked up a free key for iOS. Different OSs use different keys.

The following properties screen is used to show the location of the TajMahal on the map.

You can use the same key but appropriate latitude and longitude for displaying the Statue of Liberty.

When you use the emulator it comes up empty, please scroll more and read my updated comments.

However when I tested in the iPhone 6S the maps were displayed.

 
I also tested on an Android device from LG and the maps were correctly displayed which goes to show that OS specific key (I only had the key for iOS) is really not essential.

Intel XDK's emulators work somewhat interestingly. If you use the vertical orientation the display shows a blank screen but if you change it to horizontal you see the map correctly displayed and now if you go back to portrait mode, the map still shows correctly. You may have to experiment it.

If you have the correct coordinates you should see the physical structures as shown.

 GMaps_06_2

  GMaps_16 

There is a link for Google Maps on the display and you can even see the VR controls and review the image from various angles.



GMaps_17

Monday, July 18, 2016

Are you considering creating apps using HTML5 and Cordova?

In all my previous posts in this blog we only looked at Standard HTML5 projects. In Standard HTML5, the project was packaged as a web app and host it on a server (the Intel XDK server in this case) as an HTML5 web app, or build it for distribution via popular mobile app stores. For testing purposes, you would use the Intel XDK Preview app available from app stores. There are couple of examples and posts on this site. Standard HTML5 Projects are built for Desktops, smartphones and tablets.

There are definite advantages to creating Apps using HTML5 and Cordova as against using just the Standard HTML5.

The HTML5+Cordova projects on the other hand are built for smartphones and tablets for all of the following OSs: android, iOS, Windows and also as a web app.


The pages you create use both the Standard HTML5 and Cordova APIs and can be distributed via popular app stores.
You will be developing as a hybrid mobile app that can,

  • Use sensor data on the phone including camera, GPS, accelerometer etc
  • Access device hardware;Near field communication(NFC); Bluetooth, Camera etc
  • Manage file storage and caching. Also access databases like calendars, contacts
  • Work with third-party plug-ins
 What about Cross-Walk apps?


Cross-Walk is also android specific but built on Open Source foundation.
 More on Cross-Walk here.

Tuesday, July 12, 2016

Exploring styling with Intel XDK - 2

In this post we take a look at media queries and how they enter styling in Intel XDK projects.

Media queries came about in CSS3. In CSS2, the @media rule was introduced to address the different media types (desktop screens, printers, handheld etc). However this did not taek off except fro prit media type.

Media queries look for the type of support or capability available on the device to tailor the styling.
Media queries checks many things including display related variables like,

  • Width and height of viewport
  • Width and height of device
  • Device Orientation (Landscape/portrait)
  • Resolution
Like anything else browser support is essential, typically the support for @media rule.

Media query has the @media rule and the query syntax. The syntax of media query is:

@media not|only mediatype and (expressions) {
    CSS-Code;
}
The result of the media query returns true if,

  • The media type matches the type of device the document is beign displayed
  • All expressions in the media query is true
When the media query returns true, the corresponding style sheet or style sheet rules are applied according to the cascading rules. Unless, the not or only operators are used the media type is optional and all type will be implied. The media rule can be used in link reference to apply different rules to different media.

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

There are basically four different media types:
all (for all media types); print(for printers);screen(computer screens, tablets, smart phones, etc) and speech(for screen readers).

In my previous post using Intel XDK, the style code I created for the background using the built-in styling feature resulted in this media query:

@media all {
  #afui .Paleblue .panel {
    background-color: rgba(128, 128, 255, 0.34);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}
In another test project, I created a round button using the built-in styling feature as shown.
The displayed round button:

mediaqry_00

This was designed using the interactive built-in styling feature shown here:


mediaqry_01

This gets into the index_main.less.css as shown below:

@media all {
  #afui .TestRound {
    height: 30px    !important;
    width: 100px  !important;
    border-radius: 50%  100% 100% 100% !important;
  }
}

 Irrespective of media type, the css rule applies to all devices. Since we are using the interactive designer this css rule is automatically created.

Thursday, July 7, 2016

Exploring styling with Intel XDK - 1

Without styling most of web pages will be drab. CSS is at the center of all web styling and Intel XDK is no exception. In a Standard HTML project with App Framework 3 in Intel XDK there is the standard .css page that governs the styling.

In the case of a blank project the only reference to styling is the style sheet reference to css/app.css. In addition to touch action, zooming and other interactive elements has only the minimal styling information for the single HTML page, the styling for the body.

body
{background:white;
color:black}


The single page is shown here.


 

StdMain_01

When you click on Background, you get a drop-down to create a New... style for the background element. When you choose New..., you get a window where you can create a new style class as shown. A name Paleblue was provided by the user here.

StdMain_02

When you click OK, the following takes place. An Index_main.less.css gets added as well as in the design area, a style designer opens up as shown.

StdMain_03

The index_main.less.css page is at www/css/index_main.less.css that governs lot more of the styling

Let us go back and apply a few styles as shown all for the background.


StdMain_04

Paleblue was chosen as the color. Click OK in the above to confirm it. The background color becomes blue and the HTML for the main page changes to this:

StdMain_05

The index_main.less.css page gets updated by the new change.

StdMain_06

The page is pale blue but you can adjust the opacity to make it even lighter as shown.

 
StdMain_07

Sure enough the change gets into the index_main.less.css page as shown.
 
StdMain_08

We will explore CSS in more detail in future posts.




Sunday, July 3, 2016

It is the Wireless headphone to debut next

The new iPhone7 may debut the wireless EarPod, the much awaited wireless earphone. It is about cutting the cord and I love it. I love to get away from then tangle of wires, even with the best of arrangements to keep them neat and compact. One thing less in the complexity is highly welcome.

Wireless earphones are there already (Erato Audio and Rowkin Mini) according to what you can read here.

How do the iPhone connects to Earpod? It appears Bluetooth technology will be used. when not listening they can be used for other activities like answering voice calls and many more. It is not far fetched to see SIRI coming into the picture as well.

In summary, it is more than a wireless headphone, it is more an integrated peripheral for the phone. Does it take away energy from the battery, probably it does, and how much is going to what matters in terms of battery usability before recharging.

As for me even the best of the headphones are not good enough if the buds do not sit correctly, comfortably and unnoticeable in your ears.