New approach for offline viewing PDF inside Android browser

The place to discuss anything and everything about running your LiveCode on Android

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

kroka
Posts: 52
Joined: Fri Sep 28, 2007 10:20 am
Location: Berlin, Germany
Contact:

New approach for offline viewing PDF inside Android browser

Post by kroka » Mon Dec 12, 2016 4:51 pm

There has been some discussion about viewing PDFs inside an app on Android.

If you want to include any PDF view inside your LiveCode app on Windows, Mac or iOS, you can simply use a web browser and set the path to the PDF to it. Very simple, working nicely.

If you want to do the same on Android, this approach is not working, because Android doesn't support viewing PDF files natively in the browser. This is a real problem if you want to write an app that has the abilty to show PDF files inside the app.

See the discussion on this forum: http://forums.livecode.com/viewtopic.php?f=53&t=14519

The recommended solution was to use the Google Docs API to render the PDF inside the web browser. This can be done by putting "http://docs.google.com/gview?embedded=true&url=" before the URL of the PDF.

The remaining problem is: It won't work with a local PDF file that is embedded into your livecode-app bundle (because it's not accessible by Google).
And the main problem: It will never work offline.

Here is a new approach I found on a Xamarin-blog. Instead of the Google API the PDF.js library from Mozilla was used. It can be downloaded and used offline freely.

Link here (solution 3): http://www.subodhjena.com/2016/03/12/xa ... d-webview/

Has anybody tried this with LiveCode on Android? I haven't yet, but it sounds possible for me.

Is this the universal workaround many have been waiting for?

Kroka
"irgendwas is immer"

rblackmore245
Posts: 67
Joined: Fri Jun 12, 2015 9:42 am

Re: New approach for offline viewing PDF inside Android brow

Post by rblackmore245 » Mon Jan 09, 2017 10:08 am

I had to create a app recently on Android that had to display over 400 PDF's the only way I found I could do this unfortunately was to use a PDF reader app then launch the PDF with the open URL function.

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: New approach for offline viewing PDF inside Android brow

Post by MaxV » Fri Feb 10, 2017 1:58 pm

Your idea of PDF.js and the brorser widget works! I'll post a solution soon! :D
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: New approach for offline viewing PDF inside Android brow

Post by MaxV » Fri Feb 10, 2017 6:06 pm

Here my first experiment with PDF.js:

Image
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: New approach for offline viewing PDF inside Android brow

Post by MaxV » Fri Feb 10, 2017 6:20 pm

--allow-file-access-from-files
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

kroka
Posts: 52
Joined: Fri Sep 28, 2007 10:20 am
Location: Berlin, Germany
Contact:

Re: New approach for offline viewing PDF inside Android brow

Post by kroka » Mon Feb 13, 2017 4:14 pm

Hi MaxV,

not bad. Do you have any example source code (JavaScript files) you could share?

If this approach is working generally it can solve a lot of problems.

Kroka

http://www.livecode-blog.de
"irgendwas is immer"

AndyP
Posts: 614
Joined: Wed Aug 27, 2008 12:57 pm
Location: Seeheim, Germany (ex UK)
Contact:

Re: New approach for offline viewing PDF inside Android brow

Post by AndyP » Tue Feb 14, 2017 8:02 am

Hi MaxV, well done.
This looks a very promising approach to the PDF problem.
Looking forward to seeing some code.
Andy Piddock
https://livecode1001.blogspot.com Built with LiveCode
https://github.com/AndyPiddock/TinyIDE Mini IDE alternative
https://github.com/AndyPiddock/Seth Editor color theming
http://livecodeshare.runrev.com/stack/897/ LiveCode-Multi-Search

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: New approach for offline viewing PDF inside Android brow

Post by MaxV » Tue Feb 14, 2017 1:10 pm

Hi,
I'm working about a problem with the livecode browser.
The livecode browser is now Chromium CEF ( https://bitbucket.org/chromiumembedded/cef ), and chrome (or chromium) must have a particolar option to read local files: --allow-file-access-from-files
Otherwise you get the following error:
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
So at the present the browser uses the local javascript files to create a local PDF reader, but this reader can't read local files, beacause the browser policies block it!!! :evil:
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

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

Re: New approach for offline viewing PDF inside Android brow

Post by capellan » Wed Feb 15, 2017 3:39 am

Hi All,

Looks like adding this particular option: -–allow-file-access-from-files
to browser CEF requires compilation from sources when building this DLL:

http://www.magpcss.org/ceforum/viewtopi ... =6&t=13630

Does browser CEF allows this option: --disable-web-security ???

Al

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: New approach for offline viewing PDF inside Android brow

Post by MaxV » Mon Feb 20, 2017 1:09 am

Hi,
I discovered that on Android Livecode uses the Android default browser (usually Chrome), so just unpack https://github.com/mozilla/pdf.js/relea ... 0-dist.zip somewhere and point widget URL property to the file viewer.html . User can select an display the PDF in your livecode app.
If you wont to display a PDF directly, change the file viewer.js: the line

Code: Select all

var DEFAULT_URL = 'path to myPdf.pdf';
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: New approach for offline viewing PDF inside Android brow

Post by MaxV » Fri Mar 24, 2017 1:18 am

Here is a screenshot:
Image

WOW!!!!

This is the code:
########CODE to copy and paste#######
on mouseUp
if the environment is "mobile" then
set the URL of widget 1 to (specialFolderPath("engine") & "/pdfjs/web/viewer.html")
else
set itemDel to "/"
set the defaultFolder to item 1 to -2 of (the effective fileName of this stack)
set the url of widget 1 to "file:///home/max/Scaricati/Livecode%20PDF/test.pdf"
end if
end mouseUp
#####END OF CODE generated by http://tinyurl.com/j8xf3xq with livecode 9.0.0-dp-5#####

Did you ever create a PDF reader with so few lines?
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

rmuzzini
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 63
Joined: Mon Oct 08, 2012 11:30 am

Re: New approach for offline viewing PDF inside Android brow

Post by rmuzzini » Wed Jun 14, 2017 3:41 pm

MaxV wrote:Here is a screenshot:

WOW!!!!

Did you ever create a PDF reader with so few lines?
intresting stuff.
and does it work on real devices too? i did some tests and it seems it does not…
?

regards.

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: New approach for offline viewing PDF inside Android brow

Post by MaxV » Fri Jun 16, 2017 12:59 pm

Does it load the first test page at least?
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

rmuzzini
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 63
Joined: Mon Oct 08, 2012 11:30 am

Re: New approach for offline viewing PDF inside Android brow

Post by rmuzzini » Mon Jun 19, 2017 8:43 am

oh, don't worry. after other few hours i managed to make my "livecode universal multiplatform pdf reader". :-)
the culprit was the minimun android version chosen when building the app (it was 4.1 during my first tests). if "2.3" is selected then the "XMLHttpRequest: Cross origin requests not supported for "file://"" is… well, supported. and, more over, i had to use the old way building my own browser (the widget seems to be not reliable, in my context).
but with your brillant suggestion about pdf.js + a mobile browser well set + android 2.3 it seems all working like a charme, on android, iphone, macOs… (not yet tested on windows by now)

oh, last thing, my contribution to this: a slight change to viewer.js.
if you set DEFAULT_URL as

Code: Select all

var DEFAULT_URL = decodeURIComponent((new RegExp("[?|&]filepath=" + "([^&;]+?)(&|#|;|$)").exec(location.search) || [, ""])[1].replace(/\+/g, "%20")) || null;
then you're able to pass the location of your pdf file by using this address format:

Code: Select all

<path-to-viewer-folder>/viewer.html?filepath=<path-to-your-local-or-remote-pdf-file>
instead of having it hard coded in the js file.
example:

Code: Select all

constant kBookName="/book.pdf"
constant kPDFPath = "/pdfjs/web"
local sBrowserID
on openCard
   if not(the tool contains "browse") then exit openCard
   switch the platform
      case "iphone"
      case "android"
         put specialFolderPath("Documents") & kBookName into tFilePath
         put "file://"&(getMediaPath() & kPDFPath & "/viewer.html?filepath="&tFilePath) into theURL
         replace SPACE with "%20" in theURL
         openMobileBrowser theURL
         break
[…]
regards.

jim1001
Posts: 143
Joined: Fri Jan 29, 2016 6:25 pm

Re: New approach for offline viewing PDF inside Android brow

Post by jim1001 » Mon Sep 04, 2017 1:41 am

I'd be grateful for any answers to some basic questions about this solution.
  1. Does this allow for PDF viewing inside a LiveCode app or does it jump out of the LiveCode app?
  2. Does it use the following LiveCode?

    Code: Select all

    mobileControlCreate “browser”
  3. Will it work with LiveCode Community current stable release (8.1.6)?

    ...and now having had a quick look at the LiveCode Dictionary for widget
  4. What is the list of all things you need to do for the solution? eg. do you have to build your own widget from a Builder extension? (something I know nothing about)
  5. Assuming widgets are important in all this, where is the best place to find out more about them in general (including their URL property)?
Thanks!

Post Reply

Return to “Android Deployment”