Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HiDPI support in preview images #92

Open
chrissawer opened this issue Dec 9, 2016 · 11 comments
Open

HiDPI support in preview images #92

chrissawer opened this issue Dec 9, 2016 · 11 comments
Assignees
@chrissawer
Labels
enhancement

Comments

@chrissawer
Copy link
Contributor

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 chrissawer self-assigned this Dec 9, 2016
@chrissawer
Copy link
Contributor Author

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
Copy link
Contributor

glenl commented Dec 9, 2016

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
Copy link
Contributor Author

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
Copy link
Contributor

PaulMorris commented Dec 12, 2016 via email

@chrissawer
Copy link
Contributor Author

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
Copy link
Contributor

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
Copy link
Contributor

glenl commented Dec 16, 2016 via email •
edited
Loading

@glenl
Copy link
Contributor

glenl commented Dec 16, 2016

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

nexus5-2

The second at maximum on my device,

nexus5-1

@chrissawer
Copy link
Contributor Author

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 #86

@chrissawer
Copy link
Contributor Author

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

@chrissawer
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@chrissawer chrissawer

Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@PaulMorris @chrissawer @dominicus @glenl