Displaying / Accessing Files (e.g PDF) in AR Application

[drieder]

Hello everyone,

is it possible to provide any files to an AR-Application?

The scenario is as following:

A user that scans the QR-Code of a device can see the current Properties and use the Services of the device but also view a PDF containing the Documentation of the Device or e.g Safety Instructions.

Because of that I want the user to be able to access any documents related to a device via the AR-Application. Is that possible in any way?

I am aware that you can "Store" the textual information in a String Property and simply provide this property. But as you can imagine some Documentations or manuals contain a lot of text and/or images and It would be quite a pain to express that information the same way in a property.

Any thoughts on this are appreciated very much.

Best Regards,

Dominik

[RolandRaytchev · Accepted solution]

Hi @drieder,

According your quesiton I want to share some info (it was a quesiton to PTC developement team)

Question:

"PDF file is not fixed and hence cannot be converted to some other format for viewing. Tried using iframes to display the pdf file but it shows only first page on iPhone. Not tried with Android devices as yet.

I have placed the iframe inside a div which makes it scrollable. It works fine in preview but shows only first page on iPhone

Sample javascript code to launch the popover with iframe is as below -

function createPdfTemplate(title, fattach_loc) {
    return '<ion-popover-view class="popover-supportingdocs-class"> \
  <ion-header-bar> \
  <h1 class="title">' + title + '</h1> \
  <button ng-click="popoverDocsPdf0.hide();" class="button button-icon icon ion-close-circled popover-supportingdocs-close-class"></button> \
  </ion-header-bar> \
  <ion-content class="popover-supportingdocs-content-class" scroll="false"> \
  <div class="responsive-wrapper-class"> \
  <iframe src="' + fattach_loc + '"></iframe> \
  </div> \
  </ion-content> \
  </ion-popover-view>';
  };

  var docsPdfTemplate0 = createPdfTemplate('test2.pdf', 'app/resources/Uploaded/test2.pdf');
  $scope.popoverDocsPdf0 = $ionicPopover.fromTemplate(docsPdfTemplate0, {
    scope: $scope
  });
  $scope.popoverDocsPdf0.show();


CSS -
.responsive-wrapper-class {
  position: relative;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  height:100%;
}

.responsive-wrapper-class img,
.responsive-wrapper-class object,
.responsive-wrapper-class iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: none;
  padding: 0;
  margin: 0;
}

.popover-supportingdocs-close-class {
  color: #70AC32 !important;
  padding: 0px !important;
}

.popover-supportingdocs-class {
  position: fixed;
  height: 100%;
  width: 100%;
  opacity: 1;
  top: 0;
  left: 0;
  margin-top: 0;
  margin-left: 0;
}

.popover-supportingdocs-content-class {
  .scroll {
    height: 100%;
  }
}

END of question part"

>>  So according this quesion we see that the display of PDF is possible in popover but there seems currently to be an issue so that only the first page could be displayed - so means you can use this solution for documents having only one page or you can use it  on other platforms (not on IOS - so belive the issue does not exist on Android) 

So here the suggestion of the PTC developement:

==========================

Looks like iOS has a limitation showing PDF in a iframe or embed tag to showing the first page as an Image.

A solution could be to download the PDF file and let the native app for PDF show it.  There appears a link in the top-left to go back to the View experience when done looking at the file.

There is a new widget coming to allow downloading resources such as pdf to view.  

What you could do is try setting the window.location.href to be the url to the pdf to test it out.  Try this code:

/

/ Creating an anchor element to fully qualify the URL 

  var anchor = document.createElement('a');
  anchor.href = 'app/resources/Uploaded/< filename >';
  window.location.href = anchor.href;

[drieder]

Hello @RolandRaytchev ,

thank you for your detailed reply, I will try the downloading solution.

In our case it is not that important to display the pdf inside the App itself but rather to get access to the file in any way. So simply downloading it via a link is probably the simples / most elegant solution.

Best Regards,

Dominik

[AS_10340651]

"[...] There is a new widget coming to allow downloading resources such as pdf to view.[...]"

I can't find this widget.

Seems like its still in the "coming soon" status. Can you push it to the "realeased" status. I mean 4 should be a good time to release...