OSD

Top  Previous  Next

The OSD Action allows you to display messages on the screen. The OSD has a few configuration parameters and can also be customized very easily.

 

OSD Action

OSD Action

 

Parameter

Text

Text

Text to display on OSD. This can include  [ ... ] notation, which is parsed. For example [_VERSION] displays Lua 5.1

Size

The width and height in pixels for the OSD

Positioning

The first drop down specifies on which monitor to display. The 9 radio buttons take care of positioning, ranging from Top Left, Top Center, Top Right to Center to Bottom left, Bottom Center and Bottom Right.

Timeout

The number of milliseconds this window should be visible.

Theme

Girder comes with 4 predefined OSD's, default, information, warning and error. You can also create your own. Simply create a QML file and click the browse button to find that file.

Session

The session in which to display the OSD. ( A session is a desktop instance of Girder )

 

Customizing the OSD

The OSD uses Qt QML files to create it's OSD, not unlike NetRemote. The OSD doesn't have all the features of NetRemote. As an example we include source for the built-in OSD here. The built-in OSD uses two files to create the OSD. First there is the file called "BaseOSDDialog.qml". This contains all the code needed to display the OSD in a few different colors and with icons.

 

import QtQuick 2.0

import QtGraphicalEffects 1.0

 

Rectangle {

 

    id: main

    property string icon: ""

    property alias showLogo: girderLogo.visible

    property alias caption: captionElement.text

    property alias theme: main.state

 

    anchors.fill: parent;

    border.width: 2

    radius: 10

    opacity: 1

 

    gradient: Gradient {

 

        GradientStop {

            id: gradStop1

            position: 0

            color: "#dd4072b1"

        }

 

        GradientStop {

            id: gradStop2

            position: 1

            color: "#dd7ca0cc"

        }

    }

 

    states: [

        State {

            name: "blue"

            PropertyChanges { target: gradStop1; color: "#dd4072b1" }

            PropertyChanges { target: gradStop2; color: "#dd7ca0cc" }

        },

        State {

            name: "red"

            PropertyChanges { target: gradStop1; color: "#ddb14040" }

            PropertyChanges { target: gradStop2; color: "#ddcc7c7c" }

        },

        State {

            name: "green"

            PropertyChanges { target: gradStop1; color: "#dd4cb140" }

            PropertyChanges { target: gradStop2; color: "#dd9bcc7c" }

        },

        State {

            name: "yellow"

            PropertyChanges { target: gradStop1; color: "#ddabb140" }

            PropertyChanges { target: gradStop2; color: "#ddc6cc7c" }

        }

 

    ]

 

    Image {

        source: "qrc:/osd/texture.png"

        opacity: .05

        fillMode: Image.Tile

        anchors.fill: parent;

    }

 

    MouseArea {

        anchors.fill: parent

        onClicked: {

            window.close();

        }

    }

 

    Image {

        id: girderLogo

        source: "qrc:/formIcons/icons/Girder 6.ico"

        anchors.bottom: parent.bottom

        anchors.right: parent.right

        anchors.margins: 10

        opacity: .50

    }

 

    Image {

        id: icon1

        source: icon

        anchors.left: parent.left

        anchors.verticalCenter: parent.verticalCenter

        anchors.margins: icon.length > 0 ? parent.width / 20 : 0

    }

 

    Text {

        id: captionElement

        color: "#ffffff"

        text: "none"

        anchors.right: parent.right

        anchors.left: icon1.right

        anchors.bottom: parent.bottom

        anchors.top: parent.top

        anchors.margins:  10

 

        wrapMode: Text.WordWrap

        font.pointSize: 24

 

        verticalAlignment: Text.AlignVCenter

        horizontalAlignment: Text.AlignHCenter

 

    }

 

    DropShadow {

        anchors.fill: captionElement

        horizontalOffset: 3

        verticalOffset: 3

        radius: 8.0

        samples: 16

        color: "#000000"

        source: captionElement

    }

 

}

 

Then there is the files called default.qml. Which as you can see uses the BaseOSDDialog above to actually render the text in the theme "blue".

 

import QtQuick 2.0

 

BaseOSDDialog {

 

    caption: osdText

    showLogo: true

    theme: "blue"

 

}

 

Girder exposes a few values to the QML that you may use:

 

Parameter

Text

osdText

The parsed text that should be shown.

girder.sendEvent( eventString, eventDevice, keyMod, payloads )

Function that allows you to send events into Girder. This can make interactive OSDs!

girder.triggerNode( fileId, nodeId )

Trigger a node on the tree directly.

girder.sendLog( level, source, message, fileId, nodeId )

Add an entry into the log.

window

Exposes the QQuickWindow.

osdWidth

The width of the window that this QML is displayed in. Just use anchors.file: parent in top rectangle.

osdHeight

The height of the window that this QML is displayed in.

osdTimeout

The timeout for the OSD. The timeout is handled internally.

osdFileId

The fileId of the node that created the OSD. Can be used in girder.sendLog.

osdNodeId

The nodeId of the node that created the OSD. Can be used in girder.sendLog.

osdEventString

If this node was triggered by an event this will be set to the event string.

osdEventDevice

If this node was triggered by an event this will be set to the event device number.