I'm using Google Earth in Web-development but I'm facing a weird situation, this is a simple code from the google code playground and it loads a 3D model into a google earth, if I refresh the page it wont load the model again,
http://savedbythegoog.appspot.com/?id=7f8638b214605a2327af223c613a6ae13874416b
Is there any way to fix it.
I'm facing with one more problem of loading the 3D models in Internet Explorer 8 in 32 bit XP machine, IE8 doesn't load the 3d model in google earth, you can check the link given. I'm also posting the js code below.
Please Help
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Earth API Sample</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
<script type="text/javascript">
function addSampleButton(caption, clickHandler) {
var btn = document.createElement('input');
btn.type = 'button';
btn.value = caption;
if (btn.attachEvent)
btn.attachEvent('onclick', clickHandler);
else
btn.addEventListener('click', clickHandler, false);
// add the button to the Sample UI
document.getElementById('sample-ui').appendChild(btn);
}
function addSampleUIHtml(html) {
document.getElementById('sample-ui').innerHTML += html;
}
</script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
// addSampleButton('Create a 3D Model!', buttonClick);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
// add some layers
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
la.setRange(100000);
ge.getView().setAbstractView(la);
create3dModel();
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
function create3dModel() {
// Create a 3D model, initialize it from a Collada file, and place it
// in the world.
var placemark = ge.createPlacemark('');
placemark.setName('model');
var model = ge.createModel('');
ge.getFeatures().appendChild(placemark);
var loc = ge.createLocation('');
model.setLocation(loc);
var link = ge.createLink('');
// A textured model created in Sketchup and exported as Collada.
link.setHref('http://earth-api-samples.googlecode.com/svn/trunk/examples/' +
'static/splotchy_box.dae');
model.setLink(link);
var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
loc.setLatitude(la.getLatitude());
loc.setLongitude(la.getLongitude());
placemark.setGeometry(model);
la.setRange(300);
la.setTilt(45);
ge.getView().setAbstractView(la);
}
function buttonClick() {
create3dModel();
}
</script>
</head>
<body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;">
<div id="sample-ui"></div>
<div id="map3d" style="width: 500px; height: 380px;"></div>
<br>
<div>Installed Plugin Version: <span id="installed-plugin-version" style="font-weight: bold;">Loading...</span></div>
</body>
</html>
If that links doesn't work copy the code and paste it in a text file and rename it to .html and then execute it.
Even I had faced the same problem with collada models and internet explorer, the code u have given is working fine in rest of the browsers like chrome and mozilla.
check out this link, but in this case they are loading a kml file and not directly loading collada models into the browser using javascript.
Related
I'm trying to make a website with multiple p5 canvases on the same page, so after a lot of research, I came to the conclusion that the most adequate way to do that is by using instance mode on p5.
I spent the whole day trying to understand the instance mode, i even found a converter online that converts it for me, but I'm trying to do it all by my self using it just to check errors. The problem is that i can't find a way to use sound in my sketch using instance mode. the code i have is a lot more complex, but even trying just the basic it still does not work.
var s = function(p) {
let song;
p.preload = function() {
p.song = load('thunder.mp3')
}
p.setup = function() {
p.createCanvas(720, 200);
p.background(255, 0, 0);
p.song.loop();
};
};
var myp5 = new p5(s, 'c1');
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<style> body {padding: 0;
margin: 0;
}
<meta charset="UTF-8">
</style>
</head>
<body>
<div id="c1"></div> <br>
<div id="c2"></div>
</body>
</html>
you can test it here: https://editor.p5js.org/jgsantos.dsn/sketches/rUWb6Nurt
This code works great in the global mode:
let song;
function preload() {
song = loadSound('thunder.mp3');
}
function setup() {
createCanvas(720, 200);
background(255,0,0);
song.loop();
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
You can test it here https://editor.p5js.org/jgsantos.dsn/sketches/_lQcDqOsp
It shows this error: "Uncaught ReferenceError: load is not defined (: line 9)"
What am I'm doing wrong?
Thanks in advance!
Please try to post the exact code you're running. Your question contains different code than the link you posted in the comments.
But taking a step back, here's how I would think about instance mode and libraries:
Instance mode means that the variables and functions that belong to a sketch are now referenced via a variable, in your case the p variable.
But variables and functions that belong to a library are still referenced directly, i.e. in "global mode".
In other words, you don't want to reference the load() (or is it loadSound()?) function using instance mode. You should still reference that function directly, since it's coming from a library instead of from a specific sketch.
I have been working with the demo provided at http://code.google.com/apis/ajax/playground/?exp=youtube#chromeless_player. What I am wondering is if there is a way to make the player HTML5 or compatible with ios devices. I can't seem to figure out how I would do that? I don't think the code works out of the box as I have tried it from my iphone and it doesn't seem to work... The biggest reason I am using this is because I need to be able to adjust volume and get the video event changes...
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>YouTube Player API Sample</title>
<style type="text/css">
#videoDiv {
margin-right: 3px;
}
#videoInfo {
margin-left: 3px;
}
</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("swfobject", "2.1");
</script>
<script type="text/javascript">
/*
* Chromeless player has no controls.
*/
// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}
// This function is called when an error is thrown by the player
function onPlayerError(errorCode) {
alert("An error occured of type:" + errorCode);
}
// This function is called when the player changes state
function onPlayerStateChange(newState) {
updateHTML("playerState", newState);
}
// Display information about the current state of the player
function updatePlayerInfo() {
// Also check that at least one function exists since when IE unloads the
// page, it will destroy the SWF before clearing the interval.
if(ytplayer && ytplayer.getDuration) {
updateHTML("videoDuration", ytplayer.getDuration());
updateHTML("videoCurrentTime", ytplayer.getCurrentTime());
updateHTML("bytesTotal", ytplayer.getVideoBytesTotal());
updateHTML("startBytes", ytplayer.getVideoStartBytes());
updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded());
updateHTML("volume", ytplayer.getVolume());
}
}
// Allow the user to set the volume from 0-100
function setVideoVolume() {
var volume = parseInt(document.getElementById("volumeSetting").value);
if(isNaN(volume) || volume < 0 || volume > 100) {
alert("Please enter a valid volume between 0 and 100.");
}
else if(ytplayer){
ytplayer.setVolume(volume);
}
}
function playVideo() {
if (ytplayer) {
ytplayer.playVideo();
}
}
function pauseVideo() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}
function muteVideo() {
if(ytplayer) {
ytplayer.mute();
}
}
function unMuteVideo() {
if(ytplayer) {
ytplayer.unMute();
}
}
// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("ytPlayer");
// This causes the updatePlayerInfo function to be called every 250ms to
// get fresh data from the player
setInterval(updatePlayerInfo, 250);
updatePlayerInfo();
ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
ytplayer.addEventListener("onError", "onPlayerError");
//Load an initial video into the player
ytplayer.cueVideoById("ylLzyHk54Z0");
}
// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: "always" };
// The element id of the Flash embed
var atts = { id: "ytPlayer" };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/apiplayer?" +
"version=3&enablejsapi=1&playerapiid=player1",
"videoDiv", "480", "295", "9", null, null, params, atts);
}
function _run() {
loadPlayer();
}
google.setOnLoadCallback(_run);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<table>
<tr>
<td><div id="videoDiv">Loading...</div></td>
<td valign="top">
<div id="videoInfo">
<p>Player state: <span id="playerState">--</span></p>
<p>Current Time: <span id="videoCurrentTime">--:--</span> | Duration: <span id="videoDuration">--:--</span></p>
<p>Bytes Total: <span id="bytesTotal">--</span> | Start Bytes: <span id="startBytes">--</span> | Bytes Loaded: <span id="bytesLoaded">--</span></p>
<p>Controls: Play | Pause | Mute | Unmute</p>
<p><input id="volumeSetting" type="text" size="3" /> <- Set Volume | Volume: <span id="volume">--</span></p>
</div>
</td></tr>
</table>
</body>
</html>
As of today (2-28-2012) there is no way to play video in-line within a browser on iOS devices. You can only proide links that will either play the video in the iOS video player, or in the youtube app. The Youtube HTML5 player does this. On HTML5 enabled devices that do not support flash, it will serve an HTML5 tag.
March 7 is some big announcement for iOS, so maybe this will change then. But I do not expect it will as this is a long-standing way of operating on iOS devices.
EDIT - Here's how to do it.
To make this work for iOS, use the new HTML5 youtube player. Instructions and code found here in the YouTube API Blog:
http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
I have a simple html page with some javascript where if i click a link, it will show a flash video in a div using the swfobject.embedSWF function.
I did a test:
Uninstalled flash from my machine, then reloaded the page and clicked the link...I correctly saw no video.
I then installed flash and came back to the same page (no reload) and the embed still won't work.
I know in swfobject 1.5 (I'm now using 2.2), I would be able to embed the swf after the user installs flash, but now the user needs to reload the page in order to get the flash to appear. This is not good for my current situation, anyone know what is going on here?
Here is sample code using a youtube video:
<!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" xml:lang="en" lang="en">
<head>
<title>SWFOBJECT TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js' type='text/javascript'></script>
<style>
#link{
display:block;
margin-bottom:10px;
}
#videoContainer{
width:610px;
height:360px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#link").click(function(){
var flashVars = {};
var params = {};
flashVars["lang"] = "en";
params["menu"] = "false";
params["wmode"] = "opaque";
params["allowScriptAccess"] = "always";
params["allowFullScreen"] = "true";
params["bgcolor"] = "#fff";
//add video
swfobject.embedSWF("http://www.youtube.com/v/uZ0LL1SJ-6U?enablejsapi=1&playerapiid=ytplayer", "videoContainer",640, 480, "9.0.0", null, flashVars, params,{});
});
});
</script>
</head>
<body>
Click me
<div id="videoContainer"></div>
</body>
</html>
If you take your swfEmbed call out of the jquery, it works. I didn't really delve in to far, but I did this:
Click me
I made a new function called replaceDiv, which basically just does everything you are already doing in your jquery click function.
function replaceDiv () {
var flashVars = {};
var params = {};
flashVars["lang"] = "en";
params["menu"] = "false";
params["wmode"] = "opaque";
params["allowScriptAccess"] = "always";
params["allowFullScreen"] = "true";
params["bgcolor"] = "#fff";
//add video
swfobject.embedSWF("http://www.youtube.com/v/uZ0LL1SJ-6U?enablejsapi=1&playerapiid=ytplayer", "videoContainer",640, 480, "9.0.0", null, flashVars, params,{})
}
I then removed all of your existing JS and VOILA- works every time.
Let me know if you want me to actually try to debug your JQuery; I might add that it looks perfectly fine. You may be needing something else, I don't know.
-A
ps. Squarepusher is a BEAST. :P
I am trying something fairly simple, you can see a demo here:
http://www.jsfiddle.net/VVe8x/19/
This bug only appears in Firefox, so to see it press either one of the links once (it will take you to either NY or Israel) then press the other link.
The bug is that it will not show me the tiles in that location, instead it will show me the background of the div.
P.S In Chrome this works flawlessly.
I dont know if this is a clue or it might confuse you, if in between pressing either NY or Israel links you press the "view the world" link it will allow you then to see the other location..
Full Source for reference
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
show me NY
show me TLV
show world map(a "workaround"
<div id='myMap' style="height: 600px; width: 600px; position: relative"></div>
<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="http://developers.cloudmade.com/attachments/download/58/cloudmade.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
map = new OpenLayers.Map("myMap", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar()
]
});
var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
key: 'd5da652e33e6486ba62fca3d18ba70c9'
});
map.addLayer(cloudmade);
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
map.setCenter(new OpenLayers.LonLat(40, 32), 2);
show1 = function(){
var bound1 = new OpenLayers.Bounds(-8236567.917898,4972686.066032,-8236148.409989,4972889.624407);
map.zoomToExtent(bound1); // to NY
};
show2 = function(e){
var bound2 = new OpenLayers.Bounds(3874818.203389,3773932.267033,3875217.305962,3774226.370443);
map.zoomToExtent(bound2); // to Israel
return false;
};
</script>
</body>
</html>
The myMap_OpenLayers_Container has the following CSS when the tiles are invisible:
position: absolute; z-index: 749; left: -2.02815e+7px; top: -2007340px;
If you change these around you can see that the correct tiles were loaded, so its likely to be jsFiddle messing them up. The tiles CSS when they don't show also have strange values.
Update:
Testing locally also produces the issue, so that rules out jsFiddle.
A fix would be to set this value after the zoom by calling a function such as:
updateCSS = function(){
OpenLayers_Container = document.getElementById("myMap_OpenLayers_Container").style.left = "0px";
}
This looks like a bug, although if it is in OpenLayers or the CloudMade layer properties is hard to tell - I'd imagine the latter, or it would be a widely reported bug. The relevant code in OpenLayers.js appears to be:
centerLayerContainer: function(lonlat){
var originPx = this.getViewPortPxFromLonLat(this.layerContainerOrigin);
var newPx = this.getViewPortPxFromLonLat(lonlat);
if ((originPx != null) && (newPx != null)) {
this.layerContainerDiv.style.left = Math.round(originPx.x - newPx.x) + "px";
this.layerContainerDiv.style.top = Math.round(originPx.y - newPx.y) + "px";
}
I was running into this problem too, and it turned out I was not setting the map's center as I thought I was. The problem goes away if you first call map.setCenter(). For example:
var newCenter = new OpenLayers.Lonlat(longitude, latitude)
.transform(new OpenLayers.Projection('ESPG:4326'),
this.map.getProjectionObject());
this.map.setCenter(newCenter);
Hope this helps whoever next has the problem.
How will I be able to put a pin using a click of my mouse? given this is the code:
function AddPushpin()
{
var shape = new VEShape(VEShapeType.Pushpin, **map.GetCenter()**);
shape.SetTitle('sample');
shape.SetDescription('This is shape number '+pinid);
pinid++;
map.AddShape(shape);
}
it's pointing to the center..
do you have any idea on how to add an image to the pushpin hover?
Here's an example that adds a pushpin during the OnClick event of the Map, and sets the Shape's Photo URL to display an image within the InfoxBox.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-US"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
map = new VEMap("myMap");
map.LoadMap();
// Attach the OnClick event
map.AttachEvent("onclick", OnClick_Handler);
// You could Dettach the OnClick event like this
//map.DetachEvent("onclick", OnClick_Handler);
}
function OnClick_Handler(e){
// "sender" is the VEMap that raised the event
// "e" is the VE Map Event Object
// Get the Lat/Long where the Mouse was clicked
var pushpinLocation = map.PixelToLatLong(new VEPixel(e.mapX, e.mapY));
// Create the Pushpin Shape
var s = new VEShape(VEShapeType.Pushpin, pushpinLocation);
s.SetTitle("test pushpin");
s.SetDescription("test description");
s.SetPhotoURL("http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png");
// Plot a Shape at the Clicked location
map.AddShape(s);
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
check out this article...
function InitMap ()
{
// add code to init your map....
// attach the onclick event...
map.AttachEvent("onclick", MouseClick);
}
function MouseClick(e)
{
map.AddPushpin('pin',
e.view.latlong.latitude,
e.view.latlong.longitude,
88,
34,
'pin',
'MyPin',
1);
}