How to draw "WiFi icon" using QML

Muktha PM

WiFi icon needs to be drawn in QML

Markkyboy

Why must it be drawn?, for what purpose?, what are you trying to achieve?

Why can you not simply use an existing icon in jpg/png/svg format?

ndias

As @Markkyboy metioned before you can use a svg or png format to draw a WiFi icon. If you want draw it you can use shapepath to do it.

You can find an simple draft below:

import QtQuick
import QtQuick.Shapes

Item {
    id: wifiIcon

    width: parent.width < parent.height ? parent.width : parent.height
    height: width
    anchors.centerIn: parent

    Rectangle {
        anchors.horizontalCenter: wifiIcon.horizontalCenter
        anchors.bottom: wifiIcon.bottom
        

        // Set size and corner radius to define a circle
        width: wifiIcon.width/6
        height: wifiIcon.height/6
        radius: width/2
        
        color: "#4EC5F1"
        //border.color: "black"
        //border.width: 1
    }

    Shape {
        ShapePath {
            fillColor: "transparent"
            strokeColor: "#4EC5F1"
            strokeWidth: wifiIcon.height/8
            capStyle: ShapePath.RoundCap
            PathAngleArc {
                centerX: wifiIcon.height / 2
                centerY: wifiIcon.width / 4 + wifiIcon.width / 4
                radiusX: wifiIcon.width < wifiIcon.height ? wifiIcon.width/2 - wifiIcon.height/8 : wifiIcon.height/2 - wifiIcon.height/8
                radiusY: radiusX
                startAngle: 200
                sweepAngle: 140
            }
        }

        ShapePath {
            fillColor: "transparent"
            strokeColor: "#4EC5F1"
            strokeWidth: wifiIcon.height/8
            capStyle: ShapePath.RoundCap
            PathAngleArc {
                centerX: wifiIcon.height / 2
                centerY: wifiIcon.width / 3 + wifiIcon.width / 4
                radiusX: wifiIcon.width < wifiIcon.height ? wifiIcon.width/3 - wifiIcon.height/8 : wifiIcon.height/3 - wifiIcon.height/8
                radiusY: radiusX
                startAngle: 200
                sweepAngle: 140
            }
        }

        ShapePath {
            fillColor: "transparent"
            strokeColor: "#4EC5F1"
            strokeWidth: wifiIcon.height/8
            capStyle: ShapePath.RoundCap
            PathAngleArc {
                centerX: wifiIcon.height / 2
                centerY: wifiIcon.width / 2 + wifiIcon.width / 4
                radiusX: wifiIcon.width < wifiIcon.height ? wifiIcon.width/4 - wifiIcon.height/8 : wifiIcon.height/4 - wifiIcon.height/8
                radiusY: radiusX
                startAngle: 200
                sweepAngle: 140
            }
        }
    }
}

Regards

Muktha PM

@Markkyboy To show the network strength, in jpg or with any image icons, we cannot show the network strength.

ndias

@Muktha-PM said in How to draw "WiFi icon" using QML:

@Markkyboy To show the network strength, in jpg or with any image icons, we cannot show the network strength.

Hi @Muktha-PM ,
You can change the image source property according to the network strength:

Muktha PM

@ndias Thank you