homescreen/qml/MediaAreaBlank.qml

   1 /*
   2  * Copyright (C) 2016 The Qt Company Ltd.
   3  * Copyright (C) 2016, 2017 Mentor Graphics Development (Deutschland) GmbH
   4  *
   5  * Licensed under the Apache License, Version 2.0 (the "License");
   6  * you may not use this file except in compliance with the License.
   7  * You may obtain a copy of the License at
   8  *
   9  *      http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  * Unless required by applicable law or agreed to in writing, software
  12  * distributed under the License is distributed on an "AS IS" BASIS,
  13  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  * See the License for the specific language governing permissions and
  15  * limitations under the License.
  16  */
  17
  18 import QtQuick 2.2
  19 import QtQuick.Layouts 1.1
  20 import QtQuick.Controls 2.0
  21 import AGL.Demo.Controls 1.0
  22 import MasterVolume 1.0
  23
  24 Image {
  25     width: 1080
  26     height: 215
  27     source: './images/Utility_Logo_Background-01.png'
  28     property bool displayVolume: false;
  29
  30     MouseArea {
  31         anchors.fill: parent
  32         function enableVolumeDisplay() {
  33             if (!displayVolume) {
  34                 displayVolume = true
  35                 master_volume.visible = true
  36                 volume_timer.restart()
  37             }
  38         }
  39         onClicked: enableVolumeDisplay()
  40     }
  41
  42     Image {
  43     id: logo_image
  44         anchors.centerIn: parent
  45         source: './images/Utility_Logo_Colour-01.png'
  46     }
  47
  48     Timer {
  49         id: volume_timer
  50         interval: 5000; running: false; repeat: false
  51         onTriggered: displayVolume = false
  52     }
  53
  54     states: [
  55     State { when: displayVolume;
  56     PropertyChanges { target: master_volume; opacity: 1.0 }
  57     PropertyChanges { target: slider; enabled: true }
  58     PropertyChanges { target: logo_image; opacity: 0.0 }
  59     },
  60     State { when: !displayVolume;
  61     PropertyChanges { target: master_volume; opacity: 0.0 }
  62     PropertyChanges { target: slider; enabled: false }
  63     PropertyChanges { target: logo_image; opacity: 1.0 }
  64     }
  65     ]
  66
  67     transitions: Transition {
  68     NumberAnimation { property: "opacity"; duration: 500}
  69     }
  70
  71     MasterVolume {
  72         id: mv
  73         objectName: "mv"
  74         onVolumeChanged: slider.value = volume
  75     }
  76
  77     Item {
  78         id: master_volume
  79         anchors.fill: parent
  80         anchors.centerIn: parent
  81         visible: false
  82
  83         Label {
  84             font.pixelSize: 36
  85             anchors.horizontalCenter: parent.horizontalCenter
  86             color: "white"
  87             text: "Master Volume"
  88         }
  89
  90         RowLayout {
  91             anchors.fill: parent
  92             anchors.centerIn: parent
  93             anchors.margins: 20
  94             spacing: 20
  95             Label {
  96                 font.pixelSize: 36
  97                 color: "white"
  98                 text: "0 %"
  99             }
 100             Slider {
 101                 id: slider
 102                 Layout.fillWidth: true
 103                 from: 0
 104                 to: 65536
 105                 stepSize: 256
 106                 snapMode: Slider.SnapOnRelease
 107                 onValueChanged: mv.volume = value
 108                 Component.onCompleted: value = mv.volume
 109                 onPressedChanged: {
 110                     if (pressed) {volume_timer.stop()}
 111                     else {volume_timer.restart()}
 112                 }
 113                 background: Rectangle {
 114                     id: slider_bg
 115                     height: 16
 116                     color: "#59FF7F"
 117                 }
 118                 handle: Rectangle {
 119                     anchors.verticalCenter: slider_bg.verticalCenter
 120                     width: 48
 121                     height: 48
 122                     radius: 24
 123                     x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
 124                     y: slider.topPadding + slider.availableHeight / 2 - height / 2
 125                     color: "white"
 126                 }
 127             }
 128             Label {
 129                 font.pixelSize: 36
 130                 color: "white"
 131                 text: "100 %"
 132             }
 133         }
 134     }
 135 }