search

MutopiaProject / MutopiaWeb

MutopiaProject site evolution to HTML5
3 stars 7 forks source link

HiDPI support in preview images #92

Open chrissawer opened 7 years ago

chrissawer commented 7 years ago

I would like to investigate HiDPI support in preview images so people with hi-resolution displays (or zoomed in) can see the full effect of LilyPond's typesetting before downloading.

This would involve creating two preview images, one at double the resolution, and using the srcset attribute to choose between them. XKCD does something like this:

http://xkcd.com/1769/ http://imgs.xkcd.com/comics/never_seen_star_wars.png http://imgs.xkcd.com/comics/never_seen_star_wars_2x.png

chrissawer commented 7 years ago

Confirmed that increasing the 72 to 144 in mutopia-compile.sh gives a PNG exactly double the size which looks really beautiful on a retina display. Next step - produce both hi and low-res images either with LilyPond directly, or by making the lo-res one from the hi-res one.

glenl commented 7 years ago

Very cool. Here is another method using the SVG backend that might yield good results.

Given foo.ly,

lilypond -dpreview -dbackend=svg -dno-point-and-click foo.ly

Modify the HTML to use the object syntax to render the foo.preview.svg image,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div class="preview-image">
    <object type="image/svg+xml" data="foo.preview.svg">
      If you see this, SVG is not supported on your browser
    </object>
  </div>
</body>
</html>
chrissawer commented 7 years ago

SVG is an even better idea if the results look good cross-browser (falling back to the current PNG if SVG is not available). When I get a chance I'll do some tests.

PaulMorris commented 7 years ago

+1 for SVG. Browser support is rather good at this point, see for example:

http://caniuse.com/#search=SVG

chrissawer commented 7 years ago

I've updated the current build scripts to output svg as well as png, run them on pieces 2145 to 2156, and hacked a version of piece-info.cgi to use them. The results certainly look good on a retina mac in Firefox, Chrome and Safari.

http://www.mutopiaproject.org/cgibin/piece-info-svg.cgi?id=2145 http://www.mutopiaproject.org/cgibin/piece-info-svg.cgi?id=2146 etc.

Any comments on this? Can someone try IE/Edge on Windows?

Do these render ok on tablets/smartphones - particularly 2145 which is a big complicated image?

Any thoughts on if/how we should fall back to PNG? We can fall back to PNG in the cgi script if the SVG doesn't exist, but what about old browsers? I found some tricks online but don't know if they're worth considering or not. Looks like you have to go back to IE8 and Android 2.3 to lose SVG support.

https://css-tricks.com/svg-fallbacks/

dominicus commented 7 years ago

Loads quickly and renders to perfection on both IE/Win7 and Edge/Win10.

Given the share of compatible devices & browsers, plus the existence of a link to PDF version on same page, I'm not convinced there's significant value in providing fallback image.

+1 to @glenl's suggestion of just displaying a text-based msg like "Preview image not supported on this browser" when the preview can't be rendered.

glenl commented 7 years ago

Two images from an Android device (google Nexus 5). One image is maximum enlargement in an area where slurs pass through the staff. I've also looked at this on linux chromium 54.0.2840.100 and Firefox 50.1.0 with similar results.

On Dec 16, 2016 9:48 AM, "Javier Ruiz-Alma" notifications@github.com wrote:

Loads quickly and renders to perfection on both IE/Win7 and Edge/Win10.

Given the share of compatible devices & browsers, plus the existence of a link to PDF version on same page, I'm not convinced there's significant value in providing fallback image.

+1 to @glenl https://github.com/glenl's suggestion of just displaying a text-based msg like "Preview image not supported on this browser" when the preview can't be rendered.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/MutopiaProject/MutopiaWeb/issues/92#issuecomment-267653509, or mute the thread https://github.com/notifications/unsubscribe-auth/ACubcdInS0-j20YHPD3jqWukwfqFK2qAks5rIs7hgaJpZM4LIuEq .

glenl commented 7 years ago

Apparently, images are not loaded in emails. Inlined here,

nexus5-2

The second at maximum on my device,

nexus5-1

chrissawer commented 7 years ago

Initial support added to piece-info.cgi for the following piece only (before I switch over the other RDF files to SVG). http://www.mutopiaproject.org/cgibin/piece-info.cgi?id=263 I would like to rename pngFile to previewFile in the RDF file, and remove the pngHeight and pngWidth fields. I have not yet changed make-table.cgi. Any comments about the preview image moving to the left - please use https://github.com/MutopiaProject/MutopiaWeb/issues/86

chrissawer commented 7 years ago

SVG support now added to make-table.cgi and piece-info.cgi, dropped usage of pngHeight/pngWidth in preparation for their removal

chrissawer commented 7 years ago

PNG generation support now removed from the relevant shell scripts, and the java RDF generating code now outputs the svg filename and png size 0x0