Battery Example

Files:

• batterysample/assets/Battery.qml
• batterysample/assets/main.qml
• batterysample/src/main.cpp
• batterysample/batterysample.pro
• batterysample/translations/batterysample.pro

Description

The Battery example demonstrates how to retrieve battery information, such as the battery charge level and its charging state.

Overview

In this sample, a couple of images and labels are used to display and describe the different battery states.

UI

The UI of this sample application consists of a couple of images that display the various battery states and two labels that show the state descriptions.

The business logic of the application is encapsulated in the BatteryInfo component which is exposed as "_battery" to the UI.

    ImageView {
        id: batteryOutline

        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Center

        imageSource: _battery.chargingState == BatteryChargingState.Unknown ? "asset:///images/battery_plugged_error.png" :
                     _battery.chargingState == BatteryChargingState.NotCharging ? "asset:///images/battery_plugged_bad.png" :
                     _battery.chargingState == BatteryChargingState.Charging ? "asset:///images/battery_plugged.png" :
                     _battery.chargingState == BatteryChargingState.Discharging ? "asset:///images/battery.png" :
                     _battery.chargingState == BatteryChargingState.Full ? "asset:///images/battery_plugged.png" : ""
    }

To show the different states of the battery, we stack a couple of ImageViews inside a DockLayout and change their 'imageSource' property depending of the current value of '_battery.chargingState'.

    ImageView {
        id: loadingLevel

        horizontalAlignment: HorizontalAlignment.Left
        verticalAlignment: VerticalAlignment.Center

        translationX: 75
        preferredWidth: _battery.level * 350.0 / 100.0

        imageSource: _battery.level <= 10 ? "asset:///images/fill_red.png" :
                     _battery.level <= 20 ? "asset:///images/fill_yellow.png" :
                     _battery.level < 100 ? "asset:///images/fill_grey.png" : "asset:///images/fill_green.png"
    }

The current battery charging level can be retrieved via '_battery.level' and is used in this example to calculate the width of the fill image inside the battery outline image.

    Label {
        id: stateLabel

        horizontalAlignment: HorizontalAlignment.Center

        text: {
            switch (_battery.chargingState) {
                case BatteryChargingState.Unknown:
                    return qsTr ("Unknown");
                    break;
                case BatteryChargingState.NotCharging:
                    return qsTr ("Not Charging");
                    break;
                case BatteryChargingState.Charging:
                    return qsTr ("Charging");
                    break;
                case BatteryChargingState.Discharging:
                    return qsTr ("Discharging");
                    break;
                case BatteryChargingState.Full:
                    return qsTr ("Full");
                    break;
            }
        }
        textStyle {
            color: Color.White
            fontSize: FontSize.XLarge
        }
    }

The textual description of the current battery state is shown in a Label, where the 'text' property is bound against a string literal, depending on the '_battery.chargingState' property.

BatteryInfo

The BatteryInfo is the central class in this sample application which is exported to the QML context inside the main function, in order for you to access all its functionality from within QML.

        // Create the battery info object
        BatteryInfo batteryInfo;

        // Load the UI description from main.qml
        QmlDocument *qml = QmlDocument::create("asset:///main.qml");

        // Make the BatteryInfo object available to the UI as context property
        qml->setContextProperty("_battery", &batteryInfo);