DPS Tips HTML5 Examples

In DPS Tips, I included several HTML examples that are used in Web Content overlays. I’ll attach the source files for these effects.

Scratch Off

Let’s start with the scratch-off effect example.

scratch_off

Download ScratchOff.zip (as used in DPS Tips)

Download ScratchOff_simple.zip (no extra text or borders)

  1. Create two images the same size.
  2. Name them “foreimage.jpg” and “backimage.jpg.”
  3. Unzip the file, and replace the foreimage.jpg and backimage.jpg with your images.
  4. Rename the scratch_off_v.html file, if necessary. Change the suffix to _h for horizontal-only folios or remove the suffix for dual-orientation folios.
  5. Create a Web Content overlay the same size as your images.

Flip Image

And here’s the image flip source code.

ImageFlip

Download ImageFlip1.zip (one example showing reverse image, one showing different image)

Download Flip_Bob_Overlay.zip (example flipping to different image)

  1. Create two images the same size.
  2. Unzip the file, and edit the HTML file to include the information for your images.
  3. Rename the .html file, if necessary. Change the suffix to _h for horizontal-only folios or remove the suffix for dual-orientation folios.
  4. Create a Web Content overlay at least the same size as your images.

In the Flip_Bob_Overlay.zip file, I added 100-pixel padding to the image, so I added an extra 200 pixels to the height and width of the image. That prevents the image from being cropped when flipped.

 

Resize All Text

Here’s the source code for resizing text in an HTML article.

ResizeText

Download ResizeText.html

Not much to do here. Just use the HTML snippet for your own HTML files. By the way, HTML articles like this look much better when they’re set to Smooth Scrolling.

 

Spinning Wheel of Fortune

Here’s the source code for the spinning wheel of fortune. You’ll need to create your own articles to jump to.

spinwheel

Download SpinningWheel.zip

 

Sketch Pad

Here’s a sketch pad example.

sketch

Download Sketch_Pad.zip

 

GPS Map Current Location

Here’s an example that displays a map of the device’s current location.

 

html_map

Download GPS_map_current.zip

GPS Yelp

This example uses a Yelp search to locate the nearest seafood restaurant.

html_seafood

Download GPS_yelp.zip

 

Gyroscopic Panorama

Some people have asked for the source code used in the gyroscopic panorama article. I don’t think you can repurpose this code, but it might be useful to see the example.

Download PanoGyro.zip

App Detection

This example indicates whether an app is installed on a device. A different example displays different content depending on whether an app is installed. (Note that these two examples will be available in the DPS Tips app in mid-January, when I update the app to v29. But you can use the code now for v29 and later apps.)

html_detectapp

Download App_Detection_2.zip

Download consumer_app_if.zip

 

Calendar/Reminder

Here’s the source code for adding events to the Calendar app and lists to the Reminders app on iOS devices.

reminders

 

Zoom / Rotate / Move Image

Hans from the DPS user forum posted his zoom rotate move example. You can use his example or the one I modified.

pinch_rotate

Other HTML5 examples such as image drag-and-drop in DPS Tips have links to external sources. When I add more HTML5 examples to DPS Tips, I’ll post the source files here.

 

If you have HTML5 source code that works well with DPS, please share!

27 Responses to DPS Tips HTML5 Examples

  1. Gioia says:

    Thank you very much for the information!

    I have some questions about it. I am a little new in digital world…
    How can i use these HTML with the Web content in InDesign CS5 and is it posible to see these effects both in the iPad and in a swf file?

    Thanks again
    Gioia

    • Bob Bringhurst says:

      Yes, you can use these examples in DPS web overlays or HTML articles. No, they won’t work for swf or interactive PDF.

      See DPS Tips on your iPad for examples.

  2. Mark Prouty says:

    Where is the image drag-and-drop in DPS Tip?

    Thanks,
    Mar

  3. Mark Prouty says:

    This stuff is incredible. Thanks very much!

  4. Cristina 3010tech says:

    Hola a todos.

    Estoy intentando utilizar el Scratch Off en una página de un proyecto .folio con DPS. El caso es que no me sale el contenido html5 en el iPad, no se ve el código, me sale constantemente un mensaje de “Loading images…”.
    ¿A alguno le ha pasado también? ¿Cual puede ser el fallo? Lo he intentado todo. He copiado el código de otro ejemplo de Sratch Off de la página original beej.es y pegado en Dw, y tampoco se visualiza en el iPad 2 y 3, ni en una tableta Android.

    Help!

  5. Carolyn says:

    If I create a pano with hotspots in pano2VR and export out as HTML5, is there a reason why it wouldn’t work? I was excited to see the HTML could be imported, but seem to be having a problem in this context.

    Thanks

  6. Corrado Speroni says:

    Hi Bob, many thanks for the tips!
    I have a question about the scratch-off effect: is it possible to have the effect but in a different shape instead a rectangle? i have tried with a white multistate object as a “mask”, I see the image through the hole of the mask, but the scratch-off effect doesn’t work.
    Is it possible to obtain the effect modifying the shape via html code?
    Thanks again,
    Corrado

    • Bob Bringhurst says:

      I would try creating a dummy mask in InDesign to change the shape.

      • Corrado Speroni says:

        Hi again Bob,
        if you mean a multistate object with 2 identical states as a presentation overlay in autoplay, I have tried, but the scratch-off doesn’t work. I only see the image.
        Any ideas?
        Thx again

        • Bob Bringhurst says:

          Didn’t work for me, either. I think you need to build the mask into the image itself.

          • Corrado Speroni says:

            Many thanks Bob.
            I have a problem also with the flip effect: the files downloaded from this page doesn’t work. I see the first image and nothing happens when I tap. Please, can you check? Thx.

          • Bob Bringhurst says:

            I’ll take a look and repost.

          • Corrado Speroni says:

            Hi Bob,
            the flip effect problem is that in the zip the script folder with the .js files is missing.
            Please, check.
            Bye

          • Bob Bringhurst says:

            I uploaded a new .zip file. It should work again.

  7. Scott Land says:

    Hi Bob,
    I want to know if its possible to have a video under the scratch off layer? If so could it start as soon as you start scratching?
    Thank you
    Scott Land

    • Bob Bringhurst says:

      I don’t think so. I think the scratch-off layer stops working when you mask it. One possibility is to add both effects to an MSO, but I think the user would need to tap something to start the video.

  8. Guy Noble says:

    Hi,
    I’m building an app in Indesign CS6 and I need to have a sketch pad section on a page or within an article. The idea is that the student can copy a photo onto a sketch pad area. Any idea how (or if) I can do this in indesign?
    Failing this I could have a separate article and use an existing code template. Where can I find out how to do this and download a simple template ?

    any ideas would be much appreciated
    Cheers
    Guy

  9. Pingback: Ad of the Week – Blind Barber in Bullett « Adobe Digital Publishing

  10. Brett says:

    Bob

    Love all the tips, thanks for making the App

    I’ve used the iPad canvas scratch off several times but we would like to make an IPhone version, I’ve change the dimensions in the java but I can’t get it to interact on Viewer on iPhone – works fine in desktop preview

    Any idea why it will not work on iPhone, is there something we’ve missed

    thanks

    Brett

  11. Amy Heitz says:

    Hi Bob,
    I want to use the image flip, but don’t want it to skew so much on the top and bottom edges. How can I used what you’ve provided but take out the skewing feature? Not familiar with JS and am having a hard time finding it in the code or using the extension in Dreamweaver to create a new effect. Thanks!

    • Bob Bringhurst says:

      We might be talking about two different problems: skewing and cropping. If your image is getting skewed out of proportion, change the height and width values in the image code.

      If your flip image is getting cropped, you have to increase the width and height of the overlay frame (by, say, 200 pixels) and then add a “padding” value to the code that’s one-half that value (100 pixels) in this example. Here’s an example: