How to use non native plugins on Ionic?

what kind of updates ??

In the config.xml you should have all your plugins, name and version…
Make ionic state save to update package.json and ionic plugin add cordova-plugin-app-version --save to update config.xml with all informations about the plugins that you had instaled

(one line of my config.xml with the info about one of my plugins)
<plugin name="phonegap-plugin-barcodescanner" spec="~6.0.5" />

Sorry, in my previous post when I talk about updates I mean ionic and cordova updates!

I am working on ionic 2 and plugin i am using is Network Interface, which gives me the error

Network Interface is not defined. 

My phone is connected to any of the wifi router, I wanted to retrieve the IP of that router. I have tried all possible option which are there on Web , but i am still not able to find the correct answer.

networkinterface.getWiFiIPAddress((ip) => { console.log('getWiFiIPAddress ip', ip); this.toast.show(ip, '2000', 'center').subscribe( toast => { console.log(toast); } ); });
Help me with either this plugin or any other plugin that you know it ?

I never tried that plugin but I have already read about lots of issues related with that plugin… I don’t know any alternative to get the IP sorry :confused: Check this post !

In this post The plugin which they have used, I have also used the same plugin and this plugin is not working after late 2016 . And plugin Developer is also not replying on his Plugin or Github Repository .

Hi, I am trying this, and don’t have luck to get it to work in ionic view. Everything else is the same per your code (in the .ts file). In the corresponding .html file, I have the code as follows:

<button ion-button (click)=“scan()”>

I can see button, but there is no action when clicking on it. I believe I missed something big in my test code. Can you please help?

Also, I don’t understand why we can declare a new variable and use it right away without using import, or using a new construct.
declare var Scandit;
Scandit.License…

Thank you in advance.

Hello,

I actually ended up dropping the Scandit lib in favour of the Phonegap/Ionic native one as it wasn’t behaving in some instances, and the Phonegap one did everything I needed, plus it was free, I only went with the Scandit one initially because the customer was sold on it. This was a while back though it might be working well since then.

Here is my code from a test page I built when it was all working:

import { Component } from '@angular/core';
import { Platform, AlertController } from 'ionic-angular'

declare var Scandit;

@Component({
  selector: 'page-barcode',
  templateUrl: 'barcode.html'
})
export class BarcodePage {

  public result: string;
  private scanditKey: string = "KEY...";

  constructor(private platform: Platform, private alertCtrl: AlertController) {
  }

  public scan() {
    this.platform.ready().then(() => {
      Scandit.License.setAppKey(this.scanditKey);
      let settings = new Scandit.ScanSettings();
      // All symbologies available under Community account:
      settings.setSymbologyEnabled(Scandit.Barcode.Symbology.EAN8, true);
      settings.setSymbologyEnabled(Scandit.Barcode.Symbology.EAN13, true);
      settings.setSymbologyEnabled(Scandit.Barcode.Symbology.UPCA, true);
      settings.setSymbologyEnabled(Scandit.Barcode.Symbology.UPCE, true);
      let picker = new Scandit.BarcodePicker(settings);

      // Embedded scanner test:
      // picker.setMargins(new Scandit.Margins('10%', '50%', '10%', '10%'),
      //  new Scandit.Margins('10%', '30%', '10%', '10%'), 0);

      picker.show({
           didScan: (session) => { this.success(session) },
           didCancel: (error) => { this.failure(error) }
       });
      picker.startScanning();
    });
  }

  private success(session) {
    this.result = "Code: " + session.newlyRecognizedCodes[0].data +
    "\nSymbology: " + session.newlyRecognizedCodes[0].symbology.toUpperCase();
    this.showResults();
  }

  private failure(error) {
    this.result = "Error: " + error;
    this.showResults();
  }

  private showResults() {
    let alert = this.alertCtrl.create({
      title: 'Barcode Scanner Results:',
      message: this.result,
      buttons: ['OK']
    });
    alert.present();
  }
}

Does it differ much from your’s?

Cheers.

EDIT haha woops left the key in there…

Also make sure you have installed the plugin correctly via:

cordova plugin add <path-to-unzipped-ScanditSDK>

Thank you. There is minor difference on the show() function. I changed it to your code, but still got the same. So I guess my barcode.html might be too simple. Could you please share how you evoke the scan function?

I am naive. I will try the barcode component in ionic.

<ion-header>
  <ion-navbar>
    <button menuToggle *ngIf="!selectedItem">
      <ion-icon name="menu"></ion-icon>
    </button>
      
    <ion-title> {{selectedItem.title}}</ion-title> 
  </ion-navbar>
</ion-header>

<ion-content>
  <h3 text-center *ngIf="selectedItem">
    {{selectedItem.title}}
    <ion-icon [name]="selectedItem.icon"></ion-icon>
  </h3>
  <h4 text-center *ngIf="selectedItem">
      navigated from ... <b>{{selectedItem.title}}</b>
  </h4>

  <ion-list>
      <div class="item-note" item-right>
        <font color="red">{{selectedItem.title}} </font>
      </div> 
      <button ion-button (click)="scan()">
        <ion-icon name="barcode"></ion-icon>
      </button>
  </ion-list>

</ion-content>

I just call the scan() method on a button click, same as you:

<ion-card>
    <ion-card-content>
      <div text-center>
        <p>{{result}}</p>
        <button ion-button icon-right (click)="scan()" end>
          Scan
          <ion-icon name="qr-scanner"></ion-icon>
        </button>
      </div>
    </ion-card-content>
  </ion-card>

Nothing special, which version of the Scandit plugin are you using, perhaps things have changed since I looked at it?

Also I don’t recall if it worked on Ionic View or not, I’d recommend testing on a device instead.

A post was split to a new topic: Telerik Mapbox: Cannot read property ‘show’ of undefined

I am using 5.3.4, and also tried 4.16.4.

I am not sure how the Scandit is known to ionic if it is not defined anywhere in a .TS file). A few people used declare var Scandit. while it let the tool to pass the compilation, it didnot seem to work.

Ideally, an import statement should be used, but I didnot get it to work.

I am above to give it up after trying 3 days in vain.

You need the declare var Scandit; statement at the beginning of your component otherwise what are you referencing? Also make sure the plugin is installed properly via the command I posted above, remove it first and then install again.

Then run your code on a device rather than in Ionic View, and keep an eye on the log output in Xcode / Android Studio, that will give you an indication of what the issue is, if any. It worked for me with Scandit Community version for Phonegap SDK v5.0.1, and the code posted above. Non-ionic-native plugins don’t tend to work in Ionic View, even some of the ionic-native ones don’t, use a device for testing plugins or you will be chasing a problem that may not even exist.

That’s my advice after having hours of pain with similar issues… don’t give up! :slight_smile:

Also is there any reason you need Scandit? Like I said the Ionic-native barcode scanner worked well enough for me.

Indeed, a lot of the time I was chasing non issues such as version, tool mismatches.

Isn’t it the declare statement declare a new variable that has nothing associated if no value is assigned to it?

Scandit can scan multiple various codes. I also thought it is faster, is this true?

If you’re unhappy with the performance or format support of the BarcodeScanner, before resorting to something as complicated as this “Scandit” seems to be, I would first suggest trying out ZBar.

My use case was just scanning a product barcode and then looking it up in a list products so the BarcodeScanner worked well. Wasn’t aware of ZBar at the time, thanks for the tip @rapropos.

When you declare the Scandit variable in your component it allows you to access the plugin class and all it’s members from that component, see the other posts above, that’s where I got the idea from originally.

Thank you very much … this worked for me … I was trying to use Exoplayer https://github.com/frontyard/cordova-plugin-exoplayer plugin in ionic 2 project.

I checked the plugin.xml file under the directory

plugins/cordova-plugin-exoplayer/plugin.xml

Found below lines in plugin.xml:

Added the variable as below in my page:

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;

declare var ExoPlayer : any;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

constructor(public navCtrl: NavController) {

}

ionViewDidLoad() {

let successCallback = function (json) {
};

let errorCallback = function (error) {
};

let params = {
  url: "http://www.youtube.com/api/manifest/dash/id/bf5bb2419360daf1/source/youtube?as=fmp4_audio_clear,fmp4_sd_hd_clear&sparams=ip,ipbits,expire,source,id,as&ip=0.0.0.0&ipbits=0&expire=19000000000&signature=51AF5F39AB0CEC3E5497CD9C900EBFEAECCCB5C7.8506521BFC350652163895D4C26DEE124209AA9E&key=ik0"
};

ExoPlayer.show(params, successCallback, errorCallback);

}

}

And it worked perfectly

Thanks again for the advice :slight_smile:

Note: it works on device or emulator … but I tried it in browser (using ionic run browser) but it did not work

@moama71 no worries, glad to have helped :slight_smile:

I’m still trying to get WifiWizard working but I cannot call any method on this object. I’ve installed it and tried different things (changing package.json and so on) but with no positive result. Can you help?