You might want to do this if you want more flashy features than the standard BYOND output control can give you. The example I'm going to do uses jQuery to have new messages slowly fade in instead of appearing instantly. You could use other built-in jQuery effects like sliding, or some other javascript/html features that an output control can't do.
The first step is to create a DM environment to work with, or use one you already have. It needs an interface with a browser control (I named mine "browseroutput") and an input control.
The next step is to download the jQuery library and place it in the DM environment's folder. The current version when I wrote this was jquery-1.3.2.js.
Now for code! The browser output needs sort of a template html page loaded that BYOND can send messages to with javascript. Messages are sent using a proc I'm calling boutput() so that they're all guaranteed to be url-encoded to avoid causing javascript errors.
client
New()
. = ..() // do defaut client/New() actions
// Load the browser control with our output template
src << output(browseroutputtemplate, "browseroutput")
var/browseroutputtemplate = {"
<html>
<head>
<script type='text/javascript'>
function output(msg) {
alert(msg);
}
</script>
</head>
<body>
Messages:
</body>
</html>"}
proc
boutput(target, msg, control_id)
// text sent to javascript has to be url_encode()d to avoid errors
target << output(url_encode(msg), "[control_id]:output") // calls the javascript function named 'output'
mob
verb
say(message as text)
boutput(src, "[src] says, '[message]'", "browseroutput")
Running that code and using the say() verb should produce a javascript-created alert box. Nice, but this is supposed to be a browser output control. For that, it needs jQuery.
client
New()
. = ..() // do defaut client/New() actions
// Send the jQuery library to the player so it can be included in html later
src << browse_rsc('jquery-1.3.2.js', "jquery-1.3.2.js")
// Load the browser control with our output template
src << output(browseroutputtemplate, "browseroutput")
var/browseroutputtemplate = {"
<html>
<head>
<script src="jquery-1.3.2.js"></script>
<style>
#output {
overflow: auto;
height: 80%;
}
</style>
<script type='text/javascript'>
function output(msg) {
// Finds the tag with the 'output' id, and adds a new message div inside
$("#output").append("<div class='message'>" + msg + "</div>");
}
</script>
</head>
<body>
Messages:
<div id='output'>
</div>
</body>
</html>"}
The new html template has a few differences from the old one. First, the jquery library is included. Next, the output div is given a style so that it hopefully doesn't take up the entire area, and will display scrollbars if necessary. Instead of an ugly message box, the messages are now added to the page using jQuery.
This is still pretty ugly, and not much of an improvement over the regular output control (although you could embed flash videos now if you wanted to). Also, it doesn't scroll to the bottom when there's a new message. A small amount of CSS and two lines of jQuery are all that's needed to fix this.
var/browseroutputtemplate = {"
<html>
<head>
<script src="jquery-1.3.2.js"></script>
<style>
body {
background: #EEEEFF;
font-family: "Arial";
}
#output {
overflow: auto;
height: 80%;
padding: 10px;
background: #AACCFF;
}
.message {
display: none;
color: #4466CC;
}
</style>
<script type='text/javascript'>
function output(msg) {
// Finds the tag with the 'output' id, and adds a new message div inside
$("#output").append("<div class='message'>" + msg + "</div>");
// Finds the most recent message, and fades it in slowly
$("#output .message:last").fadeIn("slow")
// Auto-scroll to the bottom of the messages
$("#output").scrollTop( $("#output").height() );
}
</script>
</head>
<body>
Messages:
<div id='output'>
</div>
</body>
</html>"}
The message class is set to start hidden so that jQuery can have each message fadeIn once they're created. The rest of the CSS is just to make it look nicer like any webpage.
This is only the surface of the cool effects that can be created with a browser output control. Individual messages could be assigned different css classes, given different animations, or even be instructed by BYOND to delete themselves after the fact, or disappear after a certain amount of time. Here's an example of one of those. Since jQuery doesn't yet have a wait() function of its own, the wait() function is copy&pasted from a demo on the jQuery website.
var/browseroutputtemplate = {"
<html>
<head>
<script src="jquery-1.3.2.js"></script>
<style>
body {
background: #EEEEFF;
font-family: "Arial";
}
#output {
overflow: auto;
height: 80%;
padding: 10px;
background: #AACCFF;
}
.message {
display: none;
color: #4466CC;
}
.hovering {
background: #EEEEFF;
font-weight: bold;
}
</style>
<script type='text/javascript'>
// wait() function from http://docs.jquery.com/Cookbook/wait
$.fn.wait = function(time, type) {
time = time || 1000;
type = type || "fx";
return this.queue(type, function() {
var self = this;
setTimeout(function() {
$(self).dequeue();
}, time);
});
};
function output(msg) {
// Finds the tag with the 'output' id, and adds a new message div inside
$("#output").append("<div class='message'>" + msg + "</div>");
// Finds the most recent message, and fades it in slowly
// then waits 15 seconds and goes away
// could be used for not-so-important notifications
$("#output .message:last").fadeIn("slow").wait(15000).fadeOut(2000);
// Auto-scroll to the bottom of the messages
$("#output").scrollTop( $("#output").height() );
// Bind jQuery hover event to the new message div
$("#output .message:last").hover(
function () {
$(this).addClass("hovering");
},
function () {
$(this).removeClass("hovering");
}
);
}
</script>
</head>
<body>
Messages:
<div id='output'>
</div>
</body>
</html>"}
Try to come up with and implement more ideas for the browser output control. One flaw with this implementation is that even if the player is scrolled up and looking at something, the next message will force them to scroll down. An if() in the output() function could fix that. Or how about clicking on a message to highlight all the previous messages from that person? jQuery's docs and plugins might be good places to look for inspiration.