wayneparrott / ezar-compass

AR Compass using ezAR
http://www.ezartech.com
Other
7 stars 5 forks source link

is this plugin available for Ionic? #2

Open kruny1001 opened 8 years ago

kruny1001 commented 8 years ago

I have read your blog and tried to put ezar plugin onto Ionic. However, I could not make it. Can you tell me where I am wrong?

ezartech commented 8 years ago

Hi Kevin, ezAR creates a camera view that resides below the Cordova/Ionic webview (embedded browser). In order to see the camera view you need to set the css background-color of the ionic UI elements that sit on top of the camera view to transparent. Did you try this yet? That is what I did when I created this app http://www.ezartech.com/gallery/x5abfqsgb294kd8phpjv6xbvjfsetg

Wayne ezAR Developer

kruny1001 commented 8 years ago

Thank you for your quick response. When I run your code example with cordova project. It works perfectly but with Ionic I have no idea when I should initiate the videoovelay or light. Can you give me example code for Ionic app?

ezartech commented 8 years ago

I can gen a small example but I think it ultimately depends on the ionic UI you are developing. When I developed the picture preview app I recall having to tinker with the css of several ionic controls to enable the ezar camera view to show through. I used gapdebug (free cordova app debugger/inspector) to dynamically adjust the css to fit my purposes.

ezartech commented 8 years ago

Can you describe your app layout or post a screenshot in order for me to create a relevant example? If yes and you want to keep it private send to info at ezartech dot com.

kruny1001 commented 8 years ago

app.run(function($ionicPlatform) { $ionicPlatform.ready(function() { if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.disableScroll(true); }

if(window.ezar){
   ezar.initializeLight(
      function() {
        if (ezar.hasLight()) {
          ezar.setLightOn();
        }
        alert("ezar initialization success");
      },
      function(error) {
        alert("ezar light initialization failed light");
     }
    );
}
if(window.StatusBar) {
  StatusBar.styleDefault();
}

}); })`

My problem is I can't not access the plugins object from the angular app.

wayneparrott commented 8 years ago

@kruny1001

My problem is I can't not access the plugins object from the angular app.

Not really an ezar problem but let's discuss.

To ensure there is not some platform change in ionic or cordova I update both and then created the ionic/cordova project using the default ionic template. I then added the ezar plugins. I used the same code you posted above in the app.run() function. Built and installed the app on a Nexus 5 android device. No issues observed when the app started.

You mention you can not access the cordova.plugins object. I had no issue access it. I used gapdebug to debug the app. From the debugger console the cordova.plugin object is defined and includes the keyboard plugin. See attached screenshot of gapdebug ezar-ionic-debug-screenshot debug session.

wayneparrott commented 8 years ago

I'll post a few minor changes to default ionic project to make the video from the videoOverlay visible - mostly css.