Changing PDF orientation or rotating PDF before display

[Youks]

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]

Hi All,

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

Regards

[[-hh]]

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

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

[Youks]

Thank you ! I'll explore that direction!

Best regards,

[Youks]

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?

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

Thanks a million in advance.

[capellan]

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]

Hi Capellan,

I have already discovered last week that discussion but i was unfortunately not able to make anything work.
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!

Many thx for sny help in advance.

[jacque]

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.

[Youks]

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]

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.

[Youks]

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]

Hi All,

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

Please, Thx.

Best regards.

[jacque]

Did you set the allowedOrientations in a preOpenStack or preOpenCard handler? If so, the widget should rotate automatically.

[Youks]

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]]

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.