Wednesday, August 31, 2016

Intel XDK: Controls 9: TAB BAR control in App Designer 7

When you are using App Designer in Intel XDK, you have a number of options shown. In the present post you will use App Framework 7.

You start with a Blank project using the Standard HTML5 with App Designer support from this Start A NEW PROJECT screen shown below:


tabbar7_00

After opting to choose 'Use App designer' click Continue at the bottom of the page to display Project name page.


tabbar7_01

Give a name and click Create. There will be some processing. Congratulations screen is displayed, dismiss it if you do not want to go through the QuickTour.
Here you need to choose a Framework. The options are shown.



tabbar_02

Looks like quite a few of them are no longer supported. This is some what of a problem as you need to go through upgrading the projects you create in previous versions when some of these framworks were supported.

The default is Twitter Bootstrap v3. Choose Framework 7.Click Select at top right.

The UI you see are different from the UI you have seen in App Framework 3 in my previous posts on this blog.

Let us place a HEADER layout control and provide a name for it. Herein Tabbed Pages.


tabbar_03

Inserting the TAB BAR Widget
Click open the ORGANIZATION category to display as shown.


tabbar_04

Right Click the TAB BAR widget and choose 'Insert at Bottom' to position the TAB BAR with three tabs at the bottom of the page as shown.


tabbar_05

The HTML fragment for these controls is as shown in the next image.


tabbar_06

Using Tab widget to navigate to a page

Using DEVELOP | DESIGN add a new page to the app as shown.


tabbar_07

In the New Page dialog provide a name for the page, herein FIRST as shown.


tabbar_08

On the new page add a HEADER widget and provide a name, herein FIRST as shown.


tabbar_09

Now you set up the INTERACTIVITY feature for the TAB as shown in the next image. The Action setting for the first TAB is now set as page#First and the 'href' for this should be #First as shown.


tabbar_10
Now you can click SIMULATE and choose a suitable device Apple iPhone 6 execute the simulation.


tabbar_11

The Tabbed Pages appear as shown.


tabbar_12
Click on the first TAB at left. The FIRST page gets displayed as shown.


tabbar_13

We navigated from Mainpage to First page. How do we get back? We need to make other arrangements.

For Sortable List Block widget go here.

Monday, August 29, 2016

Apple's touch disease

 It is  possible that even iPhones (6 and 6 Plus) may bre recalled due to what is called the 'touch disease (a gray, flickering bar at the top of the display and an unresponsive touchscreen)'. This could put Apple in an awkward position not to speak of its investors who believed in its stellar performance and made lots of dough.

There is a class action suit accusing 'negligent representation according to the following link:
http://www.reuters.com/article/us-apple-lawsuit-touchscreens-idUSKCN1141OJ

About the unresponsive screen defect read here:
http://ifixit.org/blog/8309/iphone-6-plus-gray-flicker-touch-death/

Read about touch disease posted by users:
https://discussions.apple.com/thread/6686660?start=15&tstart=0

Wednesday, August 24, 2016

Intel XDK: Controls 8: Displaying Map Controls in Google Maps

The previous post described the various map controls in Google Maps. The presence of them can be seen on the map. You can use true/false with the controls to enable them on the map as shown in blue in the following HTML used in my previous post here. The lines in blue are added to enable the controls. The map control streetView is a default control and you see a Pegman icon at bottom right. The Pegman is your guide to street view, you drag him to a location on your map and you can have the street view and alter it.

Here are pictures of standard Pegman and Pegman dressed for different occasions from Google site.



---------------- You may not see the content as the Pre tag is not working!      Toured Cities - 2016    
------------
This page in Intel XDK as Standard HTML5 application appears as shown here on a simulated iPhone6S:

In the simulated view you may not see all the controls. If you click on the word Google to open up the map on a desktop as shown would display all the controls including the Pegman as shown and rotation.


This is how it appears on Microsoft Lumia 950 using Intel App Preview app for Windows.

Tuesday, August 23, 2016

What are the different controls for Google Maps?

On a Google map you can find a number of controls. Some of them are there by default and there are some controls you can specify and enable.

The default controls are:

Zoom             - slider or +/- button to control zoom level
Pan                 - a control for panning the map
MapType       - a toggle to choose either road-map or satellite view
StreetView     - a thumbnail overview map showing the current viewport, Pegman

Google Maps support these other controls:

Scale
Rotate
Overview map


You use the setOptions() method to change map options.

To disable default controls use this:
disableDefaultUI:true
If you want to turn on controls you need to include the following:

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true  
 

Find how you add controls here:
http://hodentekmobile.blogspot.com/2016/08/intel-xdk-displaying-map-controls-in.html

Thursday, August 18, 2016

Get HP Elite x3 and become more productive

HP describes the Elite X3 as "the power and productivity of a PC, the versatility of a tablet, and the connectivity of a smartphone in the palm of your hand."

Elite x3 is 5.96 inches diagonally (WQHD 2560x1440) with a AMOLED Display. It has dual-biometrics with iris and finger print scanners. The battery appears to be reasonable with a rating of 4150 mAhs. It can be charged inductively keeping it on a charger pad (Qi Standard). It is both IP-67 (dust and water immersion resistant) rated as well as MIL-STD 810 G  which makes it even battle worthy. It has 64Gb of internal memory, 4Gb Ram. This is an enterprise class smart phone with Windows 10.

Boost your productivity with HP Elite x3 Lap Dock (looks like a lap top) which connects wirelessly with Miracast over 802.11acc 2x2 Wi-Fi. Windows Continuum orchestrates all processing activities. You can do the same with a desktop with a Desk Dock.

This video shows the ease of using the docks.



Here is video of the Lap Dock.




HP Elite x3 Lap Dock Specifications (Windows Central site):

Display                              Nearly borderless 12.5-inch LED FHD (1920x1080)
Audio                                Bang and Olufsen stereo speakers
Ports and Connectors        3 x USB Type C, Micro HDMI, Stereo headphone jack
Input                                  Backlit, spill-resistant keyboard, Touchpad
Dimensions                       111.37 x 7.91 x 0.54 in.
Weight                              2.3 lb
Battery                              4-cell (46.5 Whr)

If you have a HP Elite x3 Desk Dock you can do the same pairing with a desktop. Again, Windows Continuum orchestrates all processing activities.

The Desk Dock has a USB port for connecting to phone, 3 USB 3.0 ports, keyboard, mouse or other accessories. It also has Ethernet jack for wired connection. It is also a fast charger for the phone's battery when it is docked.

The launch date is fast approaching and visit HP for pricing information.

Read details at the sites from which this post has been crafted.

http://liliputing.com/2016/02/hp-elite-x3-smartphone-for-business-is-also-a-windows-laptop-or-desktop.html
http://www8.hp.com/us/en/products/tablets/product-detail.html?oid=10722027#!tab=features
http://www.gsmarena.com/hp_elite_x3-7954.php

Monday, August 15, 2016

What do you need to build apps for Windows 10 Mobile?

Microsoft has manufacturers' support not only in US but also in emerging markets and Japan. If you are trying to develop apps for the Window platform this is the starting point.

Go this link here:
https://developer.microsoft.com/en-us/windows

Download a free copy of Visual Studio 2015 Community Update 3 and it has the required SDK.

From desktop to IoT you have plenty of samples based on the Universal Windows Platform(UWP):


Windows10MobileAug2016_01.PNG

Review this informative video "Designing Universal Windows Platform apps"



You can build apps for Windows 8.1, Windows and iOS devices as seen here in the New Project templates.

Microsoft Windows Phone is here to stay

 Data is from the link at the conclusion of the post.

There has been a claim that 'Microsoft has no manufacturing partners supporting the Windows 10 Mobile Platform'  and it is not true. Although the number of manufacturers making Windows Phones has decreased since 2015, there are enough number of them to support in key regions of the world. Regional support for Windows phone is key especially the emerging market regions.

The single OS for all Microsoft devices including phones; the regular updates to the OS; the adoption by enterprises; the strong regional manufacturing support especially in the growing emerging markets are all very positive for Windows Phone.

Read more here:

http://www.windowscentral.com/microsoft-and-duo-user-part-v-howdy-partner-microsoft-gets-support-phones

Thursday, August 11, 2016

Incorporating Google Map API in Intel XDK

We recently toured a couple of European cities and thought of putting it in a demo project using Google Map API.
 
I also wanted to incorporate it in the Intel XDK so that I could display it in an app. First tried it on the localhost which is Internet Information Services to just check my coordinates of the cities.

Here is how it is incorporated in Intel XDK. Start a blank HTML Standard project without using the App Designer. What you get is a Hello Intel XDK! display in a mobile web app.  You need to make changes at indicated positions.

Here is the HTML page for the blank HTML5 Standard Project.


 Here is how it appears on the iPhone App before the changes.




Here is the 'Script' that you add to the blank page at the indicated position.



Here is the 'body' that you are adding.

Here is how it appears simulated on an iPhone 6 Plus.


The latitude and longitude of cities were taken from here:
http://www.mapsofworld.com/lat_long/czech-republic-lat-long.html

These are values used:
Prague:   50.0833 N | 14.3667 E
Munich:   48.1333 N | 11.5667 E
Salzburg: 47.0667 N | 13.0333 E
Budapest: 47.4833 N | 19.0833 E
Vienna:   48.2    N | 16.3667 E




Monday, August 8, 2016

Intel XDK Version 3491 has a Simulate that replaces Emulate of older versions

Intel XDK Version 3491 was recently released and the menu listing has changed. Instead of the Emulate menu item, you have Simulate as shown.

Version3491_00

The device platforms you can choose from are iOS, Android and Windows.


Version3491_01

Apple devices are:

Version3491_02

Android device are:


Version3491_03

Windows Phone devices are:


Version3491_04
It is interesting the Microsoft Lumia are not targeted.

The new Simulate menu usage follow these steps:
  • Select a Platform
  • Select a device
  • Preview the app
  • Restart Preview
  • Stop Preview
  • Debug Start a remote debugging session. Simulator keeps on running
  • Close Debugger
  • Auto Reload, reloads simulation when files changes are saved O plugins are changed.

Monday, August 1, 2016

Intel XDK: Controls 7: Using the Console Widget

Sometimes you want to display what is written to the Console and you can use this widget. It is quite simple to use.

The Console widget is here in Intel XDK. It is in the 'Other' category.


ConsoleWidget_00

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

Add a button to the page by dragging and dropping a Button from the 'Buttons' category. Use the Go button widget.

The button's Label is 'Button'. Place check mark for ID and provide an ID, herein bt1.


ConsoleWidget_01

Add a Console widget below the button as shown by dragging and dropping.

ConsoleWidget_02

This and the button adds the following HML fragment to the index.html page.


ConsoleWidget_03

The eval button evaluates the string expression and sends it to the textarea in the above fragment.

Test this control using some expressions after bringing up the page in the emulator. Use any emulator.

In the box left of eval button enter the following ans hit eval.

x=2; y=3; z=4;  x+y+z

The response will appear in the textarea below the button as shown.


ConsoleWidget_04
Here is another example. We shall change the Button's name to something else.

Insert this code in the eval's text area as shown. Presently the textarea is displaying result from the previous click action.

ConsoleWidget_05
Now click the eval button and notice that the 'Button' is changed to 'Hello World'.


ConsoleWidget_06
One last example. Insert the following code in the text  of eval button and hit eval button.
ConsoleWidget_07x
Now click eval.
The emulator now displays the New URL as shown.

ConsoleWidget_08

You can use the top left button to return to your original page.