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]

Hi @Muktha-PM,

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