Friday, September 30, 2016

Using Galleria code in Intel XDK

In my previous post I described using galleria in a web page on my local IIS . The displayed page appears as shown.


Galleria_Intel_00.jpg

In this post I describe how you may implement the same code in Intel XDK. Prepare yourself with the images you want to use as well as the following files from your galleria download:

galleria-1.4.7.js
galleria.classic.css
galleria.classic.js


Create an Intel XDK Project using Standard HTML5 using App Designer (we will not be using the app designer controls).

The project may not have separate folders for CSS and Images. Create these folders (CSS and Images) in the www folder of your project. Copy the images to the Images folder and the above CSS file (galleria.classic.css) file to the CSS folder. The www/js folder of the app will have only app.js and init-app.js files. Copy the two files (galleria-1-4-7.js and galleria.classic.js) to the www/js folder.

The main files in my project (GalleriaSimplis2) are as shown here:


Galleria_Intel_01

Now in the Intel XDK's index.html page add the code shown between the 'head' and '\head' tags.

Galleria_Intel_02

Add the following html fragment between 'body' and '\body' tags.


Galleria_Intel_03

Save the index.html and you should be able to run the simulation on a chosen device as shown (herein Microsoft Lumia 950):


Galleria_Intel_04

Click on the main menu tab and click TEST.


In the MOBILE tabbed page click 'PUSH FILES' that enables you to view on an actual device.

Galleria_Intel_05

The project page appears as shown using the Intel App Preview app. If you do not have this app you can get it from stores.

Galleria_Intel_06







Visual Studio 2015 for Mobile applications

Visual Studio is a great piece of software. It's higher end versions are quite expensive but Microsoft has a lower end free version, Microsoft Visual Studio 2015 Community which is free. It is well suited for mobile applications on tablets and smart phones.

Do not think for a moment this is just for Windows Phone, you can develop cross-platform apps with it. If you want a app with a database backend, you have two options, SQLite and Indexed DB, one in relational and the other is non-relational.

It is very easy to have SQLite on Visual Studio 2015 Community. SQLite is also free. In order to work with this post or other Visual Studio related posts you look no further than my blogs.

SQLite is a relational database well suited for mobile applications.

SQLite was described in a previous post here. As the Internet of Things is the trending area on the Internet, SQLite with its no administration feature is well suited. It is also the relational database for smart devices, cell phones, TVs, cameras etc. If you want fast and reliable data provider than SQLite is recommended. The other option which is gaining in importance and a HTML5 feature supported by many browsers is the IndexedDB. IndexedDB is not relational.

sqlite_00

You can download SQLite from here:

http://sqlite.org/download.html

There are many options depending on your operating system. These are the options for Windows alone.

sqlite_01

Connecting/Accessing SQLite from Visual Studio 2015 Community (herein VS for short).

SQLite has no GUI for its management and VS is well suited.

Launch Visual Studio 2015 Community (Update 3 used here).

From Tools click on Extensions and Updates.

Well I seem to have installed the  SQL Server Compact/SQLite toolbox

sqlite_02

Indeed, I can see the SQL Server Compact/SQLite Toolbox as shown. However I see only (SQL Server Compact 4.0) database.



sqlite_03

Right click Data Connections to display the menu as shown.


sqlite_04

Click Add SQLite Connection to open the detailed window for adding a SQLite Connection as shown.


sqlite_05a

I try to Browse for one and It is looking for the shown file types in the default location.


sqlite_05

I try to create one assuming that this toolbox  interface allows me to create. I click the Create... button in the Add SQLite Connection window shown earlier.

It seems to create the file in this directory.

C:\Users\Jayaram\Documents\Blog2015\HodentekMSSS2015\DownloadedPrograms\C#\CSWindowsStoreAppAccessSQLServer\AccessSQLService\bin\System.Data.SqlServerCe.Entity

I choose a different directory (C:\Users\Jayaram\Documents\Blog2016\HodentekMSSS2016\SQLite) with a file name, Sept17-2016) as shown.


sqlite_06

I try to test the connection and it looks like it succeeded. But I do not see all the information except for the few shown in the next image.



sqlite_07

I click OK and close the window. The SQLite connection I created gets added to the Data Connections.


sqlite_08

I expand the Sept17-2016.db file and I see the following default objects (all empty): Tables, Views and Triggers


sqlite_09

Come back to this blog for more on SQLite.








Sunday, September 25, 2016

Using galleria in a web page

Previous post described galleria used in the Intel XDK. If you have downloaded galleria from galleria site you could use it as described in the Getting Started page.

It is quite simple to use and works quite well. I will describe it being included in a web page on my windows 10 computer's localhost, the IIS Server.

After downloading and unpacking the galleria folder as described earlier copy and paste the following files to wwwroot of your localhost.

galleria-1.4.7.js
galleria.classic.css

Also place some image files in the images directory in the wwwroot directory of inetpub (herein some simple images are placed).

Create a HTML page as shown.


TestGalleria.png

Place this file in the wwwroot directory of inetpub in your computer.
That's it. When you browse to the page TestHTML.html in your computer (http://localhost/TestGalleria.html) you will see the display as shown:


Click on the smaller image and the larger image gets replaced. Works well!

There could be some problems. If you forget to include the galleria.classic.css file then you will get a fatal error warning such as this one.

Also if the width and height in your CSS file are not optimum, you will get this error.




Intel XDK ImageGallery widget uses galleria.js

If you did enjoy the previous post on using the ImageGallery widget in Intel XDK you must have realized that it uses the script file from Galleria (galleria.io).



If you want to build apps based on Galleria you have to download Galleria, presently in version 1.4.7 from Galleria site (galleria.io). It is always better if you can get away from widgets as they may not have a definite support time line. At sometime the developer of the widget may move on to other interests or may not be supported. Galleria appears to be very popular if you go by it's 2.5 million downloads so far.

The Galleria version 1.4.7 will have all of these in the free download (under MIT license). The basic version is free.



You get more if you can spend some money in the premium version. If you are interested go the Galleria site.

In the download you find this file: galleria-1.4.5.js

Which you should reference in your web page, if you want to build pages with galleria.

The galleria download will have the following content:


Saturday, September 24, 2016

Nice editor to have on your phone

If you want to run any of HTML,CSS and JavaScript this program is the one you should have. jsFiddle is a nice editor for running your web page and checking out each of: HTML fragment; CSS rule or the Script.

More details with examples are here:
http://hodentekhelp.blogspot.com/2016/09/what-is-jsfiddle.html

You can access this site jsFiddle.net to bring up the online editor on your phone as shown. This one is on a Micrsoft Lumia 950.

Here is the ‏editor when accessed with my phone.


The next one is the same as above but enlarged with inkscape.


I just entered some simple HTML fragment in the top left pane marked as HTML. Then I hit the Run button at the top and I immediately I see the response in the fourth quadrant marked as Result.


The first quadrant for CSS Rules; the second for HTML and the third for JavaScript. You can enter the various parts and hit the run button to see the result in the last quadrant.

Monday, September 19, 2016

Intel XDK: Controls 11: Customizing IMAGE GALLERY Widget in App Designer 7

In this post we will add more images to the slide show in the IMAGE GALLERY widget in App Designer 7 of Intel XDK. We basically use the same documents we used earlier in the previous post here ( http://hodentekmobile.blogspot.com/2016/09/intel-xdk-controls-10-image-gallery.html ).

The design of the FIRST page in the TabbarWidget page has not changed.

Cntrl11_00.PNG

What gets changed are the extra images added to the gallery_images folder and the changes to the gallery-images.json page which points to these added images. Make sure the images added are 640x480.

It is very easy to locate the folder to place your images. Just right click gallery_images as shown and click Show in Explorer.

Cntrl11_01.PNG

I added four more images, BavarianAlps.png, PragueAerial.png, Vienna.png and Salzburg.png to the gallery_images folder.

Right click www under projects and click Refresh File Tree.Expand gallery_images and verify the images are there.

Cntrl11_02.PNG

Now modify the gallery_json page as shown:


The image file extensions in the .json file should correctly match the file name and file extensions of the images.

That is all there is to it.


Simulate and verify as shown.



For Sortable List review this.

IndexedDB support in Intel XDK

After describing options for database integration for mobile apps, this post describes a test that you can use to see if your browser supports IndexedDB.

Database for Mobile Apps:
When it comes to integrating mobile apps with databases there are two popular options, SQLite database or IndexedDB Database. While the former is a relational database, the latter is not-it is a storage for key/value pairs.

This post here (http://hodentekmsss.blogspot.com/2016/09/sqlite-using-visual-studio-community.html) describes some details about SQLite database and the process of installing it on your computer.

According to Mozilla Developer Network,
"IndexedDB is a Web API for storing large data structures within browsers and indexing them for high-performance searching. Like an SQL-based RDBMS, IndexedDB is a transactional database system. However, it uses JavaScript objects rather than fixed columns tables to store data."

Complete details of this API are here (https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_APIhttps://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)

Does Intel XDK support the use of IndexedDB?


Create a Standard HTML page with App Designer 7 (herein Build 3522) support as shown.



Add a HEADER, a Go button and a ifr widget (keep src blank but just add a named id) as shown. When you click the button on this page, it runs a script which finds the id of the "ifr" and set its src to the IndexedDB.HTML.

The script is shown here:

The IndexedDB.html page is shown here:

It sets up the implementation Windows' prefixes and the Windows.IDB objects.

You can verify after clicking SIMULATE by hitting the test button as shown.







Monday, September 12, 2016

Intel XDK: Controls 10: IMAGE GALLERY Widget in App Designer 7

This post is about Image Gallery control in Intel XDK's App Designer 7. The Intel XDK Version in 3522. This is Window 10 Lap top.

The IMAGE GALLERY control can be found in the COMMON category under CONTROLS as shown.


IG_00

Drag and drop the control on a page. I have placed it on a page with the header text 'First' which I can access from a TABBAR on the main page. The 'First' page with IMAGE GALLERY widget dropped on it appears as shown. Note that the height was changed from its default: 250px


IG_01

The HTML fragment for this control is as shown.


IG_02

The 'gallery_images/gallery_images.json' has a json file with the three images in this basic app.
---------
[
  {
    "image": "gallery_images/freightliner.jpg"
  },
  {
    "image": "gallery_images/sailing-ships.jpg"
  },
  {
    "image": "gallery_images/taxi-cab.jpg"
  }
]
The image files are in the same node, gallery_images.


IG_03

The script file galleria-startup.js ( Generic code for folder or data-feed driven gallery) file has all the functions necessary to run the application.

The default width is empty and the height of the control is 250px and if you run it with these values, you will see an error as shown:


IG_04

You need to change it to these values as in the next image.
width=100 %  height=100%.
This control is sometimes inconsistent. The firs time you run simulation it comes up with an error and run it again, no error. I am not sure what the problem is.


IG_05

With this if you click the SIMULATE tab and choose your favorite device you can run the gallery application.


IG-06

Removing an image and add a new one in place

Let us remove the taxi-cab.jpg image (640x425) and substitute it with a different image.

You need to get the image to the gallery_images node and also modify the gallery_images.json file.

After adding the new image you should refresh and should be able to see in the Intel XDK UI.
[
  {
    "image": "gallery_images/freightliner.jpg"
  },
  {
    "image": "gallery_images/sailing-ships.jpg"
  },
  {
    "image": "gallery_images/CeskyFrumlov.png"
  }
]

You should have the image in the correct folder as shown:

IG-07.png
You can see the change even in your DEVELOP page as shown.

IG_08.png

Just hit the SIMULATE page and enjoy!

IG-09

If you want to see it on your iPhone just hit TEST as discussed in earlier tutorials.

For Sortable List Block widget review this.

Mahalo

Jay

Sunday, September 11, 2016

Just enter your email to get this powerful mobile App

I hope you do know about POWER BI. This is a Microsoft product that helps you to carry out Business Intelligence. If you have not. Read these reader friendly focused articles:

http://hodentekmsss.blogspot.com/2015/07/microsoft-power-bi-enters-new-phase.html

http://hodentekmsss.blogspot.com/2015/08/connecting-to-sql-server-2012-using.html

http://hodentekmsss.blogspot.com/2015/09/visualizing-data-using-power-bi-from.html

Microsoft has released Power BI Mobile app. With this you can carry out enterprise grade business monitoring and a host of other activities.

 In this post I describe how you install it on your desktop and it is very similar to how you may do it on your handheld or other options.  First of all, you need to get the app on your device,

Go here first:
http://powerbi.microsoft.com/en/mobile


PBIM_00
Enter your email address and you will get a link in your email inbox with subject line 'PowerBI on your mobile device'.


PBIM_01

You can download it for iOS, Android and Windows OS.

The App with this version (Version number: 32.60831.11820.0) appears to have good rating.


PBIM_02

These are the features presently addressed in the version:
Features:
It is available for PC, mobile, Hub and Holographic.

  • Access your data using Power BI dashboards and reports - anywhere, anytime.
  • Collaborate with colleagues over insights by sharing snapshots, dashboards and reports.
  • Add annotations to your dashboards when presenting or sharing data
  • Explore your data by filtering, sorting and highlighting your live reports
Downloading the app

For a PC go to Windows Store and search for Power BI Mobile and download app to the desktop. For iOS and Android you can get the APP from Apple Store and Google Play.

Power BI Mobile app on PC

Here are screen shots from starting with  Power BI Mobile



Looks like this app can also be used for accessing business related reports on your Report Server if you have set up one.


You need to have an email address. I connected with the email address I provided for my Office 365 subscription. Microsoft emails need strong passwords, like the ones used in subscribing to Azure Cloud. Once your authentication  passes test, you get this.

You can click Start exploring... now