Changing PDF orientation or rotating PDF before display

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller

Youks
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 135
Joined: Mon Sep 05, 2011 6:08 pm
Location: Qatar

Changing PDF orientation or rotating PDF before display

Post by Youks » Tue Nov 13, 2018 12:47 pm

Hi All,

I am currently working on a simple app, displaying PDF files on a browser widget. At this stage all the PDF are in portrait orientation. Is there an easy way of changing the orientation or rotating the PDF before display?

The PDF are fetched from a website with their original orientation.
I am aiming of using the app on android.

Best regards

Youks
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 135
Joined: Mon Sep 05, 2011 6:08 pm
Location: Qatar

Re: Changing PDF orientation or rotating PDF before display

Post by Youks » Tue Nov 13, 2018 10:11 pm

Hi All,

Any idea if it can be done through a javascript handler?

Regards

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Changing PDF orientation or rotating PDF before display

Post by [-hh] » Wed Nov 14, 2018 11:11 am

https://mozilla.github.io/pdf.js/

I use it when I wish to be independent of the user's PDF-plugin.
shiftLock happens

Youks
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 135
Joined: Mon Sep 05, 2011 6:08 pm
Location: Qatar

Re: Changing PDF orientation or rotating PDF before display

Post by Youks » Fri Nov 16, 2018 8:54 pm

Thank you ! I'll explore that direction!

Best regards,

Youks
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 135
Joined: Mon Sep 05, 2011 6:08 pm
Location: Qatar

Re: Changing PDF orientation or rotating PDF before display

Post by Youks » Fri Nov 16, 2018 10:15 pm

Hi again,
I unfortunately couldn't find a clear direction on how to implement and use the PDF.js in livecode.
Could someone kindly provide an example on how to rotate a PDF with that extension using the browser widget or anything else? :cry:

PS: i am planning to implement it in app for android.

Thanks a million in advance.

capellan
Posts: 631
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

Re: Changing PDF orientation or rotating PDF before display

Post by capellan » Fri Nov 16, 2018 11:37 pm

Hi Youks,

I found this answer in stackOverflow after searching for the phrase
"pdf.js rotate page" in google.

https://stackoverflow.com/questions/458 ... sing-pdfjs

Code: Select all

You could try this script which allow you to rotate all pages incrementally and reset all of them when necessary.

The code add a data attribute rotation on each page DOM element.

    const rotatePages = (deg: number, force: boolean = false) => {
        const pageContainer = document.getElementById('viewer')
        if (pageContainer) {
          const pagesDOM: ReadonlyArray<HTMLDivElement> = Array.from(
            pageContainer.querySelectorAll(`div[data-page-number]`),
          )
          pagesDOM.forEach(pageDOM => {
            const datasetRotation = pageDOM.dataset.rotation
            let targetRotation = deg
            if (datasetRotation) {
              targetRotation = force ? deg : deg + Number(datasetRotation)
            }
            pageDOM.dataset.rotation = String(targetRotation)
            pageDOM.style.transform = `rotate(${targetRotation}deg)`
          })
        }
        
Use it as:

// incremental rotation    
rotatePages(90) // rotate all pages of 90 deg
rotatePages(90) // rotate all pages of +90 deg (now they are all rotated of 180 deg)

// reset rotation for all pages to 0 degree
rotatePages(0, true) 
If you are interested to get the current rotation of a page, instead of using .replace(/rotate\(([-]?[0-9]{0,3})deg\)/,"$1");

you could simply query the dom for a specific data attribute rotation
Please, post a stack with this pdf.js and these scripts included
so it's faster to test and debug any error that you find.

Al

Youks
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 135
Joined: Mon Sep 05, 2011 6:08 pm
Location: Qatar

Re: Changing PDF orientation or rotating PDF before display

Post by Youks » Sat Nov 17, 2018 5:59 pm

Hi Capellan,

I have already discovered last week that discussion but i was unfortunately not able to make anything work. :cry:
Either by placing the javascript function in the stack property or the browser widget and calling the function with LC passing the parameters. It is certainly easy but i have no clue on how to do it. I am just trying to load the PDF from an URL to the browser and apply any orientation change before display. I thought i could manage it easily but that wasn't the case. I tried setting the HTML property of the widget to a custom property with no joy.
If anyone know a recipe i will be more than grateful! :D

Many thx for sny help in advance.

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 5775
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Changing PDF orientation or rotating PDF before display

Post by jacque » Sun Nov 18, 2018 5:28 pm

Since this is for Android, the whole stack will rotate automatically when the orientation changes. You don't need to do any special treatment to the widget. You do need to set the allowedOrientations to the ones you want to support (see allowedOrientations in the dictionary). You may also want to adjust the size and position of controls when the orientation changes.

There are some things you need to do to accomodate rotation on mobile, but rotating individual controls isn't one of them. You'll need to test on a real device though since desktops don't rotate.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Youks
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 135
Joined: Mon Sep 05, 2011 6:08 pm
Location: Qatar

Re: Changing PDF orientation or rotating PDF before display

Post by Youks » Sun Nov 18, 2018 7:42 pm

Hi Jacqueline,

The app is indeed meant to be for android and in portrait mode. The app loads PDF (large charts) but most of them are in landscape mode. I should be able to rotate them for a proper display.
The best option is to use the Browser control since it takes care of the zoom in & out.

Thx

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 5775
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Changing PDF orientation or rotating PDF before display

Post by jacque » Sun Nov 18, 2018 8:49 pm

Both the widget and the older browser made with "create" will zoom, but the widget is easier to use. You could set the rect of the widget wider than it is tall, even in portrait mode, and the user will instinctively rotate the device. Alternately you could force rotation when the PDF loads by changing the allowedOrientations.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Youks
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 135
Joined: Mon Sep 05, 2011 6:08 pm
Location: Qatar

Re: Changing PDF orientation or rotating PDF before display

Post by Youks » Tue Nov 20, 2018 2:44 pm

Hi All,

If i understood we could execute the "transform = rotate (--deg)" javascript in the widget.browser but can anyone indicate in which "container" is loaded the PDF when displayed in widget.browser?

I appreciate any hint!

Thx

Youks
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 135
Joined: Mon Sep 05, 2011 6:08 pm
Location: Qatar

Re: Changing PDF orientation or rotating PDF before display

Post by Youks » Thu Nov 22, 2018 5:41 am

Hi All,

Does anyone have any idea or managed to rotate a PDF right on the browser widget ?

Please, Thx. :(

Best regards.

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 5775
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Changing PDF orientation or rotating PDF before display

Post by jacque » Thu Nov 22, 2018 5:30 pm

Did you set the allowedOrientations in a preOpenStack or preOpenCard handler? If so, the widget should rotate automatically.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Youks
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 135
Joined: Mon Sep 05, 2011 6:08 pm
Location: Qatar

Re: Changing PDF orientation or rotating PDF before display

Post by Youks » Fri Nov 23, 2018 8:32 am

I haven't tried that yet since I want to do it first on the Mac before porting it eventually to Android, that is why I am looking into a more general approach. Preferably from within the Browser widget with some javascript code if achievable.

Thank you.

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Changing PDF orientation or rotating PDF before display

Post by [-hh] » Fri Nov 23, 2018 12:17 pm

With your method, the pdf is rendered by the user's system pdf plugin (which may moreover differ from user to user). It is NOT a pdf plugin that is included in the widget.

The "transform = rotate (__deg)" CSS method is indeed able to rotate a container incl. everything that is drawn by HTML into that container. But it cannot rotate a plugin display that is only getting its rectangle from the container.

So this is a general HTML/CSS limitation, not a problem that the browser widget can solve for your plugin-method.

What you can do is, independent of the browser widget,

• Rotate once the pages to download (there are also free online tools for that).

OR

• Use pdf.js (which is an own pdf renderer) for the display. Not this easy to implement. But then the user is allowed to rotate the page from the menu.
shiftLock happens

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”