Revision as of 18:22, 4 April 2016

qOrbiter is a new LinuxMCE orbiter designed to run on a multitude of devices as well as provide flexible skinning options to make it truly one's own. The purpose of this document is for documenting the existing skin api of the application moving forward.

Where To Find It

The latest version of qOrbiter can always be found on the developers site.

Installation Instructions

More details on Android installation for the qOrbiter (some applies universally), ca be found at Android Orbiter,

Concept

The concept of this document is to provide those wishing to create new skins the needed access to LinuxMCE data through properties and context objects. While I will not be discussing what they are here, they are discussed in the scope of QML documentation which is a pre-requisite to skinning and working with Qorbiter.

So, for example lets take the context property "deviceid". This property is added to the QML engine at runtime so that it can be used to provide the current device id of the orbiter. So in effect, this is a macro or keyword if you will that enables access to the underlying LinuxMCE data. As is one of the goals, no programming is required. One of the goals of this document is to outline all of these properties for easy reference in making a new skin.

Colors & Styling

Colors such as background and button colors should be set in the style file of the qml skin. See 'Style.qml' for reference on setting up property aliases.

Examples include:

property color stageBG: "slategray"

Qualified color references include:

• SVG named colors Reference
• Web color notation #112233

Skins

skinsList: listmodel of skins found for the build One should always check the official doc's to see what methods are supported for setting properties.

Images

Images can be loaded in multiple ways and will be discussed here in the future. All that is required is to use the indicated format for local vs remote loading of images

• Local: source: "../../../img/icons/kmix.png"
• Datagrid: source:"image://datagridimg/"+id
• File Details Screen Shot or Album cover: source: "image://filedetailsprovider/"+filedetailsclass.screenshot

Please note more will become available as they are connected to QML.

Developing a qOrbiter skin

File Structure

Files should be arranged in the following manner

<folder>name of the skin

Main.qml

Style.qml

qmldir

Splash.qml

<folder>images

<folder>screens

<folder>components

<folder>js (if used)

Adding to the filestructure

1. in Qt Creator, in the source-tree, right-click on 'QML'
2. In the contextmenu select add new
3. choose the template 'QML' -> QML File
4. name it 'main'
5. for Path, click on choose, in the new window select 'new folder' give it the name of your new skin (in lower case letters, otherwise it wont work!) and click on 'choose'
6. click continue and then done
7. in Qt Creator, in the source-tree, right-click on 'QML'
8. In the contextmenu select add new
9. choose the template 'QML' -> QML File
10. name it 'Style'
11. for Path, click on choose, in the new window select the folder you created in step 5.
12. click continue and then done
13. in sources -> qorbitermanager.cpp find tskinModel->addSkin and add a new entry for your skin using the directory name.

You can now fill main and style files with the content of the same files found in the QML/desktop/default directory. Or another pair of main.qml and Style.qml set. After this is done you can alter the Style.qml to you likings and your skin can be selected from the styles-menu inside qOrbiter

NOTE: You only see the QML files of the target you selected under project. i.e. if you select for_desktop, you will see the desktop QML files. If you choose for_android, you will see the QML files for Android. What is shown for a target, is defined in the .pro file of qOrbiter.

Special Qml Pages

The following pages are 'special' in that they serve critical function for the qml application. These should be located in the main directory of your skin. i.e. - <mySkin>/Main.qml

• Main.qml

The entire purpose of this qml page is to be the logic behind the runtime of the application. What this means

is that this is the highest level page and signals and slots should be added here. Also, the page loading

functions need to be implemented here for hiccup free operation. For example, the main.qml file thats is

part of the default skin serves as the loader for Screens, emits signals, and provides a constant object for

other logic.

• Splash.qml

This is the loading page that is initially shown when the application starts. It is not intended to be used by skin designers as the logic is very specific. However, acceptable replacements will be included.

• Style.qml

This qml file is unique because it does nothing more than serve as a static obeject that contains the description of

your skin, both for users and the actual application. its where screen sizes are defined, scaling functions can be

located, and anything else relating to the visual style of the application as relating to your skin

Variables

DEPRECIATE, USE ABOVE SECTIONS

• ref dcerouter - used as a reference object to call functions
• QString dcemessage - orbiter messaging output for display in string format
• srouterip - string of the routerip
• ref manager - reference object for qorbitermanager
• QObject filedetailsclass - QObject used for holding file information from the router for use in the UI
• bool connectedState - represents the current connected state of the device
• int iPK_Device - the orbiter device number
• QTime screen1time - clock. will display in
• QTime currentDateTime - current date and time
• ---need to outline 'role' data for member data-----
• DataModel currentRoomLights - list model of the current room lighting scenarios.
• DataModel currentRoomMedia - list model of the current room media scenarios
• DataModel currentRoomClimate - list model of current room climate scenarios
• DataModel currentRoomTelecom - list model of the current room telecom scenarios
• DataModel currentRoomSecurity - list model of the current room security scenarios
• DataModel userList - list of the users in the linuxmce system
• DataModel roomList - list of the rooms in this home.
• DataModel mediaplaylist - the current playlist in list model form
• DataModel simpleepg - simple epg model, can sometimes cause router crash.
• DataModel playlistModel - list model of the playlist??
• DataModel skinsList - list model containing the list of availible and ready skins
• ListModel screenshotAttributes - listmodel of attributes correlating to thumbnail/screenshot selection
• --------------------------------------------------------------------------------
• QObject dcenowplaying - QObject containing the properties of the now playing object for this ea
• QColor nowPlayingColor - color of now playing button
• int currentcommandgrp - int of the current command group being executed
• int gmediaType - int correlating to the mediatype the grid is navigating.
• int currentroom - int representing the current EA of the orbiter
• QString currentuser - string of the current user

Functions

This will be broken down by section with certain parts relating directly to the screens where they are used

HomeScreen

Special Screen that doesnt have to be implemented, but since it can be considered the start page, certain data is provided to make life easier for everyone.