Monday, October 04, 2010
Plotting with dygraphs JavaScript
I stumbled across dygraphs at lunch. This is perfect for plotting line plots--anything you care to export from a spreadsheet. For input, you only need a file with comma separated values. For free, you get mouseover point values and drag-and-zoom.
HTML5 Messaging and PMRPC
From a suggestion by David Braun, I took a quick look at PMRPC as a way to send messages between browser windows and gadgets using HTML5 standards. One of PMRPC's selling points is that it promises to hide the details of the much lower level HTML5 API. Oh, computer science....
Since I'm not a great JavaScript programmer, I found the provided examples to be a little opaque. Here are simple working examples, at least in Google Chrome on Mac. They did not work for Firefox 3.6.
Window-IFrame Example
In this example, you have an HTML page that contains an iFrame, and you want to send a message from the container to the child iFrame. Here's the parent's HTML. I dubbed this file frame2.html.
<html>
<head>
<script src="json2.js" type="text/javascript"></script>
<script type="text/javascript" src="pmrpc.js"></script>
<script>
function dothing() {
// call the exposed procedure
pmrpc.call( {
destination : window.frames["iFrameA"],
publicProcedureName : "HollowPMRPC",
params : ["Hollow World!"] } );
}
</script>
</head>
<body>
<iframe id="iFrameA" title="iFrameA" src="http://your.server.base/frame1.html"></iframe>
This is Frame B.
<input type="button" name="send message" onClick="dothing()">
</body>
</html>
The embedded iFrame (called frame1.html above) looks like this:
<html>
<head>
<script src="json2.js" type="text/javascript"></script>
<script type="text/javascript" src="pmrpc.js"></script>
<script>
//function init(){
// expose a procedure
alert("Init");
pmrpc.register( {
publicProcedureName : "HollowPMRPC",
procedure : function(printParam) { alert(printParam); } } );
//}
</script>
</head>
<body>
This is Frame A.
</body>
Click the button and send the alert. Welcome to 2010.
IFrame to IFrame Communication
To get two peer windows (two embedded iFrames in this case) to send messages to each other, we need to use the "publish" destination in frame1.html. We'll also delete the iframe tag. The new HTML looks like this:
<html>
<head>
<script src="json2.js" type="text/javascript"></script>
<script type="text/javascript" src="pmrpc.js"></script>
<script>
function dothing() {
// call the exposed procedure
pmrpc.call( {
destination : "publish",
publicProcedureName : "HollowPMRPC",
params : ["Hollow World!"] } );
}
</script>
</head>
<body>
This is Frame B.
<input type="button" name="send message" onClick="dothing()">
</body>
</html>
We don't need to make any modifications to frame2.html. Finally, we need a simple HTML page to contain the iFrames for frame1.html and frame2.html. I call this container.html:
<html>
<head>
<script src="json2.js" type="text/javascript"></script>
<script type="text/javascript" src="pmrpc.js"></script>
<script>
function dothing() {
// call the exposed procedure
pmrpc.call( {
destination : window.frames["iFrameA"],
publicProcedureName : "HollowPMRPC",
params : ["Hollow World!"] } );
}
</script>
</head>
<body>
<iframe id="iFrameA" title="iFrameA" src="http://your.server.base/frame1.html"></iframe>
This is Frame B.
<input type="button" name="send message" onClick="dothing()">
</body>
</html>
The embedded iFrame (called frame1.html above) looks like this:
<html>
<head>
<script src="json2.js" type="text/javascript"></script>
<script type="text/javascript" src="pmrpc.js"></script>
<script>
//function init(){
// expose a procedure
alert("Init");
pmrpc.register( {
publicProcedureName : "HollowPMRPC",
procedure : function(printParam) { alert(printParam); } } );
//}
</script>
</head>
<body>
This is Frame A.
</body>
Click the button and send the alert. Welcome to 2010.
IFrame to IFrame Communication
To get two peer windows (two embedded iFrames in this case) to send messages to each other, we need to use the "publish" destination in frame1.html. We'll also delete the iframe tag. The new HTML looks like this:
<html>
<head>
<script src="json2.js" type="text/javascript"></script>
<script type="text/javascript" src="pmrpc.js"></script>
<script>
function dothing() {
// call the exposed procedure
pmrpc.call( {
destination : "publish",
publicProcedureName : "HollowPMRPC",
params : ["Hollow World!"] } );
}
</script>
</head>
<body>
This is Frame B.
<input type="button" name="send message" onClick="dothing()">
</body>
</html>
We don't need to make any modifications to frame2.html. Finally, we need a simple HTML page to contain the iFrames for frame1.html and frame2.html. I call this container.html:
<html>
<body>
<iframe id="iFrameA" title="iFrameA" src="http://your.server.base/frame1.html"></iframe>
<iframe id="iFrameB" title="iFrameB" src="http://your.server.base/frame2.html"></iframe>
</body>
</html>
Subscribe to:
Posts (Atom)