mirror of
https://gitlab.com/kelteseth/ScreenPlay.git
synced 2024-09-15 06:52:34 +02:00
Add FillMode in the sidebar, active monitor config and windows wallpaper. This is done via HTML object-fit. See: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Change sidebar layout to fix some regressions regarding sidebar type (wallpaper/scene/widget) Change QML Material Style to dense for smaller desktop controls Change sidebar content title into the image Change create wallpaper button to only be active when at least one monitor is selected
This commit is contained in:
Elias Steurer
parent
18cf6be0d5
commit
5f477507e5
@ -6,22 +6,21 @@ Item {
|
||||
id: sliderVolumeWrapperBottom
|
||||
height: 70
|
||||
|
||||
anchors {
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
}
|
||||
|
||||
property string headline: "dummyHeandline"
|
||||
property string iconSource: "qrc:/assets/icons/icon_volume.svg"
|
||||
property alias value: slider.value
|
||||
|
||||
property alias from: slider.from
|
||||
property alias to: slider.to
|
||||
property alias stepSize: slider.stepSize
|
||||
|
||||
Text {
|
||||
id: txtHeadline
|
||||
text: headline
|
||||
height: 20
|
||||
font.pointSize: 14
|
||||
font.pointSize: 10
|
||||
font.family: "Roboto"
|
||||
color: "#5D5D5D"
|
||||
color: "#626262"
|
||||
|
||||
anchors {
|
||||
top: parent.top
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import QtQuick 2.12
|
||||
import QtGraphicalEffects 1.0
|
||||
import QtQuick.Controls 2.3
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Extras 1.4
|
||||
import QtQuick.Controls.Material 2.2
|
||||
import QtQuick.Layouts 1.12
|
||||
import QtQuick.Controls.Material 2.12
|
||||
|
||||
import "../Monitors"
|
||||
import "../Common" as SP
|
||||
|
||||
Item {
|
||||
id: sidebar
|
||||
@ -30,10 +32,9 @@ Item {
|
||||
activeScreen = screenId
|
||||
sidebar.type = type
|
||||
|
||||
|
||||
switch (type) {
|
||||
case "videoWallpaper":
|
||||
state = "activeScene"
|
||||
state = "videoWallpaper"
|
||||
return
|
||||
case "htmlWallpaper":
|
||||
state = "activeScene"
|
||||
@ -66,18 +67,20 @@ Item {
|
||||
onActiveScreenChanged: {
|
||||
txtHeadline.text = installedListModel.get(activeScreen).screenTitle
|
||||
|
||||
if(installedListModel.get(activeScreen).screenPreviewGIF === undefined) {
|
||||
if (installedListModel.get(
|
||||
activeScreen).screenPreviewGIF === undefined) {
|
||||
image.source = Qt.resolvedUrl(
|
||||
installedListModel.absoluteStoragePath + "/" + activeScreen
|
||||
+ "/" + installedListModel.get(activeScreen).screenPreview)
|
||||
installedListModel.absoluteStoragePath + "/"
|
||||
+ activeScreen + "/" + installedListModel.get(
|
||||
activeScreen).screenPreview)
|
||||
image.playing = false
|
||||
} else {
|
||||
|
||||
image.source = Qt.resolvedUrl(
|
||||
installedListModel.absoluteStoragePath + "/" + activeScreen
|
||||
+ "/" + installedListModel.get(activeScreen).screenPreviewGIF)
|
||||
installedListModel.absoluteStoragePath + "/"
|
||||
+ activeScreen + "/" + installedListModel.get(
|
||||
activeScreen).screenPreviewGIF)
|
||||
image.playing = true
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -155,7 +158,7 @@ Item {
|
||||
}
|
||||
LinearGradient {
|
||||
id: tabShadow
|
||||
height: 20
|
||||
height: 50
|
||||
cached: true
|
||||
|
||||
anchors {
|
||||
@ -163,12 +166,12 @@ Item {
|
||||
right: parent.right
|
||||
left: parent.left
|
||||
}
|
||||
start: Qt.point(0, 30)
|
||||
start: Qt.point(0, 50)
|
||||
end: Qt.point(0, 0)
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 0.0
|
||||
color: "#88000000"
|
||||
color: "#EE000000"
|
||||
}
|
||||
GradientStop {
|
||||
position: 1.0
|
||||
@ -176,208 +179,140 @@ Item {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: button
|
||||
height: 50
|
||||
width: 50
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
sidebar.state = sidebar.state === "active" ? "inactive" : "active"
|
||||
}
|
||||
|
||||
Image {
|
||||
id: imgBack
|
||||
source: "qrc:/assets/icons/icon_arrow_right.svg"
|
||||
sourceSize: Qt.size(15, 15)
|
||||
fillMode: Image.PreserveAspectFit
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: headlineWrapper
|
||||
height: 60
|
||||
anchors {
|
||||
top: imageWrapper.bottom
|
||||
topMargin: 10
|
||||
right: parent.right
|
||||
rightMargin: 10
|
||||
left: parent.left
|
||||
leftMargin: 10
|
||||
}
|
||||
|
||||
Text {
|
||||
id: txtHeadline
|
||||
text: qsTr("Headline")
|
||||
height: 60
|
||||
|
||||
font.family: "Roboto"
|
||||
font.weight: Font.Thin
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
verticalAlignment: Text.AlignBottom
|
||||
font.pointSize: 16
|
||||
color: "#2F2F2F"
|
||||
wrapMode: Text.WrapAnywhere
|
||||
color: "white"
|
||||
wrapMode: Text.WordWrap
|
||||
height: 50
|
||||
anchors {
|
||||
top: parent.top
|
||||
bottom: parent.bottom
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
left: parent.left
|
||||
leftMargin: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
id: txtHeadlineMonitor
|
||||
text: qsTr("Select a Monitor to display the content")
|
||||
height: 50
|
||||
|
||||
horizontalAlignment: Qt.AlignHCenter
|
||||
font.family: "Roboto"
|
||||
font.pointSize: 14
|
||||
color: "#2F2F2F"
|
||||
wrapMode: Text.WrapAnywhere
|
||||
anchors {
|
||||
top: headlineWrapper.bottom
|
||||
margins: 20
|
||||
right: parent.right
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: monitorSelectionWrapper
|
||||
height: 80
|
||||
width: 400
|
||||
anchors {
|
||||
top: txtHeadlineMonitor.bottom
|
||||
right: parent.right
|
||||
left: parent.left
|
||||
}
|
||||
|
||||
MonitorSelection {
|
||||
id: monitorSelection
|
||||
width: 360
|
||||
height: parent.height
|
||||
availableWidth: 360
|
||||
fontSize: 11
|
||||
availableHeight: 50
|
||||
anchors {
|
||||
top: parent.top
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: sliderVolumeWrapper
|
||||
height: 100
|
||||
width: 400
|
||||
anchors {
|
||||
bottom: btnSetWallpaper.top
|
||||
bottomMargin: 20
|
||||
right: parent.right
|
||||
rightMargin: 30
|
||||
leftMargin: 30
|
||||
left: parent.left
|
||||
}
|
||||
Text {
|
||||
id: txtSliderVolume
|
||||
text: qsTr("Volume")
|
||||
height: 30
|
||||
|
||||
font.family: "Roboto"
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pointSize: 10
|
||||
color: "#626262"
|
||||
wrapMode: Text.WrapAnywhere
|
||||
anchors {
|
||||
top: parent.top
|
||||
margins: 20
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
Row {
|
||||
id: sliderVolumeWrapperBottom
|
||||
height: 70
|
||||
spacing: 30
|
||||
width: 300
|
||||
anchors {
|
||||
bottom: parent.bottom
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
|
||||
MouseArea {
|
||||
id: button
|
||||
height: 50
|
||||
width: 50
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
sidebar.state = sidebar.state === "active" ? "inactive" : "active"
|
||||
}
|
||||
|
||||
Image {
|
||||
width: 20
|
||||
height: 20
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
source: "qrc:/assets/icons/icon_volume.svg"
|
||||
sourceSize: Qt.size(20, 20)
|
||||
id: imgBack
|
||||
source: "qrc:/assets/icons/icon_arrow_right.svg"
|
||||
sourceSize: Qt.size(15, 15)
|
||||
fillMode: Image.PreserveAspectFit
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Slider {
|
||||
id: sliderVolume
|
||||
stepSize: 0.01
|
||||
from: 0
|
||||
value: 1
|
||||
to: 1
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
ColumnLayout {
|
||||
spacing: 0
|
||||
|
||||
anchors {
|
||||
top: imageWrapper.bottom
|
||||
right: parent.right
|
||||
bottom: btnSetWallpaper.top
|
||||
left: parent.left
|
||||
margins: 30
|
||||
topMargin: 30
|
||||
}
|
||||
|
||||
Item {
|
||||
height: 70
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignTop
|
||||
|
||||
MonitorSelection {
|
||||
id: monitorSelection
|
||||
height: 50
|
||||
width: parent.width
|
||||
availableWidth: monitorSelection.width
|
||||
availableHeight: monitorSelection.height
|
||||
fontSize: 11
|
||||
anchors {
|
||||
top:parent.top
|
||||
topMargin: 20
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
id: name
|
||||
color: "#818181"
|
||||
text: Math.round(sliderVolume.value * 100) / 100
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
font.family: "Libre Baskerville"
|
||||
font.pointSize: 12
|
||||
font.italic: true
|
||||
id: txtHeadlineMonitor
|
||||
text: qsTr("Select a Monitor to display the content")
|
||||
font.family: "Roboto"
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pointSize: 10
|
||||
color: "#626262"
|
||||
anchors {
|
||||
top:parent.top
|
||||
topMargin: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
visible: false
|
||||
id: txtComboBoxFillMode
|
||||
text: qsTr("Fill Mode")
|
||||
height: 30
|
||||
|
||||
font.family: "Roboto"
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pointSize: 10
|
||||
color: "#626262"
|
||||
wrapMode: Text.WrapAnywhere
|
||||
anchors {
|
||||
top: sliderVolumeWrapper.bottom
|
||||
left: parent.left
|
||||
leftMargin: 30
|
||||
}
|
||||
}
|
||||
|
||||
ComboBox {
|
||||
visible: false
|
||||
id: settingsComboBox
|
||||
width: 200
|
||||
|
||||
anchors {
|
||||
top: txtComboBoxFillMode.bottom
|
||||
topMargin: 10
|
||||
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
SP.Slider {
|
||||
id: sliderVolume
|
||||
stepSize: 0.01
|
||||
from: 0
|
||||
value: 1
|
||||
to: 1
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignTop
|
||||
headline: qsTr("Set Volume")
|
||||
}
|
||||
|
||||
model: ListModel {
|
||||
ListElement {
|
||||
text: "Stretch"
|
||||
ColumnLayout {
|
||||
height: 70
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignTop
|
||||
spacing: 5
|
||||
|
||||
Text {
|
||||
visible: false
|
||||
id: txtComboBoxFillMode
|
||||
text: qsTr("Fill Mode")
|
||||
|
||||
font.family: "Roboto"
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pointSize: 10
|
||||
color: "#626262"
|
||||
wrapMode: Text.WrapAnywhere
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
ListElement {
|
||||
text: "PreserveAspectFit"
|
||||
}
|
||||
ListElement {
|
||||
text: "PreserveAspectCrop"
|
||||
ComboBox {
|
||||
visible: false
|
||||
id: settingsComboBox
|
||||
Layout.fillWidth: true
|
||||
|
||||
model: ListModel {
|
||||
ListElement {
|
||||
text: "Stretch"
|
||||
}
|
||||
ListElement {
|
||||
text: "Fill"
|
||||
}
|
||||
ListElement {
|
||||
text: "Contain"
|
||||
}
|
||||
ListElement {
|
||||
text: "Cover"
|
||||
}
|
||||
ListElement {
|
||||
text: "Scale-Down"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -393,6 +328,7 @@ Item {
|
||||
icon.color: "white"
|
||||
icon.width: 16
|
||||
icon.height: 16
|
||||
enabled: monitorSelection.activeMonitors.length > 0
|
||||
anchors {
|
||||
bottom: parent.bottom
|
||||
bottomMargin: 20
|
||||
@ -401,28 +337,30 @@ Item {
|
||||
|
||||
onClicked: {
|
||||
if (type.endsWith("Wallpaper")) {
|
||||
let activeMonitors = monitorSelection.getActiveMonitors();
|
||||
var activeMonitors = monitorSelection.getActiveMonitors(
|
||||
)
|
||||
|
||||
if(activeMonitors.length === 0)
|
||||
// TODO Alert user to choose a monitor
|
||||
if (activeMonitors.length === 0)
|
||||
return
|
||||
|
||||
if(activeMonitors.length > 1) {
|
||||
if (activeMonitors.length > 1) {
|
||||
screenPlay.createWallpaper(
|
||||
activeMonitors, installedListModel.absoluteStoragePath + "/" + activeScreen,
|
||||
activeMonitors, installedListModel.absoluteStoragePath
|
||||
+ "/" + activeScreen,
|
||||
installedListModel.get(activeScreen).screenPreview,
|
||||
(Math.round(sliderVolume.value * 100) / 100),
|
||||
settingsComboBox.model.get(settingsComboBox.currentIndex).text.toString(
|
||||
), type)
|
||||
} else {
|
||||
screenPlay.createWallpaper(
|
||||
activeMonitors[0], installedListModel.absoluteStoragePath + "/" + activeScreen,
|
||||
activeMonitors[0], installedListModel.absoluteStoragePath
|
||||
+ "/" + activeScreen,
|
||||
installedListModel.get(activeScreen).screenPreview,
|
||||
(Math.round(sliderVolume.value * 100) / 100),
|
||||
settingsComboBox.model.get(settingsComboBox.currentIndex).text.toString(
|
||||
), type)
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
screenPlay.createWidget(
|
||||
installedListModel.absoluteStoragePath + "/" + activeScreen,
|
||||
@ -497,14 +435,6 @@ Item {
|
||||
target: sliderVolumeWrapper
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges {
|
||||
target: txtComboBoxFillMode
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges {
|
||||
target: settingsComboBox
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "inactive"
|
||||
@ -537,11 +467,6 @@ Item {
|
||||
anchors.topMargin: 0
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: headlineWrapper
|
||||
opacity: 1
|
||||
enabled: true
|
||||
}
|
||||
PropertyChanges {
|
||||
target: btnSetWallpaper
|
||||
text: qsTr("Set Widget")
|
||||
@ -550,22 +475,6 @@ Item {
|
||||
target: txtHeadlineMonitor
|
||||
opacity: 0
|
||||
}
|
||||
PropertyChanges {
|
||||
target: monitorSelectionWrapper
|
||||
opacity: 0
|
||||
}
|
||||
PropertyChanges {
|
||||
target: sliderVolumeWrapper
|
||||
opacity: 0
|
||||
}
|
||||
PropertyChanges {
|
||||
target: txtComboBoxFillMode
|
||||
opacity: 0
|
||||
}
|
||||
PropertyChanges {
|
||||
target: settingsComboBox
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "activeScene"
|
||||
@ -579,12 +488,6 @@ Item {
|
||||
opacity: 1
|
||||
anchors.topMargin: 0
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: headlineWrapper
|
||||
opacity: 1
|
||||
enabled: true
|
||||
}
|
||||
PropertyChanges {
|
||||
target: btnSetWallpaper
|
||||
text: qsTr("Set Scene")
|
||||
@ -594,20 +497,43 @@ Item {
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges {
|
||||
target: monitorSelectionWrapper
|
||||
target: sliderVolume
|
||||
opacity: 0
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "videoWallpaper"
|
||||
PropertyChanges {
|
||||
target: mouseAreaHelper
|
||||
enabled: true
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: image
|
||||
opacity: 1
|
||||
anchors.topMargin: 0
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: btnSetWallpaper
|
||||
text: qsTr("Set Wallpaper")
|
||||
}
|
||||
PropertyChanges {
|
||||
target: txtHeadlineMonitor
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges {
|
||||
target: sliderVolumeWrapper
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: txtComboBoxFillMode
|
||||
opacity: 0
|
||||
opacity: 1
|
||||
visible: true
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: settingsComboBox
|
||||
opacity: 0
|
||||
opacity: 1
|
||||
visible: true
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -687,6 +613,31 @@ Item {
|
||||
Transition {
|
||||
to: "activeScene"
|
||||
|
||||
SequentialAnimation {
|
||||
NumberAnimation {
|
||||
target: sidebar
|
||||
properties: "anchors.rightMargin"
|
||||
duration: 250
|
||||
easing.type: Easing.OutQuart
|
||||
}
|
||||
|
||||
ParallelAnimation {
|
||||
NumberAnimation {
|
||||
target: image
|
||||
property: "opacity"
|
||||
duration: 200
|
||||
}
|
||||
NumberAnimation {
|
||||
target: image
|
||||
property: "anchors.topMargin"
|
||||
duration: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
Transition {
|
||||
to: "videoWallpaper"
|
||||
|
||||
SequentialAnimation {
|
||||
NumberAnimation {
|
||||
target: sidebar
|
||||
@ -711,3 +662,8 @@ Item {
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
/*##^## Designer {
|
||||
D{i:0;autoSize:true;height:800;width:640}
|
||||
}
|
||||
##^##*/
|
||||
|
||||
@ -3,30 +3,35 @@ import QtGraphicalEffects 1.0
|
||||
|
||||
Rectangle {
|
||||
id: rect
|
||||
color: background
|
||||
radius: cornerRadius
|
||||
|
||||
height: availableHeight
|
||||
width: availableWidth
|
||||
|
||||
property color background: "transparent"
|
||||
property real cornerRadius: 0
|
||||
// Width of the Sidebar or Space that should be used
|
||||
property real availableWidth: 0
|
||||
property real availableHeight: 0
|
||||
property int fontSize: 12
|
||||
property string activeMonitorID: "empty"
|
||||
|
||||
// We preselect the main monitor
|
||||
property var activeMonitors:[0]
|
||||
|
||||
property alias background: rect.color
|
||||
property alias radius: rect.radius
|
||||
|
||||
signal requestProjectSettings(var at)
|
||||
|
||||
function getActiveMonitors(){
|
||||
let activeMonitors = [];
|
||||
rect.activeMonitors = []
|
||||
for (var i = 0; i < rp.count; i++) {
|
||||
|
||||
if(rp.itemAt(i).isSelected){
|
||||
activeMonitors.push(rp.itemAt(i).index)
|
||||
rect.activeMonitors.push(rp.itemAt(i).index)
|
||||
}
|
||||
}
|
||||
return activeMonitors;
|
||||
// Must be called manually. When QML properties are getting altered in js the
|
||||
// property binding breaks
|
||||
rect.activeMonitorsChanged()
|
||||
return rect.activeMonitors
|
||||
}
|
||||
|
||||
|
||||
@ -84,6 +89,7 @@ Rectangle {
|
||||
}
|
||||
|
||||
for (var i = 0; i < rp.count; i++) {
|
||||
//print(rp.itemAt(i).index,rp.itemAt(i).height)
|
||||
rp.itemAt(i).index = i
|
||||
rp.itemAt(i).height = rp.itemAt(i).height * monitorHeightRationDelta
|
||||
rp.itemAt(i).width = rp.itemAt(i).width * monitorWidthRationDelta
|
||||
@ -117,8 +123,9 @@ Rectangle {
|
||||
previewImage: monitorPreviewImage
|
||||
|
||||
onMonitorSelected: {
|
||||
requestProjectSettings(index)
|
||||
getActiveMonitors()
|
||||
|
||||
requestProjectSettings(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,14 +2,14 @@ import QtQuick 2.12
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
Item {
|
||||
id:monitorSelectionItem
|
||||
id: monitorSelectionItem
|
||||
property rect monitorSize: Qt.rect(0, 0, 0, 0)
|
||||
property string monitorModel
|
||||
property string monitorManufacturer
|
||||
property string monitorName
|
||||
property string monitorID
|
||||
property string previewImage
|
||||
onPreviewImageChanged: {
|
||||
onPreviewImageChanged: {
|
||||
imgPreview.source = previewImage
|
||||
imgPreview.opacity = 1
|
||||
}
|
||||
@ -20,7 +20,7 @@ Item {
|
||||
property bool isWallpaperActive: false
|
||||
signal monitorSelected(var index)
|
||||
onMonitorSelected: {
|
||||
if(isSelected){
|
||||
if (isSelected) {
|
||||
isSelected = false
|
||||
} else {
|
||||
isSelected = true
|
||||
@ -30,24 +30,21 @@ Item {
|
||||
onIsSelectedChanged: {
|
||||
if (isSelected) {
|
||||
wrapper.border.color = "#F28E0D"
|
||||
|
||||
} else {
|
||||
wrapper.border.color = "#373737"
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
|
||||
text: monitorSize.width + "x" + monitorSize.height
|
||||
anchors{
|
||||
anchors {
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
top:wrapper.bottom
|
||||
top: wrapper.bottom
|
||||
topMargin: 5
|
||||
}
|
||||
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
//color: "white"
|
||||
font.pointSize: monitorSelectionItem.fontSize
|
||||
font.family: "Roboto"
|
||||
wrapMode: Text.WrapAnywhere
|
||||
@ -61,26 +58,25 @@ Item {
|
||||
border.color: "#1e1e1e"
|
||||
border.width: 3
|
||||
radius: 3
|
||||
clip:true
|
||||
clip: true
|
||||
|
||||
Image {
|
||||
id: imgPreview
|
||||
sourceSize: Qt.size(parent.width,parent.height)
|
||||
sourceSize: Qt.size(parent.width, parent.height)
|
||||
anchors.margins: 3
|
||||
opacity: 0
|
||||
anchors.fill: parent
|
||||
asynchronous: true
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
monitorSelected(index)
|
||||
}
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -131,7 +131,7 @@ Item {
|
||||
}
|
||||
}
|
||||
}
|
||||
Column {
|
||||
ColumnLayout {
|
||||
id: videoControlWrapper
|
||||
anchors {
|
||||
top: parent.top
|
||||
@ -142,17 +142,67 @@ Item {
|
||||
left: itmLeftWrapper.right
|
||||
}
|
||||
|
||||
|
||||
SP.Slider {
|
||||
headline: qsTr("Volume")
|
||||
onValueChanged: screenPlay.setWallpaperValue(activeMonitorIndex,"volume", value)
|
||||
onValueChanged: screenPlay.setWallpaperValue(
|
||||
activeMonitorIndex, "volume", value)
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
SP.Slider {
|
||||
headline: qsTr("Playback rate")
|
||||
onValueChanged: screenPlay.setWallpaperValue(activeMonitorIndex,"playbackRate", value)
|
||||
onValueChanged: screenPlay.setWallpaperValue(
|
||||
activeMonitorIndex, "playbackRate", value)
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
SP.Slider {
|
||||
headline: qsTr("Current Video Time")
|
||||
onValueChanged: screenPlay.setWallpaperValue(activeMonitorIndex,"currentTime", value)
|
||||
onValueChanged: screenPlay.setWallpaperValue(
|
||||
activeMonitorIndex, "currentTime", value)
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
ColumnLayout {
|
||||
height: 50
|
||||
Layout.fillWidth: true
|
||||
spacing: 5
|
||||
|
||||
Text {
|
||||
id: txtComboBoxFillMode
|
||||
text: qsTr("Fill Mode")
|
||||
font.family: "Roboto"
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pointSize: 10
|
||||
color: "#626262"
|
||||
wrapMode: Text.WrapAnywhere
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
ComboBox {
|
||||
id: settingsComboBox
|
||||
Layout.fillWidth: true
|
||||
onActivated: {
|
||||
screenPlay.setWallpaperValue(
|
||||
activeMonitorIndex, "fillmode",
|
||||
settingsComboBox.currentText)
|
||||
}
|
||||
|
||||
model: ListModel {
|
||||
ListElement {
|
||||
text: "Stretch"
|
||||
}
|
||||
ListElement {
|
||||
text: "Fill"
|
||||
}
|
||||
ListElement {
|
||||
text: "Contain"
|
||||
}
|
||||
ListElement {
|
||||
text: "Cover"
|
||||
}
|
||||
ListElement {
|
||||
text: "Scale-Down"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -73,12 +73,7 @@ Item {
|
||||
value: root.value
|
||||
stepSize: root.stepSize
|
||||
live: false
|
||||
anchors{
|
||||
left:parent.left
|
||||
verticalCenter: parent.verticalCenter
|
||||
right:txtSliderValue.left
|
||||
rightMargin: 10
|
||||
}
|
||||
width: parent.width
|
||||
|
||||
onValueChanged: {
|
||||
var value = Math.round(slider.value * 100) / 100;
|
||||
|
||||
@ -8,3 +8,4 @@ Primary=White
|
||||
Foreground=Grey
|
||||
Font\Family=Roboto
|
||||
Font\PixelSize=12
|
||||
Variant=Dense
|
||||
|
||||
@ -38,8 +38,8 @@ int main(int argc, char* argv[])
|
||||
list.append(0);
|
||||
|
||||
#if defined(Q_OS_WIN)
|
||||
WinWindow window(list, "test", "appid", "1");
|
||||
//WinWindow window(list, "D:/672870/827874818", "appid", "1");
|
||||
WinWindow window(list, "test", "appid", "1", "fill");
|
||||
//WinWindow window(list, "D:/672870/827874818", "appid", "1", "fill");
|
||||
#endif
|
||||
#if defined(Q_OS_LINUX)
|
||||
LinuxWindow window(list, "test", "appid", "1");
|
||||
@ -85,11 +85,11 @@ int main(int argc, char* argv[])
|
||||
}
|
||||
}
|
||||
|
||||
// Args: which monitor, (2) path to project, (3)wallpaper secret to identify the connected socket, (5) volume
|
||||
// Args: which monitor, (2) path to project, (3)wallpaper secret to identify the connected socket, (5) volume, (6) fillmode
|
||||
// See screenplay.h @ScreenPlayWallpaper constructor how the args get created
|
||||
|
||||
#if defined(Q_OS_WIN)
|
||||
WinWindow window(list, argumentList.at(2), argumentList.at(3), argumentList.at(5));
|
||||
WinWindow window(list, argumentList.at(2), argumentList.at(3), argumentList.at(5), argumentList.at(6));
|
||||
QObject::connect(&sdk, &ScreenPlaySDK::sdkDisconnected, &window, &WinWindow::destroyThis);
|
||||
QObject::connect(&sdk, &ScreenPlaySDK::incommingMessage, &window, &WinWindow::messageReceived);
|
||||
#endif
|
||||
|
||||
@ -93,6 +93,7 @@ Rectangle {
|
||||
src += "videoSource.src = '" + window.fullContentPath + "';"
|
||||
src += "videoPlayer.load();"
|
||||
src += "videoPlayer.volume = " + window.volume + ";"
|
||||
src += "videoPlayer.setAttribute('style', 'object-fit :" + window.fillMode + ";');"
|
||||
src += "videoPlayer.play();"
|
||||
|
||||
webView.runJavaScript(src, function (result) {
|
||||
@ -215,6 +216,14 @@ Rectangle {
|
||||
newObject.destroy(10000)
|
||||
}
|
||||
|
||||
|
||||
onFillModeChanged:{
|
||||
if (webView.loadProgress === 100) {
|
||||
webView.runJavaScript(
|
||||
"var videoPlayer = document.getElementById('videoPlayer'); videoPlayer.setAttribute('style', 'object-fit :" + window.fillMode + ";');")
|
||||
}
|
||||
}
|
||||
|
||||
onLoopsChanged: {
|
||||
if (webView.loadProgress === 100) {
|
||||
webView.runJavaScript(
|
||||
@ -236,6 +245,13 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
onPlaybackRateChanged: {
|
||||
if (webView.loadProgress === 100) {
|
||||
webView.runJavaScript(
|
||||
"var videoPlayer = document.getElementById('videoPlayer'); videoPlayer.playbackRate = " + playbackRate + ";")
|
||||
}
|
||||
}
|
||||
|
||||
onIsPlayingChanged: {
|
||||
if (webView.loadProgress === 100) {
|
||||
if (isPlaying) {
|
||||
|
||||
@ -121,6 +121,11 @@ void BaseWindow::messageReceived(QString key, QString value)
|
||||
return;
|
||||
}
|
||||
|
||||
if (key == "fillmode") {
|
||||
setFillMode(QVariant(value).toString());
|
||||
return;
|
||||
}
|
||||
|
||||
if (key == "currentTime") {
|
||||
bool ok;
|
||||
float tmp = value.toFloat(&ok);
|
||||
|
||||
@ -25,6 +25,7 @@ public:
|
||||
Q_PROPERTY(bool isPlaying READ isPlaying WRITE setIsPlaying NOTIFY isPlayingChanged)
|
||||
Q_PROPERTY(bool muted READ muted WRITE setMuted NOTIFY mutedChanged)
|
||||
Q_PROPERTY(bool canFade READ canFade WRITE setCanFade NOTIFY canFadeChanged)
|
||||
Q_PROPERTY(QString fillMode READ fillMode WRITE setFillMode NOTIFY fillModeChanged)
|
||||
|
||||
Q_PROPERTY(float volume READ volume WRITE setVolume NOTIFY volumeChanged)
|
||||
Q_PROPERTY(float playbackRate READ playbackRate WRITE setPlaybackRate NOTIFY playbackRateChanged)
|
||||
@ -100,6 +101,11 @@ public:
|
||||
return m_canFade;
|
||||
}
|
||||
|
||||
QString fillMode() const
|
||||
{
|
||||
return m_fillMode;
|
||||
}
|
||||
|
||||
signals:
|
||||
void loopsChanged(bool loops);
|
||||
void volumeChanged(float volume);
|
||||
@ -116,6 +122,8 @@ signals:
|
||||
|
||||
void canFadeChanged(bool canFade);
|
||||
|
||||
void fillModeChanged(QString fillMode);
|
||||
|
||||
public slots:
|
||||
virtual void destroyThis() {}
|
||||
virtual void setVisible(bool show) { Q_UNUSED(show) }
|
||||
@ -136,6 +144,8 @@ public slots:
|
||||
}
|
||||
void setVolume(float volume)
|
||||
{
|
||||
if(volume < 0.0f || volume > 1.0f)
|
||||
return;
|
||||
|
||||
if (qFuzzyCompare(m_volume, volume))
|
||||
return;
|
||||
@ -153,7 +163,9 @@ public slots:
|
||||
}
|
||||
void setPlaybackRate(float playbackRate)
|
||||
{
|
||||
qWarning("Floating point comparison needs context sanity check");
|
||||
if(playbackRate < 0.0f || playbackRate > 1.0f)
|
||||
return;
|
||||
|
||||
if (qFuzzyCompare(m_playbackRate, playbackRate))
|
||||
return;
|
||||
|
||||
@ -225,6 +237,27 @@ public slots:
|
||||
emit canFadeChanged(m_canFade);
|
||||
}
|
||||
|
||||
void setFillMode(QString fillMode)
|
||||
{
|
||||
if (m_fillMode == fillMode)
|
||||
return;
|
||||
|
||||
QStringList availableFillModes {"Stretch", "Fill", "Contain", "Cover", "Scale-Down"};
|
||||
|
||||
if(!availableFillModes.contains(fillMode)) {
|
||||
qWarning() << "Unable to set fillmode, the provided value did not match the available values"
|
||||
<< "Provided: " << fillMode
|
||||
<< "Available: " << availableFillModes;
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Actual web fillmodes are lowercase
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
|
||||
m_fillMode = fillMode.toLower();
|
||||
emit fillModeChanged(m_fillMode);
|
||||
}
|
||||
|
||||
private:
|
||||
bool m_loops { true };
|
||||
bool m_isPlaying { true };
|
||||
@ -240,4 +273,5 @@ private:
|
||||
|
||||
WallpaperType m_type = BaseWindow::WallpaperType::Qml;
|
||||
QString m_OSVersion;
|
||||
QString m_fillMode;
|
||||
};
|
||||
|
||||
@ -60,7 +60,7 @@ LRESULT __stdcall MouseHookCallback(int nCode, WPARAM wParam, LPARAM lParam)
|
||||
return CallNextHookEx(mouseHook, nCode, wParam, lParam);
|
||||
}
|
||||
|
||||
WinWindow::WinWindow(const QVector<int> &activeScreensList, QString projectPath, QString id, QString volume)
|
||||
WinWindow::WinWindow(const QVector<int> &activeScreensList, QString projectPath, QString id, QString volume, const QString fillmode)
|
||||
: BaseWindow(projectPath)
|
||||
{
|
||||
m_windowHandle = reinterpret_cast<HWND>(m_window.winId());
|
||||
@ -76,6 +76,7 @@ WinWindow::WinWindow(const QVector<int> &activeScreensList, QString projectPath,
|
||||
qFatal("Could not parse volume");
|
||||
}
|
||||
setVolume(volumeParsed);
|
||||
setFillMode(fillmode);
|
||||
|
||||
if (!searchWorkerWindowToParentTo()) {
|
||||
qFatal("No worker window found");
|
||||
|
||||
@ -22,7 +22,7 @@ class WinWindow : public BaseWindow {
|
||||
|
||||
|
||||
public:
|
||||
explicit WinWindow(const QVector<int>& activeScreensList, QString projectPath, QString id, QString volume);
|
||||
explicit WinWindow(const QVector<int>& activeScreensList, QString projectPath, QString id, QString volume, const QString fillmode);
|
||||
|
||||
public slots:
|
||||
void setVisible(bool show) override;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user