GfA-Browser/IpAddressInput.qml

import QtQuick 2.0

Item {
    id: ipAddresInput
    property bool ipvisible: true
    property double space: 4
    property double ipwidth: 200
    property double posX: 0
    property double posY: 0
    property double partwidth: (ipwidth / 4) - (3 * space)
    property color focuscolor: "green"
    property color ipcolor: "black"
    property color invalidcolor: "red"
    property color ipBackColor: "silver"
    property string ipAddress: ""
    property double ipFontSize: 14
    property bool isValid: false
    property int ipRadius: 0
    property int ipFocus: 0
    signal keyReturnPressed
    signal keyUpPressed
    signal keyDownPressed

    function makeIpAddress() {
        ipAddress = parseInt(textInput1.text, 10) + "." + parseInt(textInput2.text, 10) + "." +
                parseInt(textInput3.text, 10) + "." + parseInt(textInput4.text, 10);

        if((textInput1.text >= 0) && (textInput1.text <= 255))
            textInput1.color = (!textInput1.focus)?ipcolor:focuscolor;
        else textInput1.color = invalidcolor;

        if((textInput2.text >= 0) && (textInput2.text <= 255))
            textInput2.color = (!textInput2.focus)?ipcolor:focuscolor;
        else textInput2.color = invalidcolor;

        if((textInput3.text >= 0) && (textInput3.text <= 255))
            textInput3.color = (!textInput3.focus)?ipcolor:focuscolor;
        else textInput3.color = invalidcolor;

        if((textInput4.text >= 0) && (textInput4.text <= 255))
            textInput4.color = (!textInput4.focus)?ipcolor:focuscolor;
        else textInput4.color = invalidcolor;
    }

    function fillIpFields() {

        function padDigits(number, digits) {
            return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
        };
        var iplist = ipAddress.split(".");
        var i;
        for ( i = 0; i < iplist.length; i++) iplist[i] = padDigits(iplist[i], 3);

        if(iplist.length >= 1) textInput1.text = iplist[0]; else textInput1.text ="000";
        if(iplist.length >= 2) textInput2.text = iplist[1]; else textInput2.text ="000";
        if(iplist.length >= 3) textInput3.text = iplist[2]; else textInput3.text ="000";
        if(iplist.length >= 4) textInput4.text = iplist[3]; else textInput4.text ="000";
    }

    onIpAddressChanged: {
        fillIpFields();
    }

    Component.onCompleted: {
        fillIpFields();
    }

    onIpFocusChanged: {
        textInput1.focus =  (ipFocus == 1)?true:false;
        textInput2.focus =  (ipFocus == 2)?true:false;
        textInput3.focus =  (ipFocus == 3)?true:false;
        textInput4.focus =  (ipFocus == 4)?true:false;
    }

    Rectangle {
        x: posX
        y: posY
        visible: ipAddresInput.ipvisible
        width: textInput1.width
        height: textInput1.height
        radius: ipRadius
        color: ipBackColor
    }

    TextInput {
        id: textInput1
        x: posX
        y: posY
        width: partwidth
        font.pixelSize: ipFontSize
        visible: ipAddresInput.ipvisible
        KeyNavigation.tab: textInput2
        focus: (ipAddresInput.ipFocus == 1)?true:false

        color: ipcolor
        validator: IntValidator {bottom:0; top:999}
        inputMask: "000;"
        inputMethodHints: Qt.ImhDigitsOnly
        maximumLength: 3
        Keys.onReleased:  {
            if(cursorPosition == maximumLength){
                textInput2.focus = true;
            }
        }
        Keys.onPressed: {
            if((event.key == Qt.Key_Left) && (cursorPosition == 0)){
                textInput4.focus = true; textInput4.cursorPosition = 2;
            }
            if((event.key == Qt.Key_Right) && (cursorPosition == maximumLength)){
                textInput2.focus = true;
            }
            if((event.key == Qt.Key_Enter) || (event.key == Qt.Key_Return))
            {
                makeIpAddress();
                keyReturnPressed();
            }
            if(event.key == Qt.Key_Up)
            {
                makeIpAddress();
                keyUpPressed();
            }
            if(event.key == Qt.Key_Down)
            {
                makeIpAddress();
                keyDownPressed();
            }
        }

        onFocusChanged: {
            color = (focus) ? focuscolor : ipcolor;
            makeIpAddress();
            cursorPosition = 0;
            if(focus) ipFocus = 1;
        }
    }

    Text{
        id: ipDot1
        font.pixelSize: ipFontSize
        x: posX + textInput1.width
        y: textInput1.y
        visible: ipAddresInput.ipvisible
        color: ipcolor
        text:"."
    }

    Rectangle {
        x: posX + space + partwidth + ipDot1.width
        y: posY
        visible: ipAddresInput.ipvisible
        width: textInput2.width
        height: textInput2.height
        radius: ipRadius
        color: ipBackColor
    }

    TextInput {
        id: textInput2
        x: posX + space + partwidth + ipDot1.width
        y: posY
        visible: ipAddresInput.ipvisible
        width: partwidth
        font.pixelSize: ipFontSize
        KeyNavigation.tab: textInput3
        focus: (ipAddresInput.ipFocus == 2)?true:false

        color: ipcolor
        validator: IntValidator {bottom:0; top:999}
        inputMask: "000;"
        inputMethodHints: Qt.ImhDigitsOnly
        maximumLength: 3
        Keys.onReleased:  {
            if(cursorPosition == maximumLength){
                textInput3.focus = true;
            }
        }
        Keys.onPressed: {
            if((event.key == Qt.Key_Left) && (cursorPosition == 0)){
                textInput1.focus = true; textInput1.cursorPosition = 2;
            }
            if((event.key == Qt.Key_Right) && (cursorPosition == maximumLength)){
                textInput3.focus = true;
            }
            if((event.key == Qt.Key_Enter) || (event.key == Qt.Key_Return))
            {
                makeIpAddress();
                keyReturnPressed();
            }
            if(event.key == Qt.Key_Up)
            {
                makeIpAddress();
                keyUpPressed();
            }
            if(event.key == Qt.Key_Down)
            {
                makeIpAddress();
                keyDownPressed();
            }
        }
        onFocusChanged: {
            color = (focus) ? focuscolor : ipcolor;
            makeIpAddress();
            cursorPosition = 0;
            if(focus) ipFocus = 2;
        }
    }
    Text{
        id: ipDot2
        font.pixelSize: ipFontSize
        x: textInput2.x + textInput2.width
        y: textInput1.y
        visible: ipAddresInput.ipvisible
        color: ipcolor
        text:"."
    }

    Rectangle {
        x: posX + 2*space + 2*partwidth +ipDot2.width
        y: posY
        visible: ipAddresInput.ipvisible
        width: textInput3.width
        height: textInput3.height
        radius: ipRadius
        color: ipBackColor
    }

    TextInput {
        id: textInput3
        x: posX + 2*space + 2*partwidth +ipDot2.width
        y: posY
        visible: ipAddresInput.ipvisible
        width: partwidth
        font.pixelSize: ipFontSize
        KeyNavigation.tab: textInput4
        focus: (ipAddresInput.ipFocus == 3)?true:false

        color: ipcolor
        validator: IntValidator {bottom:0; top:999}
        inputMask: "000;"
        inputMethodHints: Qt.ImhDigitsOnly
        maximumLength: 3
        Keys.onReleased:  {
            if(cursorPosition == maximumLength){
                textInput4.focus = true;
            }
        }
        Keys.onPressed: {
            if((event.key == Qt.Key_Left) && (cursorPosition == 0)){
                textInput2.focus = true; textInput2.cursorPosition = 2;
            }
            if((event.key == Qt.Key_Right) && (cursorPosition == maximumLength)){
                textInput4.focus = true;
            }
            if((event.key == Qt.Key_Enter) || (event.key == Qt.Key_Return))
            {
                makeIpAddress();
                keyReturnPressed();
            }
            if(event.key == Qt.Key_Up)
            {
                makeIpAddress();
                keyUpPressed();
            }
            if(event.key == Qt.Key_Down)
            {
                makeIpAddress();
                keyDownPressed();
            }
        }
        onFocusChanged: {
            color = (focus) ? focuscolor : ipcolor;
            makeIpAddress();
            cursorPosition = 0;
            if(focus) ipFocus = 3;

        }
    }
    Text{
        id: ipDot3
        font.pixelSize: ipFontSize
        x: textInput3.x + textInput3.width
        y: textInput1.y
        visible: ipAddresInput.ipvisible
        color: ipcolor
        text:"."
    }

    Rectangle {
        x: posX + 3*space + 3*partwidth + ipDot3.width
        y: posY
        visible: ipAddresInput.ipvisible
        width: textInput4.width
        height: textInput4.height
        radius: ipRadius
        color: ipBackColor
    }

    TextInput {
        id: textInput4
        x: posX + 3*space + 3*partwidth + ipDot3.width
        y: posY
        visible: ipAddresInput.ipvisible
        width: partwidth
        font.pixelSize: ipFontSize
        KeyNavigation.tab: textInput1
        focus: (ipAddresInput.ipFocus == 4)?true:false

        color: ipcolor
        validator: IntValidator {bottom:0; top:999}
        inputMask: "000;"
        inputMethodHints: Qt.ImhDigitsOnly
        maximumLength: 3
        Keys.onReleased:  {
            if(cursorPosition == maximumLength){
                textInput1.focus = true;
            }
        }
        Keys.onPressed: {
            if((event.key == Qt.Key_Left) && (cursorPosition == 0)){
                textInput3.focus = true; textInput3.cursorPosition = 2;
            }
            if((event.key == Qt.Key_Right) && (cursorPosition == maximumLength)){
                textInput1.focus = true;
            }
            if((event.key == Qt.Key_Enter) || (event.key == Qt.Key_Return))
            {
                makeIpAddress();
                keyReturnPressed();
            }
            if(event.key == Qt.Key_Up)
            {
                makeIpAddress();
                keyUpPressed();
            }
            if(event.key == Qt.Key_Down)
            {
                makeIpAddress();
                keyDownPressed();
            }
        }
        onFocusChanged: {
            color = (focus) ? focuscolor : ipcolor;
            makeIpAddress();
            cursorPosition = 0;
            if(focus) ipFocus = 4;
        }
    }
}