So what I want to do is to replace the main database loaded into a Google Earth GEPlugin instance in a web browser. If I go to the Code Playground: Here http://code.google.com/apis/ajax/playground/#mars/alternate_server_connectivity
Then I get an example of loading a new database. However, if I try to make the CreateInstance calls multiple times, I keep getting the same database (I am guessing this is due to the GEPlugin.exe running in the background still using the first database. If I remove that instance by killing the geplugin.exe process then the load works)
On that code page for an example edit the HTML and I used the following html/script combo
<!--
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>Google Earth API Sample</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback,
{ database: 'http://khmdb.google.com/?db=mars' });
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
function loadmoon()
{
delete ge;
google.earth.createInstance('map3d', initCallback, failureCallback, { database: 'http://khmdb.google.com/?db=moon' });
//http://khmdb.google.com/?db=moon
}
</script>
</head>
<body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;">
<div id="map3d" style="width: 500px; height: 380px;"></div>
<br>
LOAD THE MOON
<div>Installed Plugin Version: <span id="installed-plugin-version" style="font-weight: bold;">Loading...</span></div>
</body>
</html>
This works in that it reloads the instance, BUT it does NOT change the database.
I should say that I am aware of the option of adding a side database, but if I try to load a side database the Terrain is still mapped to the terrain of the first database. For me this is not acceptable.
Set the innerHTML of 'map3d' to an empty string before creating the instance again.
function loadmoon(){
document.getElementById('map3d').innerHTML = '';
google.earth.createInstance('map3d', initCallback, failureCallback, { database: 'http://khmdb.google.com/?db=moon' });
}
Take a look at this example, should be exactly what you need. http://earth-api-samples.googlecode.com/svn/trunk/examples/alternate-spheres.html
Related
I would like the Google Sheets sidebar to open with a color set in cell Sheet1:A1. My current code works (I suspect there may be a more efficient way to do this), but the CSS steps through each theme in root until it lands on the correct theme.
For example, if A1 is set to 'Orange', calling the sidebar will load with the body first as 'Default' and then switch to 'Orange'. Is there a way to load the correct root theme on the initial page load instead of stepping through the themes in root?
Google Apps Script
function onOpen(e) {
SpreadsheetApp.getUi()
.createMenu("Sidebar")
.addItem("Show sidebar", "showSidebar")
.addToUi();
}
function showSidebar() {
var htmlWidget = HtmlService.createTemplateFromFile('Test').evaluate()
.setTitle("Theme Test");
SpreadsheetApp.getUi().showSidebar(htmlWidget);
}
function getColorTheme() {
colorTheme = SpreadsheetApp.getActive().getRange("Sheet1!A1").getDisplayValue();
return colorTheme;
}
HTML for Sidebar
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
:root,
:root.Default {
--bg-color: #45818e;
}
:root.Orange {
--bg-color: #e69138;
}
body {
background-color: var(--bg-color);
}
</style>
<script>
function setTheme(colorTheme) {
document.documentElement.className = colorTheme;
}
</script>
</head>
<body>
<p>Hello world</p>
<script>
google.script.run.withSuccessHandler(setTheme).getColorTheme();
</script>
</body>
</html>
From your situation, how about the following patterns?
Pattern 1:
In this pattern, HTML is modified using Google Apps Script and the modified HTML is used with HtmlService.createHtmlOutput().
Google Apps Script side:
function showSidebar() {
var colorTheme = SpreadsheetApp.getActive().getRange("Sheet1!A1").getDisplayValue();
var html = HtmlService.createHtmlOutputFromFile('Test').getContent().replace("{{colorTheme}}", colorTheme);
var htmlWidget = HtmlService.createHtmlOutput(html).setTitle("Theme Test");
SpreadsheetApp.getUi().showSidebar(htmlWidget);
}
HTML side:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
:root,
:root.Default {
--bg-color: #45818e;
}
:root.Orange {
--bg-color: #e69138;
}
body {
background-color: var(--bg-color);
}
</style>
<script>
document.documentElement.className = "{{colorTheme}}";
</script>
</head>
<body>
<p>Hello world</p>
</body>
</html>
Pattern 2:
In this pattern, HTML is modified using HTMl template and the modified HTML is used with HtmlService.createHtmlOutput().
Google Apps Script side:
function ashowSidebar() {
var colorTheme = SpreadsheetApp.getActive().getRange("Sheet1!A1").getDisplayValue();
var htmlWidget = HtmlService.createTemplateFromFile('Test')
htmlWidget.colorTheme = colorTheme;
SpreadsheetApp.getUi().showSidebar(htmlWidget.evaluate().setTitle("Theme Test"));
}
HTML side:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
:root,
:root.Default {
--bg-color: #45818e;
}
:root.Orange {
--bg-color: #e69138;
}
body {
background-color: var(--bg-color);
}
</style>
<script>
document.documentElement.className = "<?= colorTheme ?>";
</script>
</head>
<body>
<p>Hello world</p>
</body>
</html>
Note:
From the recent benchmark of the HTML template, it seems that in the current stage, the process cost of evaluate() is a bit high. Ref So, I proposed the above 2 patterns with and without an HTML template.
In this case, <html class="{{colorTheme}}"> and <html class="<?= colorTheme ?>"> might be able to be used instead of Javascript. But, I'm not sure about your actual situation. So, in this answer, Javascript is used as a sample modification.
References:
createHtmlOutput(html)
HTML Service: Templated HTML
createTemplateFromFile(filename)
I am experimenting with a basic VSCode extension webview. I am trying to get a simple button click to display a message whenever it is clicked, but the message is only appearing the first time. My HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module Manager</title>
<style> h1 {
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;}
</style>
</head>
<body style="background-color:rgb(60,99,201);">
<h1 style="color:white;">Welcome to the Lab Ticketing System</h1>
<button onclick="moduleAdd()">Click me</button>
<script>
function moduleAdd(){
const vscode = acquireVsCodeApi();
vscode.postMessage({command: "alert", text: "BUTTON PRESSED!"});
}
</script>
</body>
</html>
Then, the javascript code:
let newCommand = vscode.commands.registerCommand('ticketing.start', function () {
vscode.window.showInformationMessage("Activating ticketing system!")
// create webview
const modulePanel = vscode.window.createWebviewPanel('modManage', "Module Manager",
vscode.ViewColumn.One, {enableScripts: true}, );
// pull in the HTML content for the webview panel from external module
modulePanel.webview.html = htmlStuff.getWelcomeScreen();
// handle recieving messages from the webview
modulePanel.webview.onDidReceiveMessage(message =>
{switch(message.command){case 'alert': vscode.window.showErrorMessage(message.text);
return;}}, undefined, context.subscriptions);
});
context.subscriptions.push(disposable, newCommand);
I'm leaving out some code that manages the extension, since the webview displays correctly I think it's just an issue with how I'm implementing the button.
Only call acquireVsCodeApi() once, outside the functions that need it.
with the following html/js code I am able to successfully call my signalR 2.0 hub if html/js and hub resides on the same server.
<!DOCTYPE html>
<html>
<head>
<title>Test SignalR 2.0</title>
<style type="text/css">
.container {
background-color: #99CCFF;
border: thick solid #808080;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" size=100 id="message" />
<input type="button" id="sendmessage" value="Send" />
</div>
<ul id="discussion"></ul>
<!--Script references. -->
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.0.3.min.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
//Instanciating Hub-Class
var srv = $.connection.pvHub;
// Definition of function called by HUB (Server)
srv.client.receiveData = function (message) {
var encodedMsg = $('<div />').text(message).html();
$('#discussion').append('<ul>' + encodedMsg + '</ul><br>');
};
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// call HUB function (on Server)
srv.server.getBnoData($('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
</script>
Now I am trying to call the hub with the same html/js file located on a client. But no success.
I think, there are some issues with the hub proxy and the URL of my hub on instantiating the connection and start it. But strictly speaking no idea how to resolve this.
Any idea?
thx.
You just need to enable Cross Domain support. Read this:
http://www.asp.net/signalr/overview/signalr-20/hubs-api/hubs-api-guide-javascript-client#crossdomain
Also, in case you have already set it up, you have to update your client code to point at the right endpoint, by updating the /signalr/hubs relative address to an absolute one, and by specifying a valid absolute address for $.connection.hub.url. Something like:
<script src="http://foo.com/signalr/hubs"></script>
<script>
...
$.connection.hub.url = 'http://foo.com/signalr';
...
</script>
I wrote this countdown timer, and it works in everything but IE. I get the restricted website from running scripts. But when I click that it is ok , the script doesn't run.
Is there a proper way to set up a javascript script to run after the pause for user ok?
Or is there a way to write it so it works for IE also.
I am not sending anything via innerHTML as code just numbers so I don't see that as the problem, and I rewrote it using the jQuery .html() function with the same results...
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Countdowwn Timer</title>
<style type="text/css">
span#days { font-size:20px;
color:#900;
font-weight:900;
}
span#hours { font-size:20px;
color:#903;
font-weight:900;
}
span#min { font-size:20px;
color:#906;
font-weight:900;
}
span#sec { font-size:20px;
color:#909;
font-weight:900;
}
span#date {font-size:22px;
font-weight:900;
color:#900;
}
span#mar {font-size:22px;
font-weight:900;
color:#03F;}
</style>
<script type="text/javascript">
function theTimer(){
var putday=document.getElementById("days");
var puthour=document.getElementById("hours");
var putmin =document.getElementById("min");
var putsec=document.getElementById("sec");
var marathon=new Date(2012,3,22,10,0,0,0);
var marathonCount=marathon.getTime();
var nowish=Date.now();
var dif=marathonCount-nowish;
var days=Math.floor(dif/(24*60*60*1000));
dif=dif-days*(24*60*60*1000);
var hours=Math.floor(dif/(60*60*1000));
dif=dif-hours*(60*60*1000);
var minutes=Math.floor(dif/(60*1000));
dif=dif-minutes*(60*1000);
var seconds=Math.floor(dif/1000);
putday.innerHTML="this stuffF";
putday.innerHTML=days;
puthour.innerHTML=hours;
putmin.innerHTML=minutes;
putsec.innerHTML=seconds;
var counter = setTimeout("theTimer()", 1000) };
</script>
</head>
<body onload="theTimer()">
<a href ="" style="text-decoration:none">
<center>
<p id="marathon">There are <span id="days"></span> days, <span id="hours"></span> hours, <span id="min"></span> minutes, and <span id="sec"></span> seconds left </p>
</center>
<center>
<p id="marathon">till the beginning of the Next <span id="mar">Marathon</span> on <span id="date">April 22, 2012.</span></p>
</center>
</a>
</body>
</html>
Thank you Naren for your comment about IE9 working.
I tracked it down to using Date.now()
That doesn't work in IE8 (which is one of the trial computer browsers I used) and probably earlier.
If I just do
new Date().getTime();
IE8 handles that.
I'm trying to open a new window from another pop up java script window via writing html code in this pop up window, but it doesn't work, please help me as soon as possible.
<html>
<head>
<style>
.larger{ width:750px;}
.standard{ width:600px;}
.orginal{ width:10px;}
</style>
<script type="text/javascript">
function larger()
{
OpenWindow=window.open("", "larger","width=1000,scrollbars=yes");
OpenWindow.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"'+
'http://www.w3.org/TR/html4/strict.dtd">'+
'<html><head><title>Test page</title>'+
'<style type="text/css">'+
'.larger{ width:750px;}'+
'</style></head><body>');
OpenWindow.document.write('high');
OpenWindow.document.write("<img id='img1' src='webfonts.jpg'>");
OpenWindow.document.write('</body></html>');
OpenWindow.document.close();
OpenWindow.document.getElementById("img1").className = "larger";
}
function standard()
{
OpenWindow=window.open("", "newwin",'width=600,scrollbars=yes');
OpenWindow.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"'+
'"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'+
'<html><head><title>Test page</title>'+
'<style type="text/css">'+
'.standard{ width:600px;}'+
'</style></head><body>');
OpenWindow.document.write("<img id='img1' src='webfonts.jpg'>");
OpenWindow.document.write('</body></html>');
OpenWindow.document.close();
OpenWindow.document.getElementById("img1").className = "standard";
}
</script>
</head>
<body>
<img class="orginal"id="img1" src="webfonts.jpg" border="0" />
<span onclick="larger()">fig1</span>
</body>
</html>
You have created the standard function in the first parent script and you are trying to call it from the child pop-up window, which would offcourse not find this function defined within it.