I am trying to build a demo of model-viewer using a simple box object. It works fine on iOS/Safari, but I am unable to get this to work on Android. On Android, it will not activate the camera, just shows the model in blank space, the model can be moved around. I have tried using multiple models, including ones I have pulled from the internet, that are in working demos. Here is the complete HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#2.1.3/webcomponents-loader.js"></script>
<script src="https://unpkg.com/intersection-observer#0.5.1/intersection-observer.js"></script>
<script src="https://unpkg.com/resize-observer-polyfill#1.5.0/dist/ResizeObserver.js"></script>
<script src="https://unpkg.com/fullscreen-polyfill#1.0.2/dist/fullscreen.polyfill.js"></script>
<script src="https://unpkg.com/#magicleap/prismatic/prismatic.min.js"></script>
<script src="https://unpkg.com/focus-visible#5.0.2/dist/focus-visible.js" defer></script>
<title>Model Viewer Demo</title>
</head>
<body>
<h1>WebAR Demo</h1>
<p>A Basic demo of WebAR using Google's model-viewer component.</p>
<div id="card">
<model-viewer alt="its just a box"
src="assets/BoxTest.glb"
ios-src="assets/BoxTest.usdz"
background-color="#afe"
shadow-intensity="1"
camera-controls
interaction-prompt="auto"
ar
quick-look-browsers="safari chrome">
</model-viewer>
</div>
<script type="module" src="https://unpkg.com/#google/model-viewer#v0.6.2/dist/model-viewer.js">
</script>
<script nomodule src="https://unpkg.com/#google/model-viewer#v0.6.2/dist/model-viewer-legacy.js">
</script>
</body>
</html>
I am at a complete loss as to why it doesn't work and to what I need to try next.
Turns out I was using simpleHTTPServer to serve it and it for some reason was the cause of the issue. I assume it didn't support the MIME type for the gltf file.
Related
I am using JSP to create a webpage. I have linked the css file to the jsp page with <link rel="stylesheet" href="css/style_mobile.css" type="text/css">, which is the exact path of the file.
Google Chrome's inspect:
The content of <head> tag in my .jsp file:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="css/ratchet.css" type="text/css">
<link rel="stylesheet" href="css/style_mobile.css" type="text/css">
<link rel="stylesheet" href="css/tablesaw.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/fusioncharts-suite-xt/js/fusioncharts.js"></script>
<script type="text/javascript" src="js/tablesaw.js"></script>
<script type="text/javascript" src="js/tablesaw-init.js"></script>
<title>Mobile</title>
</head>
CSS files:
ratches.css
style_mobile.css
tablesaw.css
The webpage just does not load the css content. Please help.
On your developer tool go to -> Network tab. And Select -> CSS. Reload the page. You will see the list of css files included on your DOM along with its status. From here you can from where the files are loading. If not loading you will find them as red marked with 404 status.
You have to make sure the relative path you used and the directory of the css files are same location.
Well, I solve my problem with inline css, although this is not the best solution.
I have already an exsisting html file which use another librairies and stuff, I want to use in my new ionic application.
So I would like to use it as an ion-view. so I would like to know if it would be possible to include an html file in the ion-view ? which look like :
<ion-view>
<io-content>
</ion-view>
</ion-content>
this is the existing HMTL file where I use different libraries and css file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./assets/js/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/ofc.css" rel="stylesheet" type="text/css" />
<script src="./assets/js/jquery-1.7.1.min.js"></script>
<script src="./assets/js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="pouchdb-3.4.0.min.js"> </script>
<script type="text/javascript" src="blob-util.min.js"> </script>
<script type="text/javascript" src="moment.js"> </script>
<script src="properties.js"> </script>
</head>
<body>
<div data-role="page" id="p1">
</div>
<script src="core.js"></script>
</body>
</html>
Why would you do this? I believe this question comes from a problem you haven't described yet.
Normally all libraries used in an Ionic app are included in the index.html and not within each <ion-view> or <ion-content>. In these Ionic directives you only load the HTML needed for that view.
I suggest you start reading from the beginning:
Getting Started with Ionic
Ionic documentation
CodePen examples Ionic
I am new for jQuery mobile. My project consist of 30 screen++. So I separate my screen to each single html. But now i facing one issues , because i need to include cordova.js to my project. So did i need to include cordova.js to all html ? It tat any better solution? It quite take time to me for include cordova.js to 30++ html.
Code
<head>
<meta charset="utf-8">
<title>Smart Realtor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/smartrealtor-theme.css" />
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<script src="js/jquery.js"></script>
<script src="js/globalsetting.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<script src="cordova.js"></script>
<script src="Calendar.js"></script>
<script src="js/jquery.mobile.fastButtons.js"></script>
</head>
JQuery Mobile provides a JQuery mobile "page". These pages can be included in the same file but can also be loaded from separate files
If you use JQuery mobile pages you will only have to include dependencies on your main page rather than all of the sub pages. Please read the Page Documentation
I use Pure CSS to make my website responsive, but when this site runs on my own computer, it looks fine:
But after I uploaded it to my remote server, it's like too far from right border of the window:
I've debugged the site on both servers with iPhone Safari remote debugger, I'm sure every CSS and Javascript source was loaded correctly. Here's my index.html page:
<!doctype html>
<html lang="en" ng-app="martianblog">
<head>
<title>{{.Title}}|{{.Subtitle}}</title>
<meta name="viewport" content="width=device-width" initial-scale=1.0>
<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/pure/0.3.0/pure-min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/lib/notification.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/highlight.js/7.4/styles/monokai_sublime.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/custom.css">
</head>
<body>
<div notifications="bottom right"></div>
<div class="pure-u-1" ui-view></div>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/moment.js/2.4.0/moment.min.js"></script>
<script type="text/javascript" src="/static/js/lib/highlight.pack.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/marked/0.2.9/marked.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/angular.js/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="/static/js/lib/angular-sanitize.min.js"> </script>
<script type="text/javascript" src="http://cdn.staticfile.org/angular-ui-router/0.2.0/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/static/js/app.js"></script>
<script type="text/javascript" src="/static/js/controllers.js"></script>
<script type="text/javascript" src="/static/js/filters.js"></script>
<script type="text/javascript" src="/static/js/directives.js"></script>
<script type="text/javascript" src="/static/js/lib/notification.js"></script>
</body>
</html>
Here's my custom css file's link
My computer's system: Mac OS X Mavericks
My remote server's system: Ubuntu 12.04 GNU/Linux 3.2.0-24-virtual i686
Nginx version on my remote server: nginx/1.1.19
As others have mentioned, very difficult to suggest anything without at least a link to your css file(s).
Some things to check: html doctype declaration, browser cache, file encoding types, any fixed widths that may have been set in your CSS....... Perhaps you have uploaded a file that has a capital letter in its filename? May not be an issue locally, but could be an issue on your server.
edit: I have checked out your site and it looks full width to me, are you sure you have fully cleared your cache?
Your viewport is currently set to:
<meta name="viewport" content="width=device-width" initial-scale=1.0>
Perhaps this should be:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
my code was working fine and good. it calls javascript scripts on the html page which draws on the page and makes animations. now, what i have done now is to add the tag in order to play an audio clip automatically. the problem i have is that my animations stop drawing, but there is music playing in the background.
below is the index.html that i use to run on. it is the only html file in the project.
<!doctype html>
<html class="no-js" lang="en" manifest="./main.manifest">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> My Game </title>
<meta name="description" content="">
<meta name="author" content="SweetPotatoes">
<meta name = "viewport" content = "user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, width=device-width" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/game.css">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
</head>
<body>
<div id="container">
<canvas id="canvasSausage" display="block" ></canvas>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')
</script>
<!-- JavaScript at the bottom for fast page loading -->
<script src="js/libs/modernizr-2.0.6.min.js"></script>
<script src="js/libs/require.1.0.8.min.js"></script>
<script src="js/libs/Draw.js"></script>
<script src="js/libs/Smile.js"></script>
<script src="js/libs/UpDpwn.js"></script>
<script src="js/mylibs/SmellyCanvas/core/canvasMain.js"></script>
<!-- scripts concatenated and minified via ant build script-->
<script defer src="js/plugins.js"></script>
<script defer src="js/script.js"></script>
<!-- end scripts-->
<script>
window._gaq = [['_setAccount', 'UAXXXXXXXX1'], ['_trackPageview'], ['_trackPageLoadTime']];
Modernizr.load({
load : ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
<audio autoplay="true">
<source src="sound/Heart.mp3"></source>
audio tag not supported.
</audio>
</body>
</html>
my main.manifest
CACHE MANIFEST
# 2012-08-11
index.html
sound/Heart.mp3
Don't use manifest while you are developing.
Manifest is like browser-caching on steroids.
There are enough problems with making changes to external .js files and then having the browser not grab them, because you're using versions the browser saved from previous visits (when something was broken/different).
With a manifest, you're pretty much extending that caching ability to eternity, unless you're going to write scripts to manage the manifest.
In a word: don't.
Build what you're going to build, and when it's done -- at least, when it's at a 1.0 phase, or a good, solid, public-beta...
...then start thinking about caching files for eternity in the manifest.