source: trunk/webmap/html/js/webmap/modules.js @ 15

/// Map modules to control the view using the mouse.
/**
 * \param map The map.
 */
webmap.modules.map.MouseViewControl = function(map) {
        this.map        = map;
        this.hide_click = false;
        
        this.mouseDownListener  = this.mouseDown.bind(this);
        this.mouseUpListener    = this.mouseUp.bind(this);
        this.mouseMoveListener  = this.mouseMove.bind(this);
        this.mouseWheelListener = this.mouseWheel.bind(this);
        this.mouseClickListener = this.mouseClick.bind(this);
        
        this.map.root.addEventListener("mousedown",      this.mouseDownListener,  false);
        this.map.root.addEventListener("mouseup",        this.mouseUpListener,    false);
        this.map.root.addEventListener("mouseleave",     this.mouseUpListener,    false);
        this.map.root.addEventListener("wheel",          this.mouseWheelListener, false);
        this.map.root.addEventListener("mousewheel",     this.mouseWheelListener, false);
        this.map.root.addEventListener("DOMMouseScroll", this.mouseWheelListener, false);
        this.map.root.addEventListener("click",          this.mouseClickListener, true);
}

/// Destroy the module and clean up.
webmap.modules.map.MouseViewControl.prototype.destroy = function() {
        this.map.root.removeEventListener("mousedown",      this.mouseDownListener,  false);
        this.map.root.removeEventListener("mouseup",        this.mouseUpListener,    false);
        this.map.root.removeEventListener("mousemove",      this.mouseMoveListener,  false);
        this.map.root.removeEventListener("mouseleave",     this.mouseUpListener,    false);
        this.map.root.removeEventListener("wheel",          this.mouseWheelListener, false);
        this.map.root.removeEventListener("mousewheel",     this.mousewheelListener, false);
        this.map.root.removeEventListener("DOMMouseScroll", this.mousewheelListener, false);
        this.map.root.removeEventListener("click",          this.mouseClickListener, true);
}

/// Handle mouse down events.
webmap.modules.map.MouseViewControl.prototype.mouseDown = function(event) {
        // Normalize the event and stop the default action.
        event = event || window.event;
        event.preventDefault();
        
        // Remember the mouse coordinates.
        this.mouse_x     = event.clientX;
        this.mouse_y     = event.clientY;
        this.mouse_moved = false;
        this.map.root.addEventListener("mousemove",  this.mouseMoveListener, false);
}

/// Handle mouse move events.
webmap.modules.map.MouseViewControl.prototype.mouseMove = function(event) {
        // Skip the event if the mouse wasn't pressed on the map.
        if (this.mouse_x === undefined) return;
        
        // Normalize the event and prevent default actions.
        event = event || window.event;
        event.preventDefault();
        
        // Scroll and remember the mouse coordinates.
        var diff_x = (event.clientX - this.mouse_x);
        var diff_y = (event.clientY - this.mouse_y);
        this.map.translate(diff_x, diff_y);
        this.mouse_x     = event.clientX;
        this.mouse_y     = event.clientY;
        this.mouse_moved = true;
}

/// Capture click events and shove them under the carpet.
webmap.modules.map.MouseViewControl.prototype.mouseClick = function(event) {
        if (this.hide_click) {
                event = event || window.event;
                event.preventDefault();
                event.stopPropagation();
                this.hide_click = false;
        }
}

/// Handle mouse up events.
webmap.modules.map.MouseViewControl.prototype.mouseUp = function(event) {
        // Skip the event if the mouse wasn't pressed on the map.
        if (this.mouse_x === undefined) return;
        
        // Normalize the event and prevent default actions.
        event = event || window.event;
        event.preventDefault();
        
        // Scroll and clear the mouse coordinates.
        var diff_x = (event.clientX - this.mouse_x);
        var diff_y = (event.clientY - this.mouse_y);
        
        // If the mouse has moved since going down, it's not a click but a drag.
        this.hide_click = diff_x || diff_y || this.mouse_moved;
        
        this.map.translate(diff_x, diff_y);
        this.mouse_x     = undefined;
        this.mouse_y     = undefined;
        this.mouse_moved = undefined;
        this.map.root.removeEventListener("mousemove", this.mouseMoveListener, false);
        
}

/// Handle mouse scroll events.
webmap.modules.map.MouseViewControl.prototype.mouseWheel = function(event) {
        event = event || window.event;
        event.preventDefault();
        
        // Get the X and Y coordinates of the mouse within the SVG viewport.
        var bounds = this.map.getBoundingRect();
        var x = event.clientX - bounds.left;
        var y = event.clientY - bounds.top;
        
        // Determine (or estimate) the amount of lines scrolled.
        var lines = 0;
        
        // Modern wheel events.
        if (event.deltaMode !== undefined && event.deltaY !== undefined) {
                switch (event.deltaMode) {
                        case 0x00: lines = event.deltaY / 14; break; // About 14 pixels per line?
                        case 0x01: lines = event.deltaY;      break; // About exactly 1 line per line.
                        case 0x02: lines = event.deltaY * 10; break; // Lets just call a page 10 lines.
                }
        // Old Gecko DOMMouseScroll events.
        } else if (event.detail) {
                switch (event.detail) {
                        case  32768: lines =  10;          break; // Lets just call a page 10 lines.
                        case -32768: lines = -10;          break; // Lets just call a page 10 lines.
                        default:     lines = event.detail; break; // About exactly 1 line per line.
                }
        // Old mousewheel events.
        } else if (event.wheelDelta) {
                lines = event.wheelDelta / -40.0;
        }
        
        // Handle the scroll.
        if (event.shiftKey) {
                this.map.rotate(5.0 * lines, this.map.canvas_width * 0.5, this.map.canvas_height * 0.5); // Rotate -5 degrees per line.
        } else {
                this.map.scale(Math.pow(1.15, -lines / 3.0), x, y); // Zoom 15% per 3 lines.
        }
}


/// Map modules to show the name of the currently selected robot in a HTML element.
/**
 * The module works by replacing the text content of the given HTML element.
 * 
 * \param map         The map.
 * \param element     The HTML element to display the name in.
 * \param default_msg The message to show when there is no selected robot.
 */
webmap.modules.map.ShowSelected = function(map, element, default_msg) {
        if (default_msg === undefined || default_msg === null) default_msg = "No selection";
        
        this.map                 = map;
        this.default_msg         = default_msg;
        this.element             = element;
        this.onSelect();
}

/// Destroy the module and clean up.
webmap.modules.map.ShowSelected.prototype.destroy = function() {
        this.element.textContent = "";
}

/// Handle selection changes by updating the text content of the DOM element.
webmap.modules.map.ShowSelected.prototype.onSelect = function() {
        this.element.textContent =  this.map.selected ? this.map.selected.name : this.default_msg;
}


/// Module to allow keyboard control of robots.
/**
 * \param map            The map.
 * \param speed          The forward speed.
 * \param rotation_speed The rotational speed in rad/s.
 */
webmap.modules.map.Teleop = function(map, speed, rotation_speed) {
        this.map   = map;
        this.speed = speed;
        this.rotation_speed = rotation_speed;
        
        // Initial keyboard state.
        this.forward  = false;
        this.backward = false;
        this.left     = false;
        this.right    = false;
        
        // Timeout ID so we can cancel it later.
        this.timeout  = null;
        
        // Set up event listeners.
        this.keydown_listener = this.keyEvent.bind(this, true);
        this.keyup_listener   = this.keyEvent.bind(this, false);
        this.blur_listener    = this.blur.bind(this);
        document.body.addEventListener("keydown", this.keydown_listener, false);
        document.body.addEventListener("keyup",   this.keyup_listener,   false);
        document.addEventListener("blur", this.blur_listener, false);
}

/// Destroy the module and clean up.
webmap.modules.map.Teleop.prototype.destroy = function() {
        document.body.removeEventListener("keydown", this.keydown_listener, false);
        document.body.removeEventListener("keyup",   this.keyup_listener,   false);
        document.removeEventListener("blur", this.blur_listener, false);
}

/// Send the twist message based on the state of the keyboard.
webmap.modules.map.Teleop.prototype.actuate = function() {
        if (this.map && this.map.selected) {
                var robot = this.map.selected;
                var x = 0;
                var rz = 0;
                if (this.forward)  x  += this.speed;
                if (this.backward) x  -= this.speed;
                if (this.left)     rz += this.rotation_speed;
                if (this.right)    rz -= this.rotation_speed;
                if (x < 0) rz *= -1;
                this.map.selected.twist(x, 0, 0, 0, 0, rz);
                this.timeout = window.setTimeout(this.actuate.bind(this), 100);
        }
}

/// When the document loses focus, make sure we forget all pressed keys.
webmap.modules.map.Teleop.prototype.blur = function() {
        // Reset keyboard state.
        this.forward  = false;
        this.backward = false;
        this.left     = false;
        this.right    = false;
        
        // Cancel any running timeout.
        if (this.timeout !== null) {
                window.clearTimeout(this.timeout);
                this.timeout = null;
        }
}

/// Handle key events on the map.
/**
 * \param down If true, the key has been pressed, otherwise it has been unpressed.
 * \param event The event that triggered the listener.
 */
webmap.modules.map.Teleop.prototype.keyEvent = function(down, event) {
        event = event || window.event;
        
        // Remember the state of interesting keys.
        var interested = false;
        switch (event.keyCode) {
                case 87: // W (87) means forwards.
                        interested    = true;
                        this.forward  = down;
                        break;
                case 83: // S (83) means backwards.
                        interested    = true;
                        this.backward = down;
                        break;
                case 65: // A (65) means left.
                        interested    = true;
                        this.left     = down;
                        break;
                case 68: // D (68) means right.
                        interested    = true;
                        this.right    = down;
                        break;
        }
        
        // Start or stop the timeouts.
        if (this.forward || this.backward || this.left || this.right) {
                if (this.timeout === null) this.timeout = window.setTimeout(this.actuate.bind(this), 100);
        } else if (this.timeout !== null) {
                window.clearTimeout(this.timeout);
                this.timeout = null;
        }
        
        if (interested) event.preventDefault();
}

/*//////////////////
// Robot modules
// This section of the file contains modules for robots.
//////////////////*/

/// Create a new laser scanner sensor module.
/**
 * \param robot      The robot.
 * \param connection The ROS connection.
 * \param topic      The name of the LaserScan topic.
 * \param x          The X offset relative from robot origin.
 * \param y          The Y offset relative from the robot origin.
 * \param angle      The rotation of the sensor in degrees.
 * \param max_dots   (Optional) Maximum number of dots to show. Defaults to 50.
 * \param throttle   (Optional) The minimum time in milliseconds between receiving two updates. Defaults to 300.
 * 
 * An angle of 0 degrees means the sensor is looking along the positive X axis of the robot.
 */
webmap.modules.robot.LaserScanner = function(robot, connection, topic, x, y, angle, max_dots, throttle) {
        if (max_dots === undefined || max_dots === null) max_dots = 50;
        if (throttle === undefined || throttle === null) throttle = 300;
        
        /// Locally unique ID.
        this.id = webmap.generateId();
        
        this.robot        = robot;
        this.connection   = connection;
        this.topic        = topic;
        this.svg          = document.createElementNS(webmap.svgns, "g");
        this.svg.setAttribute("class", "laserscan");
        this.dots         = [];
        
        this.x = x;
        this.y = y;
        this.angle = angle;
        
        // Create the dots to visualize the readings.
        for (var i = 0; i < max_dots; ++i) {
                var dot = document.createElementNS(webmap.svgns, "circle");
                dot.setAttribute("cx",    0);
                dot.setAttribute("cy",    0);
                dot.setAttribute("r",     0.05);
                dot.setAttribute("class", "dot");
                dot.style.display = "none";
                dot = this.svg.appendChild(dot);
                this.dots.push(dot);
        }
        
        // Add the SVG.
        this.robot.svg.appendChild(this.svg);
        
        // Subsribe to the data topic.
        this.connection.subscribe(this.handleData.bind(this), this.topic, null, throttle, null, null, null, this.id);
}

/// Destroy the module and clean up.
webmap.modules.robot.LaserScanner.prototype.destroy = function() {
        this.connection.unsubscribe(this.topic, this.id);
        this.svg.parentNode.removeChild(this.svg);
}

/// Handle sensor data by updating the drawing.
webmap.modules.robot.LaserScanner.prototype.handleData = function(msg) {
        // Add a dot for all valid readings.
        var count = Math.min(this.dots.length, msg.ranges.length);
        
        for (var i = 0; i < this.dots.length; ++i) {
                // If a dot has no reading, make it invisible.
                if (i >= count) {
                        this.dots[i].style.display = "none";
                        continue;
                }
                
                var index = Math.round(i * msg.ranges.length / count);
                var angle = ((msg.angle_min + index * msg.angle_increment) / Math.PI * 180 + 360) % 360;
                var range = msg.ranges[index];
                
                // Don't render invalid readings.
                if (range < msg.range_min || range > msg.range_max) {
                        this.dots[i].style.display = "none";
                        continue;
                }
                
                // Place the dot.
                var transform = webmap.svg.createSVGMatrix().rotate(angle).translate(range, 0);
                this.dots[i].transform.baseVal.initialize(this.dots[i].transform.baseVal.createSVGTransformFromMatrix(transform));
                this.dots[i].style.display = "inline";
        }
}