import QtQuick 2.9 import QtQuick.Controls 2.0 import "../components" import "../components/layout" import de.itsblue.ScStw 2.0 import de.itsblue.ScStw.Styling 2.0 import de.itsblue.ScStw.Styling.Components 1.0 ToolBar { id: control property string statusText Loader { id: topContentLoader anchors.fill: parent Behavior on state { FadeAnimation { target: topContentLoader fadeDuration: 300 } } Component { id: raceStatusLabelComponent Text { id: raceStatusLabel padding: width * 0.06 text: control.statusText color: appTheme.theme.colors.text fontSizeMode: Text.Fit verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter font.pixelSize: height minimumPixelSize: 1 Behavior on text { FadeAnimation { target: raceStatusLabel fadeDuration: 100 } } } } Component { id: timerColumnComponent TimerColumn { id: timerColumn anchors.fill: parent anchors.topMargin: app.landscape() ? 0:parent.height * 0.1 anchors.bottomMargin: app.landscape() ? 0:parent.height * 0.1 timers: speedBackend.race.timers colors: appTheme.theme.colors fontName: appTheme.theme.fonts.timers showTimerLetter: true // make text smaller for much better performance textScale: app.landscape() ? 0.7 : 0.5 Behavior on opacity { NumberAnimation { duration: 200 } } } } } Item { id: connectionIconContainer anchors { top: parent.top left: parent.left right: parent.right bottom: parent.bottom bottomMargin: app.landscape() ? parent.height * 0.8:0 rightMargin: app.landscape() ? 0:parent.width * 0.8 } opacity: speedBackend.race.state === ScStwRace.IDLE ? 1:0 ConnectionIcon { id: baseConnConnIcon function clientStateToString(state) { switch(state) { case ScStwClient.DISCONNECTED: return "disconnected" case ScStwClient.CONNECTING: return "connecting" case ScStwClient.INITIALISING: return "connecting" case ScStwClient.CONNECTED: return "connected" } } status: clientStateToString(speedBackend.scStwClient.state) source: appTheme.theme.images.baseStationIcon anchors { top: parent.top topMargin: 10 left: parent.left leftMargin: 10 } height: !app.landscape()? parent.height*0.4:parent.width*0.4 } Row { id: extensionStatusRow anchors { top: parent.top topMargin: 10 left: baseConnConnIcon.right leftMargin: 1 } height: baseConnConnIcon.height * 0.4 spacing: 5 Repeater { id: extensionStatusRep model: Object.keys(speedBackend.scStwClient.extensions) delegate: Rectangle { property string thisLetter: modelData width: height height: parent.height radius: width * 0.1 color: getStatusColor(speedBackend.scStwClient.extensions[modelData]) // TODO function getStatusColor(extensions) { for(var i = 0; i < extensions.length; i++) { console.log(JSON.stringify(extensions[i])) if(extensions[i]["state"] !== ScStw.ExtensionConnected || extensions[i]["batteryState"] !== ScStw.BatteryFine) return appTheme.theme.colors.error } return appTheme.theme.colors.success } Behavior on color { ColorAnimation { duration: 200 } } Text { anchors.fill: parent text: parent.thisLetter fontSizeMode: Text.Fit font.pixelSize: height font.bold: true color: appTheme.theme.colors.background verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } } } } Behavior on opacity { NumberAnimation { duration: 200 } } } states: [ State { name: ScStwRace.IDLE PropertyChanges { target: control statusText: "Press start" } PropertyChanges { target: topContentLoader sourceComponent: raceStatusLabelComponent } }, State { name: ScStwRace.PREPAIRING PropertyChanges { target: control statusText: "At your\nmarks" } PropertyChanges { target: topContentLoader sourceComponent: raceStatusLabelComponent } }, State { name: ScStwRace.WAITING PropertyChanges { target: control statusText: "Ready" } PropertyChanges { target: topContentLoader sourceComponent: raceStatusLabelComponent } }, State { name: ScStwRace.STARTING PropertyChanges { target: control statusText: "Starting" } PropertyChanges { target: topContentLoader sourceComponent: raceStatusLabelComponent } }, State { name: ScStwRace.RUNNING PropertyChanges { target: topContentLoader sourceComponent: timerColumnComponent } }, State { name: ScStwRace.STOPPED PropertyChanges { target: topContentLoader sourceComponent: timerColumnComponent } }, State { name: ScStwRace.INCIDENT PropertyChanges { target: control statusText: "Technical incident!" } PropertyChanges { target: topContentLoader sourceComponent: raceStatusLabelComponent } } ] }