Add opacity parameter to text based filters

As suggested here: https://forum.shotcut.org/t/filter-set-block-text-and-video-title-templates/41003/5
mltframework · Oct 23, 2023 · afd6a65 · afd6a65
1 parent 244d68f
commit afd6a65
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 20 deletions.
diff --git a/src/qml/filters/dynamictext/meta.qml b/src/qml/filters/dynamictext/meta.qml
@@ -14,7 +14,7 @@ Metadata {
     keyframes {
         allowAnimateIn: true
         allowAnimateOut: true
-        simpleProperties: ['geometry', 'fgcolour', 'olcolour', 'bgcolour']
+        simpleProperties: ['geometry', 'fgcolour', 'olcolour', 'bgcolour', 'opacity']
         parameters: [
             Parameter {
                 name: qsTr('Position / Size')
@@ -38,6 +38,13 @@ Metadata {
                 property: 'bgcolour'
                 isCurve: false
                 isColor: true
+            },
+            Parameter {
+                name: qsTr('Opacity')
+                property: 'opacity'
+                isCurve: true
+                minimum: 0
+                maximum: 1
             }
         ]
     }

diff --git a/src/qml/filters/dynamictext/ui.qml b/src/qml/filters/dynamictext/ui.qml
@@ -26,12 +26,12 @@ Shotcut.KeyframableFilter {
         textFilterUi.setControls();
     }
 
-    keyframableParameters: ['fgcolour', 'olcolour', 'bgcolour']
-    startValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0)]
-    middleValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0)]
-    endValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0)]
+    keyframableParameters: ['fgcolour', 'olcolour', 'bgcolour', 'opacity']
+    startValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0), 0.0]
+    middleValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0), 1.0]
+    endValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0), 0.0]
     width: 425
-    height: 400
+    height: 455
     Component.onCompleted: {
         filter.blockSignals = true;
         filter.set(textFilterUi.middleValue, Qt.rect(0, 0, profile.width, profile.height));
@@ -47,6 +47,7 @@ Shotcut.KeyframableFilter {
             filter.set('fgcolour', '#ffffffff');
             filter.set('bgcolour', '#00000000');
             filter.set('olcolour', '#aa000000');
+            filter.set('opacity', 1.0);
             filter.set('outline', 3);
             filter.set('weight', Font.Normal);
             filter.set('style', 'normal');
@@ -337,7 +338,7 @@ Shotcut.KeyframableFilter {
 
         Shotcut.TextFilterUi {
             id: textFilterUi
-
+            showOpacity: filter.isAtLeastVersion(2)
             Layout.columnSpan: 2
         }
 

diff --git a/src/qml/filters/gpstext/meta.qml b/src/qml/filters/gpstext/meta.qml
@@ -29,7 +29,7 @@ Metadata {
     keyframes {
         allowAnimateIn: true
         allowAnimateOut: true
-        simpleProperties: ['geometry', 'fgcolour', 'olcolour', 'bgcolour']
+        simpleProperties: ['geometry', 'fgcolour', 'olcolour', 'bgcolour', 'opacity']
         parameters: [
             Parameter {
                 name: qsTr('Position / Size')
@@ -53,6 +53,13 @@ Metadata {
                 property: 'bgcolour'
                 isCurve: false
                 isColor: true
+            },
+            Parameter {
+                name: qsTr('Opacity')
+                property: 'opacity'
+                isCurve: true
+                minimum: 0
+                maximum: 1
             }
         ]
     }

diff --git a/src/qml/filters/gpstext/ui.qml b/src/qml/filters/gpstext/ui.qml
@@ -86,10 +86,10 @@ Shotcut.KeyframableFilter {
         filter.set('time_offset', Number(secs).toFixed(0));
     }
 
-    keyframableParameters: ['fgcolour', 'olcolour', 'bgcolour']
-    startValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0)]
-    middleValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0)]
-    endValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0)]
+    keyframableParameters: ['fgcolour', 'olcolour', 'bgcolour', 'opacity']
+    startValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0), 0.0]
+    middleValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0), 1.0]
+    endValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0), 0.1]
     width: 300
     height: 800
     onFileOpened: path => {
@@ -114,6 +114,7 @@ Shotcut.KeyframableFilter {
             filter.set('fgcolour', '#ffffffff');
             filter.set('bgcolour', '#00000000');
             filter.set('olcolour', '#aa000000');
+            filter.set('opacity', 1.0);
             filter.set('outline', 3);
             filter.set('weight', Font.Normal);
             filter.set('style', 'normal');
@@ -874,7 +875,7 @@ Shotcut.KeyframableFilter {
 
         Shotcut.TextFilterUi {
             id: textFilterUi
-
+            showOpacity: filter.isAtLeastVersion(4)
             Layout.leftMargin: 10
             Layout.columnSpan: 2
         }

diff --git a/src/qml/filters/timer/meta.qml b/src/qml/filters/timer/meta.qml
@@ -14,7 +14,7 @@ Metadata {
     keyframes {
         allowAnimateIn: true
         allowAnimateOut: true
-        simpleProperties: ['geometry', 'fgcolour', 'olcolour', 'bgcolour']
+        simpleProperties: ['geometry', 'fgcolour', 'olcolour', 'bgcolour', 'opacity']
         parameters: [
             Parameter {
                 name: qsTr('Position / Size')
@@ -38,6 +38,13 @@ Metadata {
                 property: 'bgcolour'
                 isCurve: false
                 isColor: true
+            },
+            Parameter {
+                name: qsTr('Opacity')
+                property: 'opacity'
+                isCurve: true
+                minimum: 0
+                maximum: 1
             }
         ]
     }

diff --git a/src/qml/filters/timer/ui.qml b/src/qml/filters/timer/ui.qml
@@ -53,10 +53,10 @@ Shotcut.KeyframableFilter {
         textFilterUi.setControls();
     }
 
-    keyframableParameters: ['fgcolour', 'olcolour', 'bgcolour']
-    startValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0)]
-    middleValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0)]
-    endValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0)]
+    keyframableParameters: ['fgcolour', 'olcolour', 'bgcolour', 'opacity']
+    startValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0), 0.0]
+    middleValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0), 1.0]
+    endValues: [Qt.rgba(1, 1, 1, 1), Qt.rgba(0, 0, 0, 2.0 / 3.0), Qt.rgba(0, 0, 0, 0), 0.0]
     width: 400
     height: 450
     Component.onCompleted: {
@@ -74,6 +74,7 @@ Shotcut.KeyframableFilter {
             filter.set('fgcolour', '#ffffffff');
             filter.set('bgcolour', '#00000000');
             filter.set('olcolour', '#ff000000');
+            filter.set('opacity', 1.0);
             filter.set('weight', Font.Normal);
             filter.set('style', 'normal');
             filter.set(textFilterUi.useFontSizeProperty, false);
@@ -357,7 +358,7 @@ Shotcut.KeyframableFilter {
 
         Shotcut.TextFilterUi {
             id: textFilterUi
-
+            showOpacity: filter.isAtLeastVersion(2)
             Layout.columnSpan: 2
         }
 

diff --git a/src/qml/modules/Shotcut/Controls/TextFilterUi.qml b/src/qml/modules/Shotcut/Controls/TextFilterUi.qml
@@ -21,6 +21,7 @@ import Shotcut.Controls as Shotcut
 import org.shotcut.qml as Shotcut
 
 GridLayout {
+    property bool showOpacity: true
     property string rectProperty: 'geometry'
     property string valignProperty: 'valign'
     property string halignProperty: 'halign'
@@ -30,7 +31,7 @@ GridLayout {
     property string startValue: '_shotcut:startValue'
     property string middleValue: '_shotcut:middleValue'
     property string endValue: '_shotcut:endValue'
-    property var parameterList: [rectProperty, halignProperty, valignProperty, 'size', 'style', 'fgcolour', 'family', 'weight', 'olcolour', 'outline', 'bgcolour', 'pad', useFontSizeProperty]
+    property var parameterList: [rectProperty, halignProperty, valignProperty, 'size', 'style', 'fgcolour', 'family', 'weight', 'olcolour', 'outline', 'bgcolour', 'pad', 'opacity', useFontSizeProperty]
 
     function updateFilterRect(position) {
         if (position !== null) {
@@ -125,6 +126,7 @@ GridLayout {
         fgColor.value = filter.getColor('fgcolour', position);
         outlineColor.value = filter.getColor('olcolour', position);
         bgColor.value = filter.getColor('bgcolour', position);
+        opacitySlider.value = filter.getDouble('opacity', position) * 100.0;
         blockUpdate = false;
         var enabled = position <= 0 || (position >= (filter.animateIn - 1) && position <= (filter.duration - filter.animateOut)) || position >= (filter.duration - 1);
         rectX.enabled = enabled;
@@ -136,13 +138,15 @@ GridLayout {
         fgcolorKeyframesButton.checked = filter.keyframeCount('fgcolour') > 0 && filter.animateIn <= 0 && filter.animateOut <= 0;
         olcolorKeyframesButton.checked = filter.keyframeCount('olcolour') > 0 && filter.animateIn <= 0 && filter.animateOut <= 0;
         bgcolorKeyframesButton.checked = filter.keyframeCount('bgcolour') > 0 && filter.animateIn <= 0 && filter.animateOut <= 0;
+        opacityKeyframesButton.checked = filter.keyframeCount('opacity') > 0 && filter.animateIn <= 0 && filter.animateOut <= 0;
     }
 
     function updateParameters() {
         updateFilterRect(null);
         updateFilter('fgcolour', Qt.color(fgColor.value), fgcolorKeyframesButton, null);
         updateFilter('olcolour', Qt.color(outlineColor.value), olcolorKeyframesButton, null);
         updateFilter('bgcolour', Qt.color(bgColor.value), bgcolorKeyframesButton, null);
+        updateFilter('opacity', opacitySlider.value / 100.0, opacityKeyframesButton, null);
     }
 
     function applyTracking(motionTrackerRow, operation, frame) {
@@ -346,6 +350,36 @@ GridLayout {
         onValueModified: filter.set('pad', value)
     }
 
+    Label {
+        text: qsTr('Opacity')
+        visible: showOpacity
+        Layout.alignment: Qt.AlignRight
+    }
+
+    Shotcut.SliderSpinner {
+        id: opacitySlider
+        visible: showOpacity
+        Layout.columnSpan: 3
+
+        minimumValue: 0
+        maximumValue: 100
+        stepSize: 1
+        decimals: 0
+        suffix: ' %'
+        onValueChanged: updateFilter('opacity', value / 100.0, opacityKeyframesButton, getPosition())
+    }
+
+    Shotcut.UndoButton {
+        visible: showOpacity
+        onClicked: opacitySlider.value = 100
+    }
+
+    Shotcut.KeyframesButton {
+        id: opacityKeyframesButton
+        visible: showOpacity
+        onToggled: toggleKeyframes(checked, 'opacity', opacitySlider.value / 100.0)
+    }
+
     Label {
         text: qsTr('Position')
         Layout.alignment: Qt.AlignRight