Completed

Use Preview (Mac OS) to get your PDFs links up and running

13 years ago • updated by 12 years ago • 9

You may use Preview to embed all your links and page jumps within your PDF before you upload it into the studio. Doing so will allow you to add a couple default classes into your wire and instantly have active links and page jump within your app.

Creating your Links in the PDF:

Within Preview, open the Annotions Toolbar and select the Link tool.

Draw the geometry around the desired area

Select 'Page' or 'URL' from the popup as well as entering your URL or page number

Repeat for every Link or Page Jump for your TOC

video example

Now with your annotated PDF uploaded into the studio, open your main.wire and add the following two classes to your block.




<class name="weblink">


<panel name="[param:objname]" width="[param:w]" height="[param:h]" xpos="[param:x]" ypos="[param:y]" onclickup="show-web" _url="[param:url]"></panel>


</class>



<class name="pagelink">


<panel name="[param:objname]" width="[param:w]" height="[param:h]" xpos="[param:x]" ypos="[param:y]" onclickup="scroll-to" _page="[param:topage]"></panel>


</class>

Next on your PDF object insert the two following attributes to call the two classes we just created.




<pdf name="mag" alias="MAG" source="myPDF.pdf" height="100%" width="100%" valign="center" spreads="no" covertile="no" tile="yes" orientation="horizontal" pagelinkclass="pagelink" weblinkclass="weblink"></pdf>

You will now have active, tappable areas within your PDF to introduce interactions with your URLs and Page jumps.

The last step will be to create the 's you wish to invoke when a user taps the weblink or pagelink class by editing or creating the appropriate onclick/onclickup event.

Please see the following examples for more detail on those actions:
Action a WebPage

Vote

Replies 9
Oldest first
- Newest first
- Oldest first

13 years ago

When you are adding or changing links on a pdf in the Preview app it is important to include the "http://" on every URL. The hyperlinks will not work if the protocol is missing. Also, if you are editing page links or hyperlinks make sure that after you have made a change check the top of the Preview where the name of the file is, it should say "edited". If not then resize or move the link box slightly until it does say edited. If it doesn't say edited, it doesn't see it as a change and will not save your changes. Believe me, I have had to redo pdf links on a 90 page pdf 3 times because I didn't know about the "edited" state.

12 years ago

Here is a video of how this is done in Preview:
https://vimeo.com/38846256

12 years ago

In the "Action a web page" there only one link in the pdf. I have a 14 pages pdf with one or more links on every page. Can I see some code examples of a wire with a pdf with more than only one link?

Thanks in advance

12 years ago

Are you thinking about implementing the solution of making these links as annotations in preview? If so, then the tutorial on the web link in "action a web page" wouldn't be the most effective approach because you would have to create your own click panels on top of every link.

That would look like this:




<wire>


    <main>


      	<pdf name="pdf" alias="PDF" source="sample.pdf" height="100%" width="100%" spreads="yes" covertile="no" tile="yes">    


            <panel name="link1" width="200" height="20" xpos="85" ypos="907" onclickup="weblink" onpage="1" _url="http://www.apple.com"></panel>


            <panel name="link2" width="100" height="20" xpos="185" ypos="233" onclickup="weblink" onpage="2" _url="http://www.cnn.com"></panel>


            <panel name="link3" width="300" height="20" xpos="285" ypos="90" onclickup="weblink" onpage="3" _url="http://www.hbo.com"></panel>


            <panel name="link4" width="400" height="20" xpos="385" ypos="47" onclickup="weblink" onpage="4" _url="http://www.amazon.com"></panel>


            <panel name="link5" width="200" height="20" xpos="385" ypos="947" onclickup="weblink" onpage="5" _url="http://www.google.com"></panel>


      	</pdf>


        <panel name="web" alias="WEB" height="100%" width="100%" ypos="0" hidden="yes">


            <toolbar name="toolbar" height="5%" width="100%" align="left" valign="top">


                <panel name="button" width="10%" height="80%" align="left" margin="10" valign="center" background="#888888" cornerradius="5" onclickup="weblink-return">


                    <text name="back" width="50%" height="50%" color="#000000" font="" size="12" align="center" valign="center" text="Back"></text>


                </panel>


            </toolbar>


            <web name="web-panel" alias="WEBPANEL" width="100%" height="95%" valign="bottom" url="://blank"></web>


        </panel>



    </main> 


    <actions>


        <action name="page">


            <scroll page="_page"/>


        </action>


        <action name="weblink">


            <replace type="flipright" target="PDF" replacement="WEB" time="1"/>


            <load url="_url" target="WEBPANEL"/>


        </action>    


        <action name="weblink-return">


            <replace type="flipleft" target="WEB" replacement="PDF" time="1"/>  


            <load url="://blank" target="WEBPANEL"/>


        </action>  



    </actions>


</wire>

If you use the solution in this topic, your code would look like this when paired with a PDF that has been annotated. The classes will find the xpos/ypos and links:




<wire>


   <classes>


    <class name="weblink">


        <panel name="[param:objname]" width="[param:w]" height="[param:h]" xpos="[param:x]" ypos="[param:y]" onclickup="weblink" _url="[param:url]" ></panel>


    </class>


    <class name="pagelink">


        <panel name="[param:objname]" width="[param:w]" height="[param:h]" xpos="[param:x]" ypos="[param:y]" onclickup="scroll-to" clicktarget="MAG" _page="[param:topage]" ></panel>          


    </class>


   </classes>


    <main>


      <pdf name="mag" alias="MAG" source="pdfs/sample.pdf" height="100%" width="100%" align="left" valign="top" spreads="yes" covertile="yes" weblinkclass="weblink" pagelinkclass="pagelink"></pdf>


      <panel name="web" alias="WEB" height="100%" width="100%" ypos="0" hidden="yes">


            <toolbar name="toolbar" height="5%" width="100%" align="left" valign="top">


                <panel name="button" width="10%" height="80%" align="left" margin="10" valign="center" background="#888888" cornerradius="5" onclickup="weblink-return">


                    <text name="back" width="50%" height="50%" color="#000000" font="" size="12" align="center" valign="center" text="Back"></text>


                </panel>


            </toolbar>


            <web name="web-panel" alias="WEBPANEL" width="100%" height="95%" valign="bottom" url="://blank"></web>


        </panel>


    </main>


    <actions>


      <action name="weblink">


            <alpha value="0" time="0" target="UP"/>


            <replace type="flipright" target="MAG" replacement="WEB" time="1"/>


            <load url="_url" target="WEBPANEL" />


        </action>    


        <action name="weblink-return">


            <alpha value="1" time="0" target="UP"/>


            <alpha value="0" target="../upbutton"/>


            <replace type="flipleft" target="WEB" replacement="MAG" time="1"/>  


            <load url="://blank" target="WEBPANEL"/>


        </action>  


       <action name="scroll-to">


        <scroll page="_page" target="MAG"/>


       </action> 


    </actions>


</wire>

12 years ago

It works! Thanks :)
I used the second code example. Very class solution.
Anyway the targets in the actions should be "MAG" not "PDF". :)
A way to intercept the mailto: link? Maybe using an hidden panel as the previous example? Right?

12 years ago

by intercept you mean do not allow it to work for the user? I am afraid I don't understand.

12 years ago

Sorry for my english. I mean that the mailto link doesn't call the mail app. :( When clicked the link the app open the web panel. There's a way to call the mail app instead? I saw the email tag but I dont believe is the right tag to use.

12 years ago

You can detect the type of link within the weblink action by using the [eval] tags and if blocks:




   	<if lhs="[eval:('_url').indexOf('mailto:')]" operator="gte" rhs="0">


            <email toaddress="[eval:('_url').substring(7,('_url').length)]" />


    	</if>



   	<if lhs="[eval:(&quot;_url&quot;).indexOf('http')]" operator="gte" rhs="0">



             <!-- {normal web link code here}  -->  	    



    	</if>

Each if block will be called depending of if the link starts with mailto: or http. You will also see a simple way of stripping off the mail: prefix in the toaddress attribute of the action using [eval] and Javascript

12 years ago

Thanks, it works! Very kind :)

Customer support service by UserEcho