update IPAddress

jaredtao · Nov 15, 2024 · fbb9dc5 · fbb9dc5
1 parent eb863d5
commit fbb9dc5
Show file tree

Hide file tree

Showing 2 changed files with 159 additions and 30 deletions.
diff --git a/examples/TaoQuickShow/Contents/General/DataEntrys.qml b/examples/TaoQuickShow/Contents/General/DataEntrys.qml
@@ -145,5 +145,20 @@ Item {
                 width: 200
             }
         }
+
+        CusLabel {
+            text: qsTr("IPv4") + trans.transString
+            wrapMode: Label.WordWrap
+            width: 400
+        }
+        CusIPAddress {
+            id: ip
+            Component.onCompleted: {
+                inputIP("192.168.1.1")
+            }
+        }
+        CusLabel {
+            text: "IP Addr: " + (ip.isValid ? ip.ipAddr : "")
+        }
     }
 }
diff --git a/src/TaoQuick/Qml/CusInput/CusIPAddress.qml b/src/TaoQuick/Qml/CusInput/CusIPAddress.qml
@@ -4,58 +4,172 @@ import ".."
 import "../.."
 
 Rectangle {
+    id: control
+
     implicitHeight: CusConfig.fixedHeight
-    implicitWidth: defaultW * 4 + 2 * 3
-    property int defaultW: 40
-//    border.color: {
-//        if (!enabled) {
-//            return CusConfig.controlBorderColor_disabled
-//        } else if (input1.focus || input2.focus || input3.focus || input4.focus) {
-//            return CusConfig.controlBorderColor_pressed
-//        } else if (transArea.containsMouse) {
-//            return CusConfig.controlBorderColor_hovered
-//        } else {
-//            return CusConfig.controlBorderColor
-//        }
-//    }
+    implicitWidth: 160
+
     border.width: 1
     border.color: enabled && (transArea.containsMouse ||input1.focus || input2.focus || input3.focus || input4.focus) ? CusConfig.controlBorderColor_hovered : CusConfig.controlBorderColor
     radius: CusConfig.controlBorderRadius
     color: enabled ? CusConfig.controlColor : CusConfig.controlColor_disabled
+
+    readonly property int paddingW: 4
+    readonly property int dotW: 4
+    readonly property int spacingW: 1
+    property int inputW: (width - dotW * 3 - 6 * spacingW - paddingW * 2) / 4
+
+    property string ipAddr: input1.text + "." + input2.text + "." + input3.text + "." + input4.text
+    property bool isValid: input1.displayText.length > 0 && input2.displayText.length > 0
+                           && input3.displayText.length > 0 && input4.displayText.length > 0
+
+    function inputIP(ipAddr) {
+        var list = ipAddr.split('.');
+        if (list.length === 4) {
+            input1.text = list[0]
+            input2.text = list[1]
+            input3.text = list[2]
+            input4.text = list[3]
+        }
+    }
     Row {
-        anchors.fill: parent
-        CusTextInput {
-            id: input1
-            width: defaultW
-            validator: IntValidator{bottom: 1; top: 255;}
+        x: control.paddingW
+        width: control.width - control.paddingW * 2
+        height: control.height
+        spacing: control.spacingW
 
+      CusTextInput {
+            id: input1
+            height: parent.height
+            width: control.inputW
+            focus: true
+            activeFocusOnTab: true
+            verticalAlignment: Qt.AlignVCenter
+            horizontalAlignment: Qt.AlignHCenter
+            anchors.verticalCenter: parent.verticalCenter
+            validator: RegExpValidator{
+                regExp: /^(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/
+            }
+            KeyNavigation.right: input2
+            onTextChanged: {
+                if (text.length >= 3) {
+                    input2.focus = true
+                }
+            }
         }
-        CusLabel {
+        Label {
             text: "."
-            width: 2
+            height: parent.height
+            width: control.dotW
+            verticalAlignment: Qt.AlignBottom
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: -8
         }
         CusTextInput {
             id: input2
-            width: defaultW
-            validator: IntValidator{bottom: 1; top: 255;}
+            height: parent.height
+            width: control.inputW
+            activeFocusOnTab: true
+            verticalAlignment: Qt.AlignVCenter
+            horizontalAlignment: Qt.AlignHCenter
+            anchors.verticalCenter: parent.verticalCenter
+            validator: RegExpValidator{
+                regExp: /^(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/
+            }
+            KeyNavigation.backtab: input1
+            KeyNavigation.tab: input3
+            KeyNavigation.left: input1
+            KeyNavigation.right: input3
+            onTextChanged: {
+                if (text.length >= 3) {
+                    input3.focus = true
+                }
+            }
+            Keys.enabled: true
+            Keys.onPressed: function (event) {
+                switch (event.key) {
+                case Qt.Key_Backspace:
+                {
+                    if (focus && text.length <= 0) {
+                        input1.focus = true
+                    }
+                }
+                }
+            }
         }
-        CusLabel {
+        Label {
             text: "."
-            width: 2
+            height: parent.height
+            width: control.dotW
+            verticalAlignment: Qt.AlignBottom
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: -8
         }
         CusTextInput {
             id: input3
-            width: defaultW
-            validator: IntValidator{bottom: 1; top: 255;}
+            height: parent.height
+            width: control.inputW
+            activeFocusOnTab: true
+            verticalAlignment: Qt.AlignVCenter
+            horizontalAlignment: Qt.AlignHCenter
+            anchors.verticalCenter: parent.verticalCenter
+
+            validator: RegExpValidator{
+                regExp: /^(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/
+            }
+            KeyNavigation.backtab: input2
+            KeyNavigation.tab: input4
+            KeyNavigation.left: input2
+            KeyNavigation.right: input4
+            onTextChanged: {
+                if (text.length >= 3) {
+                    input4.focus = true
+                }
+            }
+            Keys.enabled: true
+            Keys.onPressed: function (event) {
+                switch (event.key) {
+                case Qt.Key_Backspace:
+                {
+                    if (focus && text.length <= 0) {
+                        input2.focus = true
+                    }
+                }
+                }
+            }
         }
-        CusLabel {
+        Label {
             text: "."
-            width: 2
+            height: parent.height
+            width: control.dotW
+            verticalAlignment: Qt.AlignBottom
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: -8
         }
         CusTextInput {
             id: input4
-            width: defaultW
-            validator: IntValidator{bottom: 1; top: 255;}
+            height: parent.height
+            width: control.inputW
+            activeFocusOnTab: true
+            verticalAlignment: Qt.AlignVCenter
+            horizontalAlignment: Qt.AlignHCenter
+            anchors.verticalCenter: parent.verticalCenter
+            validator: RegExpValidator{
+                regExp: /^(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/
+            }
+            KeyNavigation.backtab: input3
+            KeyNavigation.left: input3
+            Keys.enabled: true
+            Keys.onPressed: function (event) {
+                switch (event.key) {
+                case Qt.Key_Backspace:
+                {
+                    if (focus && text.length <= 0) {
+                        input3.focus = true
+                    }
+                }
+                }
+            }
         }
     }
     TransArea {