Skip to content

Instantly share code, notes, and snippets.

@cecilemuller

cecilemuller/index.html

Created November 11, 2011 12:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cecilemuller/1357850 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cecilemuller/1357850 to your computer and use it in GitHub Desktop.
Download ZIP
Getting started with BS Contact iOS
Raw
readme.md

First:

  • You need a webserver to host the 3D contents, index.html, styles.css and script.js files. You could use a local server (such as WampServer) or rent an online web host (such as MediaTemple).

  • Edit index.html to change the list of links. Note that you must link directly to the .wrl file, you can't view a scene embedded in an HTML page with BS Contact iOS.

On iOS:

  • install BS Contact iOS on your iPad/iPhone

  • using Safari Mobile, go the index.html page

  • clicking any of the links should open the viewer

Raw
index.html
<!DOCTYPE>
<html>
<head>
<title>3D Demos</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<link rel="apple-touch-icon" href="icon.png" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<h1>3D demos</h1>
<ul>
<!-- Example links to scenes -->
<li><a href="example/example.wrl">Example Scene (relative path)</a></li>
<li><a href="/myfolder/example/example.x3d">Example Scene (relative path from the root)</a></li>
<li><a href="//1.2.3.4/myfolder/example/example.wrl">Example Scene (absolute path regardless of protocol)</a></li>
<li><a href="http://1.2.3.4/myfolder/example/example.wrl">Example Scene (absolute path)</a></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
/**
* Adds "bscontact:" for all VRML links if the page is viewed on iOS.
*/
var ios = navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad)/);
if (ios) {
var host = 'bscontact:' + location.protocol + '//' + location.hostname;
var path = location.pathname.substring(0, location.pathname.lastIndexOf('/'));
$('a[href$=".wrl"], a[href$=".wrz"], a[href$=".x3d"], a[href$=".x3dv"]').each(function(){
var link = $(this);
var href = link.attr("href");
if (href.substring(0, 1) == '/') link.attr("href", host + href);
else if ((href.substring(0, 7) == 'http://') || (href.substring(0, 8) == 'https://')) link.attr("href", 'bscontact:' + href);
else link.attr("href", host + path + '/' + href);
});
}
Raw
styles.css
body {
font-family: sans-serif;
background: #FAFAFA;
padding: 20px
}
ul {
padding: 0;
margin: 0 0 40px
}
li {
color: #9FC1DD;
}
a {
display: block;
border: 1px solid #CCCCCC;
border-radius: 8px 8px 8px 8px;
box-shadow: 0 0 6px #CCCCCC;
margin: 15px 0;
padding: 10px;
color: #3399FF;
background-color: #FFFFFF;
text-decoration: none;
font-weight: bold;
-webkit-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
a:hover {
color: #FFFFFF;;
background-color: #3399FF;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment