lukaszkorecki/put_big_charbeat_number.html

## readme.markdown

      
    Raw
  

              readme.markdown
            
          
    What is it?

A very simple Chartbeat utility - it shows (using a 1000px size font) number of users on your website.
Additionally it plays the sound if your user count is above a certain level using the <audio /> tag.
It's been hacked very quickly and not in the best way - but hey! It works!
A screenshot


How to use it?


Get the raw file from the gist
Save it as a html file on your web server or just open it in a browser (a browser which supports <audio /> :-)) and make the screen visible to all people in your office
Edit host and apikey vars (and optionally the src of the audio element. You might want to adjust the threshold as well (30 - totally random number)
?????
Profit

TODO

The code is quite dirty and needs to be more structured - that will be done once I get some time.
A screenshot would be nice.

  
## put_big_charbeat_number.html
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title>Chartbeat Status</title>
  <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    SOUND_PLAYED_YEAH = false;
    NUMBER_OF_PEOPLE = 0;
    LOLWUT = function(obj) {
      NUMBER_OF_PEOPLE = obj.people;

    };

    var host = "YOUR_DOMAIN"
    var apikey = "YOUR_API_KEY"
    var url = "http://api.chartbeat.com/quickstats?host="+host+"&apikey="+apikey+"&jsonp=LOLWUT"
    var request = function() {
      SOUND = document.getElementsByTagName("audio")[0];
      $(document.getElementsByTagName("head")[0]).insert({ bottom : (new Element("script", { src : url}))});
      if(NUMBER_OF_PEOPLE > 30 ) {
        $("number").addClassName("WOOHOO")
          if( !SOUND_PLAYED_YEAH) {
            if(SOUND.play){
              SOUND.play();
              SOUND_PLAYED_YEAH = true;
            }
          }
      } else {
        $("number").removeClassName("WOOHOO")

      }
      if(NUMBER_OF_PEOPLE < 20) {

        SOUND_PLAYED_YEAH = false;
      }
        $("number").update(NUMBER_OF_PEOPLE);

    }
    $(document).observe("dom:loaded", function(){
      request();
      new PeriodicalExecuter(function(){ request(); }, 10);
    });
  </script>
  <style type="text/css" media="screen">
    #number, .bottom {
      font-size: 1000px;
      margin: 0 auto;
      text-align: center;
      font-family: monospace;
    }
    .bottom {
      font-size: 24px;
    }
    .WOOHOO {
      color: red;
    }
  </style>
</head>
<body>
  <div id="number">

  </div>
  <div class="bottom">chartbeat, yeah?</div>
  <audio id="sound" src="PATH_TO_YOUR_AUDIO_FILE"></audio>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<title>Chartbeat Status</title>
	<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	SOUND_PLAYED_YEAH = false;
	NUMBER_OF_PEOPLE = 0;
	LOLWUT = function(obj) {
	NUMBER_OF_PEOPLE = obj.people;

	};

	var host = "YOUR_DOMAIN"
	var apikey = "YOUR_API_KEY"
	var url = "http://api.chartbeat.com/quickstats?host="+host+"&apikey="+apikey+"&jsonp=LOLWUT"
	var request = function() {
	SOUND = document.getElementsByTagName("audio")[0];
	$(document.getElementsByTagName("head")[0]).insert({ bottom : (new Element("script", { src : url}))});
	if(NUMBER_OF_PEOPLE > 30 ) {
	$("number").addClassName("WOOHOO")
	if( !SOUND_PLAYED_YEAH) {
	if(SOUND.play){
	SOUND.play();
	SOUND_PLAYED_YEAH = true;
	}
	}
	} else {
	$("number").removeClassName("WOOHOO")

	}
	if(NUMBER_OF_PEOPLE < 20) {

	SOUND_PLAYED_YEAH = false;
	}
	$("number").update(NUMBER_OF_PEOPLE);

	}
	$(document).observe("dom:loaded", function(){
	request();
	new PeriodicalExecuter(function(){ request(); }, 10);
	});
	</script>
	<style type="text/css" media="screen">
	#number, .bottom {
	font-size: 1000px;
	margin: 0 auto;
	text-align: center;
	font-family: monospace;
	}
	.bottom {
	font-size: 24px;
	}
	.WOOHOO {
	color: red;
	}
	</style>
	</head>
	<body>
	<div id="number">

	</div>
	<div class="bottom">chartbeat, yeah?</div>
	<audio id="sound" src="PATH_TO_YOUR_AUDIO_FILE"></audio>
	</body>
	</html>