If I were to write an application that controls another application which I don't have the binaries to,
For example, an application that by itself would open Google Earth and place the camera in a specific point my application would tell it, say -24,131, and then command google earth to save the image to a specific folder.
What is the approach to this?
How can I know the functions that are being executed and fire them on behalf of a control program like that?
Also, I will also need to know that downloading of images was finished so I can grab the image.
I saw there is an API for google earth, but I don't know if I can use it to control google-earth (the application itself)
You can use the Google Earth API (developers.google.com/earth/) to control a Google Earth globe instance.
See Javascript code snapshot here:
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getOptions().setStatusBarVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
var lookAt = ge.createLookAt('');
lookAt.setLatitude(41.26);
lookAt.setLongitude(-100.00);
lookAt.setRange(800000.0);
ge.getView().setAbstractView(lookAt);
}
function failureCB(errorCode) {
alert(errorCode);
}
google.setOnLoadCallback(init);
See HTML code here:
<!DOCTYPE html>
<head>
<script src="http://www.google.com/jsapi"></script>
</head>
<style>
body {
margin:20px;
height:100%;
width:98%;
}
#map3d {
width:75%;
float:right;
}
</style>
<body>
<div id="map3d"></div>
</body>
</html>
The you can use wkhtml2pdf (code.google.com/p/wkhtmltopdf/) function wkhtmltoimage, or PhantomJs (github.com/ariya/phantomjs/wiki/Screen-Capture) to get an image version.
Hope it helps!
Cheers,
Mihai
Related
Alright StackOverflow, I've got a weird one today. I am working on adding pasting of images to a website. It works for Firefox and Chrome but fails for IE. When I turn on the debugger it gives an error on:
var items = event.clipboardData.items;
saying that event.clipboardData.items is undefined. What is the way to do this in IE?
Here is the code which actually comes from the WebKit layout tests:
<!DOCTYPE html>
<html>
<head>
<script>
function paste(event){
var items = event.clipboardData.items;
console.log(items.length);
for (var i = 0; i < items.length; ++i) {
if (items[i].kind == 'file' && items[i].type == 'image/png') {
var blob = items[i].getAsFile();
var url = window.URL.createObjectURL(blob);
document.getElementById('dest').src = url;
}
}
}
window.onload = function (e) {
document.body.onpaste = paste;
}
</script>
</head>
<body contenteditable="true">
<img id="dest">
</body>
</html>
The specific workflow I'm trying to allow is for a user to use the Snipping Tool to take a snapshot and to then paste that image into IE. Normally I would tell the user to use Chrome or Firefox but this is for work and we are restricted to IE. Thanks for the help!
My testing Environment:
Windows 8 64bit
IE 10
This is a really old issue, but copying an image from snipping tool to IE10 is simply not possible. The functionality is added in Edge. IE10 does not have the tools to paste images from clipboard.
I just basically want to get the "http://... .png" or "http://... .jpg" location of my canvas as an image.
I have already tried toDataURL() but it is not working. Especially if I loaded an image within the canvas.
Here is my code: (btw, I'm using jQuery here)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var canvas = $("#canvas");
var ctx = canvas.get(0).getContext("2d");
var image1 = new Image();
image1.src = "http://www.helpinghomelesscats.com/images/cat1.jpg"
$(image1).load(function(){
ctx.drawImage(image1,0,0,200,200);
});
});
</script>
with my html/body having only this:
<canvas id="canvas" width="500" height="400"></canvas>
now, if you try that, that works fine. it shows that cat.
but when i add that toDataURL into my script, it just doesn't happen.
var dataImg = canvas.get(0).toDataURL();
i load this dataImg variable into another click-redirect function to test it, hoping it would redirect to the page using the base64 url it contains, but it just doesn't work:
$("#canvas").click(function(){
document.location = dataImg;
});
it brings me to a blank page? what am i missing here?
thank you very much!
Do you own http://www.helpinghomelesscats.com or is your code hosted directly on that site? If not you won't be able to do this due to cross site origin policies. The best way would be to have some server side code grab the image and then serve it locally on your domain.
If you do own helpinghomelesscats.com this should work, as tested here
Live Demo
Click the canvas and view the log in order to see the response.
I am attempting to use Chrome-Frame on a site I'm building.
In IE8 and below, everything works fine...
In IE9 I get this error:
SCRIPT5: Access is denied.
cf-dlpage.js, line78 character 209
No idea what to do!
here is the conditional that is triggering the behaviour:
<!--[if lte IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style>
body {
overflow-y:hidden;
}
.chromeFrameOverlayContent {
border:none;
overflow:hidden;
}
.chromeFrameOverlayContent iframe {
border:none;
overflow:hidden;
}
.chromeFrameOverlayCloseBar {
display:none;
}
.chromeFrameOverlayUnderlay {
background-image:url(/img/bg.png);
opacity: 1;
filter: alpha(opacity = 100);
}
</style>
<script type="text/javascript">
window.onload = function() {
CFInstall.check({
url: "/fix/update.html",
mode: "overlay",
destination: "/"
});
};
</script>
<![endif]-->
Any help greatly appreciated!
Try this it sounds that its related to your problem. i hope it helps.
read comment from erikwright#chromium.org, is the last comment right now.
The problem is caused by this:
Your page is on www.example.com
The installation routine creates an iframe with a url www.google.com/...
The iframe page itself executes Javascript and tries to read window.parent, but...
... this is not allowed because both frames have different domains.
The only solutions seem to be:
Create your own install script
Google fixes their script
I wasted a whole day trying to work around this problem (nested frames, custom scripts, routing Google requests through my server,...) until it dawned me why Google seems to ignore this bug:
Most people simply don't notice the problem. The installation is performed successfully, regardless of this error. To actually get a message box you have to enable Javascript debugging or the Show Javascript errors feature.
You and I have enabled said features because we are developers, so naturally we freak out, but Average Joe won't notice anything.
I'm working on my first GM script, to replace the Flash previews on http://www.freesound.org with HTML 5 audio tags, and to add a download link to search results. I have the latter working fine, but I can't get the audio tag to display in Firefox 3.5.9. Here's my script:
// ==UserScript==
// #name FreeSound HTML 5 Preview
// #namespace http://thewordnerd.info
// #description Replace Flash-based sound previews on freesound.org with audio tags and add quick download links
// #include http://freesound.org/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
// ==/UserScript==
$(document).ready(function() {
$("embed").remove();
$(".samplelist").each(function(index) {
sampleNo = $(this).find("a:first").attr("href").split("?")[1].split("=")[1];
userName = $(this).find("a:eq(1)").html();
title = $(this).find("a:first").html().replace(/ /g, "_");
url = "/download/"+sampleNo+"/"+sampleNo+"_"+userName+"_"+title;
$(this).find("script").replaceWith("<audio src='"+url+"' controls='controls' type='audio/wave'/>");
//$(this).find("audio").removeAttr("tabindex");
$(this).append("<a href='"+url+"'>Download</a>");
});
});
I can see the element in Firebug and it seems just fine.
Thoughts on what I might be doing wrong here? Since the download link does download the requested file, since it's a wave and since I think I've set the correct type, I'm at a loss as to why this isn't displaying.
It may not be your script so much as the freesound.org site/server.
When I run a modified version of your script, the audio controls all appear for a split second before reverting to the error display, like so:
Firefox reports MEDIA_ERR_SRC_NOT_SUPPORTED for the files I checked.
Save this code to your machine and then run it with Firefox:
<html>
<head>
<title>Audio File test</title>
</head>
<body>
<audio id="aud1" controls="true" type="audio/ogg"
src="http://www.freesound.org/download/7521/7521_abinadimeza_Rainfall.ogg">xxx</audio>
<audio id="aud2" controls="true" type="audio/ogg"
src="http://developer.mozilla.org/#api/deki/files/2926/=AudioTest_(1).ogg">xxx</audio>
</body>
<script type="text/javascript">
window.addEventListener ("load", ErrorReport, false);
function ErrorReport (evt)
{
console.log (document.getElementById ("aud1").error);
console.log (document.getElementById ("aud2").error);
}
</script>
</html>
.
You'll see that the known good file, from Mozilla, works correctly but the one from freesound.org does not. This may be a bug/limitation in Firefox -- both files play fine on my local player.
Here is a link to the Firefox bug system, to search for or report bugs.
I'd like to know what languages and tools (debuggers, IDEs, profilers, libraries, etc) are available for those wanting to develop for Palm Pre.
Also, I'd like to know what technological restrictions exists that one has to be aware of.
There is a library of JavaScript functions for interacting with the base system (phone-level stuff) and CSS tags, styles, etc, for rendering in the Palm WebOS style.
The SDK comes with a script "palm-generate" which builds a set of configuration files and folder structure. The "palm-package" script builds an isntaller, and nother script, "palm-install" load the installer into the emulator's file system (or a real palm, I believe...mine is on order and should be here Monday!!!).
It is easy enough to find this code, and it isn't at all original, but I thought it would be valuable to give a glimpse here...
Hello World - copied from the tutorial in the palm webos sdk
HelloWorld/appinfo.json - meta-information for this application, including a unique name (domain-style), and the root of the application ("index.html")
{
"id": "com.yourdomain.hello",
"title": "Hello World",
"type": "web",
"main": "index.html",
"icon": "icon.png",
"version": "1.0.0",
"vendor": "Your Company"
}
HelloWorld/sources.json - manifest
[
{
"source": "app\/assistants\/stage-assistant.js"
},
{
"source": "app\/assistants\/first-assistant.js",
"scenes": "first"
}
]
helloWorld/app/assistants/stage-assistant.js - controller for the application. each application consists of a Stage with multiple Scenes; the StageAssistant.setup() method gets control first, providing time to initialize data, connections, etc.
function StageAssistant () {
}
StageAssistant.prototype.setup = function() {
this.controller.pushScene('first');
}
HelloWorld/index.html - the view for the Stage
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPECTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Hello, World!</title>
<script src="/usr/palm/frameworks/mojo/mojo.js" type="text/javascript" x-mojo-version="1"></script>
</head>
<body>
Hello, World! 2:59
</body>
</html>
helloWorld/app/assistants/first-assistant.js - view for the "first" scene
<div id="main" class="palm-hasheader">
<div class="palm-header">Header</div>
<div id="count" class="palm-body-text">count</div>
<div id="MyButton" name="MyButton1" x-mojo-element="Button"></div>
</div>
helloWorld/app/assistants/first-assistant.js - controller for the "first" scene
function FirstAssistant() {
/* this is the creator function for your scene assistant object. It will be passed all the
additional parameters (after the scene name) that were passed to pushScene. The reference
to the scene controller (this.controller) has not be established yet, so any initialization
that needs the scene controller should be done in the setup function below. */
}
FirstAssistant.prototype.handleButtonPress = function(event){
// increment the total and update the display
this.total++;
this.controller.get('count').update(this.total);
}
FirstAssistant.prototype.setup = function() {
/* this function is for setup tasks that have to happen when the scene is first created */
/* use Mojo.View.render to render view templates and add them to the scene, if needed. */
/* setup widgets here */
/* add event handlers to listen to events from widgets */
// set the initial total and display it
this.total=0;
this.controller.get('count').update(this.total);
// a local object for button attributes
this.buttonAttributes = {};
// a local object for button model
this.buttonModel = {
buttonLabel : 'TAP HERE',
buttonClass : '',
disabled : false
};
// set up the button
this.controller.setupWidget("MyButton", this.buttonAttributes, this.buttonModel);
// bind the button to its handler
Mojo.Event.listen(this.controller.get('MyButton'), Mojo.Event.tap, this.handleButtonPress.bind(this));
}
FirstAssistant.prototype.activate = function(event) {
/* put in event handlers here that should only be in effect when this scene is active. For
example, key handlers that are observing the document */
}
FirstAssistant.prototype.deactivate = function(event) {
/* remove any event handlers you added in activate and do any other cleanup that should happen before
this scene is popped or another scene is pushed on top */
}
FirstAssistant.prototype.cleanup = function(event) {
/* this function should do any cleanup needed before the scene is destroyed as
a result of being popped off the scene stack */
this.controller.stopListening(this.controller.get('MyButton'), Mojo.Event.tap, this.handleButtonPress.bind(this));
}
Its very much like writing web applications but you'll need to download the webOS SDK from http://developer.palm.com/ and a palm emulator.
All the information is there and its easy to get going if you use the eclipse IDE
It is a web-based OS, so I would assume it's somewhat similar to doing PhoneGap development, if you are at all familiar with their framework.
Javascript with custom API calls will drive most of the applications and it looks like they are configuring their SDK to work well with Eclipse IDE. Of course HTML and CSS will cover the front end of things.
A good beginner page explaining what you are looking for can be found here: http://developer.palm.com/index.php?option=com_content&view=article&id=1603