Download lifesize (PNG)

[iandoug]

Implemented (experimental) Download Lifesize ... as per Issue #75
I tested the DPI thing on three different monitors, all say 96DPI, but test square was always a different size to 1 inch ... sometimes bigger and sometimes smaller. However scaling the image by 96/72 seems to work. I do get actual monitor measurements instead of just using 96... for both x and y, and scale accordingly.

[ijprest]

It'll be a few days before I can get to this. But when I get to it, I've got a 200% monitor at work I can test on. (It reports as 184, 185, or 192 DPI, depending on which API you use... I suspect the web-browser will report 192dpi.)

[iandoug]

The arrows on the Align Legends tool work well if the user has MS Segoe font installed. However not all users will have this, and in my case, for some reason Firefox uses two different fonts for the arrows, one of which looks terrible, attached.
So I modified it to use the arrows from kbd-webfont, which will look consistent across all platforms. Only issue is that the up and down arrows are slightly left of centre.

[iandoug]

The JD40 layout fits nicely on an A4/US letter page for print-out-and-measure purposes.
BTW did you get those 2 json files I sent, or did they get marked as spam? I notice my IP is blacklisted again.

[ijprest]

I'm looking at this now. It seems to download an image scaled to 96dpi (on my system). So "life-size" == "life-size if displayed at what your monitor reports as its DPI". Is this the intention?

This is a bit confusing, IMO:

• On Windows, at least, the reported DPI is fairly arbitrary (generally a multiple of 24), and subject to a user-selected scale factor.
• My monitor is actually 99dpi, but the OS reports it as 96dpi... so it won't actually be life-size on my monitor (close, though).
• One of my monitors at work: 180dpi, vs a reported 192dpi.
• My Surface 2 Pro: 207dpi, vs a reported 144dpi.
• To further confuse matters... at work I've actually got monitors with different DPIs, so I suspect the download will be different depending on which monitor the browser is on.
• On Chrome (haven't tried other browsers), window.devicePixelRatio is affected by the browser's zoom, so the result is different depending on your browser zoom-level.

I can try these scenarios tomorrow at the office. Believe it or not, my day job (at the moment) is actually multi-monitor, DPI-aware scenarios. :)

(Also, the align-legends arrows aren't working for me... specifically the bottom-left and bottom-right are just displaying as rectangles... I haven't investigated why, yet.)

[iandoug]

hi Ian

On Sunday 20 September 2015 19:55:16 Ian Prest wrote:

I'm looking at this now. It seems to download an image scaled to 96dpi (on
my system). So "life-size" == "life-size if displayed at what your monitor
reports as its DPI". Is this the intention?

I think so ... but as you said further, what it reports is not always true. My
system reports DPI of 97 from the Nividia program, and 96 from the browser.

I will ponder this a bit more. What I basically did was to use CSS scale to
scale it by a factor of (reportedDPI/72) ... which worked here. As to WHY it
worked, I don't know... only have suspicions.
I tested on 3 monitors, but all were Firefox on Linux (various versions), will
try some more including on Windows. Also all my monitors are LCD, I don't know
if that is a factor...

I can try these scenarios tomorrow at the office. Believe it or not, my day
job (at the moment) is actually multi-monitor, DPI-aware scenarios. :)

Ah, so you are an expert then :-)

(Also, the align-legends arrows aren't working for me... specifically the
bottom-left and bottom-right are just displaying as rectangles... I haven't
investigated why, yet.)

Those were new glyphs that I added to the webfont ... did you recreate the
font?

I'm not happy with the Up and Down being off-centre, I think the arrow in the
glyph itself is off-centre. Will see if other arrows are better aligned.

cheers, Ian

[email protected] http://www.zti.co.za
Zero 2 Infinity - The net.works
Phone +27-21-975-7273

[iandoug]

I checked two different Win8 systems at a client, both reported 96 DPI, but doubt the square was 1 inch. Tried on my phone as well (Note 3), that had some high number which turned out to be 4x96, and scaling the on-screen measurement of 6.5mm (unzoomed) x 4 gives a number which is way too big. So clearly this approach is barking up the wrong tree, even though it SOMETIMES gets reasonable results.
Think we must look at rendering directly in mm instead of pixels and see how that goes.

[iandoug]

Will look at those arrows on Thursday ... public holiday. Unofficially known as National Braai (barbecue) Day since Spring has started....

[iandoug]

How does the 1inch measurement here turn out for you? It's 25mm on my monitor, but 19mm on my phone. I see where the 72 comes in now.
http://www.w3.org/Style/Examples/007/units.en.html

[iandoug]

"In fact, CSS requires that 1px must be exactly 1/96th of an inch in all printed output." ... ah so the magic with 96 has nothing to do with screen DPI and everything to do with CSS ....
So perhaps scaling x 1.3333 (== 96/72) may actually work... at least to print or print-to-pdf. ?
Will see if I can my tablet (aging Asus 101 Android) and/or phone to connect to my local site and then print ... print will be via cloud so should be interesting test.

[iandoug]

Have changed the code to scale by 1.3333 ... if you can do some tests sometime what will be cool. Will try and do some tests on assorted platforms here.

[iandoug]

I'm trying to work around the issue with the arrows in a better way. It looks fine on my Asus Transformer, so it is clearly a font issue. I tried adding DejaVu Sans to the list of fonts for the keycaps, since the corner arrows use that font and look fine, while the up/down/left/right are getting rendered in Liberation Sans and look lousy. No idea why Firefox is doing that, the font chain select "inherit" in bootstrap as 'best match'. Chrome does the same but I can't understand how Chrome computes the font. DejaVu Sans is a pretty standard font for Linux installs. So I think I will have to add another set of arrows to kbd-webfont, and use those instead, and get same results all over.

[iandoug]

Nah, still getting up and down a bit left of centre, even though the flag is align:right.
Will have to try a different approach... might have to manually overide the button class from bootstrap to include a nice Linux font.

[ijprest]

So I think scaling by 1.333 will work to get the result you're going for, but I think it's mostly just dumb luck. When I initially did the HTML rendering, I just pulled numbers out of my ass, and thought a 54px looked pretty good. 54px * 1.333 = 72px. And (72 px) / (96 px/in) = 0.75 in, which is exactly the right size for one "unit".

If I had chosen anything other value than 54px, we'd have to multiply by something else. :)

... so now we've got a 96dpi image (maybe scaled by the browser to match what your OS reports). The big question: Is a 96dpi image very useful?

If it isn't scaled by the browser/OS, then it's only useful if your monitor is close to 96dpi. If it is scaled by the browser, then it's only as good as the match between OS & monitor (which is seldom perfect).

I've got examples of 99dpi (reports 96dpi), 207dpi (reports 144dpi), and 183dpi (reports 192dpi). Only in the first case will 96dpi be very good.

I think it might be better to just offer a "printable @ 300dpi" version... scale it up really big and tell people what the scale is so there's less confusion.

Thoughts?

[ijprest]

P.S., rebuilding the font fixed my arrow/glyph problem, though I can see the off-center-ness that you mention.

[iandoug]

re the arrow/offcentre thing, tried another set of arrows and had same issue. I also noticed in my pics above that the ugly left and right are below centre, so I'm not sure why these things are so problematic. Got a bit tied up with work (still) so have not had a chance to fiddle more.
Regarding the print life size, which 'version' are you referring to ... I had two different implementations .. one did a 'zoom' onscreen to 'life size' (which you could then print), while the other offered a 'download life-size png'.
What I'm trying to do is enable 'life size printing'... zooming on screen was a means to an end.
The 'download lifesize' png is meant to be printed out, after setting your print settings to NOT scale, but print at 100%, assuming you have capable print hardware.
So I don't know if the whole screen DPI has anything at all to do with it in the end.. I tried doing it on my Asus tablet, but as soon as I hit the download button, the browser (Dolphin) hung. Tried in Opera mini, also hung. Possibly the javascript is too intense for the CPUs :-)
Have a windows box as well as virtualbox with assorted things on, will see if I can get them to connect to my local version and what results I get... but next few days are going to be a bit hectic workwise.
cheers, Ian

[Fred-Vatin]

Hi,

Professional printer's need a 300DPI image. One key width from this keyboard is 11.5mm on my screen but when exported to PNG and then imported to the PSD printer's template, lifeszize key is 3.5mm according to the image editor, more than 3 times smaller.

What is the unit used in the properties tab? inch?

We need a way to select DPI or anyway the app show or export the keyboard as its real lifesize so we can send it to printer's to get stickers.