Friday, May 27, 2016

Multiboard programming using Johnny-Five robotics and IOT Platform

Arduino boards can be programmed using Arduino software (or in Visual Studio Community using Arduino Extensions) and Intel IOT boards can be programmed using Intel XDK IOT. Using JavaScript to program controllers would be very useful as most browsers are HTML5 compliant. The Johnny-Five Robotics and IOT program is an interesting option.

Johnny-Five is the JavaScript Robotics and; IOT platform released by the Bocoup group. Johnny-Five is maintained by a growing number of talented developers.

What is Bocoup?
Bocoup  is a group that championed the cause of Open tools and WorkFlow. They really seems to have people with very varied and diverse talents to tackle web, data, and visualization.

How does Johnny-Five handle the Hello World (or Blink for that matter)?
It looks like 1-2-3 really.

1. Install Node.js(Preffeer 4.2.1 LTS)
2. Setup your board
3. Run: npm install johnny-five

What else is needed?

You also need to run the Firmata protocol for the controller board to communicate with the computer.
Interestingly Johnny-Five can handle over 30 different arduino compatible boards from the likes of Raspberry, Intel, Arduino, Sparkfun and many more.

This is very impressive indeed as each of these boards are handled by their vendors like Arduino, Intel and others.

How about non-arduino boards?

There are platform specific IO Plugins (for example, Galileo-IO plugin) .These plugins can speak the language of the platform as they implement Firmata compatible interfaces.

You will be hearing more about Johnny-Five in my blogs, here and here, keep reading....

Sunday, May 22, 2016

Arduino 101 : Implementing the basics

Arduino 101 is an electronics board that makes it easy to test out some simple IOT examples. It is not quite ready for IOT but you can do some Bluetooth tests with it. It also has built-in 6-axis accelerometer and gyroscope.  It has 14 digital input/output pins (of which 4 can be used as PWM outputs); 6 analog inputs; an USB connector for serial communication and sketch upload, a power jack, an ICSP header with SPI signals and I2C dedicated pins. These peripherals are the same ones you find on Arduino UNO.  Optionally, the USB connector also supplies power to the board.

This post shows how to work with Arduino 101 using the Arduino 1.8.3 program. You can test using the Blink program; a program that you upload to the board that makes an LED to blink.

Review this Swaytorial on the docs.com site.


Tuesday, May 17, 2016

Develop a Side Menu App using Intel XDK - Part 8

You have developed an APP such as the Side Menu App and now you want to see how it would look when you bring it up on a smart phone. It is true that it is not complete, as yet. But it is always of interest to know how it would look on  a real phone, an Apple phone or some other phone.

In the previous post you have seen how you may use the emulators to view the app you designed is rendered.

In this post you will learn how you may view it on a handheld device be it an iPhone or something other like a Windows 10 Mobile. This step is needed before you package it to be downloaded by anyone from one of the device stores (Google Play, Apple Store or Windows Store)

I assume you have one of these devices at hand, an iPhone or some other compatible with Intel XDK. You will also require Internet Connection via Wi-Fi.

The first thing for you to do is to install the Intel XDK Preview app on your device. This app is available on both Apple Store and Windows Store. If it is an Android, it should be available on Here are quick links to download the apps:

Google Play:
https://play.google.com/store/apps/details?id=com.intel.html5tools.apppreview

Apple Store:
https://itunes.apple.com/us/app/intel-app-preview/id725023841?mt=8

Windows Store:
https://www.microsoft.com/en-us/store/apps/intel-app-preview/9wzdncrdxtck

Follow these steps to display your app on the device

1. I use one of the simple, one page device for the purposes of demo. The page is shown in design as shown.

DisplayInDevice_00

2. In the emulator (randomly chosen emulator type, Nokia) the page appears as shown.

DisplayInDevice_01

It has two buttons one of which is inside a iFrame widget. Depending on how you set the attributes of the iFrame you can allow/disallow running of scripts. Presently it is set to allow-scritps to run inside iFrame. The top button outside the iFrame just looks for the attributes of the iFrame.
The page works as expected in the emulator.

3. Click the menu Test to display the following:


DisplayInDevice_03

There are two ways to test. Herein we use the MOBILE option which is already selected.  Actually as you see in the previous image the steps are laid out in the Intel XDK IDE as well.

We are going to test if this works on the device. You need to push your app (the codes and all) to the Testing Server. In order to do so, click PUSH FILES green button.

You should see an Uploading Projects progress monitoring window. You will get an immediate display as to when the files are pushed.

4. Now you are going to access the files you pushed (in particular the index.html) to the server on your device (iPhone, etc). You need to remember the username/password for your Intel XDK account.

The following image shows the projects that I have pushed so far. it is only accessible to the user id/password of your Intel XDK account.

Now accessing the app I created on the iPhone 6S, I can view the app and verify it functions.

The Intel App Preview was launched. You can view instructions.

. 

For accessing your app you need to log in. After which you can see all the apps uploaded to the server.


Now you can choose the app you wan to view on your device and click the listed item. You can go back make changes, upload to the server and download it to your device.

This is how the app will appear on the iPhone 6S I am using. This is as it appears when the button inside the iFrame is clicked.


 The next step is to go back to Intel XDK and use the resources therein to package it and place in one of the app stores.

Review previous posts of this thread:

Part 1:Creating a Intel XDK project using a template; SideMenu project UI, SideMenu on iPhone6 emulator
http://hodentekmobile.blogspot.com/2015/11/develop-side-menu-app-using-intel-xdk.html

Part 2: Review of Controls and Layout as well as working with Pages. Pages in a SideMenu
http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk.html

Part 3: Linking the pages and Navigation
http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk_19.html

Part 4: Adding the BACK button to return to the previous page.
http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk_26.html

Part 5: Adding pages and organizing controls  to the project
http://hodentekmobile.blogspot.com/2016/01/develop-side-menu-app-using-intel-xdk.html

Part 6: Considerations in adding images and other content
http://hodentekmobile.blogspot.com/2016/02/develop-side-menu-app-using-intel-xdk.html

Part 7: Viewing the app on an emulator
http://hodentekmobile.blogspot.com/2016/05/develop-side-menu-app-using-intel-xdk.html



Friday, May 13, 2016

Sandbox CSS attribute of iFrame in Intel XDK

The Sandbox attribute provides security to your application. Sandbox attribute is like police and it restricts the iFrame related detrimental activities. Sandbox without a value applies all restrictions. You can enable one or more values for Sandbox such as, allow-forms, allow-popups, allow-same-origin, allow scripts etc.

With Sandbox attribute present:

Iframe content is assumed to be from a unique origin
You cannot submit a form
You cannot run  script
API's are disabled
Cannot have links targeting other browser context
No plugins allowed (object, applet etc)
Will block automatically triggered media features like playing a video or audio.

iFrame can take many attributes including Sandbox.

iframe {
 border: 8px solid red;
 padding: .5rem;
 margin: 1rem;
 box-shadow: 20px 20px 10px #888888;
 width: 300;
 height: 100;
 Sandbox;
}

Intel XDK has a < ifr/> widget described in my earlier posts.

Here I describe how it works in Intel XDK.


1. IntelXDK does not correctly point to the correct src attribute as displayed in your design.

The iFrame element in the design has its source called SandboxTest1.html. The html page has a script that is run when the Test Script is clicked. The No pop-ups is used for testing some scripts on the page.

iFrame_00
However, the following code which should bring up the correct source brings up a different URL.

alert(document.getElementById("ifr").src); The id of the iFrame being "ifr"

There is a srcdoc attribute which brings up an empty response.

The above alert brings up the following response:

iFrame_01

2. The following HTML code for the <iframe/> does allow the script to run. The Test Script button  can run the code


3. Now I change the HTML fragment to include Sandbox as shown.

This works like it is intended. The script cannot run.

4. The various restrictions on the <iframe/> appears to be only four of the CSS3 attributes as shown here:


iframe_03

Wednesday, May 11, 2016

Develop a Side Menu App using Intel XDK - Part 7

You have developed an APP such as the Side Menu App and now you want to see how it would look when you bring it up on a smart phone. It is true that this app is not complete, as yet. But it is always of interest to know how it would look on  a real phone, an Apple phone or some other phone.

The first thing for you to see is how it would look on the emulator. This post is to describe how it would look on an emulator.


Let us say, I have finished designing an app, herein Hodentek Books which appear as shown in DEVELOP | DESIGN .


appDisplay_00

Using the Emulator:


I am now in the DEVELOP

appDisplay_01

Now I change over to EMULATE tab as shown:

appDisplay_02

The DEVICES panel gets displayed and shows the emulator for the phone type, in this case Apple iPhone 6.

appDisplay_03

The app you designed now appear in the center of IDE as shown.


appDisplay_04

From the drop-down handle on DEVICES you can access many different emulators (Intel XDK Version 3240). In fact there are a few more if you scroll down:


appDisplay_05

As we saw earlier, the Apple iPhone 6 emulator showed you how the app would look. The app is functional as seen here for one of the clicked links in the app display earlier.

appDisplay_06

When in EMULATE tab if you change the device type in DEVICES, the program processes the change and you would see the start page on the new emulator. The next one shows the app when I changed the emulator from iPhone 6 to Nokia Lumia 920.



appDisplay_07

Getting it displayed is one thing and getting it displayed on a real device is quite another. Just because it worked on an emulator does not mean it would work the same way on a device. Also to be noted, that just because it did not work well (some functionality did not work) does not mean that it will work in the emulator. Most of the time it works but not always. You should test, test and test.

In the next post I will describe how you may display your app on smart phone such as iPhone 6 or any other which you have.

Review Previous posts here:

Part 1:Creating a Intel XDK project using a template; SideMenu project UI, SideMenu on iPhone6 emulator
http://hodentekmobile.blogspot.com/2015/11/develop-side-menu-app-using-intel-xdk.html

Part 2: Review of Controls and Layout as well as working with Pages. Pages in a SideMenu
http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk.html

Part 3: Linking the pages and Navigation
http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk_19.html

Part 4: Adding the BACK button to return to the previous page.
http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk_26.html

Part 5: Adding pages and organizing controls  to the project
http://hodentekmobile.blogspot.com/2016/01/develop-side-menu-app-using-intel-xdk.html


Tuesday, May 10, 2016

Use this Arduino software to work with recent Hardware

If you intend using the more recent Arduino hardware such as Arduino 101 you better use the more recent Arduino IDE 1.6.8.

Here is an image of all Arduino products.


In a previous post you reviewed using the Visual Studio 2015 with Arduino Extension. In this post you will learn how to download the latest version and install it on Windows 10 computer.

You download arduino-1.6.8-Windows.exe from here.

You begin installing by double clicking the executable.
Here are some of the installation time screen shots for your reference:



On Windows 10 it also adds a desktop App to the All Apps menu.

You launch it by double clicking the shortcut or the desktop app or the shortcut in the installation folder.
 
Click Tools in the main menu to find the Board Manager link ass shown. In the drop-down you can see the various hardware that can be accessed.

Click Board Manager... to open another drop-down. Scroll down to view the Arduino 101 by Intel.

That's all.

Friday, May 6, 2016

Using Apache Cordova with Visual Studio 2015 Community

Intel XDK has great resources for HTML5 Web apps targeting mulitple platforms. Additonally it has debugging support for iOS and Android devices but not for Windows platform.

The free version of Visual Studio 2015 called the Visual Studio 2015 Community has excellent support for everything from web to data; on-site, cloud and hybrid applications including Business Intelligence. This support is out of the box for Windows platform. However, for open source and third party there are extensions that can be used.

You can add extensions to work with Apache Cordova based apps. Here are some of the extenions presently available online.

The Cordova Multiplatform is well suited for HTML5 but the language used is TypeScript. I am not sure if there is one in JavaScript.



More information here.