search

WorldWideTelescope / wwt-web-client

The WorldWide Telescope web client lets you explore the universe in your browser.
https://worldwidetelescope.org/webclient/
MIT License
105 stars 35 forks source link

Web Client Images not displaied #148

Closed nikolay-tzonev closed 4 years ago

nikolay-tzonev commented 8 years ago

I am trying to embed WWT in my site and would like to display a set of images in the foreground. But the client doesn't seem to load the images at all. I've followed the documentation and build a WTML data file and tried to load it in the web control but nothing happens. Even the sample code here doesn't seem to work. I tried it in Chrome, Firefox and Edge browsers.

astrojonathan commented 8 years ago

The Harvard Website is blocking the cross-domain access to the images in the example you gave, the images are there, but the request are being rejected. Look at the debug console in Chrome and you will find this..

Redirect at origin 'http://www.cfa.harvard.edu' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.worldwidetelescope.org' is therefore not allowed access.

This may have been a change in the server configuration since the sample was created. I will take a look at the code and see what we can do. In the meanwhile do you have an example that uses a server marked safe for cross domain scripting? Can you send me a link to your code and I can take a look at it. Also peek at the console and see what messages come up.

Jonathan

nikolay-tzonev commented 8 years ago

Yes, I see the CORS policy problem. Sorry @astrojonathan, I forgot to mention it. But my problem seems to be beyond that.

I've devised a demo of my own by modifying the official sample. This is the JavaScript:

var wwt;
function initialize() {
    wwt = wwtlib.WWTControl.initControl("WWTCanvas");
    wwt.add_ready(wwtReady);
}
function wwtReady() {
    wwt.settings.set_showCrosshairs(true);
    wwt.settings.set_showConstellationLabels(true);
    wwt.settings.set_showConstellationFigures(true);
    wwt.settings.set_showConstellationBoundries(true);
    wwt.hideUI(false);   
     // Load in the image collection file
    wwt.loadImageCollection("http://www.worldwidetelescope.org/wwtweb/ShowImage.aspx?reverseparity=False&scale=33.08750&name=barnardoph&imageurl=http://farm6.static.flickr.com/5216/5495030376_4c2965e0fe_b.jpg&credits=alyssa+goodman+(All+Rights+Reserved)&creditsUrl=&ra=246.421365149&y=512&x=512&rotation=178.34&dec=-23.6749819397&thumb=http://farm6.static.flickr.com/5216/5495030376_4c2965e0fe_t.jpg&wtml=true");
}
function showImage(){
    wwt.setForegroundImageByName("barnardoph");
    wwt.gotoRaDecZoom(15 * 16.4280910099333, -23.6749819397, 8, false);
}

And this is the HTML for the map canvas: <div id="WWTCanvas" style="width: 750px; height: 750px; border-style: none; border-width: 0px;"></div>

I am using a WWT service (here http://www.worldwidetelescope.org/wwtweb/ShowImage.aspx) that I found in the documentation to generate the WTML file.

initialize() is called on page load. Later I call showImage() ether directly trough the console or by some trigger like click event. It should bring the image to foreground and center it into view.

After the WWTControl is initialized I see four errors for different image files like this one:

sunCorona.png:1 GET file:///C:/Users/nikolay.tzonev/Desktop/sunCorona.png net::ERR_FILE_NOT_FOUNDImage (async)load @ wwtsdk.aspx:16Zb.loadPlanetTexture @ wwtsdk.aspx:18Zb._loadPlanetTextures @ wwtsdk.aspx:18Zb.drawPlanets @ wwtsdk.aspx:18render @ wwtsdk.aspx:23Ec.initControlParam @ wwtsdk.aspx:22Ec.initControl @ wwtsdk.aspx:22initialize @ imageOverlayTest.html:11onload @ imageOverlayTest.html:32

Trough the browser's network tools i see that the WTML is loaded via some proxy service but after that nothing. When showImage() is called the view is centered at the right coordinates but there is no image there. And there is nothing more logged in the console.

Sorry I dumped all the code in here but I couldn't get my jsfiddle to work.

Nikolay

thewebkid commented 8 years ago

It's been a long time since I used that feature and it looks like you are using it correctly, but here is a workaround you can use. Note that any urls appearing after the querystring ? char should be encoded (encodeURIComponent)

<!DOCTYPE html>

On Tue, Oct 11, 2016 at 6:54 AM, Nikolay Tzonev notifications@github.com wrote:

Yes, I see the CORS policy problem. Sorry @astrojonathan https://github.com/astrojonathan, I forgot to mention it. But my problem seems to be beyond that.

I've devised a demo of my own by modifying the official sample. This is the JavaScript:

var wwt; function initialize() { wwt = wwtlib.WWTControl.initControl("WWTCanvas"); wwt.add_ready(wwtReady); } function wwtReady() { wwt.settings.set_showCrosshairs(true); wwt.settings.set_showConstellationLabels(true); wwt.settings.set_showConstellationFigures(true); wwt.settings.set_showConstellationBoundries(true); wwt.hideUI(false); // Load in the image collection file wwt.loadImageCollection("http://www.worldwidetelescope.org/wwtweb/ShowImage.aspx?reverseparity=False&scale=33.08750&name=barnardoph&imageurl=http://farm6.static.flickr.com/5216/5495030376_4c2965e0fe_b.jpg&credits=alyssa+goodman+(All+Rights+Reserved)&creditsUrl=&ra=246.421365149&y=512&x=512&rotation=178.34&dec=-23.6749819397&thumb=http://farm6.static.flickr.com/5216/5495030376_4c2965e0fe_t.jpg&wtml=true"); } function showImage(){ wwt.setForegroundImageByName("barnardoph"); wwt.gotoRaDecZoom(15 * 16.4280910099333, -23.6749819397, 8, false); }

And this is the HTML for the map canvas:

I am using a WWT service (here http://www.worldwidetelescope. org/wwtweb/ShowImage.aspx) that I found in the documentation to generate the WTML file.

initialize() is called on page load. Later I call showImage() ether directly trough the console or by some trigger like click event. It should bring the image to foreground and center it into view.

After the WWTControl is initialized I see four errors for different image files like this one:

sunCorona.png:1 GET file:///C:/Users/nikolay.tzonev/Desktop/sunCorona.png net::ERR_FILE_NOT_FOUNDImage (async)load @ wwtsdk.aspx:16Zb.loadPlanetTexture @ wwtsdk.aspx:18Zb._loadPlanetTextures @ wwtsdk.aspx:18Zb.drawPlanets @ wwtsdk.aspx:18render @ wwtsdk.aspx:23Ec.initControlParam @ wwtsdk.aspx:22Ec.initControl @ wwtsdk.aspx:22initialize @ imageOverlayTest.html:11onload @ imageOverlayTest.html:32

Trough the browser's network tools i see that the WTML is loaded via some proxy service but after that nothing. When showImage() is called the view is centered at the right coordinates but there is no image there. And there is nothing more logged in the console.

Sorry I dumped all the code in here but I couldn't get my jsfiddle to work.

Nikolay

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/WorldWideTelescope/wwt-web-client/issues/148#issuecomment-252923308, or mute the thread https://github.com/notifications/unsubscribe-auth/AASfwxj_SNLTIm_zAFLNi8F3OVeUsZlsks5qy5T5gaJpZM4KQ5l0 .

thewebkid commented 8 years ago

also note that we are versioning the sdk and once web gl is fully baked, we will put it likely at "http://worldwidetelescope.org/ html5sdk/2.0.0/wwtsdk.js http://worldwidetelescope.org/html5sdk/1.0.0/wwtsdk.js"

We will also document this change on the sdk page once it is released.

On Tue, Oct 11, 2016 at 7:35 PM, Ron Gilchrist kid@thewebkid.com wrote:

It's been a long time since I used that feature and it looks like you are using it correctly, but here is a workaround you can use. Note that any urls appearing after the querystring ? char should be encoded (encodeURIComponent)

<!DOCTYPE html>

On Tue, Oct 11, 2016 at 6:54 AM, Nikolay Tzonev notifications@github.com wrote:

Yes, I see the CORS policy problem. Sorry @astrojonathan https://github.com/astrojonathan, I forgot to mention it. But my problem seems to be beyond that.

I've devised a demo of my own by modifying the official sample. This is the JavaScript:

var wwt; function initialize() { wwt = wwtlib.WWTControl.initControl("WWTCanvas"); wwt.add_ready(wwtReady); } function wwtReady() { wwt.settings.set_showCrosshairs(true); wwt.settings.set_showConstellationLabels(true); wwt.settings.set_showConstellationFigures(true); wwt.settings.set_showConstellationBoundries(true); wwt.hideUI(false); // Load in the image collection file wwt.loadImageCollection("http://www.worldwidetelescope.org/wwtweb/ShowImage.aspx?reverseparity=False&scale=33.08750&name=barnardoph&imageurl=http://farm6.static.flickr.com/5216/5495030376_4c2965e0fe_b.jpg&credits=alyssa+goodman+(All+Rights+Reserved)&creditsUrl=&ra=246.421365149&y=512&x=512&rotation=178.34&dec=-23.6749819397&thumb=http://farm6.static.flickr.com/5216/5495030376_4c2965e0fe_t.jpg&wtml=true"); } function showImage(){ wwt.setForegroundImageByName("barnardoph"); wwt.gotoRaDecZoom(15 * 16.4280910099333, -23.6749819397, 8, false); }

And this is the HTML for the map canvas:

I am using a WWT service (here http://www.worldwidetelescope. org/wwtweb/ShowImage.aspx) that I found in the documentation to generate the WTML file.

initialize() is called on page load. Later I call showImage() ether directly trough the console or by some trigger like click event. It should bring the image to foreground and center it into view.

After the WWTControl is initialized I see four errors for different image files like this one:

sunCorona.png:1 GET file:///C:/Users/nikolay.tzonev/Desktop/sunCorona.png net::ERR_FILE_NOT_FOUNDImage (async)load @ wwtsdk.aspx:16Zb.loadPlanetTexture @ wwtsdk.aspx:18Zb._loadPlanetTextures @ wwtsdk.aspx:18Zb.drawPlanets @ wwtsdk.aspx:18render @ wwtsdk.aspx:23Ec.initControlParam @ wwtsdk.aspx:22Ec.initControl @ wwtsdk.aspx:22initialize @ imageOverlayTest.html:11onload @ imageOverlayTest.html:32

Trough the browser's network tools i see that the WTML is loaded via some proxy service but after that nothing. When showImage() is called the view is centered at the right coordinates but there is no image there. And there is nothing more logged in the console.

Sorry I dumped all the code in here but I couldn't get my jsfiddle to work.

Nikolay

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/WorldWideTelescope/wwt-web-client/issues/148#issuecomment-252923308, or mute the thread https://github.com/notifications/unsubscribe-auth/AASfwxj_SNLTIm_zAFLNi8F3OVeUsZlsks5qy5T5gaJpZM4KQ5l0 .

nikolay-tzonev commented 8 years ago

That workaround works for me. The image is now displayed. Thank you @thewebkid.

I tried the versioned SDK but I got some additional errors. However, they are beyond the scope of this discussion so maybe I'll create another.