C

Getting Started with B2Qt.Wifi in QML

Preparing the Application

Use the following import statement in the QML files to access the B2Qt.Wifi QML types:

import B2Qt.Wifi 1.0

This guide will demonstrate how to create a QML based application that utilizes B2Qt.Wifi API to set up a wifi network connection. We will start by looking at how to scan the surroundings for wifi access points and how to display and process this data in the application. At the end of the guide we will show how to connect directly to a known wifi network configuration.

Listing Wifi Networks

First we need to set up ListView which we will use to list wifi networks that can be sensed by the device. The sensed network access points are packed as a list-based data model and can be retrieved from WifiManager::networks. Here we also set a custom item delegate and connect to WifiManager::networkStateChanged signal.

ListView {
    id: networkView
    model: WifiManager.networks
    delegate: listDelegate
    implicitHeight: 800
    anchors.top: listNetworksButton.bottom
    anchors.topMargin: 30
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    visible: false
    clip: true

    property string networkStateText: ""
    property QtObject expandedNetworkBox: null
    property bool hasExpandedNetworkBox: expandedNetworkBox !== null

    function setNetworkStateText(networkState) {
        if (networkState === WifiManager.ObtainingIPAddress)
            networkView.networkStateText = " (obtaining ip..)"
        else if (networkState === WifiManager.DhcpRequestFailed)
            networkView.networkStateText = " (dhcp request failed)"
        else if (networkState === WifiManager.Connected)
            networkView.networkStateText = " (connected)"
        else if (networkState === WifiManager.Authenticating)
            networkView.networkStateText = " (authenticating..)"
        else if (networkState === WifiManager.HandshakeFailed)
            networkView.networkStateText = " (wrong password)"
        else if (networkState === WifiManager.Disconnected)
            networkView.networkStateText = ""
    }

    Connections {
        target: WifiManager
        onNetworkStateChanged: networkView.setNetworkStateText(networkState)
    }

    Component.onCompleted: {
        if (WifiManager.backendState == WifiManager.Running)
            networkView.visible = true
    }
}

Creating a Delegate

The wifi network model has many data roles that describe the different properties of wifi networks. This data can be used by an application to list detailed network information and/or to set up WifiConfiguration objects. We use these network data roles in our delegate for listing ssid, bssid, supported security protocols and for signal strengh representation.

Text {
    id: ssidLabel
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.margins: 5
    anchors.leftMargin: 10
    font.pixelSize: 26
    font.bold: true
    text: isCurrentNetwork ? ssid + networkView.networkStateText : ssid
    Component.onCompleted: networkView.setNetworkStateText(WifiManager.networkState)
}

Text {
    id: bssidLabel
    anchors.top: ssidLabel.bottom
    anchors.left: parent.left
    anchors.margins: 5
    anchors.leftMargin: 30
    text: bssid
    font.pixelSize: ssidLabel.font.pixelSize * 0.8
}

Text {
    id: flagsLabel
    anchors.top: bssidLabel.top
    anchors.left: bssidLabel.right
    anchors.leftMargin: 35
    text: (supportsWPA2 ? "WPA2 " : "")
         + (supportsWPA ? "WPA " : "")
         + (supportsWEP ? "WEP " : "")
         + (supportsWPS ? "WPS " : "");
    font.pixelSize: ssidLabel.font.pixelSize * 0.8
    font.italic: true
}

ProgressBar {
    id: signalStrengthBar
    height: 20
    width: networkBox.width * 0.5
    anchors.margins: 10
    anchors.right: parent.right
    anchors.top: parent.top
    minimumValue: 0
    maximumValue: 100
    value : signalStrength
}

Connecting To a Selected Network

WifiConfiguration element will be used to describe the network that we want to connect to, selected from the network list.

WifiConfiguration { id: config }

When Connect button is clicked we set the network name and password properties on the config and pass it to WifiManager::connect, which sets up a wifi connection behind-the-scenes. During this operation or whenever there are changes in the network state, QWifiManager provides asynchronous QWifiManager::NetworkState change events.

onClicked: {
    if (connected) {
        WifiManager.disconnect()
    } else {
        config.ssid = ssid;
        config.passphrase = passwordInput.text
        if (!WifiManager.connect(config))
            print("failed to connect: " + WifiManager.lastError)
    }
}

Connecting To a Known Network

If you are not interested in scanning the environment for wifi network access points and you already know the network configuration beforehand, the network scanning, listing and selection steps can be entirely skipped. This can be a valid use-case for devices that won't be changing their physical location.

QWifiManager::BackendState change events are delivered asynchronously. Therefore we have to add a signal handler that will connect to the network access point after the backend initialization process has been completed, if the backend is not already in the initialized state at the time of running this code.

Item {
    WifiConfiguration {
        id: localConfig
        ssid: "network-for-my-device"
        passphrase: "password123"
        protocol: "WPA2"
    }

    Connections {
        target: WifiManager
        onBackendStateChanged: {
            if (WifiManager.backendState === WifiManager.Running)
                WifiManager.connect(localConfig)
        }
        onNetworkStateChanged: {
            if (WifiManager.networkState === WifiManager.Connected)
                print("successfully connected to: " + WifiManager.currentSSID)
        }
    }

    Component.onCompleted: {
        if (WifiManager.backendState === WifiManager.Running) {
            WifiManager.connect(localConfig)
        } else {
            WifiManager.start()
        }
    }
}

Files:

Available under certain Qt licenses.
Find out more.