Difference between revisions of "New QOrbiter Setup"

From LinuxMCE
Jump to: navigation, search
(→‎Connection Screen)
m (Added categories)
 
(2 intermediate revisions by one other user not shown)
Line 1: Line 1:
 +
[[Category:QOrbiter Skin Api]]
 +
[[Category:QOrbiter]]
 +
[[Category: Programmer's Guide]]
 
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.
 
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.
  
Line 177: Line 180:
 
=Splash Page =
 
=Splash Page =
 
This page is not the traditional Splash screen. Instead of it being a loading screen, it should contain the following
 
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
+
*'''A loader to switch between the Connection Screen and the new QOrbiter setup screen'''
−
*logic to change screens and anything else you want done in the the setup screens before connecting to the router.
+
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=
 
=Connection Screen=
Line 325: Line 349:
 
    
 
    
 
|}
 
|}
−
[[Category:QOrbiter Skin Api]]
 

Latest revision as of 20:46, 23 November 2012

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

Properties present at startup
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:

  • label - QOrbiter name
  • i_device_number - QObiter Device number
 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:

  • dataTitle - Property containing the string value
 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:

  • dataTitle - Property containing the string value
 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

Note: Parameters are passed in the order listed, top to bottom
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)
           }
       }
   }
Retrieved from "http://wiki.linuxmce.org/index.php?title=New_QOrbiter_Setup&oldid=33452"