I'm trying to embed some 360 images on my site using Google VR View, but I'm having no luck getting anything to work. I'm following the Google provided documentation as a guide...
https://developers.google.com/vr/concepts/vrview-web
`window.addEventListener('load', onVrViewLoad)
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
image: 'img/jtree.jpg',
is_stereo: false
});
}`
I copied the example code, and am getting errors in the console (see attached screen shots)
Console Errors
Does anyone know of a tutorial that would better outline how to use this? Or possibly can someone shed some light on what I may be doing incorrectly?
You have to open your HTML file in a server.
Enable CORS https://enable-cors.org/server.html.
I find an easy way to enable CORS with the Chrome web server just for your experiment purpose.
I had absolutely no luck getting this to work with the instructions provided by Google - guess I'm not versed enough in coding. For me it only worked when I used the iframe, see https://www.museum-joanneum.at/spielwiese/360.
However, the view is still not exactly the same, the info-Tag is not layered over the image in the left lower corner like the demo on Google, but on top of the image and reduces the image height by about 30 pixels. Maybe that's related to the iframe since the instructions state, that the functionality isn't exactly the same as with the JavaScript API.
Also, for my images I had to select "false" for stereo in order to display correctly.
I hope this helps!
Looks like you are not setting up the directories properly. Is your web server set up so the root is the root of the repo? Are you also getting a 404 error? (looks like vrview.js is not being loaded)
As for places to get help with this, I recommend the vrview-web google group.
you need add this html id on web page.
<div id="vrview"></div>
Below JavaScript will call out the image on HTML.
var vrView;
var scenes = {
petra: {
image: 'images/petra.jpg',
preview: 'images/petra-preview.jpg'
}
}
function onLoad() {
vrView = new VRView.Player('#vrview', {
width: '100%',
height: 480,
image: 'images/blank.png',
is_stereo: false,
is_autopan_off: true
});
vrView.on('ready', onVRViewReady);
vrView.on('modechange', onModeChange);
vrView.on('getposition', onGetPosition);
vrView.on('error', onVRViewError);
}
function loadScene(id) {
console.log('loadScene', id);
// Set the image
vrView.setContent({
image: scenes[id].image,
preview: scenes[id].preview,
is_autopan_off: true
});
}
function onVRViewReady(e) {
console.log('onVRViewReady');
loadScene('petra');
}
function onModeChange(e) {
console.log('onModeChange', e.mode);
}
function onVRViewError(e) {
console.log('Error! %s', e.message);
}
function onGetPosition(e) {
console.log(e)
}
window.addEventListener('load', onLoad);
You can run those scripts only on the server and then only it will render the texture so you can add your all files in the wamp server path and access through or you can create a web project in asp.net, add your files and build the project. everything will be taken care of by the Visual Studio.
For example
download this sample Code
Add this in your wamp server path or create a project in visual
studio and add these files
Open your index.html file the in browser
Related
There is an image open in the Preview application, and it is unsaved.
I have tried this code, by building and running a standalone script in Script Editor:
var preview = Application('Preview')
var preview.documents[0].close({ saving: true, savingIn: '/Volumes/USB Drive/Untitled-Image.png' })
I see this in the logs
app = Application("Preview")
app.documents.at(0).Symbol.toPrimitive()
--> Error -1700: Can't convert types.
app.documents.at(0).Symbol.toPrimitive()
--> Error -1700: Can't convert types.
However, I'm not sure I'm reading the docs correctly, and I'm not sure how to further debug this code. A satisfactory alternative here would be to send a keystroke to save and click the Save button.
What can I do to persist the image in Preview to a file?
One can declare paths speculatively in JavaScript using Path('...'), and then use the save command to save the image to the file that will be created at that path:
Preview = Application('com.apple.Preview');
ImageFilepath = Path('/Users/CK/Pictures/Preview_SavedImage.jpg');
Preview.documents[0].save({ in: ImageFilepath });
This code worked for me.
var preview = Application('Preview')
var photo = preview.documents[0]
photo.close({ saving: 'yes', savingIn: Path("/Path/To Some/file_name.png") })
Upon execution, in the Replies log of Script Editor window, something slightly different from the question sample is logged.
app = Application("Preview")
app.close(app.documents.at(0), {savingIn:Path("/Path/To Some/file_name.png"), saving:"yes"})
I was able to figure this out by studying the scripting dictionary for macOS Mojave 10.14 as well as the Release Notes for JXA; there is a similar example under Passing Event Modifiers section of that.
From the Script Editor scripting dictionaries, this is the entry for the close method in the Standard Suite:
close method : Close a document.
close specifier : the document(s) or window(s) to close.
[saving: "yes"/"no"/"ask"] : Should changes be saved before closing?
[savingIn: File] : The file in which to save the document, if so.
Note the key differences between the working code here and the code in the question:
Specify a Path object when passing the savingIn option to close.
Specify a the saving option as one of "yes", "no", or "ask" (not true).
If you're new to JXA, Automator, and/or Script Editor for Mac, checkout the JXA Cookbook.
If this answer helps you, you're probably having a bad time, so best of luck!
I'm looking for a way to take a screenshot of a long web page every time it changes. I would like to use Node.js for this. My question is about how to render the full page with images and save it to disk ad an image file.
Most images on the webpage is lazy loaded. So I guess that I need to scroll down the entire page first, before taking a screen shot.
I tried different tools:
casperjs
node-webshot
phantomjs
All of them seems way too complicated, if not impossible, to even install. I didn't succeed with any of them.
casperjs seems like a really nice choice, but I can't get it to work within node.js. It keeps complaining, that casper.start() is not a valid method...
I got closest with node-webshot, but I did not manage to scroll down page.
This is my code so far:
var webshot = require('webshot');
var options = {
shotSize: {
height: 'all',
streamType: 'jpg'
}
};
webshot('www.xx.com', 'xx.com.jpg', options, function(err) {
// screen shot saved to 'xx.com.jpg'
});
BTW I'm developing on a mac. The finished Node app will be on a linux server.
Any comments or experiences are appreciated!
Can't really help with installing CasperJS since on Windows it works by simply using npm install casperjs -g.
I've put up a simple script to do screenshots:
var casper = require('casper').create();
casper.options.viewportSize = {width: 1600, height: 950};
var wait_duration = 5000;
var url = 'http://stackoverflow.com/questions/33803790/capture-screen-shot-of-lazy-loaded-page-with-node-js';
console.log("Starting");
casper.start(url, function() {
this.echo("Page loaded");
});
casper.then(function() {
this.scrollToBottom();
casper.wait(wait_duration, function() {
casper.capture('screen.jpg');
this.echo("Screen captured");
});
});
casper.then(function() {
this.echo("Exiting");
this.exit();
});
casper.run();
The code is fairly straightforward:
Load the url
Scroll to the bottom
Wait for a specific duration (wait_duration) for stuff to load
Do a screenshot
End
Hopefully, that works for you!
this code work for me with node in OSX, save it like test.js and run node test.js in CLI
var webshot = require('webshot');
var options = {
streamType: 'png',
windowSize: {
width: 1024,
height: 768
},
shotSize: {
width: 'all',
height: 'all'
}
};
webshot("blablabla.com","bla-image.png",options,(err) => {
if(err){
return console.log(err);
}
console.log('image succesfully');
});
you can automate it via Selenium, http://webdriver.io/. Yes, it's most like a testing engine, not a screen shot application, but you can fully control the browser automation and see the browser on your display while debugging
Start selenium server, with, for example, Google Chrome
Load your page
Do scrolling, clicking, everything with webdriver.io
Take a picture when you think it's a good time
close session
fast way to install selenium with nodejs -> https://github.com/vvo/selenium-standalone
I have not been able to successfully display my side database (map from Mapsengine/Earthbuilder). I have installed Google Plugin and tried to access it from Firefox, Chrome, and IE browsers and nothing seems to work. I am not sure what I'm doing wrong as I have confirmed my code with the code used in Google's Code Playground, and I have attempted a workaround that was suggested in a similar issue from the past (Issue 21: GMaps Engine Layer Disappeared over GEarth plugin). When specifing the URL of my map to be displayed in GE plugin, I even changed the URL to include &export=download, which is one of the fixes I saw in another similar issue (it was about kml files from google docs).
Strangely, when my webpage is accessed, it does not give an error that the side database failed to download.
I have included part of the code below.
Any assistance would be greatly appreciated.
Thanks in advance,
<script type="text/javascript">
var CHO;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
CHO = instance;
CHO.getWindow().setVisibility(true);
CHO.getNavigationControl().setVisibility(CHO.VISIBILITY_AUTO);
CHO.getLayerRoot().enableLayerById(CHO.LAYER_BORDERS, true);
CHO.getLayerRoot().enableLayerById(CHO.LAYER_ROADS, true);
addSideDatabase()
// Add controls for the window
CHO.getOptions().setStatusBarVisibility(true);
CHO.getNavigationControl().setVisibility(CHO.VISIBILITY_AUTO);
// Update the view in Google Earth
var lookAt = CHO.createLookAt('');
lookAt.setLatitude(30.0);
lookAt.setLongitude(-90.0);
lookAt.setRange(9500000); //default is 0.0
CHO.getView().setAbstractView(lookAt);
}
function failureCB(errorCode) {
alert(errorCode);
}
function sideDatabaseSuccess(db) {
sideDatabase = db;
db.setDrawOrder(2);
}
function sideDatabaseFail() {
alert('Sorry! Side database failed to load!');
}
/** Add the URL for the globe served by Earth Enterprise or Earth Builder.
* This function operates similarly to the File => Add Database feature
* in Google Earth EC.
*/
function addSideDatabase() {
google.earth.addSideDatabase(
CHO, "https://mapsengine.google.com/map/edit?mid=zHgXRX6Mts2Q.kHGFoYZlcyBQ&export=download",
sideDatabaseSuccess,
sideDatabaseFail,
{
userName: '',
password: ''
}
);
}google.setOnLoadCallback(init);</script>
Is that URL for a Google Maps Engine Lite map? If so, that might be the issue. I just tried swapping in the URL (https://earthbuilder.google.com/10446176163891957399-13516001307527776624-4/kh/) used in the Google Code Playground example here http://code.google.com/apis/ajax/playground/#adding_a_side_database. That one worked, but my Google Maps Engine Lite URL didn't. Furthermore, it didn't even seem to call its success or failure callback functions!
The thing you are trying to load is a map, not a globe. The two are not equivalent. You can't load a map in Google Earth.
On the bright side, your side-loading code is spot on. Replace your URL with http://laearth.la.gov (Louisiana's Custom Google Earth Server) and it will work.
I've been using jRecorder for a while now, it's pretty good considering how lightweight it is.
Now, I've got a case where I need to prevent jRecorder playing back the recorded audio after record. I've tried pretty much every function within jRecorder and the documentation is not great.
Anyone every encountered and got round this?
Here's the code, just standard jRecorder stuff really.
$.jRecorder({
'swf_path': '/scripts/jrecorder1.1/jRecorder.swf',
'host': host,
'callback_started_recording': function() {
$('.audio-recorder').addClass('recording');
},
'callback_finished_recording': function() {
$('.audio-recorder').removeClass('recording');
},
'callback_stopped_recording': function() {
$.jRecorder.sendData();
$('.audio-recorder').removeClass('recording');
},
'callback_error_recording': function() {
$('.audio-recorder').removeClass('recording');
},
'callback_activityTime': function(time) {
},
'callback_activityLevel': function(level) {
},
'callback_finished_sending': function(response) {
}
}, $('.audio-recorder .audio-recorder-singleton'));
After a day of trying almost everything on this, I finally found a solution. I thought I'd post it here in full as there are lots of comments on the jRecorder website on how to do this, but they are unanswered.
To do this, you need to do the following:
Go to https://github.com/sythoos/jRecorder and download everything in the flash-fla folder. Make sure you match the folder of the flash-fla folder structure EXACTLY on your local machine.
Once you have done that, and if you haven't got it already, you're going to need to download Flash. I used the free 30 day trial to do this, you can also do the same.
Open up the Main.as file that you should now have in your local directory and delete line 160, which should be as shown below:
private function recordComplete(e:Event):void
{
//fileReference.save(recorder.output, "recording.wav");
//finalize_recording();
preview_recording(); <----- **DELETE THIS**
}
Now, you need to open up the AudioRecorderCS4-1.0.fla file in Flash and export the movie (File -> Export -> Export Movie).
Once exported (and named so you can find it), reference/include in project your new SWF and change the swfPath of your jRecorder parameter to match the new SWF and voila! :)
You may download old version of jRecorder.swf file
from here jRecorder.swf without preview
so that you do not need to recompile fla file.
Hit Raw button to download it. This version does not have function jSendFileToServer
so you should comment it out in your jRecorder.js file.
WAV file will be submitted to server right after the recording stops.
I'm having an extremely difficulty time getting the flowplayer to show up and the worst part is I have no idea what is wrong because I'm not getting any error messages!
I have an external javascript file:
C:/desktop/mysite/js/jq/plugins.js
calling $f() from:
C:/desktop/mysite/thirdparty/flowplayer/flowplayer.js
the swf files also live there...
I'm working on file/desktop (no localhost or webserver)
$(video.id).flowplayer("thirdparty/flowplayer/flowplayer-3.1.15.swf", {
clip:{
....
},
// min Flash version
version:[9,115],
// older versions will see a custom message
onFail:function(){
alert("Failed!");
},
onError:function(errCode,errMsg){
alert(errCode+errMsg);
}
});
I don't know what path to use for the SWFs to get them to load, is the path relative to the javascript (plugins.js) that calls $f() or is it relative to the path of the flowplayer.js ??
bangs head on wall
Why not use the absolute path?
$(video.id).flowplayer("file://c:/desktop/mysite/thirdparty/flowplayer/flowplayer-3.1.15.swf"...
replace thirdparty/flowplayer/flowplayer-3.1.15.swf with thirdparty\flowplayer\flowplayer-3.1.15.swf
if you are planning to put that on a web page then change the slashes back to forward slashes.