All geek questions in one place

Cordova battery status and network connectivity in Ionic 2?

I am new to the Ionic framework.

  • I am trying to display network connection and battery status in my app home page. At the moment, we have received a solution network connection. but we are struggling to display battery statusCan someone please tell me how to show the battery status of the device in the Ionic 2 app? I found the plugin cordovaBatteryStatus https://github.com/apache/cordova-plugin-battery-status .

  • I installed the plugin,

My home.html: -

<h2>Battery status: {{batteryStatus}}</h2>
<ion-content class="home" padding>
    <button ion-button color="primary" (click)="checkNetwork()" full>Get Nettwork Connection</button>
</ion-content>

My home.ts: -

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { AlertController, Platform} from 'ionic-angular';
import { BatteryStatus } from 'ionic-native';

declare var batteryLevel: any;
declare var navigator: any;
declare var Connection: any;



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

  hideTopTab:boolean=true;
   x(){
 console.log(this.hideTopTab);

    this.hideTopTab = !this.hideTopTab;
}

// hideBottomTab:boolean=true;
//    y(){
//  console.log(this.hideBottomTab);

//     this.hideBottomTab = !this.hideBottomTab;
// }
status:any;
  constructor(public alert:AlertController , public navCtrl: NavController, public platform: Platform) {
this.platform.ready().then(()=>{
  let subscription = BatteryStatus.onChange().subscribe( (status) => { 
    console.log(status.level, status.isPlugged); 
    this.status=status.level;
    } );
   } );

  }

  onBatteryStatus(info){
  alert('battery status: '+info.level+' isPlugged: '+info.isPlugged);
  batteryLevel = info.level;
}

checkNetwork() {
        this.platform.ready().then(() => {
            var networkState = navigator.connection.type;
            var states = {};
            states[Connection.UNKNOWN]  = 'Unknown connection';
            states[Connection.ETHERNET] = 'Ethernet connection';
            states[Connection.WIFI]     = 'WiFi connection';
            states[Connection.CELL_2G]  = 'Cell 2G connection';
            states[Connection.CELL_3G]  = 'Cell 3G connection';
            states[Connection.CELL_4G]  = 'Cell 4G connection';
            states[Connection.CELL]     = 'Cell generic connection';
            states[Connection.NONE]     = 'No network connection';
            let alert = this.alert.create({
                title: "Connection Status",
                subTitle: states[networkState],
                buttons: ["OK"]
            });
            alert.present();
        });
    }
}

  • The above codes are used for display Battery Status and Device Network connection. But it network connectionworks great with display Device Network connection.

  • We almost made an attempt to display Device Battery Status and Network Connection. At the moment, we got a solution network connection, but now we are trying to get a solution battery status....

  • , , , , home.ts and home.html. ...

+4
2

. onChange. . . , , status

platform.ready() . .

    status:any;
        constructor(public alert:AlertController , public navCtrl: NavController, public platform: Platform) { 
    this.platform.ready().then(()=>{
    let subscription = BatteryStatus.onChange().subscribe( (status) => { 
    console.log(status.level, status.isPlugged); 
    this.status=status.level;
    } );
   } );
}

, ,

<h2>Battery status: {{status?.level}}</h2>
<h2>Battery is plugged:{{status?.isPlugged}}</h2>

, ? undefined. .

+1

Source: https://habr.com/ru/post/1670071/

More articles:


All Articles