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/27 08:39] – [Android] 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 37: Line 35:
 npm update -g ionic cordova npm update -g ionic cordova
 </code> </code>
-==== Create project ==== 
  
-  * https://devdactic.com/login-ionic-2/ +===== Update libs =====
-  * https://ionicacademy.com/ionic-3-lazy-loading/ +
-  * https://www.joshmorony.com/an-introduction-to-observables-for-ionic-2/ +
- +
-Activate library +
-<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 65: Line 46:
 </code> </code>
  
-==== Android ====+===== Android =====
  
 It is important to install native gradle or use gradle shipped with android studio (see PATH below) It is important to install native gradle or use gradle shipped with android studio (see PATH below)
Line 91: Line 72:
 </code> </code>
  
-example2+example2 with cordova-plugin-camera-preview.git -> GianoDroidIonic
 <code> <code>
 ionic start MyCameraApp blank --id org.csgalileo.mycameraapp ionic start MyCameraApp blank --id org.csgalileo.mycameraapp
Line 99: Line 80:
  
 ionic cordova plugin add ../cordova-plugin-camera-preview ionic cordova plugin add ../cordova-plugin-camera-preview
 +npm install @ionic-native/camera-preview --save
 +
 ionic cordova plugin add cordova.plugins.diagnostic ionic cordova plugin add cordova.plugins.diagnostic
 npm install @ionic-native/diagnostic --save npm install @ionic-native/diagnostic --save
-npm install @ionic-native/camera-preview --save 
  
 ionic cordova build android ionic cordova build android
 ionic cordova run android --device ionic cordova run android --device
 </code> </code>
-==== Eclipse ==== 
  
-$P is $NAME/platforms/android path+==== Add java sources and native C++ support ====
  
-  * Import -> "Existing Android Code ..." -> $NAME/platforms/android and deselect all subprojects +Add opencv support http://wiki.csgalileo.org/projects:giano:android#simpler_mode
-  * Project -> Build Path -> Configure Build Path +
-    * 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 ====+In <project root> add: 
 +CMakeLists.txt 
 +<file> 
 +cmake_minimum_required(VERSION 3.4.1) 
 +set(CMAKE_VERBOSE_MAKEFILE on) 
 +find_library(log-lib log)
  
-Create zip file named **gpio.jar** and put into platforms/android/libs +set(OpenCV_DIR "android-opencv/opencv/src/sdk/native/jni") 
-<code> +find_package(OpenCV REQUIRED) 
-lib +message(STATUS "OpenCV libraries: ${OpenCV_LIBS}") 
-└── armeabi +</file>
-    └── libgpio.so +
-</code>+
  
-build.gradle search inside libs for *jar (see dependancy section) +and add to //build-extras.gradle// (this file is copied with hook <hook src="scripts/gradle.sh" type="after_platform_add" />) 
-===== Tips =====+<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' 
 +  }
  
-==== Video fullscreen autoplay ====+
 + 
 +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'
  
-<code html> 
-<video ng-controller="startVideo" controls="" style="width:100%; height:auto" autoplay="false"> 
-   <source src=""></source> 
-</video> 
-</code> 
  
-<code javascript> 
-.controller('startVideo', function($scope) { 
-  angular.element('video').attr('src','http://...'); 
-}); 
-</code> 
  • tips/ionic.1501137584.txt.gz
  • Last modified: 2017/07/27 08:39
  • by scipio