10 Replies Latest reply: Aug 14, 2012 3:59 AM by tk0us
adnixon Level 1 (140 points)

I have created a html google maps widget using the www.ibooksgenerator.com solution. The solution creates a default.png file 640px x 640px. If you create a html container in iBooks Author at the same size as the default.png then this image when you activate the link will display as the original. However if you create a html container at say thumbnail size and use the same default.png image then when you activate the link the image displayed is pixelated because my guess is that the container image is reduced from 640 x 640 and stored at the size of the container which becomes pixelated when blown up to 640 x 640.


I guess the question is irrespective of what size the html container image is how do you get it to display the image at 640 x 640 when you activate the link.

  • adnixon Level 1 (140 points)

    Thanks for the response.


    I have increased the size of the default.png to the maximum and this has not resolved the issue. As mentioned before I don't beleive that the widget is using default.png when it runs rather the container image which has been reduced in size by the iBooks Author application to match the thumbnail size I have created it at but being blown up to 640 x 640 which is the size set by the Widget. In these circumstances the image just becomes a blur.


    I would suggest that this might be the situation because if you create the html container for an image size equal to the default.png and use any image the same size as the container then it displays perfectly. I can find no mapping in the widget code that maps the path to default.png. If anywone was able to point out where this might be located then I can probably resolve the issue. Ant..

  • tk0us Level 2 (265 points)

    the size of the Default.png is the size of the working html widget in Author. There are many examples in the An iBuild Opportunity series.

  • adnixon Level 1 (140 points)

    tkOus of Illinois you are absolutely correct simply because if the size of the Default.png is 640px x 640px and the exact size of the html widget image container you create in iBooks Author is also 640px x 640px it will display the image that is produced when the widget is executed without any degredation.


    The issue is simply if you want the widget image container to be 100px x 100px then how do you not get any degredation of the image if the default.png is 640px by 640px and controlled by the widget to display at that size.


    Perhaps someone can confirm if the image used when you launch the widget is the image that has been drag and dropped to the the widget container or the default.png and I think you will find that the image displayed is not the default.png because you can have a container image different from the default but when launched it will always display the widget container image.


    Now that would suggest either an issue with iBooks Author or the Widget Code. Perhaps someone can tell me where in the widget code produced by ibooksgenerator.com you can assign the default.png image rather than the widget container image. Ant..

  • tk0us Level 2 (265 points)

    Author allows you to replace the image displayed in the publication, but the Default.png is the size the widget displays when it is interacted by the reader.


    So, if your html widget (640) is displaying smaller images (100) they will be pixelated. It is easy to build your own html widgets to get the results you are looking for...

  • adnixon Level 1 (140 points)

    Thanks tkOus for the reply let me show you part of the widget code


    <!DOCTYPE html>



                                  <meta charset="UTF-8">


                                  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

                                  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>

                                  <script type="text/javascript" src="mapmarker.jquery.js"></script>

                                  <script type="text/javascript">

                                            $(document).ready(function(){          var myMarkers = {"markers": [{"latitude": "-43.5462802111192", "longitude":"172.547442895093", "icon": "default_marker.png", "baloon_text": "<h3>Former Wigram Aerodrome</h3><p>Air Force Museum of New Zealand</p>"}]


                                                                zoom          : 12,

                                                                center          : 'Wigram, Christchurch, New Zealand',

                                                                maptype : google.maps.MapTypeId.ROADMAP,

                                            markers          : myMarkers});






                                  <body style=" margin: 0px; padding: 0px;">

                                            <div id="map" style="width: 640px; height: 640px; margin: 0px; padding: 0px;"></div>




    Both the default.png  image and the size of the window is 640px x 640px and this is the exact size that it should be. However if I drag and drop the default.png to the html image container and that container is say 150px by 150px then that image reduced to that size and will be pixelated when displayed at the pre-determined image display size of 640px x 640px.


    It is true that I can create a default.png image at any size and provided that the size of the window is the same size as the default.png and well as the html image container it wil display at that size without being pixelated.


    So in summary my conclusion is that you cannot have a html container at any other size other than the size determined by the widget as per the above code. Having stated that with the help of commentary I have concluded that the default.html serves no purpose other than it just happens to be the same size as the window because the image that is displayed by running the code above is the image embedded in the html image container and it is that container that changes what ever is the origional size of the image to the resolution required to fit the html container without pixelation however it is the widget that determines as to what size that modified 140px x 140px size modified image will display at which is 640px x 640px end result pixelation.



    If iBooks author displayed the default.png issue rather than the html contain image [irrespective of its size] then there would simply be no issue whatsoever.


    If there is some other widget magic then I would be more than happy for anyone to provide me an example of the widget which properly displays at 640px x 640px but where the html image container is 140px x 140px.


    If I am not mistaken this is probably an Apple issue which requires their code to call the default.png image which will be at the right size as the window is that displays it. Ant..

  • tk0us Level 2 (265 points)

    Please see An iBuild Opportunity and try the Sample.


    This is my series on demonstrating many building books methods.


    HTML widgets do not have to be complicated, and if you understand the code your last response includes, you could easily build your own HTML widgets to do almost anything you can do on the Web.


    Hope this helps...

  • adnixon Level 1 (140 points)

    Thanks for drawing my attention to iBuild.


    To progress this issue I have reported it to Apple given that I believe that it is an iBooks Author issue and will mark this discussion as resolved.

  • der_denker Level 1 (20 points)

    Hi, could you publish it for Europe (f.e. Germany) too? Here is no access through US-ituens even if it  a free book...

  • tk0us Level 2 (265 points)

    According to Apple, the entire An iBuild Opportunity series is cleared for sale in every territory.


    Please let me know if you cannot find the publications and I will contact Apple.