skin preview screenshots in Interface preferences #1525

Be-ing · 2018-02-26T05:16:46Z

#1377 implemented standard behavior for the skin selection combobox so it only changes the skin when the user presses the Apply button. To provide users a rough impression of what skins look like before they switch to a different skin, show a preview screenshot when a skin is selected with the combobox.

Be-ing · 2018-02-26T05:19:31Z

The screenshots should be updated right before every release to ensure they reflect the released skins.

esbrandt

Thanks for working on this long pending feature.

I feel the screenshoots should scale down at least to the same height. When flipping trough the list of available skins, the options below the screenshoots jump around.

The Deere screenshoot has a good size, it could be even a bit bigger IMO (~~400px~~ Edit: 200px). Hard to make out some details with the smaller screenshoots, probably even harden when using HDPi displays.

Also, should we provide the screenshoots in the vanilla skin state? E.g. in the Deere screen, stacked waveforms are visible, but are not enabled by default.

esbrandt · 2018-02-26T16:31:29Z

src/preferences/dialog/dlgprefinterfacedlg.ui

@@ -29,7 +29,7 @@
         <font/>
        </property>
        <property name="text">
-         <string>Skin</string>
+         <string>S&amp;kin</string>


String changed by accident?

QtDesigner did this automatically. I can rebase and remove the noise from the diff.

esbrandt · 2018-02-26T16:31:41Z

src/preferences/dialog/dlgprefinterfacedlg.ui

+      <item row="1" column="1">
+       <widget class="QLabel" name="skinPreviewLabel">
+        <property name="text">
+         <string>skin preview screenshot goes here</string>


Dummy text can be excluded from the translation template.
<string notr="true">skin preview screenshot goes here</string>

esbrandt · 2018-02-26T16:32:09Z

src/preferences/dialog/dlgprefinterfacedlg.ui

       <widget class="QLabel" name="labelFullscreenOption">
        <property name="text">
-         <string>Full-screen mode</string>
+         <string>Full-screen &amp;mode</string>


String changed by accident?

esbrandt · 2018-02-26T16:36:45Z

src/skin/skinloader.cpp

@@ -56,6 +56,10 @@ QString SkinLoader::getSkinPath(const QString& skinName) const {
    return QString();
 }

+QPixmap SkinLoader::getSkinPreview(const QString& skinName) const {
+    return QPixmap(getSkinPath(skinName) + "/preview.png");


What about a more descriptive file name, e.g. preferences_skin_preview.png or preferences_skin_screenshoot.png?

Be-ing · 2018-02-26T18:23:31Z

I feel the screenshoots should scale down at least to the same height. When flipping trough the list of available skins, the options below the screenshoots jump around.

Yes, I will redo the screenshots...

Also, should we provide the screenshoots in the vanilla skin state?

Yes, good point. I will redo the screenshots with a fresh settings directory.

E.g. in the Deere screen, stacked waveforms are visible, but are not enabled by default.

Parallel waveforms are the default in Deere.

The Deere screenshoot has a good size, it could be even a bit bigger IMO (~~400px~~ Edit: 200px). Hard to make out some details with the smaller screenshoots, probably even harden when using HDPi displays.

IMO details are unimportant for this. I do not want to make the screenshots so big that they clutter the preferences window. I'll try a height of 300 px.

daschuer · 2018-03-03T15:25:34Z

Shouldn't this go to master?

Be-ing · 2018-03-03T16:53:58Z

It doesn't matter too much for me, but I thought you were bothered by the current behavior. IMO targeting this to master would be overly pedantic about feature freeze. The code changes are really trivial and clearly won't break anything else. OTOH reverting to the 2.0 behavior of loading skins as soon as they are selecting (before pressing Apply) would be more difficult than merging this.

daschuer · 2018-03-03T20:29:36Z

OK, than let's keep this for 2.1

nopeppermint · 2018-03-04T15:09:01Z

nice, maybe you could add also a preview of the color schemes in Shade

daschuer · 2018-03-11T23:09:55Z

I feel the screenshoots should scale down at least to the same height. When flipping trough the list of available skins, the options below the screenshoots jump around.

Yes, that is annoying. IMHO the screenshots should be all at the same width as well.
A smaller size like the current Shade screenshot would be nice. It would work to me, to how only the top right part, to find a compromise between screen shot size and down scaling.

We need also a default screenshot for skins without a screenshot.

daschuer · 2018-03-19T16:15:28Z

Is this still a 2.1 candidate?

Be-ing · 2018-03-19T16:19:44Z

Yes. I'll update the screenshots when all pending skin PRs are merged.

daschuer · 2018-03-19T23:27:48Z

So this PR should only include the default screenshot, right?
Can you rebase this PR to not include the outdated screenshots into the git history?

Be-ing · 2018-03-19T23:28:54Z

Yes, this PR should only show the skins in the default configurations. I'll rebase it when the time comes.

daschuer · 2018-03-19T23:32:03Z

I mean, we can merge this now, if you remove the real screenshots and add a placeholder for any skin without a screenshot.

daschuer · 2018-03-30T09:43:23Z

@Be-ing is this still a 2.1 candidate?
Can you add the current screen shots by rebasing this, to keep this PR small sized?
Can you do the screenshots with 100 % scaling to not show scaling issues if any?

Be-ing · 2018-04-01T13:23:06Z

What resolution should I do the screenshots at? I am thinking of taking fullscreen screenshots on my old laptop at 1366 x 768 and scaling them down to 300px or 400px height.

daschuer · 2018-04-01T17:02:30Z

They should be taken with design size.
As of Shade 1024*600
Resize to 300 is already quite high. How about 250

Be-ing · 2018-04-01T17:12:24Z

We can't use Shade's minimum size for the screenshots because not all skins support that. We could use the lowest common denominator size of all skins.

daschuer · 2018-04-01T20:14:01Z

Yes that's right. I mean to use the optimum screen size for each skin. I would say it is full HD for LateNight for example. For Tango, we can decide if we want to show the netbook mode or the 4 deck full scale mode.

ronso0 · 2018-04-01T21:31:40Z

For Tango, we can decide if we want to show the netbook mode or the 4 deck full scale mode.

I propose 1280px or 1366px with default configuration: 50px waveforms, 2 decks, 2 FX units, ...

daschuer · 2018-04-03T04:39:31Z

src/preferences/dialog/dlgprefinterfacedlg.ui
uic: Error in line 241, column 42 : Unexpected attribute notr
File 'src/preferences/dialog/dlgprefinterfacedlg.ui' is not valid

daschuer · 2018-04-05T06:59:40Z

Ping! An other day delay.
We need a rc now. Will you have time to finish this today?

daschuer · 2018-04-05T10:49:11Z

Placeholder:

daschuer · 2018-04-05T12:22:13Z

Be-ing#19

Be-ing · 2018-04-05T12:48:37Z

Don't merge quite yet, still a few little quirks to fix in the code.

daschuer · 2018-04-05T12:58:59Z

Please use the optimum size for the screenshots, not a unique size.
This shows how the skin is intended to use.
Which is the mayor use case for this preview feature.
This lines also quite well up, if we have one day a tiny skin, or a full HD only skin.

Be-ing · 2018-04-05T13:01:09Z

The screenshots show the default skin configurations.

Be-ing · 2018-04-05T13:01:48Z

The "(64 sampler)" skins are not showing the screenshot for their parent skin. Do you have any hints how to make that work?

Be-ing · 2018-04-05T13:07:02Z

Nevermind, I'll take screenshots showing 64 samplers for those.

Be-ing · 2018-04-05T13:32:48Z

Okay, done.

ronso0 · 2018-04-06T21:22:14Z

Nice!
Deere samplers could really use the cover art. Also I notice Tango preview needs 8 samplers, too.

Be-ing · 2018-04-06T23:19:19Z

I notice Tango preview needs 8 samplers, too.

We could change the screenshot. I took it full screen at 1366 x 768 then resized to 250px height and preserving the aspect ratio.

esbrandt suggested changes Feb 26, 2018

View reviewed changes

Be-ing added this to the 2.1.0 milestone Mar 8, 2018

daschuer mentioned this pull request Mar 30, 2018

prepare a release candidate for 2.1 #1569

Merged

Be-ing force-pushed the skin_preview branch from d650230 to 8449e39 Compare April 2, 2018 22:32

Be-ing force-pushed the skin_preview branch from 8449e39 to 80f9c8a Compare April 3, 2018 09:19

This was referenced Apr 3, 2018

Deere: redesign fader and knob colors #1579

Merged

add support for platform-dependent skin styles + fix WEffectSelector styling #1590

Merged

DlgPrefInterface: show skin preview screenshot

eea498d

add skin preview screenshots

bf0dc69

Be-ing force-pushed the skin_preview branch from 80f9c8a to bf0dc69 Compare April 5, 2018 12:47

Be-ing and others added 2 commits April 5, 2018 08:26

add preview screenshots for "(64 samplers)" skins

f6a075c

show placeholder image if skin does not have a preview screenshot

7052e89

Be-ing merged commit d16e2c2 into mixxxdj:2.1 Apr 5, 2018

mixxxbot mentioned this pull request Aug 22, 2022

skin preview screenshots #6420

Closed

skin preview screenshots in Interface preferences #1525

skin preview screenshots in Interface preferences #1525

Conversation

Be-ing commented Feb 26, 2018

Be-ing commented Feb 26, 2018

esbrandt left a comment • edited Loading

Choose a reason for hiding this comment

esbrandt Feb 26, 2018

Choose a reason for hiding this comment

Be-ing Feb 26, 2018

Choose a reason for hiding this comment

esbrandt Feb 26, 2018

Choose a reason for hiding this comment

esbrandt Feb 26, 2018

Choose a reason for hiding this comment

esbrandt Feb 26, 2018

Choose a reason for hiding this comment

Be-ing commented Feb 26, 2018

daschuer commented Mar 3, 2018

Be-ing commented Mar 3, 2018

daschuer commented Mar 3, 2018

nopeppermint commented Mar 4, 2018

daschuer commented Mar 11, 2018

daschuer commented Mar 19, 2018

Be-ing commented Mar 19, 2018

daschuer commented Mar 19, 2018

Be-ing commented Mar 19, 2018

daschuer commented Mar 19, 2018

daschuer commented Mar 30, 2018

Be-ing commented Apr 1, 2018

daschuer commented Apr 1, 2018

Be-ing commented Apr 1, 2018

daschuer commented Apr 1, 2018

ronso0 commented Apr 1, 2018

daschuer commented Apr 3, 2018

daschuer commented Apr 5, 2018

daschuer commented Apr 5, 2018 • edited Loading

daschuer commented Apr 5, 2018

Be-ing commented Apr 5, 2018

daschuer commented Apr 5, 2018

Be-ing commented Apr 5, 2018

Be-ing commented Apr 5, 2018

Be-ing commented Apr 5, 2018

Be-ing commented Apr 5, 2018

ronso0 commented Apr 6, 2018

Be-ing commented Apr 6, 2018

esbrandt left a comment •

edited

Loading

daschuer commented Apr 5, 2018 •

edited

Loading