Saturday, April 30, 2016

Archive your smart phone photos by resizing

Sometimes you are faced with resizing a bunch of images:

  • Reduce the size of images to a level accepted by your application (perhaps the server does not accept anything more than a given size) or you can only upload a certain file size
  • You want to save space (smartphones can capture HD images with very big files sizes).  

Application like Photoshop can do this, but you can use Photo Gallery on your Windows 10 machine to do the same.

Photo Gallery is a desktop app that you can download from the Windows Store.


PhotoGal_00

In my Desktop I have a folder with 64 jpg items with item sizes ranging from 2780 KB to 5072 KB with a total folder size of 234 MB


resizeLarger_01

I bring up and choose all images in this folder in Photo Gallery as shown.


PhotoGal_01

I click EDIT and Resize as shown.

PhotoGal_02

The Photo Gallery Resize dialog is displayed where you can choose the size from the drop-down list.

PhotoGal_03

I choose size 640 and browse and save it to my presently empty folder named Larger_resized.

I then click Resize and save button. In couple of seconds it is done.
The total file size is now 10.3 MB


resizeGal_02

The individual JPGs were from 177Kb to 201KB

The Photo Gallery did an excellent job!


Friday, April 22, 2016

Intel XDK: Controls 4: Using Google Charts widget

Google Charts is a useful widget if you want to dsiplay a chart from your data on your phone using an app.

At first you need to have a chart to display.

A simple way to create a Google chart is described here. You could have also started the Google Chart Application (online) and inserted your own data. I just used the procedure at the indicated link.

Once you have a shared data, using the widget is very easy.

Drag and drop the widget as shown on your page. Disregard the Insert Text button and the Latin text.


GoogleChartWidget_00

Click on the Google Chart Widget on your designer to display the PROPERTIES window as shown.


GoogleChartWidget_01

By default it comes up with a preconfigured URL using a Google Spreadsheet created by a user who has shared his/her spreadsheet.

In its place, use the one created by you as indicated earlier. In this particular case, I used this URL from the data I imported from MS Access.

https://docs.google.com/spreadsheets/d/1kJ3JPGMkdub9Mv_jTyiMN20wMtoHgXwM6SxwjVRAxIo/edit#gid=1724573625


GoogleChartWidget_02

That's it really. Just click emulate and choose an emulator. This is how the page would look on iPhone 6S.

GoogleChartWidget_03
Thanks for viewing this post.
Mahalo

TAB BAR Control in App Framework 7 here:
http://hodentekmobile.blogspot.com/2016/08/intel-xdk-controls-9-tab-bar-control-in.html

Sunday, April 17, 2016

Building WebRTC apps with Intel XDK

Intel XDK has the right tools to build WebRTC apps. There are widgets that gets you started shown here.


You can use Intel XDK together with Intel Collaboration Suite for Web RTC to build the real time communication apps.

With Intel Collaboration Suite for Web RTC (Intel CS for WebRTC ) it is possible to build apps for real time communication over the web.

You need to use the Intel CS for WebRTC SDK built on top of W3C standard for WebRTC. You can create apps for broadcast, peer-to-peer and apps for conference.

To cater to the major OSs and HTML, the SDK is available in four versions one each for:

  • Android
  • JavaScript
  • iOS
  • Windows
There is a server that you need to get used to:
Intel CS for WebRTC Conference Server that provides the Video Conference Service that streams the service to many end points with the following quoted features:

  • High performance, VP8 and H.264 real-time transcoding with Intel® Iris™ Pro and Intel HD Graphics
  • Scalable multipoint control unit (MCU) server
  • Efficient mixing of HD video streams for saving bandwidth and power on mobile device
  • Intelligent QoS control mechanism that adapts to different network environments
If you are building with JavaScript there are browser requirements and you should get this:
CS_WebRTC_Client_SDK_JavaScript..zip .



More information available here:
http://software.intel.com/en-us/webrtc-sdk

Saturday, April 16, 2016

Intel XDK: Controls 3: HTML5 and the image widget in Intel XDK

figure is the new HTML element in HTML5 and it contains figcaption element which is also new in HTML5. image is only one of the things that can be represented by figure.

You use the image widget in the CONTROLS/COMMON section of Intel XDK.

 imagewdiget_01

You just drag this from COMMON and drop it on  the page (as you enter the page you should see a broad orange border around the active area). By default the Strabburg.jpg gets entered as the image as shown.


imageWidget_02

With the following properties that you can use:


imageWidget_03

The html code for this inserted image is:


imagewidget_04

The scale-image style specifies a width of 200px of unspecified height

If we modify the properties as shown:


imageWidget_05

The HTML gets modified as shown:


imageWidget_06

The W3C recommendation for the image is the following (https://www.w3.org/TR/html5/embedded-content-0.html#examples-of-scenarios-where-users-benefit-from-text-alternatives-for-images)

Quoted from the above source:

"In some cases an image is included in a published document, but the author is unable to provide an appropriate text alternative. In such cases the minimum requirement is to provide a caption for the image using the figure and figcaption elements under the following conditions:
    The img element is in a figure element
    The figure element contains a figcaption element
    The figcaption element contains content other than inter-element whitespace
    Ignoring the figcaption element and its descendants, the figure element has no Text node descendants other than inter-element whitespace, and no embedded content descendant other than the img element.
In other words, the only content of the figure is an img element and a figcaption element, and the figcaption element must include (caption) content.
Such cases are to be kept to an absolute minimum. If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute."

TAB BAR Control in App Framework 7 here:
http://hodentekmobile.blogspot.com/2016/08/intel-xdk-controls-9-tab-bar-control-in.html

Document Object Model and Intel XDK

DOM stands for Document Object Model. It is what the User Agent (for example a browser) produces in memory when it encounters an HTML Document .
An HTML document is really a text file with mark ups (using tags). Here is an example:
<html>
<head>
<title>About Me</title>
</head>
<body>
<h1>My origins</h1>
</body>
</html>

This is a tree of elements and some text.
The element looks like this:
 <element></element>

In the html document above, the elements are: <html></html><br /><head></head><br /><title></title><br /><body></body> 
The <html></html> elements contains the rest of the elements.The <head></head> element has the <title></title> element The <title></title>just contains a string

The <body></body> can contain many more elements.The above tree is how it would be seen by the browser to create a tree, the DOM tree or simply the tree.
The DOM tree not including the spaces and carriage returns is simply this:

In a practical example like a single page mobile app (which also follows the same principles asweb page) like this one in Intel the document may have a slightly different look, but the emulating browser as well as the device browser would evaluate the document based on this DOM tree shown here.




Saturday, April 9, 2016

Using imges in creating content for smart phones

 I had a pdf document which I converted to a html document and tried to view it in the browser of a smart phone and really the images did not quite fit in. I decided to use ideas of responsive design to make the images appear in the smart phones to display correctly.

Creating web pages with embedded images poses the problem of how the images would appear when the browser is resized, or if the web page is accessed in a device with smaller format. These days smart phone cameras can capture photos with very high resolutions. If you embed as is in web pages then you will not be able to display the images on a browser with a smaller size. The answer to this is to use the responsive image tags.

Here is an example: Create a HTML page as shown embedding this image.

Diamondhead.jpg (5344x3008, 3.6 MB)

Although you see this image as small. It is really large and would occupy the full width and height of a lap top with 1600x900.


<!DOCTYPE html>
<html>
<head>
</head>
<title>Very large image</title>
<body>
<img src="Diamondhead.jpg" width="5344" height="3008">
</body>
</html>

Provide a name for it (XtraLargeImage.html) and save it to the wwwroot directory of your default web site in IIS Manager. When you bring it up in the edge browser (herein, 1600x900), you can see barely parts of this image. Now if modify the XtraLargeImage.html) as shown below and save it to the wwwroot directory as before:

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }                           
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }                                    
@viewport { user-zoom: fixed ; }
</style>
</head>
<title>Very large image</title>
<body>
<img src="Diamondhead.jpg" width=100% height=auto>
</body>
</html>
Now if you bring up the image in a browser (Microsoft Edge or Firefox, or any other modern browser) you can resize the image or open the web page on a device with smaller dimensions.

file size: 144 KB 

file size: 54 KB 
The reason the images look same in this post is because the blogger is also responsive! One clue when you use responsive tags is that the displayed image in the browser will not have the horizontal scroll-bar.

Friday, April 1, 2016

Launch icons and splash screens for iOS using Intel XDK

Developing apps for Smart Phones requires creating a large number of images necessary for the icons and the splash screens of the app. The device foot prints now range from the smallest to the largest, not to mention the iPads, both mini and maxi. Add to this the operating systems, and you need really a large number of the images.

I am planning to create an app, a simple one for starters and I found out that just for iPhone with iOS oprating system you need this many images for icons and splash screens that address all the present devices:

Launch Icons

Settings icon  29x29px (png)
Settings icon 2x 58x58px
Settings icon 3x 87x87px
iPhone App  60x60px
iPhone 2x  120x120px
iPhone 3x  180x180x
iPad App  76x76px
iPad App 2x  152x152px
Spotlight icon  40x40px
Spotlight icon 2x 80x80px
iPhone App   57x57px
iPhone App 2x  114x114px
Spotlight icon  50x50px
Spotlight icon2x 100x100px

Splash Screens
750x1334px
1242x2208px
640x1136px
640x960px
320x480px
1536x2048px
768x1024px

In this post I am just looking at icons for iPhones.

I  manually created a 512x512 image with extension .png (24bit depth) using Paint.Net to create the various images. It was time consuming but it can be done.

However, I found out through the Intel XDK forum that there are easier ways to do this. With this link, I found out  I could create all the needed images in one shot. All I provided was a 1024x1024 pixel image in PNG format.

http://apetools.webprofusion.com/tools/imagegorilla

Perhaps you should check this one out.

Read more about images you need for an app using Intel XDK tool:
https://software.intel.com/en-us/videos/part-8-of-12-images

Microsoft Lumia 650 has great features

It is the Volkswagen (before its recent problems) of the SmartPhones. It has great features looking at its specs which I have reproduced here from Microsoft Site.I have a Lumia 950 myself, a great phone.  My wife has a iPhone 6S both are comparable phones and we often exhange notes. Sure, iPhone 6S has a nice color and you can download apps and apps. Live tiles in Windows Phones is a great feauture and as is Cortana.

It is economical and can be even used in enterprise scenario as security is throughly addressed:

Mobile VPN,
Secure identities,
Remote lock and wipe,
Mobile device management,
Data protection under PIN lock,
Remote security policy enforcement,
Hardware accelerated device encryption
Supported security standards: SSL v3.0, TLS v1.0, TLS v1.1, TLS v1.2, Suite B ciphers
Wi-Fi security modes: WEP, WPA, EAP-AKA, EAP-SIM, EAP-TLS, WPA-Personal, PEAP-MSCHAPv2, WPA2-Personal, WPA-Enterprise, WPA2 (AES/TKIP), WPA2-Enterprise, EAP-TTLS/MSCHAPv2
If you are looking to buy a smart phone it is really worht considering.  Lumia 650 dimensions are a little larget than that of iPhone SE another low cost contender as seen here:
----------
Apple iPhone SE
Dimensions 123.8 x 58.6 x 7.6 mm (4.87 x 2.31 x 0.30 in)
Weight 113 g (3.99 oz)

------------
Lumia 650
Height: 142 mm
Width: 70.9 mm
Thickness7: 6.9 mm
Weight: 122 g

----------
Compare for yourself the features of these two low cost smart phones recently released:
https://www.microsoft.com/en/mobile/phone/lumia650/specifications/
http://www.gsmarena.com/apple_iphone_se-7969.php