Need help with JavaScript to create form template using buttons to show images

[cbaquol]

In theory, what I'm trying to do is pretty easy. But I've reached my breaking point trying to figure it out on my own. This is for a project at work that I need to figure out and have ready ASAP. Any help would be extremely appreciated.

Every week I am required to visit a construction site and take 35 photos from specific locations for the duration of the project. The locations from where the photos are taken do not change from week to week. Once the photos are taken they are required to be compiled into an interactive PDF that shows a map of the site with each location of where the photograph was taken designated with an icon. That icon should then be clickable to show the image that was taken from that location. I have only been tasked with this for two weeks and both times I've been able to meet their requirements but it's sloppy and labor intensive each time.

The first week I simply created a single PDF of the map and all 35 images, each on their own page. Then I added buttons for each image location on the map, and set the button action to show the specific page that that particular image was on. then on each image page I added a button to return back to the map page.

Week two I used a similar map, but instead of adding pages for each of the images, I created 35 image form fields in the center of my map that overlapped perfectly, and wrote some short Java Script for each button. For example button one, would get image field one and if it was not visible it would the field to be visible. If it was visible, it would set the field to be hidden. The problem with that is having to type the field names in every button JavaScript action, and having to manually load the icon of every image field.

Today I thought I had finally figured it out only to be stopped by security warnings denying access for the JavaScript to open the image files. I can't put them in the safe path because this is getting distributed to multiple different people and opening, viewing, and navigating needs to be seamless and easy.

The solution I'm looking for should be something like this ;

On  map document open, It automatically searches for images saved in the same root path and creates image fields for each file it finds. Then associate each new image field to existing buttons already on the map. Button one should toggle image one, etc so that part should be easy to come up with. I need to be able each week to simply load new image files into a folder and have the script in the map take care of the rest.

If there is a better solution I am all ears. Thank you for your help I am dying to get this behind me!! Sorry for any typos or gramatical errors, this was typed on my phone.

[try67]

Not possible with JavaScript, as it can't search a folder for files. A plugin might be able to do it.

[cbaquol]

If a plug-in was able to do the trick, wouldn't it need to be installed on everyone's machine who needed to view it? Or would it be packaged up into the document and essentially invisible to the people who need to see it? It needs to be easy, intuitive, and right... These are state government folks we're talking about here so we'll get rejected if it isn't perfect which is holding up job payouts. Yikes! Thanks for the help though, if you have any other thoughts I'd appreciate anything else you might be able to come up with.

[try67]

A plugin has to be installed on the local machine, yes.

[cbaquol]

Thanks for the input....Any other ideas on how to accomplish this? It doesnt necessarily have to be the wau I described in my post, as long as the result is a clickable map that utilizes some kind of batch automation so it doesnt take me forever to do each week.

Let's say I do merge the 35 photos and 1 map into a 36 page pdf. Could I use a map doc that already has the buttons added and JS event action pointing to view each corresponding page (button 1, show page 1) and then have a script I could add in each time that adds a "home" button to each page in the doc minus the map? Hmmmmmm... mind getting me started with the code for that if you think it might work? Again, thank you so much for your help! 

[try67]

Sure, that's easily done. You create a loop that adds a the buttons and sets their Mouse Up action.

The script to go to a specific page is quite simple:

this.pageNum = 9;

This will take you to page 10 when clicked (notice the page numbers start with 0, not 1).

To apply this code to a button field you can use this:

this.getField("Button1").setAction("MouseUp", "this.pageNum = 9;");

[cbaquol]

For anyone who may be interested, this was my solution. I start with the one page document showing my map that already has my 35 location buttons placed where they need to go with no actions assigned or anything else in the doc. Then, I go to "organize pages" and import all the images as pages after the initial map page. Once I am at that point, I open the JS console and paste my code in, highlight everything, and ctrl+enter. Perfect. I was able to make the drive, take the photos, come home, add the metadata, and generate the document in under 3 hours today. Much more efficient. Thanks for your help try67!!!!

var aPage = this.getPageBox({ nPage: 1 });

var w = 300; // Width of each button

var h = 300 // Height of each button

var nNavi = 3; // Number of buttons to be placed

var g = 6; // Gap between buttons

var totalWidth = nNavi * w + (nNavi - 1) * g; // total width of navi bar

var widthPage = aPage[2] - aPage[0];

// Horizontal offset to center navi bar

var hoffset = (widthPage - totalWidth) / 10;

var voffset = 3200; // vertical offset from bottom

for (var nPage = 1; nPage <= this.numPages; nPage++) {

   //////////////////////////

   var buttonNum = "Button" + nPage;

    console.println(buttonNum);

    var pageD = nPage;

    var showpage = "this.pageNum = " + pageD + ";";

    if (nPage <= 36) {

        this.getField(buttonNum).setAction("MouseUp", showpage);

    } else {

        console.println("no button for image on " + nPage);

    }

   /////////////////////////

    // Create the fields

    var pp = this.addField("Back", "button", nPage,

        ([hoffset, voffset, hoffset + w, voffset + h]));

    pp.fillColor = color.ltGray;

    pp.lineWidth = "3";

    pp.borderStyle = border.b;

    pp.buttonSetCaption("Return to Map");

    pp.highlight = highlight.p;

    pp.setAction("MouseUp", "this.pageNum = 0;")

    var next = this.addField("Next Image", "button", nPage,

         ([hoffset + w + g, voffset, hoffset + 2 * w + g, voffset + h]));

    next.fillColor = color.ltGray;

    next.lineWidth = "3";

    next.borderStyle = border.b;

    next.buttonSetCaption("Next Image");

    next.highlight = highlight.p;

    next.setAction("MouseUp", "this.pageNum ++;");

    var next = this.addField("Previous Image", "button", nPage,

    ([hoffset + 2 * w + 2 * g, voffset, hoffset + 3 * w + 2 * g, voffset + h]));

next.fillColor = color.ltGray;

next.lineWidth = "3";

next.borderStyle = border.b;

next.buttonSetCaption("Previous Image");

next.highlight = highlight.p;

next.setAction("MouseUp", "this.pageNum --;");

}