In my code example I have an upload button and an x3d scene.
After choosing an x3d file from the local file system the method URL.createObjectURL is called.
The content of my html file looks like this:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Include an external X3D-File</title>
<script type='text/javascript' src='https://x3dom.org/download/dev/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='https://x3dom.org/download/dev/x3dom.css'/>
</head>
<body>
<input type="file" onchange="onFileChange(event)" accept=".x3d">
<x3d width='500px' height='400px'>
<scene id="scene">
</scene>
</x3d>
</body>
<script>
function onFileChange(event) {
var inline = document.createElement("Inline");
inline.setAttribute("nameSpaceName", "Inline");
inline.setAttribute("mapDEFToID", true);
var url = URL.createObjectURL(event.target.files[0]);
inline.setAttribute("url", url);
document.getElementById("scene").appendChild(inline);
console.log("ObjectURL: " + url);
}
</script>
</html>
An .x3d file could look like this:
<x3d width="500px" height="400px">
<scene>
<shape>
<appearance>
<material diffuseColor='red'></material>
</appearance>
<box></box>
</shape>
</scene>
</x3d>
I want to use the created object url for a new generated inline node but unfortunately the model is not showing up. Instead a loading circle stays at the upper left corner like in this
screenshot or in image below.
Did I overlook something or is there another way to load an x3d file into the browser and access it from the inline node?
Update:
In the meantime I've solved the problem by myself.
Which I did not think about was to use contentType='model/x3d+xml' with Inline because the blob url does not end with .x3d.
In the meantime I've solved the problem by myself. Which I did not think about was to use contentType='model/x3d+xml' with Inline because the blob url does not end with .x3d.
The final solution is now:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Include an external X3D-File</title>
<script type='text/javascript' src='https://x3dom.org/download/dev/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='https://x3dom.org/download/dev/x3dom.css'/>
</head>
<body>
<input type="file" onchange="onFileChange(event)" accept=".x3d">
<x3d width='500px' height='400px'>
<scene id="scene">
</scene>
</x3d>
</body>
<script>
function onFileChange(event) {
var inline = document.createElement("Inline");
inline.setAttribute("nameSpaceName", "Inline");
inline.setAttribute("mapDEFToID", true);
inline.setAttribute("contentType", "model/x3d+xml");
var url = URL.createObjectURL(event.target.files[0]);
inline.setAttribute("url", url);
document.getElementById("scene").appendChild(inline);
console.log("ObjectURL: " + url);
}
</script>
</html>
Related
When I use <Rectangle2D /> node, the rectangle did not display on canvas, and the debug console print a warning WARNING: Unrecognised X3D element <rectangle2d>.. I try it with Chrome 67 and Firefox 61, and my code is as follow:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>X3DOM page</title>
<script type='text/javascript' src='https://www.x3dom.org/download/x3dom.js'></script>
<link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/x3dom.css'></link>
</head>
<body>
<X3D width='500px' height='400px'>
<Scene>
<Shape>
<Appearance DEF='MagentaAppearance'>
<Material diffuseColor='0 1 0' />
</Appearance>
<Rectangle2D ccw='true' lit='true' size='7,7' solid='true'></Rectangle2D>
</Shape>
</Scene>
</X3D>
</body>
</html>
I found the problem, use x3dom-full.js instead of x3dom.js for the 2d geometries.
I am using google places API in my ionic/cordova, angular based mobile app in android platform.
I am able to get search results from text field value using API but when i select an option by simply clicking on one of search results, the text box remains empty.
But when I press and keep holding the search result option for 2-3 secs, that option is selected.
It seems weird to me but it is happening.
place_changed event is not getting triggered on quick tap.
I really dont know what can be the cause of this issue? I have tried Faskclick.js to eliminate 300 ms but that didnt work though I think this issue is not related to 300 ms delay.
My code:
function initialize() {
var autocomplete = new google.maps.places.Autocomplete(input, options);
};
Please help me out here.
I used ngMap and angular-google-places-autocomplete together in the following example.
Hope it helps.
angular.module('app', ['ionic', 'google.places', 'ngMap'])
.controller('MapCtrl', ['$scope', 'NgMap',
function ($scope, NgMap) {
$scope.location = null;
NgMap.getMap().then(function (map) {
console.log("getMap");
$scope.map = map;
});
$scope.$on('g-places-autocomplete:select', function(event, place) {
console.log('new location: ' + JSON.stringify(place));
$scope.data = {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng()
};
$scope.map.setCenter(place.geometry.location);
console.log($scope.data);
});
}
]);
.map {
width: 100%;
height: 500px !important;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="https://maps.google.com/maps/api/js?libraries=visualization,drawing,geometry,places"></script>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.js"></script>
<link href="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="MapCtrl">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic map</h1>
</ion-header-bar>
<ion-content class="has-header padding">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" g-places-autocomplete ng-model="location" placeholder="Insert address/location"/>
</label>
<button ng-click="location = ''" class="button ion-android-close input-button button-small" ng-show="location"></button>
</div>
<ng-map zoom="6" class="map">
<marker position="{{data.lat}}, {{data.lng}}"></marker>
</ng-map>
</ion-content>
</ion-pane>
</body>
</html>
I didnt find its solution but https://github.com/stephjang/placecomplete is a great plugin as work around :)
I am learning angular.. I tried to run a small example,but wasn't able to render correct output.Can anybody help?
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-app='app' ng-controller='MainController as main'>
<div class='container'>
<h1>{{ title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
</div>
</body>
</body>
</html>
app.js
angular.module('app', []);
angular.module('app').controller("MainController", function($scope){
$scope.title = 'AngularJS Nested Controller Example';
});
angular.module('app').controller("SubController", function(){
this.title = 'Sub-heading';
});
I am not able to figure out why angular variables are getting displayed as normal text instead of its assigned value. kindly help...
It looks like you are missing a link to your app.js file.
Just a tip when referencing your .js files, make sure you reference any javascript which uses Angular AFTER the line where you reference angular.js
So your references should look something like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script> <!-- this is the one you are missing -->
Please, plunkr
It works
<h1>{{main.title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
Im trying to get info from this API :
In my main.js file I have this controller which is requesting an http request:
(function(){
var app = angular.module('provider',['provider-movies']);
app.controller('ProviderController',['$http',function($http){
var provider = this;
provider.movies =[];
$http.get('/http://private-5d90c-kevinhiller.apiary-mock.com/angular_challenge/horror_movies').succes(function(data){
provider.movies = data;
});
}]);
})();
Then in my html I'm trying to print the title of the movie like this:
<div ng-controller="ProviderController as provider">
<p>{{provider.movies.title}}</p>
</div>
But when i load the file on the browser it just shows this:
{{provider.movies.title}}
Angular is installed and working, if I add {{'hello '+'you'}} it prints **hello you**
Any ideas on why is this not working ?
Also , my html looks like this:
<!doctype html>
<html ng-app="provider">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
<script src="bower_components/angular/angular.min.js"></script>
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div ng-controller="ProviderController as provider">
<p>{{provider.movies.title}}</p>
<p>{{'hello'}}</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
thanks!
You seem to have some typo and a missing closing parenthesis. If you looked at the console of your webbrowser you should definitely seen this.
Try this:
(function() {
var app = angular.module('provider', []);
app.controller('ProviderController', [ '$http', function($http) {
var provider = this;
provider.movies = [];
$http.get('http://private-5d90c-kevinhiller.apiary-mock.com/angular_challenge/horror_movies').success(function(data) {
provider.movies = data;
});
}]);
})();
Also in your markup the provider.movies is an array which doesn't contain a title property:
<div ng-controller="ProviderController as provider">
<p>{{provider.movies}}</p>
</div>
If you wanted to have the title you may consider looping through them:
<p ng-repeat="movie in provider.movies">
{{movie.title}}
</p>
And here's the working plunkr.
I am a newbie in this field and have been trying to work with the x3dom objects. The problem that I am now facing is how to display the attributes of the x3dom objects as a popup. I have seen the examples given in the x3dom website but have not found any relevant examples yet. I would be glad if anybody have some examples to share. Thank you in advance.
You could use the attributes property (e.g. document.getElementById("id").attributes), here's an example that shows a table of attributes when you click either buttons:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>X3DOM</title>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="container">
<X3D width="100%" height="300px">
<Scene>
<Shape id="myShape">
<Appearance>
<Material id="myMaterial" diffuseColor="0.6 0.6 0.6" specularColor="0.8 0.8 0.8" shininess="0.145" ambientIntensity="0.2" emissiveColor="0,0,0"/>
</Appearance>
<Sphere />
</Shape>
</Scene>
</X3D>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://x3dom.org/x3dom/release/x3dom.js"></script>
<script>
function displayAttributes(objectId){
var code = '';
var attributes = document.getElementById(objectId).attributes;
$.each(attributes, function(index, attr) {
code += '<tr><th>' + attr.name +'</th><td>' + attr.value + '</td></tr>';
});
$("#attributesTable").html(code);
}
</script>
<button onclick="displayAttributes('myShape')" class="btn btn-large">Attributes of the shape</button>
<button onclick="displayAttributes('myMaterial')" class="btn btn-large">Attributes of the material</button>
<table id="attributesTable" class="table table-striped table-bordered" style="margin-top:50px"></table>
</body>
</html>
Gist: https://gist.github.com/4329304
exactly what you are trying is unclear not sure this helps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="http://x3dom.org/x3dom/example/x3dom.css"></link>
<script type="text/javascript" src = "http://x3dom.org/x3dom/example/x3dom.js"></script>
</head>
<body>
<X3D showLog='true' width="400px" height="400px"><Scene>
<Shape><Box size="2 2 2" onclick="alert_attributes();" /></Shape>
</Scene></X3D>
<script>
function alert_attributes()
{
var size = document.getElementsByTagName("Box")[0].getAttribute('size');
x3dom.debug.logInfo( size );
alert( size );
}
</script>
</body>
</html>