sample/radio_qml/app/Radio.qml

   1 /*
   2  * Copyright (C) 2016 The Qt Company Ltd.
   3  * Copyright (C) 2017 Konsulko Group
   4  * Copyright (c) 2017 TOYOTA MOTOR CORPORATION
   5  *
   6  * Licensed under the Apache License, Version 2.0 (the "License");
   7  * you may not use this file except in compliance with the License.
   8  * You may obtain a copy of the License at
   9  *
  10  *      http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software
  13  * distributed under the License is distributed on an "AS IS" BASIS,
  14  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  * See the License for the specific language governing permissions and
  16  * limitations under the License.
  17  */
  18
  19 import QtQuick 2.6
  20 import QtQuick.Layouts 1.1
  21 import QtQuick.Controls 2.0
  22 import AGL.Demo.Controls 1.0
  23 import 'api' as API
  24
  25 ApplicationWindow {
  26     id: root
  27
  28     API.Binding {
  29         id: radio
  30
  31         property string title
  32
  33         onBandChanged: frequency = minimumFrequency
  34         onStationFound: title = stationId
  35         onFrequencyChanged: {
  36             title = ''
  37             slider.value = frequency
  38         }
  39     }
  40
  41     API.BindingSoundManager {
  42         id: soundmgr
  43         onConnected: {
  44             radio.start()
  45         }
  46         onDisconnected: {
  47             radio.stop()
  48         }
  49         onPaused: {
  50             radio.stop()
  51         }
  52     }
  53
  54     ColumnLayout {
  55         anchors.fill: parent
  56         Item {
  57             Layout.fillWidth: true
  58             Layout.fillHeight: true
  59             Layout.preferredHeight: 3
  60             clip: true
  61             Image {
  62                 anchors.left: parent.left
  63                 anchors.right: parent.right
  64                 anchors.bottom: parent.bottom
  65                 fillMode: Image.PreserveAspectFit
  66                 source: './images/HMI_Radio_Equalizer.svg'
  67             }
  68             Item {
  69                 anchors.left: parent.left
  70                 anchors.right: parent.right
  71                 anchors.bottom: parent.bottom
  72                 height :307
  73                 Rectangle {
  74                     anchors.fill: parent
  75                     color: 'black'
  76                     opacity: 0.75
  77                 }
  78
  79                 ColumnLayout {
  80                     anchors.fill: parent
  81                     anchors.margins: root.width * 0.02
  82                     Item {
  83                         Layout.fillWidth: true
  84                         Layout.fillHeight: true
  85                         Row {
  86                             spacing: 20
  87                             Image {
  88                                 source: './images/FM_Icons_FM.svg'
  89                             }
  90 //                            ToggleButton {
  91 //                                offImage: './images/FM_Icons_FM.svg'
  92 //                                onImage: './images/FM_Icons_AM.svg'
  93 //                                onCheckedChanged: {
  94 //                                    radio.band = checked ? radio.amBand : radio.fmBand
  95 //                                    radio.frequency = radio.minimumFrequency
  96 //                                }
  97 //                            }
  98                         }
  99                         ColumnLayout {
 100                             anchors.fill: parent
 101                             Label {
 102                                 id: label
 103                                 Layout.alignment: Layout.Center
 104                                 text: radio.freq2str(radio.frequency)
 105                                 horizontalAlignment: Label.AlignHCenter
 106                                 verticalAlignment: Label.AlignVCenter
 107                             }
 108                             Label {
 109                                 id: artist
 110                                 Layout.alignment: Layout.Center
 111                                 text: radio.title
 112                                 horizontalAlignment: Label.AlignHCenter
 113                                 verticalAlignment: Label.AlignVCenter
 114                                 font.pixelSize: label.font.pixelSize * 0.6
 115                             }
 116                         }
 117                     }
 118                     Slider {
 119                         id: slider
 120                         Layout.fillWidth: true
 121                         from: radio.minimumFrequency
 122                         to: radio.maximumFrequency
 123                         stepSize: radio.frequencyStep
 124                         snapMode: Slider.SnapOnRelease
 125                         onValueChanged: radio.frequency = value
 126                         Label {
 127                             anchors.left: parent.left
 128                             anchors.bottom: parent.top
 129                             font.pixelSize: 32
 130                             text: radio.freq2str(radio.minimumFrequency)
 131                         }
 132                         Label {
 133                             anchors.right: parent.right
 134                             anchors.bottom: parent.top
 135                             font.pixelSize: 32
 136                             text: radio.freq2str(radio.maximumFrequency)
 137                         }
 138                     }
 139                     RowLayout {
 140                         Layout.fillHeight: true
 141
 142                         Label {
 143                             text: 'TUNE'
 144                         }
 145
 146                         ImageButton {
 147                             offImage: './images/AGL_MediaPlayer_BackArrow.svg'
 148                             Timer {
 149                                 running: parent.pressed
 150                                 triggeredOnStart: true
 151                                 interval: 100
 152                                 repeat: true
 153                                 onTriggered: radio.tuneDown()
 154                             }
 155                         }
 156
 157                         ImageButton {
 158                             offImage: './images/AGL_MediaPlayer_ForwardArrow.svg'
 159                             Timer {
 160                                 running: parent.pressed
 161                                 triggeredOnStart: true
 162                                 interval: 100
 163                                 repeat: true
 164                                 onTriggered: radio.tuneUp()
 165                             }
 166                         }
 167
 168                         Item { Layout.fillWidth: true }
 169
 170                         ImageButton {
 171                             id: play
 172                             offImage: './images/AGL_MediaPlayer_Player_Play.svg'
 173                             onClicked: {
 174                                 console.log("connect")
 175                                 soundmgr.connect()
 176                                 //radio.start()
 177                             }
 178                             states: [
 179                                 State {
 180                                     when: radio.state === radio.activeState
 181                                     PropertyChanges {
 182                                         target: play
 183                                         offImage: './images/AGL_MediaPlayer_Player_Pause.svg'
 184                                         onClicked: soundmgr.disconnect()//radio.stop()
 185                                     }
 186                                 }
 187                             ]
 188                         }
 189
 190                         Item { Layout.fillWidth: true }
 191
 192                         Label {
 193                             //Layout.fillWidth: true
 194                             text: 'SCAN'
 195                         }
 196
 197                         ImageButton {
 198                             offImage: './images/AGL_MediaPlayer_BackArrow.svg'
 199                             Timer {
 200                                 running: parent.pressed
 201                                 triggeredOnStart: true
 202                                 interval: 100
 203                                 repeat: true
 204                                 onTriggered: radio.scanDown()
 205                             }
 206                         }
 207
 208                         ImageButton {
 209                             offImage: './images/AGL_MediaPlayer_ForwardArrow.svg'
 210                             Timer {
 211                                 running: parent.pressed
 212                                 triggeredOnStart: true
 213                                 interval: 100
 214                                 repeat: true
 215                                 onTriggered: radio.scanUp()
 216                             }
 217                         }
 218
 219                     }
 220                 }
 221             }
 222         }
 223         Item {
 224             Layout.fillWidth: true
 225             Layout.fillHeight: true
 226             Layout.preferredHeight: 2
 227             ListView {
 228                 anchors.fill: parent
 229                 anchors.leftMargin: 50
 230                 anchors.rightMargin: 50
 231                 clip: true
 232                 header: Label { text: 'PRESETS'; opacity: 0.5 }
 233                 model: presetModel
 234
 235                 delegate: MouseArea {
 236                     width: ListView.view.width
 237                     height: ListView.view.height / 4
 238
 239                     onClicked: {
 240                         radio.band = model.modelData.band
 241                         radio.frequency = model.modelData.frequency
 242                         radio.title = model.modelData.title
 243                     }
 244
 245                     RowLayout {
 246                         anchors.fill: parent
 247                         Image {
 248                             source: './images/Radio_Active_Icon.svg'
 249                         }
 250                         ColumnLayout {
 251                             Layout.fillWidth: true
 252                             Label {
 253                                 Layout.fillWidth: true
 254                                 text: model.title
 255                             }
 256                             Label {
 257                                 Layout.fillWidth: true
 258                                 text: radio.freq2str(model.frequency)
 259                                 color: '#59FF7F'
 260                                 font.pixelSize: 32
 261                             }
 262                         }
 263                         Image {
 264                             source: {
 265                                 switch (model.modelData.band) {
 266                                 case radio.fmBand:
 267                                     return './images/FM_Icons_FM.svg'
 268                                 case radio.amBand:
 269                                     return './images/FM_Icons_AM.svg'
 270                                 }
 271                                 return null
 272                             }
 273                         }
 274                     }
 275                 }
 276             }
 277         }
 278     }
 279 }