Sunday, September 4, 2011

A Signal Slot Implementation for jQuery



What is Signal Slot?


Signals and slots is a language construct introduced in Qt, which makes it easy to implement the Observer pattern while avoiding boilerplate code. The concept is that controls (also known as widgets) can send signals containing event information (e.g. the text "toto" was selected, the scrollbar has been adjusted to value 37) which can be received by other controls using special functions known as slots. [wiki]


With this simple signal slot plugin for jQuery you can take this feature of Qt into your webapp.


This plugin was finished in 2008 and inspired by Qt and the another jQuery Plugin by AJ



Usage


Define your Signal

var SIGNAL = "A Signal";

var optionsForSignal = {
    evt: 'click',
    prefunc: function() {
         // conditions for emitting of this signal
      },
    callback: function() {
        // callback after the signal emitted
      }
  }

$("#elementID").signal(SIGNAL, "Argument for Slot", optionsForSignal);
$("#elementID").signal(
    SIGNAL,
    ["Arg1", "#Arg2"], // If you have more than one arguments of Slot
    optionsForSignal
);




Define your Slot


// add slot method 1
$.slot.add(
    SIGNAL,
    function(arg1, args2, ...) {
      // what to do if this slot called
    },
    false // a boolean to indicate if this slot should repeated
);

// add slot method 2
$(".toggleme").slot(
    SIGNAL,
    function(arg1, arg2, ... ) {
      // example
      if ($(this).is(":hidden")) {
        $(this).slideDown();
      } else {
        $(this).slideUp();
      }
    }
);




Example


Check out the example: http://yuanhao.github.com/SignalSlot/

Latest Release


Collaborate


Signal Slot jQuery Plugin Licensed under the MIT

Enjoy. Let me know if you like. @yuanhao


Monday, July 5, 2010

Still use singleton? There's another choice in python: Borg design pattern

Few months ago i implemented a db extension for my own python web framework, which supports different database backend. To prevent it from creating multiple instance of db-connection i have chosen singleton design pattern as usual. But after spent some time on google i found another interesting design pattern Borg. It's done this job as good as singleton. Let's take a look of this magical pattern:

class Borg:
    __shared_state = {}
    def __init__(self):
        self.__dict__ = self.__shared_state
OK, that's it. Have fun.

Monday, June 28, 2010

How to generate a random date between two known dates in javascript?

function getRandomDate(from, to) {
    if (!from) {
        from = new Date(1900, 0, 1).getTime();
    } else {
        from = from.getTime();
    }
    if (!to) {
        to = new Date(2100, 0, 1).getTime();
    } else {
        to = to.getTime();
    }
    return new Date(from + Math.random() * (to - from));
}
The Code above not tested yet, no guarantee it's runnable...

Friday, June 25, 2010

Simple Player - A very simple HTML5 audio player plugin for jQuery

What is Simple Player

Simple Player is a jQuery plugin that allows web developers to control audio files on their webpage. Supports style up via CSS. All browsers that supports HTML5 audio tag that allow mp3 or ogg format supported by this plugin.



I wrote this simple player plugin to replace the traditional flash player. There is no need to use flash (load flash plugin consumes much more memory extra) in some cases if you want to play a simple audio file.

Usage

The jquery.simpleplayer.min.js file should be added to the head section of the HTML file after the jQuery JavaScript file. Below is how to include the JavaScript file using an absolute path, relative to the server root.

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="/jquery.simpleplayer.min.js"></script>
</head>


Then you should include the simpleplayer.css into your html.

<link rel="stylesheet" href="simpleplayer.css" type="text/css">


The audio tag in your code looks like:

<audio class="player" src="path_to_your_audio_file">  
  Your browser does not support the <code>audio</code> element.  
</audio>


Final step we need some javascript to load our simple player

<script type="text/javascript">
    $(document).ready(function() {
        var settings = {
            progressbarWidth: '200px',
            progressbarHeight: '5px',
            progressbarColor: '#22ccff',
            progressbarBGColor: '#eeeeee',
            defaultVolume: 0.8
        };
        $(".player").player(settings);
    });
</script>


Simple Player Options

  • progressbarWidth: the width of the progressbar
  • progressbarHeight: the height of the progressbar
  • progressbarColor: color of the progressbar
  • progressbarBGColor: background color of the progressbar
  • defaultVolume: volume as default

Latest Release


Collaborate


TODO List:

  • Video Support
  • Volume Adjust
  • More Control of Media
  • Theme
  • A befault html5 & css 3 demo page
  • ...

Simple Player jQuery Plugin Licensed under the MIT


Enjoy. Let me know if you like this simple player. @yuanhao

Tuesday, September 2, 2008

Send pictures to flickr with thunar file manager

1. install postr (under archlinux use: yaourt -S postr)
2. create a file under ~/.local/share/Thunar/sendto/postr.desktop (if directory not exist, create it):

[Desktop Entry]
Type=Application
Version=1.0
Encoding=UTF-8
TryExec=postr
Exec=postr %F
Icon=postr
Name=Flickr
MimeType=image/jpeg;


3. open thunar and select a picture for upload. (right click -> sendto -> flicr) . multiple pictures supported.

4. authorise postr.

5. enjoy it~~

Wednesday, May 28, 2008

generate html with tex4ht

sudo texhash

htlatex xxxxxxxx.tex