New QOrbiter Setup
In order to create a proper Splash / Setup screen, certain key things but be implemented. This is a guide to those functions and properties that must be set for a new QOrbiter to be created.
Properties
Property Name | Property Type | Signal | Description | Example |
---|---|---|---|---|
sRouterIP | string | none | The internal router ip as read from the config.xml. Will be set to 192.168.80.1 Also accepts hostname instead of ip in string format | This populates the TextInput element with the routerip
TextInput { id: routerip width: 80 text: srouterip font.pixelSize: 10 font.family: "Droid Sans" fillColor: "grey" anchors.verticalCenter: parent.verticalCenter } |
extip | string | none | The external router ip as read from the config.xml. Will be set to fill.me.in.com by default Also accepts hostname instead of ip in string format | This populates the TextInput element with the extip
TextInput { id: ext_routerip width: 80 text: extip font.pixelSize: 10 font.family: "Droid Sans" // onTextChanged: setRouterIp(routerip.text) fillColor: "grey" anchors.verticalCenter: parent.verticalCenter visible: false } |
orbiterList | ListModel | window.showList() | ListModel of existing orbiter. It gets populated after QOrbiter initially connects to the router. | To Utilize, set as the 'model' property for the ListModel you intend to show it in.
Properties:
ListView{ id:existing_orbiters height: scaleY(35) width: scaleX(55) clip: true anchors.centerIn: rectangle2 model:orbiterList delegate: Rectangle{ id:existing_orbiter_delegate height: scaleY(5) width: existing_orbiters.width color: "slategrey" border.color: "white" border.width: 1 Column { height: childrenRect.height width: childrenRect.width anchors.centerIn: parent Text { id: orbiter_label text: qsTr("Orbiter:")+ label font.pixelSize: 12 wrapMode: Text.WrapAtWordBoundaryOrAnywhere } Text { id: dev_num text:qsTr("Device:")+ i_device_number font.pixelSize: 12 font.italic: true wrapMode: Text.WrapAtWordBoundaryOrAnywhere } } MouseArea { anchors.fill: parent onClicked: window.qmlSetupLmce(i_device_number, routerip.text) } } } |
users | ListModel | none: see window.showSetup() function definition | ListModel of existing users. It is populated when the function showSetup() is called. | To Utilize, set as the 'model' property for the ListModel you intend to show it in.
Properties:
ListView{ id:usersView height: 75 width: parent.width orientation: ListView.Horizontal spacing: 20 model:users Component.onCompleted: currentIndex = -1 delegate:Rectangle{ height:newOrbiterSetupContainer.height *.15 width: newOrbiterSetupContainer.width *.09 radius:10 border.color:usersView.currentIndex === index ? midnightBlue : orangeRed color: usersView.currentIndex === index ? deYork : "white" Text { text: dataTitle font.pointSize: 12 wrapMode: Text.WrapAtWordBoundaryOrAnywhere width: parent.width *.75 anchors.centerIn: parent } MouseArea{ anchors.fill: parent onClicked: { usersView.currentIndex = index selectedUser.text = "You Selected: "+ dataTitle } hoverEnabled: true } } } |
rooms | ListModel | window.showSetup() | ListModel of existing orbiter. It gets populated after QOrbiter initially connects to the router. | To Utilize, set as the 'model' property for the ListModel you intend to show it in.
Properties:
ListView{ id:roomsView height: 75 width: parent.width orientation: ListView.Horizontal model:rooms contentHeight: newOrbiterSetupContainer.height *.15 contentWidth: newOrbiterSetupContainer.width *.09 spacing:20 Component.onCompleted: currentIndex = -1 delegate: Rectangle{ height:newOrbiterSetupContainer.height *.15 width: newOrbiterSetupContainer.width *.09 radius:10 border.color:roomsView.currentIndex === index ? midnightBlue : orangeRed color: roomsView.currentIndex === index ? deYork : "white" Text { text: dataTitle font.pointSize: 12 wrapMode: Text.WrapAtWordBoundaryOrAnywhere width: parent.width *.75 anchors.centerIn: parent } MouseArea{ anchors.fill: parent onClicked: { roomsView.currentIndex = index selectedRoom.text = dataTitle } hoverEnabled: true } } } |
Splash Page
This page is not the traditional Splash screen. Instead of it being a loading screen, it should contain the following
- A loader to switch between the Connection Screen and the new QOrbiter setup screen
Loader { id:pageLoader objectName: "loadbot" source: "SplashView.qml" onLoaded: { console.log("Screen Changed:" + pageLoader.source) } }
- Logic to change screens and anything else you want done in the the setup screens before connecting to the router.
function screenchange(screenname ) { pageLoader.source = screenname if (pageLoader.status == 1) { manager.setDceResponse("Command to change to:" + screenname+ " was successfull") } else { console.log("Command to change to:" + screenname + " failed!") } }
Connection Screen
This screen should be the first loaded by the Splash.qml and contain the neccesary elements to establish a connection to thr router. This includes:
- Text entry for device number
- text entry from internal ip / hostname
- text entry box for external ip / hostname.
- Button to connect
Rectangle { id: connectbutton height: scaleY(5) width: scaleX(10) color:"red" anchors.left: devicenumber.right anchors.leftMargin: scaleX(5) Text { id: name anchors.centerIn: parent anchors.fill: parent text: qsTr("Go!") font.pixelSize: 12 verticalAlignment: Text.AlignTop font.bold: true } radius: 5 MouseArea{ hoverEnabled: true onEntered: parent.color="green" onExited: parent.color="red" anchors.fill: parent onClicked: ext_routerip.visible ? window.qmlSetupLmce(devicenumber.text, ext_routerip.text) : window.qmlSetupLmce(devicenumber.text, routerip.text) anchors.verticalCenter: parent.verticalCenter } }
- Button to start new QOrbiter setup
Rectangle{ id:newOrbiterButton height: scaleY(10) width:scaleX(55) Text { id: newOrbiterLabel text: qsTr("Create New Orbiter?") font.pixelSize: 15 width: parent.width anchors.centerIn: parent wrapMode: Text.WrapAtWordBoundaryOrAnywhere } visible: existing_orbiters.visible anchors.bottom: existing_orbiters.top anchors.horizontalCenter: existing_orbiters.horizontalCenter MouseArea{ anchors.fill: parent onClicked:screenchange("SetupNewOrbiter.qml") } }
New Orbiter Screen
This screen is where you would display setup options like the
- users
- rooms
- languages (not available yet)
and so forth. Once the user had made selections, you start the setup process by calling the window.setupNewOrbiter() function from qml. This will initiate the process of starting creating the orbiter and making it ready to run.
Functions
These functions are part of the setup process
Function Name | Parameters | Signal | Description | Example |
---|---|---|---|---|
window.showSetup() | none | setupNewOrbiter() | Called when a user wants to create a new QOrbiter. It causes the dcerouter to populate the setup list models (users, rooms, etc) and you can use the emitted signal to change screens to the setup screen if so desired. | In the default skin, it is placed in the 'on completed' handler of the SetupNewOrbiter.qml page. This way it loads as soon as the page has completed.
Component.onCompleted: window.showSetup() |
window.setupNewOrbiter() |
*int user *int room *int skin *int lang *int width *int height |
none | Called after the user selects all of the start up variables and hits a 'complete' or 'done' button. These variables must be passed to the function otherwise it will fail. | Here is an example: After clicking the 'go button' the function gets the current selected indexes from the listmodels as the variables it needs to populate the data. For some of the data, im using a default value until the final data source is added, like languages
window.setupNewOrbiter(selectedUser.currentIndex, selectedRoom.currentIndex, 1, 1, appW, appH) |
window.qmlSetupLmce() |
*string device *string ip |
none | This is called when the user already knows the device number and ip/hostname. The most simple way to call this, is to place it in the mouse handler of the orbiterList listmodel. When the user clicks on an existing orbiter, you can simply grab the data as provided in the model for the ip and device number. | this is an example from the default skin
ListView{ id:existing_orbiters height: scaleY(35) width: scaleX(55) clip: true anchors.centerIn: rectangle2 model:orbiterList visible: false opacity: existing_orbiters.visible delegate: Rectangle{ id:existing_orbiter_delegate height: scaleY(5) width: existing_orbiters.width color: "slategrey" border.color: "white" border.width: 1 Column { height: childrenRect.height width: childrenRect.width anchors.centerIn: parent Text { id: orbiter_label text: qsTr("Orbiter:")+ label font.pixelSize: 12 wrapMode: Text.WrapAtWordBoundaryOrAnywhere } Text { id: dev_num text:qsTr("Device:")+ i_device_number font.pixelSize: 12 font.italic: true wrapMode: Text.WrapAtWordBoundaryOrAnywhere } } MouseArea { anchors.fill: parent onClicked: window.qmlSetupLmce(i_device_number, routerip.text) } } } |