Background Image Problems

Question

Background Image Problems

spartandrew18 opened this issue 4 years ago · comments

Hello Shorouk,
I had the chance to see the mod a little bit before you plan on releasing it and have noticed a small nuisance that I was wondering if you might be able to fix or workaround. The main problem I have is when I add a background picture, The picture will not hold the scale of my screen resolution properly. I have 2 monitors that I use with my computer. One is my main laptop screen (1920 x 1080) and the second is my working monitor (2560 x 1440).

For example:

This is my laptop screen (1920 x 1080). The picture is set at a resolution at 1920 x 1080 and everything works great.

This is my working monitor screen (2560 x 1440). The picture is set at a resolution of 1920 x 1080 but I would like it to look exactly like the original image above.

Any ideas on how to fix this so it scales to different resolutions consistently?

I think it would be amazing if you could somehow incorporate what this person has done with a background image addon. They have a wallpaper setting configuration tab and it is very easy to configure what settings you want.

Link to Addon: https://ankiweb.net/shared/info/378638814

Sincerely,
Andrew

Context:

OS: Windows 10
Anki Version 2.1.30
screen Resolution (1920 x 1080) / (2560 x 1440)

Additional context

    
    Anki 2.1.30 (06a69c25) Python 3.8.0 Qt 5.14.1 PyQt 5.14.1
    Platform: Windows 10
    Flags: frz=True ao=True sv=2
    Add-ons, last update check: 2020-08-17 23:39:52
    
    
    ===Add-ons (active)===
    (add-on provided name [Add-on folder, installed at, version, is config changed])
    '' ['Beautify-Anki-master', 0, 'None', mod]
    Add Hyperlink ['318752047', 2020-07-29T16:37, 'None', '']
    Add Table ['1237621971', 2020-07-25T08:19, 'None', mod]
    Advanced Browser ['874215009', 2020-04-22T18:45, 'None', '']
    Color Confirmation ['1084228676', 2020-03-14T08:13, 'None', '']
    Frozen Fields ['516643804', 2020-02-29T23:12, 'None', '']
    Hierarchical Tags 2 ['594329229', 2020-04-11T12:36, 'None', '']
    Image Occlusion Enhanced for Anki 21 alpha ['1374772155', 2020-04-27T22:21, 'None', '']
    Improved Quizlet to Anki 21 Importer ['538351043', 2020-07-21T18:54, 'None', '']
    Large and Colorful Buttons ['1829090218', 2018-10-02T13:41, 'None', '']
    Leaderboard ['41708974', 2020-07-13T15:24, 'None', mod]
    Load Balanced Scheduler ['208879074', 2018-10-04T20:06, 'None', '']
    Maximum image height and width in card editor ['229181581', 2020-02-20T03:10, 'None', '']
    Pop-up Dictionary beta ['153625306', 2019-03-23T13:32, 'None', '']
    Review Heatmap ['review_heatmap', 2020-04-30T09:23, 'None', '']
    Spelling Police ['1410276506', 2020-03-02T21:13, 'None', '']
    Symbols ['1461102936', 2019-04-18T16:21, 'None', '']
    
    ===IDs of active AnkiWeb add-ons===
    1084228676 1237621971 1374772155 1410276506 1461102936 153625306 1829090218 208879074 229181581 318752047 41708974 516643804 538351043 594329229 874215009
    
    ===Add-ons (inactive)===
    (add-on provided name [Add-on folder, installed at, version, is config changed])
    Anki Zoom ['538879081', 2020-04-03T20:20, 'v1.1.3', '']
    Dancing Baloney Allows changing wallpapers with live preview ['378638814', 2020-03-27T01:28, 'None', mod]
    Life Drain ['715575551', 2020-08-13T09:25, 'None', '']
    More Decks Stats and Time Left ['1556734708', 2020-03-31T16:19, 'None', '']

spartandrew18 · Answer 1 · Tue Aug 18 2020 12:48:07 GMT+0800 (China Standard Time)

Ok, I just found out something a little weird regarding this.

If I set "animation" to TRUE instead of the default FALSE, the scaling seems to work fine. So maybe it's not as big of a hassle as I originally thought.

I would still look into why it's causing scaling to mess up in the FALSE mode.

Shorouk Abdelaziz · Answer 2 · Tue Aug 18 2020 19:05:09 GMT+0800 (China Standard Time)

Hello Andrew,
Thank you so much for your detailed description.
I'll try a quick fix and tell you so you could try it. if you don't mind.

Shorouk Abdelaziz · Answer 3 · Tue Aug 18 2020 20:36:44 GMT+0800 (China Standard Time)

@spartandrew18
Hi again,
So I was able to reproduce the problem using an image with a relatively small height. and applied a fix that worked for me.
Would be great if you could try it, and let me know whether anything changed.
v0.3.1.zip

spartandrew18 · Answer 4 · Tue Aug 18 2020 22:23:33 GMT+0800 (China Standard Time)

So far it's working great! Thank you!

Edit: Slight problem actually. If I set it to TRUE you can see the picture is still scaled properly compared to the above image.

Look at the spartan headboard. It is visible here but in the first picture, it is hidden. This leads me to think the scaling is not identical to the TRUE option.

Another thing I noticed and I'm not sure if you were done with the code or not. The overlay screen on the right has the icons off-centered slightly. Any way to fix this?

Also, is there any way to switch the colors of these buttons? Could not figure out how in the settings.

Also, I noticed sometimes when I have my internet open on a different screen and start to scroll with the mouse, the Anki screen starts bugging out sometimes. Like it will screen tear between pictures. I will have to look into this more to see if it is still occurring.

Here is the picture if you want to download and try it out!

Actually maybe I'm going crazy. Both pictures don't seem to capture the entire image like this original. Whatever you can do to make it scale closer to the original as possible with the picture above would be awesome! Sorry, I'm neurotic.

spartandrew18 · Answer 5 · Tue Aug 18 2020 22:56:33 GMT+0800 (China Standard Time)

Hello Shorouk,

I have found us some more bugs :D

MAIN DECK PAGE

CLICK MCAT AND RESULT:

CLICK ANDREWS MCAT AND RESULT:

CLICK MILEDOWN AND RESULT:

CLICK REBOP AND RESULT:

Any clue for the white screens on Andrews MCAT and Miledown? Thank You!

Shorouk Abdelaziz · Answer 6 · Tue Aug 18 2020 23:38:40 GMT+0800 (China Standard Time)

Edit: Slight problem actually. If I set it to TRUE you can see the picture is still scaled properly compared to the above image.

Look at the spartan headboard. It is visible here but in the first picture, it is hidden. This leads me to think the scaling is not identical to the TRUE option.

well, the scaling is not identical because of how the animation works. Here's the thing, in the "animation mode", if you expanded the screen vertically (like if you much more decks than you have), the image won't scale or repeat. I'm considering it a bug and trying to find a workaround. So that's why I'm not copying that scaling method for the "no animation mode".
Right now if you expanded the screen in the "no animation mode", the background will scale accordingly which I'll keep until I figure something out to get the best of both modes.

Another thing I noticed and I'm not sure if you were done with the code or not. The overlay screen on the right has the icons off-centered slightly. Any way to fix this?

Oh, No😱 That should now happen at all. I'll get to you back about it. will try to reproduce it first.

Also, is there any way to switch the colors of these buttons? Could not figure out how in the settings.

Yes, you can, look for these values in the themes files.

   "new-wedgit-bg"       : "rgba(57, 73, 171,0.8)" ,
    "due-wedgit-bg"       : "rgba(76, 175, 80,0.8)" ,

Also, I noticed sometimes when I have my internet open on a different screen and start to scroll with the mouse, the Anki screen starts bugging out sometimes. Like it will screen tear between pictures. I will have to look into this more to see if it is still occurring.

Could you elaborate a bit more, please? like, I don't understand, that happens while you're on Anki?
If you managed to take a screenshot or a picture that would be great.

Actually maybe I'm going crazy. Both pictures don't seem to capture the entire image like this original. Whatever you can do to make it scale closer to the original as possible with the picture above would be awesome! Sorry, I'm neurotic.

No, you've been a great help. Thank you so much!

Shorouk Abdelaziz · Answer 7 · Tue Aug 18 2020 23:41:06 GMT+0800 (China Standard Time)

Any clue for the white screens on Andrews MCAT and Miledown? Thank You!

Okay great catch, It must be the apostrophe.
I'll let you know again when I'm done.
Thank you so much you've been like my tester !

Shorouk Abdelaziz · Answer 8 · Tue Aug 18 2020 23:43:18 GMT+0800 (China Standard Time)

Okay great catch, It must be the apostrophe.

yes, It's the apostrophe for sure. will see what I can do.

spartandrew18 · Answer 9 · Wed Aug 19 2020 00:10:39 GMT+0800 (China Standard Time)

@ShoroukAziz

Yes, you can, look for these values in the themes files.

"new-wedgit-bg" : "rgba(57, 73, 171,0.8)" ,
"due-wedgit-bg" : "rgba(76, 175, 80,0.8)" ,

This seemed to change the overlay color on the right side but not the button on deck browser.

This changed to light blue

I wanted this to change to light blue instead

Any Ideas?

spartandrew18 · Answer 10 · Wed Aug 19 2020 01:01:27 GMT+0800 (China Standard Time)

Slight Aesthetic Recommendation.

NORMAL

MOUSE HOVERED ON LEFT SIDE
Would it be possible to get rid of the underscore on left side? I keep seeing it as a -/- notation. Does this bother you?

MOUSE HOVERED ON RIGHT SIDE

NORMAL

MOUSE HOVERED ON LEFT SIDE
Would it be possible to get rid of the underscore on left side? I keep seeing it as a +/- notation. Does this bother you?

MOUSE HOVERED ON RIGHT SIDE

Sincerely,
Andrew

Shorouk Abdelaziz · Answer 11 · Wed Aug 19 2020 02:01:49 GMT+0800 (China Standard Time)

@ShoroukAziz

Yes, you can, look for these values in the themes files.
"new-wedgit-bg" : "rgba(57, 73, 171,0.8)" ,
"due-wedgit-bg" : "rgba(76, 175, 80,0.8)" ,

This seemed to change the overlay color on the right side but not the button on deck browser.

This changed to light blue

I wanted this to change to light blue instead

Any Ideas?

my mistake sorry copied the wrong property.
Try these ones

"review-count-background-color" : "rgba(39, 132, 120,1)",
        "review-count-color" : "rgb(255, 255, 255,1)",
        "new-count-background-color" : "rgba(104, 115, 173,1)",
        "new-count-color" : "rgb(255, 255, 255,1)",

Shorouk Abdelaziz · Answer 12 · Wed Aug 19 2020 02:08:04 GMT+0800 (China Standard Time)

Slight Aesthetic Recommendation.

NORMAL

MOUSE HOVERED ON LEFT SIDE
Would it be possible to get rid of the underscore on left side? I keep seeing it as a -/- notation. Does this bother you?

MOUSE HOVERED ON RIGHT SIDE

NORMAL

MOUSE HOVERED ON LEFT SIDE
Would it be possible to get rid of the underscore on left side? I keep seeing it as a +/- notation. Does this bother you?

MOUSE HOVERED ON RIGHT SIDE

Sincerely,
Andrew

Yeah definitely, they're left by mistake. I'll get rid of them.
Please, let me know if you find anything else, or if you have any recommendations.

spartandrew18 · Answer 13 · Wed Aug 19 2020 02:53:49 GMT+0800 (China Standard Time)

@ShoroukAziz

my mistake sorry copied the wrong property.
Try these ones

"review-count-background-color" : "rgba(39, 132, 120,1)",
"review-count-color" : "rgb(255, 255, 255,1)",
"new-count-background-color" : "rgba(104, 115, 173,1)",
"new-count-color" : "rgb(255, 255, 255,1)",

Set these both to light blue to see if it would work.

Does not seem to be changing the colors. Probably bug?

Shorouk Abdelaziz · Answer 14 · Thu Aug 20 2020 21:36:36 GMT+0800 (China Standard Time)

@ShoroukAziz

my mistake sorry copied the wrong property.
Try these ones
"review-count-background-color" : "rgba(39, 132, 120,1)",
"review-count-color" : "rgb(255, 255, 255,1)",
"new-count-background-color" : "rgba(104, 115, 173,1)",
"new-count-color" : "rgb(255, 255, 255,1)",

Set these both to light blue to see if it would work.

Does not seem to be changing the colors. Probably bug?

Yeah, it's a bug in night mode. it's working fine without night mode. will fix it right away

Shorouk Abdelaziz · Answer 15 · Thu Aug 20 2020 22:25:39 GMT+0800 (China Standard Time)

@spartandrew18
Okay, So,

I removed the underline that appears on hovering on the (+/-)
fixed the night mode bug when changing the (review/new) count
fixed the apostrophe bug. though if you'd like to add a custom background for that deck you'll have to rename the picture and replace the " ' " with a " ’ "

would you mind checking out these changes?
Also, I changed something trying to fix how the widgets are out of place for you so let me know how do they look like now, please.
Thanks a lot!

v0.3.2.zip

spartandrew18 · Answer 16 · Wed Aug 26 2020 03:38:40 GMT+0800 (China Standard Time)

@ShoroukAziz

Sorry for the delay in response. I have been very busy redoing my room with my mother.

I removed the underline that appears on hovering on the (+/-)
fixed the night mode bug when changing the (review/new) count
fixed the apostrophe bug. though if you'd like to add a custom background for that deck you'll have to rename the picture and replace the " ' " with a " ’ "

+/- Looks good! Thank you.
Night mode bug is fixed thank you

The decks now display correctly thank you!

New Recommendations below:

This screen works fine when I drag it to the right side of the screen to snap halfway on Windows 10

However, when I click the deck menu the previous problem we had talked about way back up occurs. You might just have to add whatever you changed to this menu as well!

New settings request:

Would it be possible to add a setting where we can change the font color for these words & numbers only? Rather than changing all of the fonts at once, each of these widgets has the option to change the individual font colors.

Due would have its own font color
Learn would have its own font color
Review would have its own font color
etc.

Lastly, there is definitely some addon screen flickering when using other windows such as the internet. I still have to get this on video for you but it for sure happens often! Try opening a different window such as the internet side by side with Anki open and see if it flickers on your screen as well.

Sincerely,
Andrew