I want to know how can I load two or more babylon files in one html page or if its possible to join them.
I have the following code which its good to see one simple model (exported) but I need add more exported models in the same html page. I heard about a "options.babylonFolder + "/", options.babylonFile" option but I dont know more than that.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using babylon.js - How to load a scene</title>
<script type="text/javascript" src="./103A_files/hand.js"></script>
<script type="text/javascript" src="./103A_files/cannon.js"></script>
<script type="text/javascript" src="./103A_files/babylon.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#renderCanvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
if (BABYLON.Engine.isSupported()) {
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
BABYLON.SceneLoader.Load("", "101A.babylon", engine, function (newScene) {
//BABYLON.SceneLoader.Load(options.babylonFolder + "./GrupoBabylon", options.babylonFile, engine, function (newScene) {
newScene.executeWhenReady(function () {
// Attach camera to canvas inputs
newScene.activeCamera.attachControl(canvas);
// Once the scene is loaded, just register a render loop to render it
engine.runRenderLoop(function() {
newScene.render();
});
});
}, function (progress) {
// To do: give progress feedback to user
});
}
</script>
You can use BABYLON.SceneLoader.Append to merge a new scene with the current one
Related
I want to add a map in my html website where by default user current location will be shown on the map. But user can adjust its location on map.
Here is the code :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Locate the user</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicmVldDA3IiwiYSI6ImNrZnhwd2k4NTJxcjIyeXBhdmlhZXViMGkifQ.RpDVVS8IaoOn3srMpLmS8w';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11',
center: [-96, 37.8], // starting position
zoom: 3 // starting zoom
});
// Add geolocate control to the map.
map.addControl(
new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
})
);
</script>
</body>
</html>
I am getting my current location through it. But I am not finding how to adjust our location on this.
Here is a guide by Business Insider: I find it beneficial for embedding Google Maps into an HTML5 website.
https://www.businessinsider.com/how-to-embed-google-map
It tells you the easy way to do it, without adding script. You should be able to do all of the things that you are trying to do with the IFRAME tag for embedding the map.
I am creating a simple web page that displays text from a text input, and I want to make the text input to take up the whole displayed web page (without the browser bar), the 100vh technique includes the browser bar and I do not want to guess the top bar size
Here is my code:
function focus() { // to easily focus an element
document.getElementById("title").focus();
}
document.addEventListener('click', function (event) { // make sure the user's focus is stuck to the text input
if (event.target !== document.getElementById("title")) {
document.getElementById("title").focus();
}
}, false);
window.onload = function () {document.getElementById("title").focus();};
function apply() { // applies title
setTimeout(function () {
var str = document.getElementById("title").value;
if (!str.replace(/\s/g, '').length) {
document.title = "title-text";
} else {
document.title = str;
}
},1);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title-text</title>
</head>
<body>
<input type="text" id="title" onkeypress="apply()" autocomplete="off">
</body>
</html>
(the JS binds the focus to the text box)
Use the following css classes to achieve this.
body{
margin:0;
overflow:hidden;
}
#title{
height: 100vh;
width:100vw;
}
I've got a test page with the following line of HTML5 Media Capture code (and nothing else other than a form submit button):
<input type=file accept=image/* id=capture capture=camera>
On an iPhone 4s with ios 8.1.2 the code only works sometimes. It launches the Take Photo/Photo Library dialog successfully, but it does not reliably accept a new photo image (from the phone camera) for upload. More often than not Safari displays an error message 'something has gone wrong with this page and it has been re-loaded'. Generally, if I clear the cache, close Safari and re-launch, it works again, once or twice, and then fails. Once it has failed, it doesn't seem ever to succeed again without re-launching.
It's not clear if this is a buffer issue, or is even related to the file size of the new photo, but given that it does work sometimes, it doesn't appear to be an error in the code or an incompatibility with the OS/browser.
Anyone experience anything similar? Any suggestions how to make this work?
Thanks
The Problem:
I found out the reason for this happening in Safari/iOS is that the main page seems to be "throttled" somehow which means that if the page is a bit heavy CPU/GPU and/or (?) memory wise the <input capture="camera" ...> fails randomly most of the times.
A solution:
My solution on this was to place the <input capture="camera" ...> inside of an <iframe>, sized to fit the input seamlessly. This works because each frame is running in its own process, yet on lower priority than main frame but enough to not be a problem here. It works 100% of the time for me now even in a pretty heavy UI app using a lot of GPU.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#camera-button {
display: inline-block;
width: 100px;
height: 100px;
background: red;
border: 5px solid #eee;
padding: 10px;
z-index: 2147483647;
}
#camera-frame {
width: 100px;
height: 100px;
background-color: transparent;
opacity: 0;
}
</style>
</head>
<body>
<span id="camera">
<iframe id="camera-frame" src="camera.html" scrolling="no" frameBorder="0" allowTransparency="true" seamless>
</span>
<script>
(function() {
window.onCameraChanged = function(event) {
var files;
console.log("[index.html]: snap!", arguments);
if (event.target) {
files = event.target.files;
console.log("[index.html]: files", files);
alert("[index.html]:", files.length, "files from camera.");
}
};
}).call(this);
</script>
</body>
</html>
camera.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#camera-input {
display: block;
width: 100%;
height: 100%;
position: absolute;
outline: none;
box-shadow: none;
border: none;
}
</style>
</head>
<body>
<input id="camera-input" type="file" capture="camera" accept="image/*" onchange="window.onCameraChanged">
<script>
(function() {
var el;
window.onCameraChanged = function(event) {
var files;
console.log("[camera.html]: snap!", arguments);
if (event.target) {
files = event.target.files;
if (window.parent) {
if (typeof window.parent.onCameraChanged === 'function') {
window.parent.onCameraChanged(event);
}
return window.parent.cameraFiles = files;
}
}
if (el = document.querySelector('#camera')) {
el.onchange = window.onCameraChanged; // chrome
}
}).call(this);
</script>
</body>
</html>
Something like that.
I will offer this as a tentative solution insomuch as it has not yet failed, but I'm not sure why it's required. When clicking the button to capture an image, the first thing I do now is this:
$('#capture').val('');
That clears the form before adding a new image. I tried reset(), but that didn't work. It would appear therefore that there is an issue with changing the image in the form once it has been added - it needs to be removed first, not simply overwritten.
My HTML:
<html>
<head>
<link rel="stylesheet" href="C:\Users\coeconsultant3\Desktop\Loadingexample\abccss.css">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$("#loader").fadeOut("slow");
})
</script>
</head>
<body>
<div id="loader"></div>
<div id="page1">
<p>
<h1>Hello World !!!
</h1>
</p>
</div>
</body>
</html>
CSS for loader :
#loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('C:/Users/coeconsultant3/Desktop/Loadingexample/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
I have used script which does different behaviour:
When I use div id = loader, it shows directly the hello world.
When I use div class = loader, it just shows loading gif image and does not go through the page.
I want to know the error for this program
Your code works perfectly fine. And for information $(document).ready() is better to use.
The way you've linked your CSS, I assume you're directly opening the HTML file, i.e. by double clicking on the file (correct me if I'm wrong). If this is the case then you've to correct your jQuery linking to:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Two problems with your both scenarios :
Problem 1 : When you apply class="loader" :
Here the problem is that when you use class="loader" your css applies to the div. and in javascript you are using $("#loader") instead of $(".loader")
Problem 2 : When you apply id="loader" :
Here the problem is that you remove the class="loader" and add id="loader" so your css will not be applied to the div.
Solution :
Update your div with class as mentioned below :
<div id="divloader" class="loader"></div>
Update your javascript as mentioned below :
<script type="text/javascript">
$(window).load(function () {
$("#divloader").fadeOut("slow");
})
</script>
problem: you are missing a semicolon ; at the end of the function
change to
$(window).load(function () {
$("#loader").fadeOut("slow");
});
and add this too
$(document).ready(function(){
$("#page1").fadeIn(3000)
});
don't forget to give style="display:none;" for div page1
Hope it helps..!!
Instead of
$(window).load(function () {
//your code
});
use
$(document).ready(function(){
//your code
});
This gives the fadeIn effect you wish to have:
$(document).ready(function(){
$('body').css('display', 'none');
$("body").fadeIn("slow");
});
And here's a Fiddle.
Hope this helps!
Try this:
HTML:
<div id="dvLoading"></div>
CSS:
#dvLoading
{
background:#000 url(images/loader.gif) no-repeat center center;
height: 100px;
width: 100px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
}
SCRIPT:
<script>
$(window).load(function(){
$('#dvLoading').fadeOut(2000);
});
</script>
Here is a reference and demo.
I want to create Web pages that allow users to drag and drop images into boxes in various parts of the page, so that they can then print the pages with their images.
I want the image to automatically resize when it's dropped in the box. I combined some of the code at http://html5demos.com/file-api with some of the code at http://html5demos.com/file-api-simple to get something like I want.
In the current version of the code (below), the image width does not resize the first time you drop the image into the box, but it does the second time.
Any suggestions how I can get the image width to resize automatically the first time you drop the image into the box?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>HTML5 Test</title>
</head>
<body>
<header>
<h1>HTML5 Test 1</h1>
</header>
<style>
#holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #333; }
</style>
<article>
<div id="holder"></div>
<p id="status">File API & FileReader API not supported</p>
<p>Drag an image from your desktop on to the drop zone above to see the browser read the contents of the file - without uploading the file to any servers.</p>
</article>
<script>
var holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'File API & FileReader available';
}
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.stopPropagation();
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
var img = new Image();
img.src = event.target.result;
// note: no onload required since we've got the dataurl...I think! :)
if (img.width > 300) { // holder width
img.width = 300;
}
holder.innerHTML = '';
holder.appendChild(img);
};
reader.readAsDataURL(file);
return false;
};
</script>
</body>
</html>
I found a simple answer that I think works really well for my needs, based on a bit of CSS in http://demos.hacks.mozilla.org/openweb/DnD/dropbox.css used for http://demos.hacks.mozilla.org/openweb/DnD/.
In the code I included in my question above, I added this to the CSS code:
#holder > * {
display: block;
margin: auto;
max-width: 300px;
max-height: 300px;
}
and I deleted this:
if (img.width > 300) { // holder width
img.width = 300;
}