Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: Add window opacity slider tool #3269

Conversation

personalizedrefrigerator
Copy link
Contributor

@personalizedrefrigerator personalizedrefrigerator commented Jul 25, 2021

Summary

see also #3312.

To-do

@@ -0,0 +1 @@
<svg viewBox="0 0 5.821 5.821" height="22" width="22" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="j"><stop style="stop-color:#3689e6;stop-opacity:1" offset="0"/><stop style="stop-color:#64baff;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#j" id="a" gradientUnits="userSpaceOnUse" x1="13.013" y1="19.627" x2="13.071" y2="-2.197"/><linearGradient xlink:href="#j" id="b" x1="15.897" y1="20.63" x2="15.94" y2="0" gradientUnits="userSpaceOnUse"/><linearGradient id="z"><stop offset="0" style="stop-color:#f9c440;stop-opacity:1"/><stop offset="1" style="stop-color:#ffe16b;stop-opacity:1"/></linearGradient><linearGradient id="u"><stop style="stop-color:#c6f27b;stop-opacity:1" offset="0"/><stop style="stop-color:#93d049;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="t"><stop style="stop-color:#c396eb;stop-opacity:1" offset="0"/><stop style="stop-color:#9d68d7;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="f"><stop offset="0" style="stop-color:#cdf87e;stop-opacity:1"/><stop offset=".262" style="stop-color:#a2e34f;stop-opacity:1"/><stop offset=".661" style="stop-color:#68b723;stop-opacity:1"/><stop offset="1" style="stop-color:#1d7e0d;stop-opacity:1"/></linearGradient><linearGradient id="k"><stop style="stop-color:#fff;stop-opacity:1" offset="0"/><stop style="stop-color:#fff;stop-opacity:.23529412" offset=".002"/><stop style="stop-color:#fff;stop-opacity:.15686275" offset=".392"/><stop style="stop-color:#fff;stop-opacity:.39215687" offset="1"/></linearGradient><linearGradient id="l"><stop offset="0" style="stop-color:#000;stop-opacity:0"/><stop offset=".5" style="stop-color:#000;stop-opacity:1"/><stop offset="1" style="stop-color:#000;stop-opacity:0"/></linearGradient><linearGradient id="g"><stop offset="0" style="stop-color:#000;stop-opacity:1"/><stop offset="1" style="stop-color:#000;stop-opacity:0"/></linearGradient><linearGradient id="m"><stop offset="0" style="stop-color:#f4f4f4;stop-opacity:1"/><stop offset="1" style="stop-color:#dbdbdb;stop-opacity:1"/></linearGradient><linearGradient id="n"><stop style="stop-color:#fff;stop-opacity:1" offset="0"/><stop style="stop-color:#fff;stop-opacity:.23529412" offset="0"/><stop style="stop-color:#fff;stop-opacity:.15686275" offset="1"/><stop style="stop-color:#fff;stop-opacity:.39215687" offset="1"/></linearGradient><linearGradient id="o"><stop style="stop-color:#000;stop-opacity:.31782946" offset="0"/><stop style="stop-color:#000;stop-opacity:.24031007" offset="1"/></linearGradient><linearGradient id="p"><stop style="stop-color:#ffa154;stop-opacity:1" offset="0"/><stop style="stop-color:#cc3b02;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="s"><stop offset="0" style="stop-color:#93d049;stop-opacity:1"/><stop offset="1" style="stop-color:#378a04;stop-opacity:1"/></linearGradient><linearGradient id="q"><stop style="stop-color:#fff;stop-opacity:1" offset="0"/><stop style="stop-color:#fff;stop-opacity:.23529412" offset=".063"/><stop style="stop-color:#fff;stop-opacity:.15686275" offset=".951"/><stop style="stop-color:#fff;stop-opacity:.39215687" offset="1"/></linearGradient><linearGradient id="h"><stop style="stop-color:#181818;stop-opacity:1" offset="0"/><stop style="stop-color:#181818;stop-opacity:0" offset="1"/></linearGradient><linearGradient id="r"><stop style="stop-color:#181818;stop-opacity:0" offset="0"/><stop style="stop-color:#181818;stop-opacity:1" offset=".5"/><stop style="stop-color:#181818;stop-opacity:0" offset="1"/></linearGradient><linearGradient xlink:href="#t" id="A" gradientUnits="userSpaceOnUse" x1="61.558" y1="194.856" x2="176.621" y2="55.669"/><linearGradient xlink:href="#u" id="B" gradientUnits="userSpaceOnUse" x1="128.265" y1="22.77" x2="133.458" y2="228.819"/><linearGradient id="v"><stop style="stop-color:#fff;stop-opacity:1" offset="0"/><stop style="stop-color:#fff;stop-opacity:.23529412" offset=".063"/><stop style="stop-color:#fff;stop-opacity:.15686275" offset=".951"/><stop style="stop-color:#fff;stop-opacity:.39215687" offset="1"/></linearGradient><linearGradient id="w"><stop offset="0" style="stop-color:#f282f1;stop-opacity:1"/><stop offset="1" style="stop-color:#a56de2;stop-opacity:1"/></linearGradient><linearGradient id="x"><stop style="stop-color:#770087;stop-opacity:1" offset="0"/><stop style="stop-color:#452981;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="y"><stop style="stop-color:#a00" offset="0"/><stop style="stop-color:#a00;stop-opacity:0" offset="1"/></linearGradient><linearGradient id="i"><stop offset="0" style="stop-color:#737373;stop-opacity:1"/><stop offset=".262" style="stop-color:#636363;stop-opacity:1"/><stop offset=".705" style="stop-color:#4b4b4b;stop-opacity:1"/><stop offset="1" style="stop-color:#3f3f3f;stop-opacity:1"/></linearGradient><linearGradient xlink:href="#z" id="c" gradientUnits="userSpaceOnUse" gradientTransform="translate(-.37 -59.002) scale(1.2007)" x1="2.7" y1="296.505" x2="2.69" y2="291.933"/><linearGradient xlink:href="#z" id="d" gradientUnits="userSpaceOnUse" gradientTransform="translate(-.37 -59.002) scale(1.2007)" x1="2.7" y1="296.505" x2="2.69" y2="291.933"/><linearGradient xlink:href="#z" id="e" gradientUnits="userSpaceOnUse" gradientTransform="rotate(.427 178009.919 491.325) scale(4.53811)" x1="2.7" y1="296.505" x2="2.69" y2="291.933"/></defs><g transform="translate(0 -291.18)"><path style="color:#000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000;solid-opacity:1;vector-effect:none;fill:#000;fill-opacity:0;fill-rule:nonzero;stroke:none;stroke-width:.79375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000" d="m3.935 292.32-1.551 2.03-.156 1.012.933-.414 1.551-2.029"/><g style="opacity:1"><path style="color:#000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000;solid-opacity:1;vector-effect:none;fill:#000;fill-opacity:0;fill-rule:nonzero;stroke:none;stroke-width:.79375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000;stop-opacity:1" d="m3.935 292.32-1.551 2.03-.156 1.012.933-.414 1.551-2.029"/></g><path style="fill:none;stroke:#d4d4d4;stroke-width:.79375;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M3.387 294.09H.645"/><path style="color:#000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#555761;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000;stop-opacity:1;opacity:1;stroke-width:.26458333" d="M.645 293.693a.397.397 0 0 0-.397.397.397.397 0 0 0 .397.396h2.742a.397.397 0 0 0 .396-.396.397.397 0 0 0-.396-.397H.645z"/><path style="fill:none;stroke:#7e8087;stroke-width:.79375;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M5.136 294.09H3.44"/><path style="color:#000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#555761;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000;stop-opacity:1;opacity:1;stroke-width:.26458333" d="M3.44 293.693a.397.397 0 0 0-.397.397.397.397 0 0 0 .396.396h1.698a.397.397 0 0 0 .396-.396.397.397 0 0 0-.396-.397H3.439z"/><circle style="opacity:1;fill:#fafafa;stroke:none;stroke-width:.264583;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:stroke markers fill;stop-color:#000" cx="2.91" cy="294.09" r="1.191"/><circle style="opacity:1;fill:none;stroke:#555761;stroke-width:.264583;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:stroke markers fill;stop-color:#000" cx="2.91" cy="294.09" r="1.191"/></g></svg>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now this is just a duplicate of the zoom slider's icon (but I think it works for this).

ToolWindowOpacitySlider::~ToolWindowOpacitySlider() = default;

ToolWindowOpacitySlider::ToolWindowOpacitySlider(ActionHandler* handler, std::string id, ActionType type,
Control* control, IconNameHelper iconNameHelper):
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In ToolMenuHandler::initToolItems, control->getWindow() returns nullptr. As such, we can't pass the MainWindow* to the ToolWindowOpacitySlider directly. I don't like giving it the entire control object, though...

@rolandlo
Copy link
Member

rolandlo commented Jul 25, 2021

This looks extremely fun, but wouldn't it make more sense to just make the XournalWidget transparent?

@personalizedrefrigerator
Copy link
Contributor Author

make the XournalWidget transparent?

From what I've found online, it looks easier to make the entire window transparent (So I'll have to look into how to do that...).

For my use case, though, making the entire window transparent is (slightly) more useful, as I plan to use this feature to take notes on video recordings of lectures. Making the entire window transparent lets me see content that would otherwise be hidden by toolbars. Of course, using the empty toolbar is another option!

Additionally, the slider does not allow the user to make the window entirely transparent and the window becomes fully opaque again on startup. As such, this shouldn't force the user to search for an invisible slider to make the window visible again.

@personalizedrefrigerator personalizedrefrigerator force-pushed the pr/setting_for_window_opacity branch 2 times, most recently from 756d394 to 8270f02 Compare July 26, 2021 01:48
@kneardhead
Copy link

Man I didn't think this will happen so quick! Thanks I truely appreciate!

The opacity thing looks very cool not gonna lie.

@personalizedrefrigerator personalizedrefrigerator marked this pull request as ready for review July 26, 2021 06:04
@personalizedrefrigerator personalizedrefrigerator marked this pull request as draft July 26, 2021 06:05
@rolandlo
Copy link
Member

make the XournalWidget transparent?

From what I've found online, it looks easier to make the entire window transparent (So I'll have to look into how to do that...).

For my use case, though, making the entire window transparent is (slightly) more useful, as I plan to use this feature to take notes on video recordings of lectures. Making the entire window transparent lets me see content that would otherwise be hidden by toolbars. Of course, using the empty toolbar is another option!

I have a different use case in mind: displaying some image or other information in a window below Xournal++ and using it to copy the image/info to Xournal++ by drawing the outlines etc. that shine trough. In German there is the word "abpausen" for it, see this video if my explanation was not clear. While doing that, I would like to have the toolbar normally visible, because otherwise it's a bit hard to find the right tools/colors etc.

Maybe it could be made a setting, whether the whole window is made transparent or only the XournalWidget.

Additionally, the slider does not allow the user to make the window entirely transparent and the window becomes fully opaque again on startup. As such, this shouldn't force the user to search for an invisible slider to make the window visible again.

@LittleHuba
Copy link
Member

maybe ZoomSlider and the opacity slider should share a slider base-class?

If there is duplicated code, most definitely!

Comment on lines 15 to 18

// TODO(personalizedrefrigerator): Update the range to reflect the min and max zoom settings.
constexpr auto SLIDER_RANGE =
AbstractSliderItem::SliderRange{DEFAULT_ZOOM_MIN, DEFAULT_ZOOM_MAX, FINE_STEP_COUNT, COARSE_STEP_COUNT};
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was the case before this PR, too.

@personalizedrefrigerator
Copy link
Contributor Author

I'm going to wait for #3312 to be merged/finished before finishing up this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants