When I click the AR quick look icon on my website it doesn’t show the 3d model and I get the message “object could not be opened”. The USDZ is currently hosted in a google bucket. Could the problem be with the way im hosting the USDZ? If so is there a recommend place for me to host USDZ files?
I'm posting this answer here since this question is the first Google result for the problem I had:
When referencing the usdz file exactly like Apple's documentation proposes, the AR button is rendered on top of the teaser image. When clicking the linked image, Safari opens the Quick Look screen, but the message "Object could not be opened." pops up. However, when I access the usdz file directly by its URL, the AR model does get rendered properly.
The problem was that the complete site was protected by HTTP Basic Auth configured with an .htaccess file. Apparently, Safari will not use the existing session to access the usdz file and thus the file cannot be loaded.
In my case, it helped to remove the HTTP Basic Auth protection from the site. As soon as the site was publicly accessible, the AR model could be loaded without any problems.
Hosting the USDZ file in a Google Storage bucket should work just fine, as long as the permissions on the bucket are set correctly so you can access the file. Safari will display the "Object could not be opened" message if there is any reason for not being able to open the USDZ file, and I haven't found a way to easily get more details than that.
Have you tried accessing the USDZ file url directly from Safari? It should show as zip file in the browser if the link, permissions, etc. is all correct.
Also, make sure that there isn't an issue with the USDZ file itself by downloading the USDZ file using the URL on a Mac and making sure that the file displays as expected in Quick Look in Finder.
If you can share some more details of what your code looks like and what you have tried it would be helpful. The minimal code that I used for testing is below and it works fine in Google Storage.
<html>
<body>
<a href="example.usdz" rel="ar">
<img src="example.png"/>
</a>
</body>
</html>
Embed a link to USDZ Files for direct AR-scenes usage.
Here's a code for multiple usdz files:
<html>
<head>
<meta charset="utf-8">
<title>Augmented Reality</title>
</head>
<body>
<div>
<a href="yourDirectory/ar_pixar_file_01.usdz" rel="ar">
<img src="ar_image_01.png" alt="AR Image" width="360" height="240">
</a>
<a href="yourDirectory/ar_pixar_file_02.usdz" rel="ar">
<img src="ar_image_02.png" alt="AR Image" width="360" height="240">
</a>
<a href="yourDirectory/ar_pixar_file_03.usdz" rel="ar">
<img src="ar_image_03.png" alt="AR Image" width="360" height="240">
</a>
</div>
</body>
</html>
The most important part of this code snippet is rel="ar" attribute, indicating that the link attached to the image is referring to content usable with the iOS AR-Viewer.
Related
I am trying to link my home page to various other pages using the code below.
<a href = “./My Website.html”>Home</a>
<a href = “./Career.html”>Career</a>
However when I run this and I hit the hyperlink to navigate to the page Career for example, I receive the following error:
Safari can not find the file
file:///Users/Documents/HTML/der/“./Career.htmlâ€%C2%9D
I am using the free in built text editor to write the HTML on my macbook, and the to files are stored in the same folder
How do I resolve this so that my hyperlinks link to the correct file, and not add in the special characters?
It might be worth noting that when I go in to the address bar and manually remove the '“./' and 'â€%C2%9D' and refresh, my page will load as expected.
Thanks
Try and see if this works:
<a href='/MyWebsite'>Home</a>
<a href='/Career'>Career</a>
Do you have a screenshot of your directory?
I have given a source in a Iframe tag, my is issue is that when the page loads on IE the download begins automatically and it generally happens on IE installed on windows 8.
<div> <iframe src="../../Images/Sample.pdf" width="800px" height="800px" ></iframe> </div>
It's downloaded probably because there is not Adobe Reader plug-in
installed. In this case IE (it doesn't matter which version) doesn't
know how to render it and it'll simply download file (Chrome, for
example, has its own embedded PDF renderer).
That said. is not best way to display a PDF (do not forget
compatibility with mobile browsers, for example Safari). Some browsers
will always open that file inside an external application (or in
another browser window). Best and most compatible way I found is a
little bit tricky but works on all browsers I tried (even pretty
outdated):
Keep your but do not display a PDF inside it, it'll be filled
with an HTML page that consists of an tag. Create an HTML
wrapping page for your PDF, it should look like this:
<html>
<body>
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>
</body>
</html>
Of course you still need the appropriate plug-in installed in the
browser. Also take a look to this post if you need to support Safari
on mobile devices.
1st. Why nesting inside ? You'll find answer here on
SO. Instead of nested tag you may even provide a custom
message for your users (or a built-in viewer, see next paragraph).
2nd. Why an HTML page? So you can provide a fallback if PDF viewer
isn't supported. Internal viewer, plain HTML error messages/options
and so on...
It's tricky to check PDF support so you may provide an alternate
viewer for your customers, take a look to PDF.JS project, it's pretty
good but rendering quality - for desktop browsers - isn't as good as a
native PDF renderer (I didn't see any difference in mobile browsers
because of screen size, I suppose).
See also: HTML embedded PDF iframe
I have this code in an Index.cshtml file:
#{ViewBag.Title = "Home";}
<link href="Home.css" rel="stylesheet" type="text/css"/>
<img id="logo" src="~/Content/Images/Logo.png" />
This file is a view in my ASP.NET MVC4 application.
When I run the web application, I can see that the source code adds the appropriate HTML around this, and also adds a reference to the 'Content\Site.css' file.
However, neither the Site.css file nor my own Home.css CSS file appear to be used when running the application. First of all, any edits I make to Site.css aren't reflected when I view source when running the application, which is weird. I have saved everything and built the project before running it and checking out the source code through my browser.
Second of all, the CSS link to Home.css (which is in the same folder as my view) does not appear to be used. The HTML editor doesn't have a problem with the file, and so indicates that the path is valid - but when I click on Home.css in my the source code editor on my browser, I get a 404 error, saying that the file doesn't exist.
Any idea on what I am doing wrong here?
The actual image I am using here loads correctly.
the CSS link to Home.css (which is in the same folder
as my view) does not appear to be used.
The Views folder is restricted direct access to from the clients. So you should not be putting any CSS, javascript or images files inside it. They should reside in your ~/Content folder (or some other folder which is accessible from the clients). And then reference it like this:
<link href="~/Content/Home.css" rel="stylesheet" type="text/css"/>
As far as your first problem about ~/Content/Site.css is concerned, the stylesheet might be cached by the browser. Try clearing the cache. If you are running your application in Release mode and enabled Bundles, ASP.NET MVC 4 will automatically emit a cache response header so that the static resources included in the bundle get cached in the browser.
you also could use #url.content() helper method to convert your relative path to absolute. It's extremely useful when you will implementing website with multiple areas and also it's the common style to set path to the content in MVC so it's better does it this way
css belongs in the head - i can't stand .net
It also needs to NOT have the closing /> at the end of the tag - it messes things up. XHTML proper, but not everyone understands it. Unclose the link tag and try...
Use ~/ before your file statement for example:
<img src="~/images/team-image3.jpg" class="img-responsive" alt="">
instead of
<img src="images/team-image3.jpg" class="img-responsive" alt=""> etc...
We have a web application which allows users to view SVGs. These SVGs usually contain images which are loaded using a relative url. As we want this to be an iPad 'web app' we also want it to be added to the iPad user's homescreen and for it to be cached by the HTML 5 application cache so the user can view these SVGs and associated images offline.
When our application is loaded from the iPad home page icon, the application cache manifest is read correctly and all of the referenced resources are cached. The issue occurs when the user starts to use the application offline. During the use of the application, SVGs are added and removed from the page DOM. During this, some of the images in the SVG fail to be loaded from the application cache, even though they are definitely present and cached. Instead, a request for the image is made to the server, which obviously fails because the user is no longer online.
Interestingly enough, this issue doesn't seem to occur when navigating to a page in safari on the iPad. It seems to be specific to the full page web app view, although I can't guarantee it.
I can reproduce this quite easily using this HTML page:
<!DOCTYPE html>
<html manifest="testfiles.manifest">
<head>
<title>Test</title>
<script src="Javascript/jquery-1.7.1.js" type="text/javascript"></script>
<!-- Remove the browser chrome when the page is loaded from a homescreen icon -->
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<h1>Simple SVG caching test</h1>
<h2>Basket ball SVG</h2>
<p>
<span id="remove">Remove</span> | <span id="add">Add</span>
</p>
<p>
<span id="show">Show</span> | <span id="hide">Hide</span>
</p>
<p>
<span id="reload">Reload</span>
</p>
<embed width='360' height='510' src='TestFiles/Basketball.svg' />
<script type="text/javascript">
$(function ()
{
$("#remove").click(function ()
{
$("embed").remove();
});
$("#add").click(function ()
{
$("<embed width='360' height='510' src='TestFiles/Basketball.svg' />").appendTo("body");
});
$("#show").click(function ()
{
$("embed").show();
});
$("#hide").click(function ()
{
$("embed").hide();
});
$("#reload").click(function ()
{
location.reload(true);
});
})
</script>
</body>
</html>
This SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="340"
height="340">
<image
width="340"
height="340"
xlink:href="Basketball.png"
x="0"
y="0" />
</svg>
This image which is referenced by the SVG:
And this manifest file:
CACHE MANIFEST
CACHE:
TestFiles/Basketball.svg
TestFiles/Basketball.png
Javascript/jquery-1.7.1.js
And by following these steps:
Open safari and navigate to the location of the reproduction html file (we host it on a Windows 2008 / IIS server)
Add the page to the home screen using the 'Add to Home Screen' button.
Close safari and clean out the safari cache
Load the page from the newly added bookmark
Wait until the page is completely cached. Usually about 5-10 secs, but you could attach to some application cache events to log out progress is desired.
Turn off wifi (or what ever means of connection you use)
Load the page from the newly added bookmark
Notice that the page looks correctly cached. Use the add and remove buttons. You should notice fairly quickly that when you add using the 'add' button on the page. The image resource in the SVG isn't always loaded from the application cache, even though it's clearly cached.
When the issue occurs, you should see something like the screen shot below
I've already checked some obvious things:
Application cache manifest has the correct mime type
Manifest is downloaded
Resources referenced in the manifest are cached correctly
My questions are:
Does anyone know why this happens?
Are there any workarounds to this issue?
I've logged this as a bug with apple, so I'll update this question with any feedback I may get from them!
Thanks!
Andy.
Just a small "head's up!" if you're pondering this issue, as I was until an hour ago...:
The manifest file is case-sensitive.
I have a website designed for use on both the desktop, tablets and smartphones. On Android (4.0.3) I noticed that after enabling the HTML 5 App Cache, my SVG icons started to fail, just as in your case above. They appear as broken links, when the user refreshes the page (and the icons are attempted fetched from the cache).
I had written a letter in the folder name to my SVG icons in the wrong case, and fixing this immediately fixed the issue.
In rails is there anything available that if a user uploads a document to me through paperclip (like maybe a .doc or .pdf or .odf, etc.) That i can embed there document into my page (Like perhaps is there some sort of gem available to handle that
I found a solution to the pdf part of my problem.
theres a simple html line that solves this
<iframe src="thispdf.pdf" style="width:718px; height:700px;" frameborder="0"></iframe>
I've tried the same with .odt, but this just downloads the file (maybe this was more of an html problem than rails) -- note i only tested this in chrome
By embed do you mean display? There's no native way to display any of those documents in html, so you will have to either somehow convert them to html or use another layer, like flash or a third-party tool, to do the embedding for you.
Maybe one of the embed.ly providers can give a nice display for your documents.
I used the following code to make mine work in the view (with the example object #person) using the most current (as of 2013) Google Docs embedded pdf code specifications:
<iframe src="https://docs.google.com/viewer?url=http://www.mysite.com/<%= #person.pdf.url %>&embedded=true"
width="100%" height="800" frameborder="0" >
<p>Your browser does not support iframes.</p>
</iframe>