Posts

Showing posts from September, 2016

Using Galleria code in Intel XDK

Image
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 X…

Visual Studio 2015 for Mobile applications

Image
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, T…

Using galleria in a web page

Image
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 …

Intel XDK ImageGallery widget uses galleria.js

Image
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 followi…

Nice editor to have on your phone

Image
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.

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

Image
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:


IndexedDB support in Intel XDK

Image
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/…

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

Image
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-start…

Just enter your email to get this powerful mobile App

Image
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…