tl;dr
When I attempt to initialize the VRView.Player, it attempts to load <directory_of_script>/../index.html.
Meandering steps I've taken to get here
At first I tried to just use the example from Google's docs.
<!-- file path: /test3d.htm -->
<html>
<head>
<script src="/Include/scripts/jquery.min.js"></script>
<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
<script>
$(() => {
var vrView = new VRView.Player('#vrview', {
image: 'https://example.org/Images/image.jpg',
width: '100%',
height: '100%',
});
});
</script>
</head>
<body>
<div id="vrview">
</div>
</body>
</html>
This resulted in an error loading the texture due to cross-domain issues.
I copied vrview.min.js to my /Include/scripts/ directory and changed the script src parameter.
<!-- file path: /test3d.htm -->
<html>
<head>
<script src="/Include/scripts/jquery.min.js"></script>
<script src="/Include/scripts/vrview.min.js"></script>
<script>
$(() => {
var vrView = new VRView.Player('#vrview', {
image: '/Images/image.jpg',
width: '100%',
height: '100%',
});
});
</script>
</head>
<body>
<div id="vrview">
</div>
</body>
</html>
Inexplicably, this resulted in an HTTP 404, as the iframe attempted to load /Include/index.html.
As a last resort, I tried to load the iframe directly.
<iframe src="https://storage.googleapis.com/vrview/2.0/embed?image=https://example.org/Images/image.jpg"></iframe>
This returned an HTTP 403 error from storage.googleapis.com:
AccessDeniedAccess denied.Anonymous users does not have storage.objects.get access to object vrview/2.0/embed.
Any ideas?
Related
I have an edited code of google API. It is not working on the page on wordpress. I have entered the code in text box but it shows a blank page
#Greg Burkett
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Province', 'popularity'],
['Federally Administered Tribal Areas',100],
['Islamabad',1000],
['Punjab',800],
['PK-KP',500], // North West Frontier
['Azad Kashmir',300],
['PK-GB',150], // Northern Areas
['Baluchistan',600],
['Sind',100]
]);
var options = {
region: 'PK',
backgroundColor: '#81d4fa',
datalessRegionColor: 'white',
width: 1170,
height: 695,
resolution: 'provinces',
colors: ['#FC0000','#FF3333','#FFFF00','#00FF00','#0CFF0C']
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 800px; height: 800px;"></div>
</body>
</html>
I am following the example from the documentation on https://developers.google.com/vr/concepts/vrview-web. Here is my code:
<head>
<script src="vrview.min.js"></script>
<script>
window.addEventListener('load', onVrViewLoad)
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
video: 'http://localhost/360/spa360injected.mp4',
is_stereo: true,
width:'640',
height:'480'
});
}
</script>
</head>
<body>
<div id="vrview"></div>
</body>
</html>
I get the error
vrview.min.js:1 GET http://localhost/index.html?video=http://localhost/360/spa360injected.mp4&is_stereo=true& 404 (Not Found)
This should be a plug and play example. What am I doing wrong?
I'm trying to use jsTree in AngularJS powered MVC5 school project. To use jsTree in angular app I'm using this directive.
From what I can observe everthing working ok:
- jstree loads correctly data and structure, and fires all events
- jstree loads CSS style (if i change for instance margin in css, it's reflected to jstree, if remove css reference it rendered as ordinary HTML UL)
However it looks like, that rest of layout doesnt work:
- no background change, when i move cursor over node
- no conectors, no node images, no arrows
From what i was able to find it looks like that css is not using images referenced in it:
background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");
background-image: url("32px.png");
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
So I tried to use:
bundles.Add(new StyleBundle("~/jstree").Include(
"~/Content/jstree/style.css", new CssRewriteUrlTransform()));
Css with images is placed in same folder:
But that also did not worked. Any ideas? Sugestions?
Rest of the code:
angular.module('JosefinaApp', ['ui.layout', 'JosefinaApp.controllers', 'jsTree.directive']);
angular.module('JosefinaApp.controllers', [])
.controller('TreeViewController', ['$scope', '$location', '$http', function ($scope, $location, $http) {
$location.path('/home');
$http({
method: 'GET',
url: '/api/project/gettasks/1',
}).
success(function (data) {
$scope.treeModel = data;
}).
error(function () {
$scope.test = "Error";
});
$scope.treeViewNodeSelected = function (e, data) {
console.log(data.node.id);
};
}])
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title ng-bind="models.helloAngular"></title>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-2.1.4.min.js")" type="text/javascript"> </script>
<link href="#Url.Content("~/Content/themes/base/all.css")" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/css")
#Styles.Render("~/jqueryUI")
#Styles.Render("~/uiLayout")
#Styles.Render("~/jstree")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryUI")
<script src="#Url.Content("~/Scripts/angular.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui-router.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-resource.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui/ui-layout.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jstree.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jsTree.directive.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/JosefinaApp.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/LandingPageController.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/TreeViewController.js")" type="text/javascript"> </script>
</head>
<body>
<div ng-app="JosefinaApp">
<div ng-controller="TreeViewController">
<js-tree theme="default" tree-events="select_node:treeViewNodeSelected" tree-data="scope" tree-model="treeModel">
</js-tree>
</div>
</div>
#RenderBody()
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Browser stored images, internet explorer was caching empty images and showing them instead of geting them from server.
... kill me please
In below ExamppleController function a value is entered into message variable local storage. For the first time value is getting stored but when entered again value is not getting stored. When browser cache is cleared then value is stored again and second time no value is getting stored.
Mystorage.html
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage"]);
example.controller("ExampleController", function($scope,$rootScope,$window,$localStorage,$location) {
$scope.save = function() {
$rootScope.newq=$scope.name;
$scope.$apply();
**$localStorage.message = $scope.name;**
console.debug($localStorage.message);
$window.location.href = 'nextstorage.html';
}
});
</script>
</head>
<body ng-app="example">
<div ng-controller="ExampleController">
<input type="text" ng-model="name"/>
<button ng-click="save()">Save</button>
<br>
{{data}}
</div>
</body>
</html>
NextStorage.html
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage"]);
example.controller("ExampleController", function($scope,$window,$localStorage,$location) {
$scope.data1 = $localStorage.message;
});
</script>
</head>
<body ng-app="example">
<div ng-controller="ExampleController">
<span>{{data1}}</span>
</div>
</body>
</html>
You should really be doing things the AngularJS way. I think this is where the disconnect happens.
See the following code:
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage", "ui.router"]);
example.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('1', {
url: '/1',
templateUrl: 'templates/1.html',
controller: 'FirstController'
})
.state('2', {
url: '/2',
templateUrl: 'templates/2.html',
controller: 'SecondController'
});
$urlRouterProvider.otherwise('/1');
});
example.controller("FirstController", function($scope,$localStorage,$location) {
$scope.save = function() {
$localStorage.message = $scope.name;
$location.path("/2");
}
});
example.controller("SecondController", function($scope,$localStorage,$location) {
$scope.data1 = $localStorage.message;
});
</script>
</head>
<body ng-app="example">
<div ui-view></div>
<script id="templates/1.html" type="text/ng-template">
<div>
<input type="text" ng-model="name"/>
<button ng-click="save()">Save</button>
<br>
</div>
</script>
<script id="templates/2.html" type="text/ng-template">
<div>
<span>{{data1}}</span>
</div>
</script>
</body>
</html>
You'll notice I'm using routes and navigating between them using the $location provider. The $localStorage works fine when doing it this way.
Read up on the ui-router or ngRoute.
Regards,
I'm building a website using Flex, Codeigniter, and I use swfobject to embed the swf.
This will not work if I access the website using Codeigniter's index.php file.
This is the ouput source:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://localhost/Pixelatte-debug/"/>
<link rel="stylesheet" type="text/css" href="history/history.css" />
<title>${title}</title>
<script src="AC_OETags.js" language="javascript"></script>
<script src="history/history.js" language="javascript"></script>
<style>
body { margin: 0px; overflow:hidden; background:url('swirlsbg.png') }
</style>
</head>
<body scroll="no">
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashVars = {};
var params = { play: "true",
loop: "false",
quality: "high",
wmode: "transparent",
allowscriptaccess: "sameDomain" };
var attributes = { id: "${application}" };
swfobject.embedSWF( "${swf}.swf",
"divContent",
"100%", "100%",
"9.0.0",
"expressInstall.swf",
flashVars,
params,
attributes );
</script>
<div id="divContent">
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a></p>
</div>
</body>
</html>
My guess is that swfobject.js is not detected by codeigniter..
What is the result? (The replacement text, or a broken object tag...?)
Is swfobject.js loaded properly?
Is your SWF file's path correct?
What is your final HTML output?
Maybe one of the details will solve your problem.
CodeIgniter won't be your issue here. You should use a tool like Firebug (a firefox plugin) to confirm your assets are actually being found.
Codeignitor won't know about your JS, your browser will. If the JS isn't running there is either a fault in the JS code, or it isn't found by your browser.