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.





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 hiet TEST as discussed in earlier tutorials.

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