The images in my html widget look blurry!

Question

The images in my html widget look blurry!

Hey there, I'm making some html widgets for my book using HYPE. When I insert this into the ibooks the program shows the preview image in crisp high quality but when I preview it on the iBook, the figure looks somewhat blurred. When I tap on the figure to enlarge it and make it interactive, everything looks fine and crisp, it's only the preview window before it's enlarged that doesn't looks so good. I even tried replacing the preview with a separate picture and previewing that but whatever I do, the preview just doesn't look sharp. Does anyone have any solutions I can try?

Thanks,

Caleb

Posted on Aug 21, 2012 1:10 PM

Reply

Answer 1

Aug 21, 2012 3:38 PM in response to Caleb Kingston

I suspect not. The problem is that Default.png is a bit-map image format, and scaling that down causes scaling artifacts.

Michi.

Reply

Answer 2

Aug 21, 2012 3:40 PM in response to MichiHenning

So, if I go into the dashboard file contents and replace that "default.png" with an image already as small as I need, would that help?

Reply

Answer 3

Aug 21, 2012 3:58 PM in response to Caleb Kingston

No. As tk0us recently pointed out, if you make the default.png smaller than the canvas size of the widget, the widget gets clipped when it runs.

Michi.

Reply

Answer 4

K T

Level 7

23,877 points

Aug 29, 2012 2:39 PM in response to MichiHenning

Don't you mean the contents get clipped?

Reply

Answer 5

roddy147

Level 1

0 points

Apr 25, 2014 4:50 AM in response to Caleb Kingston

Caleb did you find a resolve for this? I am also experiencing this problem

Reply

Answer 6

Jun 8, 2014 1:14 AM in response to Caleb Kingston

Blurry preview icon for HTML widget

The best way to handle this issue is to make the preview icon transparent and place it over your own custom reference graphic on the page.

1- Place on the page the graphic you will be using as the reference icon for the widget

2- Place your widget on top of the custom graphic icon. Make sure it is in "Front". Also make the preview icon is as small as possible.

3- Click on the preview icon TWICE and make its transparency "0". If you only click the preview icon once the Transparency slider will not become active.

4- Now, when you preview the book, your Widget Link will open your custom HTML Widget and both will display at full resolution.

A bonus result of doing this... Since your link is transparent you can make it as large as needed to make it a large enough touch target.

Reply

Answer 7

roddy147

Level 1

0 points

Jun 9, 2014 12:49 AM in response to Tom Hughes1

Hi Tom, this sounds like a great solution but im having trouble making the widget transparent even after clicking twice. the transparency slider is active and I can change it to 0, but the widget visibly appears unchanged in both ibooksauthor and previewing it on ipad... any thoughts as to why this may be?

Reply

Answer 8

roddy147

Level 1

0 points

Jun 9, 2014 1:12 AM in response to Tom Hughes1

Scratch that, have got it to work, was changing the wrong opacity slider. thank you so much for finding a work around to this problem, so so appreciated.

Reply