Watched at work: "SOLID object oriented design" and "SOLID short videos"

These are the videos we watched today at work:

• SOLID object oriented design by Sandi Metz
• Single resposibility by Jason Gorman
• Open Close by Jason Gorman
• Liskov Substitution by Jason Gorman

Interesting Talk: "Effective Sketches"

I found this talk very interesting:
Effective sketches by Simon Brown

Play and stop an alarm sound using HTML5 audio in a Backbone view

I'm using Backbone.js in my toy project.
I had to adapt the example in my previous post so it could be used in a backbone view.
This is how I did it:

AlarmView = Backbone.View.extend({    
    events: {
        'click #alarmButton': 'alarmButtonPressed',
    },

    initialize: function(){
        _.bindAll(this, 'render', 'alarmButtonPressed', 
                  'preSelectElements', 'playAlarm', 
                  'stopAlarm');                
        this.preSelectElements();        
        this.render();
    },

    preSelectElements : function () {
        this.alarmText = this.$('#alarmTime');
        this.alarmButton = this.$('#alarmButton');
    },

    render: function(){
        return this;
    },

    alarmButtonPressed : function() {
        this.playAlarm();
    },
    
    playAlarm : function () {    
        this.alarmSound = new Audio("alarm.wav");
        setTimeout(this.stopAlarm, this.alarmText.val() * 1000);
        this.alarmSound.play();
    },
    
    stopAlarm : function () {   
        this.alarmSound.pause();
        this.alarmSound.startTime = 0;
    },    
});

$(function(){
    var alarmView = new AlarmView({el: $(document)});
});

And this is the HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <script src="libs/jquery-1.6.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="libs/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="libs/backbone.js" type="text/javascript" charset="utf-8"></script>
        <script src="alarm.js" type="text/javascript" charset="utf-8"> </script>
    </head>

    <body>
        <input type="text" id="alarmTime" value="1"/>
        <button type="button" id="alarmButton">Start alarm</button>
    </body>    
</html>

Play and stop an alarm sound using HTML5 audio tag

In my current toy project, I wanted to reproduce an alarm sound every time some event happened.
The alarm sound I found was a bit long, so I wanted to stop it after a given time stored in the application settings.

It seems that HTML5 audio doesn't have a stop method. It has only a pause method. So following the advises in here and here, I managed to write the following code to check how it worked before adding it to my toy project:

var alarmButton = document.getElementById("alarmButton");

alarmButton.addEventListener(
    "click", 
    function() {
        alarmSound = new Audio("alarm.wav");
        window.setTimeout(stopAlarm, 
            document.getElementById("alarmTime").value * 1000);
        alarmSound.play();
    }, 
    true
);

function stopAlarm () {    
    alarmSound.pause();
    alarmSound.startTime = 0;
} 

This is the HTML file:

<!DOCTYPE HTML>
<html>    
    <body>
        <input type="text" id="alarmTime" value="1"/>
        <button type="button" id="alarmButton">Start alarm</button>
    </body>
    
    <script src="alarm.js" type="text/javascript" charset="utf-8">
    </script>    
</html>

How to use greek symbols in a Gnuplot graphic

This is the translation into English of a previous post in Spanish.

Using the Enhanced Postscript (EPS) terminal it's possible to add a lot of symbols to a Gnuplot graphic. The syntax is very similar to the Latex one.

There's a syntax guide which includes many examples.

To create the following graphic I used the EPS terminal to label the axes with greek letters:

This is my script:

reset 
#Range
set xrange [0:3]
set yrange [-2.5:4.5]
#Range and xtic interval
set xtics -3,0.5,10
#Range and ytic interval
set ytics -2.5,0.5,4.5

#Labels with greek letters
set xlabel "t/{/Symbol p}"
set ylabel "{/Symbol q}"

#Legend position
set key
#Origin
set origin 0,0
#Ratio between heigth and width
set size ratio 0.5

#Color EPS terminal with Arial font is set as outoput terminal
set term post eps enhanced color "Arial" 11

#Graphic size
set size 1,1
#With Border
set border

#Output file
set output "theta.eps"

#Plot command
plot 'pos1.dat' using 1:2 title 'E=0.25' with lines, \
        'pos2.dat' using 1:2 title 'E=0.50' with lines, \
        'pos3.dat' using 1:2 title 'E=0.75' with lines, \
        'pos4.dat' using 1:2 title 'E=1.00' with lines, \
        'pos5.dat' using 1:2 title 'E=1.25' with lines