added showcase items.

pubnub · Dec 13, 2012 · 2055a41 · 2055a41
1 parent 9724ee0
commit 2055a41
Show file tree

Hide file tree

Showing 2 changed files with 158 additions and 0 deletions.
diff --git a/app-showcase/ascii-player/ascii-player.html b/app-showcase/ascii-player/ascii-player.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html>
+<head>
+    <title>PubNub ASCII Movie Player</title>
+    <style>
+    #pubnub-terminal {
+        position: relative;
+        width: 978px;
+        height: 576px;
+        background:
+            transparent
+            url(http://pubnub.s3.amazonaws.com/2012/pubnub-terminal.png);
+    }
+    #pubnub-terminal-out {
+        cursor: default;
+        font-family: Monaco, mono;
+        font-size: 16px;
+        font-weight: 700;
+        white-space: pre;
+        overflow: hidden;
+        position: absolute;
+        top: 60px;
+        left: 60px;
+        width: 857px;
+        height: 410px;
+        color: #e8e7e1;
+    }
+    </style>
+</head>
+<body>
+
+<!-- PUBNUB TERMINAL -->
+<div id=pubnub-terminal>
+<div id=pubnub-terminal-out>
+pubnub ascii movie player loading...
+</div>
+</div>
+
+<!-- PUBNUB SOURCE -->
+<script src=https://pubnub.s3.amazonaws.com/pubnub-3.4.min.js></script>
+<script>(function(){
+
+/* GENERATE CHANNEL */
+var channel = PUBNUB.uuid()
+,   pub_key = 'pub-7d598eb7-1523-4c72-9786-d8650a856bf5'
+,   sub_key = 'sub-041c0011-6d41-11e1-8b07-35f1f17243aa'
+,   out     = PUBNUB.$('pubnub-terminal-out')
+,   p       = PUBNUB.init({ subscribe_key : sub_key });
+
+/* OPEN RECEIVE SOCKET */
+p.subscribe({
+    channel : channel,
+    message : function(data) { out.innerHTML = parse(data)||'' }
+});
+
+function parse(data) { try{return JSON.parse(data)} catch(e){} }
+
+/* START THE MOVIE STREAM */
+(function(){
+    var img = p.create('img');
+    img.src = p.supplant([
+        'http:','','23.23.187.160:9050',
+        'v1','replay','{pub_key}',
+        '{sub_key}','{src_channel}',
+        '{des_channel}'
+    ].join('/'), {
+        pub_key     : pub_key,
+        sub_key     : sub_key,
+        des_channel : channel,
+        src_channel : '0cefce37-606c-4eae-a9e9-aff35186b854'
+    } );
+    p.css( img, { display : 'none' } );
+    p.search('body')[0].appendChild(img);
+})();
+
+})();</script>
+</body>
+</html>
diff --git a/app-showcase/count-messages/index.html b/app-showcase/count-messages/index.html
@@ -0,0 +1,80 @@
+<style>
+    body {
+        padding: 0;
+        margin: 0;
+    }
+    #counter, h1 {
+        padding: 20px;
+        margin: 50px;
+        font-size: 100px;
+        font-weight: 100;
+        font-family: "Helvetica Neue";
+        -webkit-transition: all 0.5s;
+        -moz-transition: all 0.5s;
+        -ms-transition: all 0.5s;
+        -o-transition: all 0.5s;
+        transition: all 0.5s;
+    }
+    h1 {
+        padding: 10px;
+        margin: 10px;
+        font-size: 50px;
+        font-weight: 200;
+    }
+
+    #log, .log {
+        padding: 0 20px;
+        margin: 0 50px;
+        font-family: Monaco;
+    }
+    .log {
+        padding: 0 20px;
+        margin: 0 50px;
+    }
+</style>
+
+<h1>Message Counter</h1>
+
+<div id=counter>0 msgs</div>
+<div class=log><strong>Log</strong></div>
+<div id=log></div>
+
+<div id=pubnub></div>
+<script src=https://pubnub.s3.amazonaws.com/pubnub-3.1.js></script>
+<script>(function(){
+
+    var counter = +PUBNUB.db.get('message-counter') || 0
+    ,   cnt     = PUBNUB.$('counter')
+    ,   log     = PUBNUB.$('log')
+    ,   channel = 'my_channel'
+    ,   p       = PUBNUB.init({
+        publish_key   : 'demo',
+        subscribe_key : 'demo'
+    });
+
+    // Initial
+    log.innerHTML = PUBNUB.db.get('message-log') || '';
+    cnt.innerHTML = counter + ' msgs';
+
+    function increment() {
+        var datelog = '' + new Date();
+        log.innerHTML += "<div>" + datelog + " received.</div>";
+
+        counter++;
+        cnt.innerHTML = counter + ' msgs';
+
+        PUBNUB.db.set( 'message-counter', ''+counter );
+        PUBNUB.db.set( 'message-log', log.innerHTML );
+
+        p.css( cnt, { background : '#ff0' } );
+        setTimeout( function() {
+            p.css( cnt, { background : '#fff' } );
+        }, 700 );
+    }
+
+    p.subscribe({
+        channel  : channel,
+        callback : increment
+    });
+
+})();</script>