JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>

JavaScript

ARDroneLight = function () {
    this.canvas = Raphael(0, 0, 300, 277);
    this.canvas.image("http://gauth.fr/wp-content/uploads/2011/09/missile_1-300x277.jpg", 0, 0, 300, 277)
    this.R1 = this.canvas.circle(90, 80, 10).attr("fill", "#f00")
    this.R2 = this.canvas.circle(210, 80, 10).attr("fill", "#f00")
    this.R3 = this.canvas.circle(210, 200, 10).attr("fill", "#f00")
    this.R4 = this.canvas.circle(90, 200, 10).attr("fill", "#f00")
};
ARDroneLight.prototype = {
    animate: function () {
        this.currentState = 0;
        this.states = [];
        for (var i = 0; i < arguments.length; ++i) {
            this.states.push({
                leds: arguments[i][0],
                delay: arguments[i][1]
            });
        }
        this.nextLeds();
    },
    setLeds: function () {
        var leds = this.states[this.currentState].leds;
        if (leds & 0x0001) { this.R1.show() } else { this.R1.hide(); }
        if (leds & 0x0002) { this.R2.show() } else { this.R2.hide(); }
        if (leds & 0x0004) { this.R3.show() } else { this.R3.hide(); }
        if (leds & 0x0008) { this.R4.show() } else { this.R4.hide(); }
    },
    nextLeds: function () {
        this.setLeds();
        var that = this;
        setTimeout(function () {
            that.nextLeds();
        }, this.states[this.currentState].delay);
        this.currentState = (this.currentState + 1) % this.states.length;
    }
};
new ARDroneLight().animate([0x00,500],[0x05,300],[0x5F,100],[0xF0,300],[0x00,500]);