Videogular – The HTML5 video player for AngularJS

Note: the demo embedded below might not work due to the source files only being available over HTTP, and this site being loaded over HTTPS. In that case you can check out the pen here

videogular

Videogular is a video application framework for desktop and mobile powered by AngularJS

Really nice player. Works way smoother than jwplayer + angular-jwplayer and has a modern style (both visual and architectural).

Videogular – The HTML5 video player for AngularJS →

ion-drawer-vertical – A vertical slide out panel (toggle panel) for Ionic

For a current Ionic project I’m working on I needed a vertical slide out panel (toggle panel) to store in some content that may be hidden by the user. As I couldn’t immediately find such a component in Ionic itself I decided to create one myself: ion-drawer-vertical (source available on GitHub). The result is a set of directives one can use. The directives also ships with a necessary controller and a delegate to allow one to manipulate the drawer from any scope. Both top and bottom drawers are supported.

Continue reading “ion-drawer-vertical – A vertical slide out panel (toggle panel) for Ionic”

Cordova build hook script for displaying build version in your app

B6dg_roIMAEsM_9

#!/usr/bin/env node
 
// This plugin replaces text in a file with the app version from config.xml.

var wwwFileToReplace = "js/build.js";
 
var fs = require('fs');
var path = require('path');
 
var rootdir = process.argv[2];
 
function loadConfigXMLDoc(filePath) {
    var fs = require('fs');
    var xml2js = require('xml2js');
    var json = "";
    try {
        var fileData = fs.readFileSync(filePath, 'ascii');
        var parser = new xml2js.Parser();
        parser.parseString(fileData.substring(0, fileData.length), function (err, result) {
            //console.log("config.xml as JSON", JSON.stringify(result, null, 2));
            json = result;
        });
        console.log("File '" + filePath + "' was successfully read.");
        return json;
    } catch (ex) {
        console.log(ex)
    }
}
 
function replace_string_in_file(filename, to_replace, replace_with) {
    var data = fs.readFileSync(filename, 'utf8');
 
    var result = data.replace(new RegExp(to_replace, "g"), replace_with);
    fs.writeFileSync(filename, result, 'utf8');
}
 
var configXMLPath = "config.xml";
var rawJSON = loadConfigXMLDoc(configXMLPath);
var version = rawJSON.widget.$.version;
console.log("Version:", version);
 
var rootdir = process.argv[2];
 
var currentBuildPlatforms = process.env.CORDOVA_PLATFORMS.split(",");
console.log("Current build platforms: ", currentBuildPlatforms);
 
if (rootdir) {
    currentBuildPlatforms.forEach(function(val, index, array) {
        var wwwPath = "";
        switch(val) {
            case "ios":
                wwwPath = "platforms/ios/www/";
                break;
            case "android":
                wwwPath = "platforms/android/assets/www/";
                break;
            default:
                console.log("Unknown build platform: " + val);
        }
        var fullfilename = path.join(rootdir, wwwPath + wwwFileToReplace);
        if (fs.existsSync(fullfilename)) {
            replace_string_in_file(fullfilename, "%%VERSION%%", version);
            console.log("Replaced version in file: " + fullfilename);
        }
    });
}

Essentially it string-replaces %%VERSION%% in js/build.js (or any file you want) with version as specified in config.xml. To use it in your app make it available in a constant which you then inject as a dependency where needed:

// js/build.js
angular.module('equipmentShare').constant('BUILD', {
    VERSION: "%%VERSION%%" // %%VERSION%% will be replaced with the actual version from config.xml
});

// appController.js
angular.module('equipmentShare').controller('AppController', function ($scope, BUILD) {
    $scope.appVersion = BUILD.VERSION;
});

Cordova build hook, to use build version from config.xml in your hybrid app →

(via)

In love with Ionic Framework

UPDATE: Want to get a solid introduction to Ionic? I recommend reading Learning Ionic, a book I tech reviewed.

ionic

Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps. Built with Sass and optimized for AngularJS.

Whilst Sass is just an extra (you don’t really need it), the true power is the fact that Ionic’s logic is built on top of AngularJS within a Cordova environment:

Ionic utilizes AngularJS in order to create a framework most suited to develop rich and robust applications. Ionic not only looks nice, but its core architecture is for serious app development, and AngularJS ties in perfectly.

It really does tie in perfectly. Most of the Ionic JavaScript UI Components either ship with a delegate or provide a controller which you inject as a dependency, AngularJS style:

angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };
});

~

Having fiddled with Cordova and having built an AngularJS app before (with ngRoute, ngResource, etc.), the transition to Ionic went absolutely smooth. In under 24hrs time – excluding some preliminary research in which I converted my previously built AngularJS app to an Ionic flavored version – I went from no app to having an Ad Hoc distribution of the EV-Point.be iPhone app.

evpoint-app-001evpoint-app-002evpoint-app-003evpoint-app-004
EV-Point 0.0.4 screenshots

The app, in its current state, allows one to:

  • View a list of chargepoints
  • Filter the list of chargepoints
  • Get a detailed view of a chargepoint
  • Log in via OAuth
  • View your account and list of EV-Passes (login required)
  • Get a detailed view of an EV-Pass (login required, incomplete)
  • Perform an action – remoteStart / remoteStop – on a chargepoint, after selecting a connector and EV-Pass (login required)

You can see the app actually perform such a remoteStart/remoteStop in this video I made last night:

Here’s how it works, in case you’re interested: The app sends an XHR request to the EV-Point API. After validation of all data and tokens, the API instructs the Central System to send a RemoteStart OCPP-J request to the Charge Point. After acknowledgement of that request by the Charge Point, the Charge Point will actually start the transaction and notify the Central System that it has started. Concurrently, the app will long poll the Central System to detect the change in connectorstatus (from available to occupied), and update the UI accordingly. I also wrote the mentioned API and Central System for this (still ongoing) project.

Please note that action in the video was performed using a testplug, just imagine an electric vehicle being connected to the other side of that small cable.

~

If you’re a frontend web developer wanting to dive into app development, I’d really recommend Ionic. It smoothly allows one to create a native-like app, in a very short period of time, without the need to learn a whole pack of new stuff. If you know AngularJS, you already know Ionic. Next to the ease of use, a big plus of Ionic is that it ships with excellent documentation and a lot of interactive examples for one to learn from. Above that the community (Forums, GitHub, etc.) are thriving.

Ionic Framework →
Ionic Framework Docs →
Ionic on CodePen →
Learn Ionic →

ngCordova – Cordova with the power of AngularJS

ngcordova

module.controller('PictureCtrl', function($scope, $cordovaCamera) {

  $scope.takePicture = function() {
    $cordovaCamera.getPicture({

      // See all the possible Camera options from the Camera docs [1]:
      /// https://github.com/apache/cordova-plugin-camera/blob/master/doc/index.md#cameraoptions

    }).then(function(imageData) {

      // Success! Image data is here

    }, function(err) {

      // An error occured. Show a message to the user

    });
  }

});

ngCordova is a set of AngularJS extensions on top of the Cordova API to make it easier to build, test, and deploy Cordova apps with AngularJS.

ngCordova – Simple extensions for common Cordova Plugins →