Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Roll20 game window on 4k displays

1476498902

Edited 1476770098
Roll20 Dev team, I recently purchased a 4k diplay for my new PC, and soon discovered an issue with running Roll20 on it.  The tokens (and their associated nameplates) were fuzzy and out of focus.  I originally thought it was another issue, but after some basic troubleshooting I discovered it was an issue related to running a Roll20 game on my new display. Below, I have two images (obviously...)  The first shows my screen with normal/default settings.  Not the end of the world, admittedly, but the tokens are out of focus. (click to enlarge) This second one is with augmented zoom settings.  In Roll20, I zoomed in by 200%.  I then followed it up by zooming out on the Chrome tab to 50%.  Presto! Its back to sharp focus and resolution. However, at the augmented zoom levels, the actual UI is extremely hard to read, bordering on completely unplayable.  Am I missing a setting somewhere? Is there some way to fix this, or does this fall into the realm of requested-dev-team-changes?
1476714344
Gid
Roll20 Team
Hello Ryan, Can you tell us if this problem occurs in both Chrome and Firefox?
1476745711

Edited 1476770029
Yes, I just tested it.  (had to install Firefox...)   Same result.  Default settings, as shown above, are blurry and slightly out of focus.  Augmenting the zoom levels (200% in Roll20, 50% in browser) made it nice, crisp, and in focus. EDIT:   My display is running at 3840 x 2160.
1476983307
Gid
Roll20 Team
Could you snatch us up a  console log while you force the graphics back into focus. Either in Chrome or Firefox will be fine since this is unlikely a browser issue.
1477010241

Edited 1477013945
Yes, I can do that. &nbsp;Just out of curiosity, are you thinking it's an issue on my end? &nbsp;Or are other 4k displays having the same issue? Here is the text that appeared in the console log after i started to make the adjustments for the Adjusted Zoom levels. &nbsp;Is this what you need? &nbsp;I've never used the console log before... Final set zoom! app.js?1476392470:36 [714, 353.5] app.js?1476392470:35 UPDATE GL SIZE! app.js?1476392470:36 Debounced init page! app.js?1476392470:41 init active page! app.js?1476392470:38 Swapping <a href="https://s3.amazonaws.com/files.d20.io/images/21013518/KB6tPmU6PcC_sN46c2lGlA/thumb.png?14687243075" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/21013518/KB6tPmU6PcC_sN46c2lGlA/thumb.png?14687243075</a> to <a href="https://s3.amazonaws.com/files.d20.io/images/21013518/KB6tPmU6PcC_sN46c2lGlA/med.png?14687243075" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/21013518/KB6tPmU6PcC_sN46c2lGlA/med.png?14687243075</a> app.js?1476392470:38 Swapping <a href="https://s3.amazonaws.com/files.d20.io/images/16265007/XtbADzSN7FD9h4PARPaakA/thumb.png?14554231725" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/16265007/XtbADzSN7FD9h4PARPaakA/thumb.png?14554231725</a> to <a href="https://s3.amazonaws.com/files.d20.io/images/16265007/XtbADzSN7FD9h4PARPaakA/med.png?14554231725" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/16265007/XtbADzSN7FD9h4PARPaakA/med.png?14554231725</a> 2app.js?1476392470:38 setting src app.js?1476392470:44 refershing page listings! app.js?1476392470:51 window resize app.js?1476392470:36 Final set zoom! app.js?1476392470:36 [713.7777930836622, 353.6944507875562] app.js?1476392470:35 UPDATE GL SIZE! app.js?1476392470:35 UPDATE GL SIZE! app.js?1476392470:36 Final set zoom! app.js?1476392470:36 [713.7777930836622, 353.6944507875562] app.js?1476392470:35 UPDATE GL SIZE! app.js?1476392470:36 Debounced init page! app.js?1476392470:41 init active page! app.js?1476392470:44 refershing page listings! app.js?1476392470:51 window resize app.js?1476392470:36 Final set zoom! app.js?1476392470:36 [713.25, 353.41666666666663] app.js?1476392470:35 UPDATE GL SIZE! app.js?1476392470:35 UPDATE GL SIZE! app.js?1476392470:36 Final set zoom! app.js?1476392470:36 [713.25, 353.41666666666663] app.js?1476392470:35 UPDATE GL SIZE! app.js?1476392470:36 Debounced init page! app.js?1476392470:41 init active page! app.js?1476392470:44 refershing page listings! app.js?1476392470:51 window resize app.js?1476392470:36 Final set zoom! app.js?1476392470:36 [712.9647087257082, 352.78378173745926] app.js?1476392470:35 UPDATE GL SIZE! app.js?1476392470:35 UPDATE GL SIZE! app.js?1476392470:36 Final set zoom! app.js?1476392470:36 [712.9647087257082, 352.78378173745926] app.js?1476392470:35 UPDATE GL SIZE! app.js?1476392470:36 Debounced init page! app.js?1476392470:41 init active page! app.js?1476392470:44 refershing page listings! app.js?1476392470:51 window resize app.js?1476392470:36 Final set zoom! app.js?1476392470:36 [712, 352.25] app.js?1476392470:35 UPDATE GL SIZE! app.js?1476392470:35 UPDATE GL SIZE! app.js?1476392470:36 Final set zoom! app.js?1476392470:36 [712, 352.25] app.js?1476392470:35 UPDATE GL SIZE! app.js?1476392470:36 Debounced init page! app.js?1476392470:41 init active page! app.js?1476392470:44 refershing page listings! EDIT: &nbsp;By the way, I just fired up my wife's account and tested the same settings on her pc (1920x1080 display.) &nbsp;Hers showed the exact same view on both the standard/default settings and the augmented zoom. &nbsp;This leads me to believe that it is an issue with the 4k display. &nbsp;I don't have any idea if it's just mine, specifically, or if it's simply a general issue with all 4k displays. EDIT #2: &nbsp; I just noticed that this same effect is happening to the player avatars as well. &nbsp;Slightly blurry on standard settings, in focus on augmented zooms.
Anything new? &nbsp;Was the information I posted correct?
So what's probably going on here has to do with how Windows handles high-resolution displays. There are two modes -- one where everything runs at the "native" resolution of the display (and where everything will look really "tiny" if that makes sense) and then another mode where your display runs at a "virtual" resolution and then Windows tries to scale that up. Here's some info on it: <a href="http://www.infoworld.com/article/2952506/microsoft" rel="nofollow">http://www.infoworld.com/article/2952506/microsoft</a>... The most relevant passage is probably this: For apps that aren't high-DPI aware, Microsoft has a quick and dirty fix called DPI virtualization. Windows deliberately reports the wrong DPI resolution to such apps, so their elements render as if they were on a lower-resolution display. The results are then zoomed to fit the current display. While this trick allows UI elements like buttons and dialog boxes to appear at the right size and proportions, it also makes text blurry, icons fuzzy, and images hazy. ClearType-rendered text looks particularly bad, since the subpixel rendering used for it only works when it matches the resolution of the display. (Sounds familiar?) So it seems like Chrome and Firefox are both treated as "non high-DPI apps" by Windows. It looks like there might be some steps we can take (outlined here:&nbsp; <a href="http://stackoverflow.com/questions/15661339/how-do" rel="nofollow">http://stackoverflow.com/questions/15661339/how-do</a>... ) to change how our canvas rendering works (although it sure would be nice if Chrome just handled this for us), so we'll take a look at that and see if we can figure something out.
Excellent. &nbsp;Thank you for the update. &nbsp;Is there anything I can do, or that you need me to do? &nbsp;Or should I just wait patiently for the Powers-At-Be to work their magic?