tips:ionic

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
tips:ionic [2017/07/26 08:33] – [nodejs (latest)] scipiotips:ionic [2017/08/07 13:54] (current) – scipio
Line 2: Line 2:
  
 ===== Prerequisites ===== ===== Prerequisites =====
- 
  
 ==== nodejs (latest) ==== ==== nodejs (latest) ====
Line 19: Line 18:
 </code> </code>
  
-===== Project ===== +===== Create library =====
-==== Create library ====+
  
 <code bash> <code bash>
Line 30: Line 28:
 <code bash> <code bash>
 npm install -g ionic npm install -g ionic
-npm install -g bower+# npm install -g bower
 </code> </code>
  
Line 37: Line 35:
 npm update -g ionic cordova npm update -g ionic cordova
 </code> </code>
-==== Create project ==== 
  
-Activate library +===== Update libs =====
-<code bash> +
-. $LIB/bin/activate +
-</code> +
- +
-<code bash> +
-NAME=PeperStart +
-ionic start $NAME blank +
-cd $NAME +
-ionic browser add crosswalk #(this command enable also android platform) +
-</code> +
- +
-==== Update libs ====+
  
 <code bash> <code bash>
Line 61: Line 46:
 </code> </code>
  
-==== Eclipse ====+===== Android =====
  
-$P is $NAME/platforms/android path+It is important to install native gradle or use gradle shipped with android studio (see PATH below)
  
-  * Import -> "Existing Android Code ..." -> $NAME/platforms/android and deselect all subprojects +  * ANDROID_HOME=/opt/android-sdk 
-  * Project -> Build Path -> Configure Build Path +  * PATH=/opt/android-sdk/platform-tools:/opt/android-studio/gradle/gradle-3.2/bin/
-    * Source -> Link source -> $P/Cordovalib/src with name src-cordovalib +
-    * Libraries -> Add external JAR -> $P/Cordovalib/xwalk_core_library/xwalk_core_library_java_app_part.jar +
-    * Libraries -> Add external JAR -> $P/Cordovalib/xwalk_core_library/xwalk_core_library_java_library_part.jar+
  
-==== Native lib integration ====+example 
 +<code bash> 
 +nodeenv lib 
 +. lib/bin/activate 
 +npm install -g ionic cordova 
 +ionic start test1 blank 
 +cd test1 
 +ionic cordova plugin 
  
-Create zip file named **gpio.jar** and put into platforms/android/libs +cd .. 
-<code> +git clone https://github.com/Cloudoki/ImageDetectionCordovaPlugin.git 
-lib +# create pacakge.json in ImageDetectionCordovaPlugin 
-└── armeabi +cd test1 
-    └── libgpio.so+cordova plugin add ../ImageDetectionCordovaPlugin 
 +ionic cordova platform add android 
 +ionic cordova build android 
 +ionic cordova run android --device
 </code> </code>
  
-build.gradle search inside libs for *jar (see dependancy section) +example2 with cordova-plugin-camera-preview.git -> GianoDroidIonic 
-===== Tips =====+<code> 
 +ionic start MyCameraApp blank --id org.csgalileo.mycameraapp 
 +git clone --depth=1 https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git 
 +cd MyCameraApp 
 +ionic cordova platform add android
  
-==== Video fullscreen autoplay ====+ionic cordova plugin add ../cordova-plugin-camera-preview 
 +npm install @ionic-native/camera-preview --save
  
-<code html> +ionic cordova plugin add cordova.plugins.diagnostic 
-<video ng-controller="startVideo" controls="" style="width:100%; height:auto" autoplay="false"> +npm install @ionic-native/diagnostic --save
-   <source src=""></source> +
-</video> +
-</code>+
  
-<code javascript> +ionic cordova build android 
-.controller('startVideo', function($scope) { +ionic cordova run android --device
-  angular.element('video').attr('src','http://...'); +
-});+
 </code> </code>
 +
 +==== Add java sources and native C++ support ====
 +
 +Add opencv support http://wiki.csgalileo.org/projects:giano:android#simpler_mode
 +
 +In <project root> add:
 +CMakeLists.txt
 +<file>
 +cmake_minimum_required(VERSION 3.4.1)
 +set(CMAKE_VERBOSE_MAKEFILE on)
 +find_library(log-lib log)
 +
 +set(OpenCV_DIR "android-opencv/opencv/src/sdk/native/jni")
 +find_package(OpenCV REQUIRED)
 +message(STATUS "OpenCV libraries: ${OpenCV_LIBS}")
 +</file>
 +
 +and add to //build-extras.gradle// (this file is copied with hook <hook src="scripts/gradle.sh" type="after_platform_add" />)
 +<file>
 +android {
 +  externalNativeBuild {
 +    cmake {
 +      path "../../CMakeLists.txt"
 +    }
 +  }
 +  packagingOptions {
 +    // edit also abiFilters and clean project before make apk
 +    //exclude 'lib/armeabi-v7a/libopencv_java3.so'
 +    exclude 'lib/mips/libopencv_java3.so'
 +    exclude 'lib/mips64/libopencv_java3.so'
 +    exclude 'lib/armeabi/libopencv_java3.so'
 +    exclude 'lib/x86/libopencv_java3.so'
 +    exclude 'lib/x86_64/libopencv_java3.so'
 +  }
 +
 +}
 +
 +dependencies {
 +  compile project(':android-opencv:opencv')
 +}
 +
 +ext.postBuildExtras = {
 +  logger.quiet('adding java sources')
 +  android {
 +    sourceSets {
 +      main.java.srcDirs += '../../src/android/java'
 +      main.res.srcDirs += '../../src/android/res'
 +    }
 +  }
 +}
 +</file>
 +
 +from build.gradle of android-opencv comment classpath from dependancies
 +<file>
 +dependencies {
 +        //classpath 'com.android.tools.build:gradle:2.3.3'
 +
 +        // NOTE: Do not place your application dependencies here; they belong
 +        // in the individual module build.gradle files
 +    }
 +</file>
 +
 +with <hook src="scripts/gradle.sh" type="after_platform_add" /> apply patch to change settings.gradle in
 +<file>
 +include ":"
 +include ":CordovaLib"
 +include ":android-opencv:opencv"
 +project(":android-opencv:opencv").projectDir = new File("../../android-opencv/opencv")
 +</file>
 +
 +with <hook src="scripts/config.xml.py" type="before_compile" /> patch **res/xml/config.xml** to export plugin interface, for example
 +<file xml res/xml/config.xml>
 + <feature name="TestPlugin">
 + <param name="android-package" value="org.csgalileo.giano.TestPlugin"></param>
 + <param name="onload" value="true"></param>
 + </feature>
 +</file>
 +
 +define typescript interface
 +<file typescript src/app/test.module.ts>
 +import { Injectable } from '@angular/core';
 +
 +declare var cordova:any;
 +
 +@Injectable()
 +export class TestPlugin {
 +    public testCall() {
 +        cordova.exec(
 +                function(data) { console.log("test-plugin getDate="+data); },
 +                function(error) { console.log("test-plugin:"+error); },
 +                "TestPlugin",
 +                "getDate",
 +                []);
 +    }
 +}
 +</file>
 +
 +===== Android Studio =====
 +
 +After project creation via cli (see up) import project (Eclipse, ADT, gradle) from folder <project-root>/platforms/android (choose to update gradle).
 +
 +Now it is possible to develop JAVA code in Android Studio but HTML/TS has to be changed in <project-root>/src and synced with 'ionic build'
 +
 +
  • tips/ionic.1501050834.txt.gz
  • Last modified: 2017/07/26 08:33
  • by scipio