Archives for June 2015

Native Android App Development Using Only HTML-Javascript-CSS

cordovaHere’s a handy gem for your bag of tricks. Did you know that a native Android App can be developed using only the web familiar html, javascript and css? Without the need to dig deep into the bowels of the OS.

Yep, it is definitely possible – all while still offering control of all your device’s interfaces such as cameras, bluetooth, wifi…you name it. You see, the hardware dependent components are supported with an Apache developed framework called Cordova. And while this article focuses on the Android platform, the same App can easily be ported to ios or Amazon Fire, with little or no change. Making it possible to develop your App once for distribution across several different device types.

Here is how to setup the development environment and install an application on an Android device.


Setting Up The Environment

The trick is using Cordova to provide a platform for building native applications using only HTML. CSS, and Javascript.

What is Cordova?

This is a group of  APIs supporting the development of native Apps without using the language of the device. These APIs provide access to the device’s hardware sensors. And with a few simple steps, you are up and running, developing your unique application.

Step 1:

Install node.js from nodejs.org

This will allow you to run “node” and “npm” from a command line window.

Step 2:

Install a git client from http://git-scm.com/.

This will allow you to invoke “git” from a command line.

Step 3:

Install the Cordova module using npm by entering the following at the command line:

npm install -g cordova

Step 4:

Setup the Eclipse for Android App Development Environment by following the following instructable:

http://www.instructables.com/id/How-To-Setup-Eclipse-for-Android-App-Development/?ALLSTEPS


Creating A New Application

Step 1:

Open a cmd windows.

Step 2:

Change directory to the base directory for your workspaces (your choice).

Cd c:\myworkspace

Step 3:

Create new folder with app name (no spaces):

mkdir mynewapp

cd mynewapp

Step 4:

Create app file structure:

cordova create appfiles com.author.mynewapp MyAppTitle

Where

  • “appfiles” is the folder to create the app file structure
  • “com” is the convention used to start the app filename
  • “author” is the developer or company name or initials
  • “mynewapp” is the bame of the app
  • “MyAppTitle” is the title of the app

Step 5:

Add platform (android or ios)

cd appfiles

cordova platform add android

Step 6:

Add plugins as needed (basic required plugins;device,console,file shown here)

Get plugin names from plugins.cordova.io/#/ Then enter the following for each plugin to be added:

cordova plugins add org.apache.cordova.device

cordova plugins add org.apache.cordova.console

cordova plugins add org.apache.cordova.file

In the future, plugins will be delivered using npm. See the instruction at plugins.cordova.io/#/ for more information regarding npm plugin delivery.


Building the Application

Step 1:

Open Eclipse

Step 2:

Install your USB cable from the PC running eclipse to the Android device.

Step 3:

Select Import from the File menu.

Step 4:

Select the base folder created for the newly created project.

Step 5:

First Select “Clean” from the Project Menu.

Step 6:

Then Click on the “Run” icon to build and launch the new app on your device


Editing The Application

The App starts with the launching of the index.html file located at:

<your base app workspace folder>\iotmobile\appfiles\platforms\android\assets\www

this file should be edited to change the functionality of the App. Javascript/Jquery and css files can similarly be customized. They are located at:

<your base app workspace folder>\iotmobile\appfiles\platforms\android\assets\www\js


Conclusion

There you have it!

A quick reference to setting up the Android Development Environment, creating a blank project, building the App and finally loading running it on your device. Now it’s your turn. What will you create?

I hope you find this information useful…

droid

Loading

Share This:
FacebooktwitterredditpinterestlinkedintumblrFacebooktwitterredditpinterestlinkedintumblr

Compiling ESP8266 Legacy App with SDK 1.1.1

SDK

Have you ever upgraded to a newer version of software or operating system, only to find once working Apps suddenly broken? And now it is not so easy to turn back…

I ran into this sort of thing with the ESP8266 SDK version 1.1.1. It had fixes for the problems I had been experiencing, but my application would no longer compile without error. Yep, this SDK was not compatible with programs developed using my earlier SDK (1.0.1). Some things were added. One item was now required, yet it did not exist before version 1.1.1. Still other features were removed.

Even the IoT_Demo example included with this latest version would not build successfully.

This upgrade started to rub me the wrong way. But finally, through some code review, minor modifications and interaction with EspressIf, the incompatibilities I had encountered were eventually sorted out.

Here is what I discovered and had to change to build an older application (based on the IoT_Demo example) with the improvements offered with SDK 1.1.1. So you can minimize the upgrade challenges and move on. To focus on your latest creation.

Tweaking your application for SDK 1.1.1 compatibility

1. The structure “rst_info” in user_interface.h has changed.

From this:

struct rst_info{
    uint32 <strong>flag</strong>;
    uint32 exccause;
    uint32 epc1;
    uint32 epc2;
    uint32 epc3;
    uint32 excvaddr;
    uint32 depc;
};

To this:

struct rst_info{
    uint32 <strong>reason</strong>;
    uint32 exccause;
    uint32 epc1;
    uint32 epc2;
    uint32 epc3;
    uint32 excvaddr;
    uint32 depc;
};

This will require a change to the structure reference in the function user_esp_platform_init(void) in the file user_esp_platform.c. Change all references from rtc_info.flag to rtc_info.reason.

2. PULLDWN has been removed.

The code statements need to be removed or commented out in the gpio16.c file:

	switch(pull) {
		case GPIO_PULLUP:
			//PIN_PULLDWN_DIS(pin_mux[pin]);
			PIN_PULLUP_EN(pin_mux[pin]);
			break;
		case GPIO_PULLDOWN:
			PIN_PULLUP_DIS(pin_mux[pin]);
			//PIN_PULLDWN_EN(pin_mux[pin]);
			break;
		case GPIO_FLOAT:
			PIN_PULLUP_DIS(pin_mux[pin]);
			//PIN_PULLDWN_DIS(pin_mux[pin]);
			break;
		default:
			PIN_PULLUP_DIS(pin_mux[pin]);
			//PIN_PULLDWN_DIS(pin_mux[pin]);
			break;
	}

NOTE: My application also called “PIN_PULLDWN_DIS” in ds18b20.c. If you are using the ds18b20.c or any other library that calls “PIN_PULLDWN_DIS”, it will need to be removed or commented out.
3. “user_main.c” now is required to include the function “user_rf_pre_init().

void user_rf_pre_init(void)
{
	system_phy_set_rfoption(2);
}

You do not need to include a call to “system_phy_set_rfoption()” in this function, but this is the ONLY function that allows this function to be called. If interested in learning more, refer to the latest SDK programming guide for this new feature.

4. The “Make” file is missing a required library.

Add “pwm” to the LIB line in the Make file for a successful application build:

# libraries used in this project, mainly provided by the SDK
LIBS		= c gcc hal phy pp net80211 lwip wpa <strong>pwm</strong> main json upgrade

And with these minor adjustments, I have successfully built my previously built App using SDK 1.1.1.

This is quite thrilling for me and I hope you too have success using SDK 1.1.1 and beyond. For me, this is the best SDK version yet.

The issues I had in the past with the Wifi server failing to respond to requests (STATION Mode) after about a minute and the AP mode simply not working with Android devices are gone.

Now we can focus on creating amazing things, with all the features of the always improving SDK APIs. From my experience, the SDK is by far the most capable environment to build your IoT visions available for the cheap yet capable ESP8266.

I hope you find this information useful.

Loading

Share This:
FacebooktwitterredditpinterestlinkedintumblrFacebooktwitterredditpinterestlinkedintumblr