Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

-Finished sample slideshow describing node-slideshow

-Cleaned up connection event handling
-Waiting for embeded video before release
  • Loading branch information...
commit 24d1328757306a5f5f2bb9e10b8ba6e2f85a16c8 1 parent 4178ed0
@codenothing authored
View
2  master/index.html
@@ -8,7 +8,7 @@
</head>
<body>
<!--
-Node SlideShow [VERSION]
+Node Slideshow [VERSION]
[DATE]
Corey Hart @ http://www.codenothing.com
-->
View
12 master/js.js
@@ -1,5 +1,5 @@
/**
- * Node SlideShow [VERSION]
+ * Node Slideshow [VERSION]
* [DATE]
* Corey Hart @ http://www.codenothing.com
*/
@@ -24,10 +24,14 @@ jQuery(function(){
timeLeft = parseInt( data.timeLeft / 1000, 10 );
timeWarning = parseInt( data.timeWarning / 1000, 10 );
timer();
+
+ // Always clear the interval
+ if ( timeid ) {
+ timeid = clearInterval( timeid );
+ }
+
+ // If timer still enabled, run it
if ( data.timeEnabled ) {
- if ( timeid ) {
- timeid = clearInterval( timeid );
- }
timeid = setInterval(function(){
timeLeft--;
timer();
View
2  master/styles.css
@@ -1,5 +1,5 @@
/**
- * Node SlideShow [VERSION]
+ * Node Slideshow [VERSION]
* [DATE]
* Corey Hart @ http://www.codenothing.com
*/
View
2  node/Config.js
@@ -1,5 +1,5 @@
/**
- * Node SlideShow [VERSION]
+ * Node Slideshow [VERSION]
* [DATE]
* Corey Hart @ http://www.codenothing.com
*/
View
8 node/server.js
@@ -1,5 +1,5 @@
/**
- * Node SlideShow [VERSION]
+ * Node Slideshow [VERSION]
* [DATE]
* Corey Hart @ http://www.codenothing.com
*/
@@ -106,6 +106,8 @@ http.createServer(function( request, response ) {
response.writeHead( 200 );
response.end( JSON.stringify( Info ) );
}
+ // Sometimes operations cannot be be completed,
+ // this is a fallback so full pages are downloaded on those requests
else if ( query.op ) {
response.writeHead( 200 );
response.end( JSON.stringify( Info ) );
@@ -115,7 +117,7 @@ http.createServer(function( request, response ) {
if ( e ) {
sys.puts( 'Bad File Request - ' + e );
response.writeHead( 400 );
- response.end("Bad Request");
+ response.end("<h1>Bad Request</h1>");
}
else {
response.writeHead( 200 );
@@ -125,7 +127,7 @@ http.createServer(function( request, response ) {
}
}).listen( Config.masterport );
-sys.puts('Server Started at http://localhost:' + Config.masterport + '/' );
+sys.puts('Master Controller Enabled at http://localhost:' + Config.masterport + '/' );
/* Reading Max Slides */
View
16 node/starttime.js
@@ -1,5 +1,5 @@
/**
- * Node SlideShow [VERSION]
+ * Node Slideshow [VERSION]
* [DATE]
* Corey Hart @ http://www.codenothing.com
*/
@@ -11,5 +11,17 @@ var sys = require('sys'),
request.end();
request.on('response', function( response ) {
- sys.puts( 'Time Started' );
+ var min = parseInt( Config.timed / 60000, 10 ), sec = Config.timed % 60000;
+
+ // Zero Fill
+ if ( min < 10 ) {
+ min = '0' + min;
+ }
+
+ // Zero Fill
+ if ( sec < 10 ) {
+ sec = '0' + sec;
+ }
+
+ sys.puts( 'Presentation Timer Started - ' + min + ':' + sec + ' left' );
});
View
2  server.sh
@@ -1,6 +1,6 @@
#!/bin/bash
#
-# Node SlideShow [VERSION]
+# Node Slideshow [VERSION]
# [DATE]
# Corey Hart @ http://www.codenothing.com
#
View
4 slideshow/Config.js
@@ -1,5 +1,5 @@
/**
- * Node SlideShow [VERSION]
+ * Node Slideshow [VERSION]
* [DATE]
* Corey Hart @ http://www.codenothing.com
*/
@@ -8,7 +8,7 @@ this.Config = {
enableSocket: true && ( 'WebSocket' in this ),
// Websocket connection
- host: '192.168.1.116',
+ host: 'localhost',
port: 8124,
// Time takes to transition between slides
View
BIN  slideshow/images/hwy1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  slideshow/images/ptimer.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
275 slideshow/index.html
@@ -8,180 +8,265 @@
<script type='text/javascript' src="Config.js"></script>
<script type='text/javascript' src="js.js"></script>
<script type='text/javascript' src="jquery.chili.js"></script>
- <!-- <script type='text/javascript' src="recipes/jquery.chili.recipes.js.js"></script> -->
</head>
<body>
<div id='deck'>
<!--
-Node SlideShow [VERSION]
+Node Slideshow [VERSION]
[DATE]
Corey Hart @ http://www.codenothing.com
-->
+<!-- Intro Slide -->
<section>
<hgroup>
- <h1>Slide Header 1</h1>
- <h2>Lorem Ipsum</h2>
- </hgroup>
- <p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede.</p>
- <p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede.</p>
- <p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede.</p>
-</section>
-
-
-<section>
- <hgroup>
- <h1>Slide Header 2</h1>
- <h2>Using Points</h2>
+ <h1>Node Slideshow</h1>
+ <h2>Web Based Slideshow</h2>
</hgroup>
<ul>
- <li>Point 1</li>
- <li>Point 2</li>
- <li>Point 3</li>
- <li>Point 4</li>
+ <li>Integrated by <a target='_blank' href='http://www.codenothing.com'>Corey Hart</a></li>
+ <li>Original Slideshow work done by <a target='_blank' href='http://www.ravelrumba.com/blog/html5-slideshow/'>Rob Flaherty</a></li>
+ <li>Node.js Web Socket work done by <a target='_blank' href='http://github.com/gimite/web-socket-js'>Hiroshi Ichikawa</a></li>
+ <li>Syntax Highlighting [ <a href='http://github.com/aercolino/Chili'>jQuery Chili NEXT</a> ] work done by <a target='_blank' href='http://noteslog.com/'>Andrea Ercolino</a></li>
</ul>
</section>
+
+
+
+<!-- Code Blocks -->
<section>
<hgroup>
- <h1>Slide Header 3</h1>
- <h2>Code Blocks</h2>
+ <h1>Code Blocks</h1>
</hgroup>
+ <p>
+ Node Slideshow comes with the <a target='_blank' href='http://noteslog.com/chili/'>jQuery Chili Plugin</a> built in.
+ You can check the <a target='_blank' href='recipes/'>recipe folder</a> for language support.
+ </p>
+
+ <p><b>Javascript</b></p>
<pre class='chili-lang-js'>
-$('testing').choose(function(){
- $(this).cool();
-});
- </pre>
-</section>
+window.onload = function(){
+ alert('Hello World!');
+};</pre>
+ <br>
-<section>
- <hgroup>
- <h1>Slide Header 4</h1>
- <h2>Using Points</h2>
- </hgroup>
- <ul>
- <li>Point 1</li>
- <li>Point 2</li>
- <li>Point 3</li>
- <li>Point 4</li>
- </ul>
+ <p><b>PHP</b></p>
+ <pre class='chili-lang-php'>echo '&lt;p&gt;Hello World!&lt;/p&gt;'</pre>
+
+ <br>
+
+ <p><b>MySQL</b></p>
+ <pre class='chili-lang-mysql'>INSERT INTO `messages` VALUE ('Hello World!');</pre>
</section>
+
+
+<!-- Images -->
<section>
<hgroup>
- <h1>Slide Header 5</h1>
- <h2>Using Points</h2>
+ <h1>Working With Images</h1>
</hgroup>
- <ul>
- <li>Point 1</li>
- <li>Point 2</li>
- <li>Point 3</li>
- <li>Point 4</li>
- </ul>
+ <img align='left' src='images/hwy1.png' />
+ <p>
+ This image was taken off the coast of California in a cliff side rest stop on Highway 1.<br><br>
+ <i>Corey Hart - June 2008</i>
+ </p>
</section>
+
+
+<!-- Embed Scripts -->
<section>
<hgroup>
- <h1>Slide Header 6</h1>
- <h2>Using Points</h2>
+ <h1>Embeding Videos</h1>
+ <h2>Hello Youtube</h2>
</hgroup>
- <ul>
- <li>Point 1</li>
- <li>Point 2</li>
- <li>Point 3</li>
- <li>Point 4</li>
- </ul>
+ <p>...embed code here...</p>
</section>
+
+
+<!-- Master Controller -->
<section>
<hgroup>
- <h1>Slide Header 7</h1>
- <h2>Using Points</h2>
+ <h1>Master Controller</h1>
+ <h2>Controlling the Slideshow</h2>
</hgroup>
+
+ <p>
+ The Master Controller was built for mobile devices, but will work within browsers as well.
+ To enable it, run the server.sh shell script provided.
+ </p>
+
+ <pre>
+$ cd node-slideshow
+$ ./server.sh
+Socket created on port 8124
+Master Controller Enabled at http://localhost:8125/
+10 Slides</pre>
+
+ <br><br>
+ <p>
+ The stdout tells us a few things:
+ </p>
+
<ul>
- <li>Point 1</li>
- <li>Point 2</li>
- <li>Point 3</li>
- <li>Point 4</li>
+ <li>The Socket Port that all slideshows connect to is (8124)</li>
+ <li>To use the Master Controller, go to <a target='_blank' href='http://localhost:8125/'>http://localhost:8125/</a>
+ <li>There are 12 Total Slides in your presentation</li>
</ul>
</section>
+
+
+
+<!-- Presentation Timer -->
<section>
<hgroup>
- <h1>Slide Header 8</h1>
- <h2>Using Points</h2>
+ <h1>Presentation Timer</h1>
</hgroup>
- <ul>
- <li>Point 1</li>
- <li>Point 2</li>
- <li>Point 3</li>
- <li>Point 4</li>
- </ul>
+
+ <p>
+ The master controller also comes with a countdown timer to keep track of time left during a presentation.
+ To enable, you need to run the starttime.sh shell script in the root directory.
+ </p>
+ <p>
+ <b>Note*:</b> This must be done <i>after</i> the server has started.
+ </p>
+ <img src='images/ptimer.png' align='right' />
+ <pre>
+$ cd node-slideshow
+$ ./starttime.sh
+Presentation Timer Started - 45:00 left</pre>
+ <br>
</section>
+
+
+<!-- Exporting -->
<section>
<hgroup>
- <h1>Slide Header 9</h1>
- <h2>Using Points</h2>
+ <h1>Exporting Slideshow</h1>
+ <h2>Mr. Independent</h2>
</hgroup>
- <ul>
- <li>Point 1</li>
- <li>Point 2</li>
- <li>Point 3</li>
- <li>Point 4</li>
- </ul>
+
+ <p>
+ User's viewing the slideshow have their own personal keyboard controls.<br>
+ <u>Next Slide</u>: Right Arrow, Spacebar, Enter.<br>
+ <u>Previous Slide</u>: Left Arrow &amp; Backspace.<br>
+ </p>
+
+ <p>
+ The slideshow/ directory is also completely independent from the rest of the project, so it can be zipped up
+ and passed around as needed.
+ </p>
+
+ <pre class='smallprint'>
+$ cd node-slideshow
+$ zip -r slideshow.zip slideshow/
+ adding: slideshow/ (stored 0%)
+ adding: slideshow/Config.js (deflated 26%)
+ adding: slideshow/fonts/ (stored 0%)
+ adding: slideshow/fonts/Chunkfive-webfont.eot (deflated 37%)
+ adding: slideshow/fonts/Chunkfive-webfont.svg (deflated 61%)
+ ...
+$ ls
+master node revar.sh server.sh slideshow <b style='color: blue;'>slideshow.zip</b> starttime.sh</pre>
</section>
+
+<!-- Slideshow Configuration -->
<section>
<hgroup>
- <h1>Slide Header 10</h1>
- <h2>Using Points</h2>
+ <h1>Slidshow Config</h1>
+ <h2>slideshow/Config.js</h2>
</hgroup>
+
+ <pre class='smallprint chili-lang-js'>
+/**
+ * Node Slideshow [VERSION]
+ * [DATE]
+ * Corey Hart @ http://www.codenothing.com
+ */
+this.Config = {
+ // Disable for distribution, and final check for websocket
+ enableSocket: true &amp;&amp; ( 'WebSocket' in this ),
+
+ // Websocket connection
+ host: 'localhost',
+ port: 8124,
+
+ // Time takes to transition between slides
+ transitions: 200
+};</pre>
+ <br>
<ul>
- <li>Point 1</li>
- <li>Point 2</li>
- <li>Point 3</li>
- <li>Point 4</li>
+ <li><b>enableSocket:</b> Enables use of Web Socket API on the browser (and only if the browser is capable)</li>
+ <li><b>host:</b> Host of the Socket Connection</li>
+ <li><b>port:</b> Port of the Socket Connection</li>
+ <li><b>transitions:</b> Animation time for slide transition.</li>
</ul>
</section>
+
+<!-- Master Configuration -->
<section>
<hgroup>
- <h1>Slide Header 11</h1>
- <h2>Using Points</h2>
+ <h1>Master Config</h1>
+ <h2>master/Config.js</h2>
</hgroup>
+
+ <pre class='chili-lang-js' style='font-size: 14px;'>
+/**
+ * Node Slideshow [VERSION]
+ * [DATE]
+ * Corey Hart @ http://www.codenothing.com
+ */
+this.Config = require('../slideshow/Config').Config;
+
+// Port for master server
+this.Config.masterport = 8125;
+
+// Time (in milliseconds) for countdown timer
+this.Config.timed = 45 * 60 * 1000;
+
+// When to turn on warning color for countdown timer (in milliseconds)
+this.Config.timeWarning = 15 * 60 * 1000;</pre>
+ <br>
<ul>
- <li>Point 1</li>
- <li>Point 2</li>
- <li>Point 3</li>
- <li>Point 4</li>
+ <li><b>masterport:</b> Port of the Master Controller</li>
+ <li><b>timed:</b> For timing a presentation. Set the time limit (in milliseconds) here, and run starttime.sh (after server.sh)</li>
+ <li><b>timeWarning:</b> For when countdown timer is enabled, will switch the timer color to yellow at this mark.</li>
</ul>
</section>
<section>
<hgroup>
- <h1>Slide Header 12</h1>
- <h2>Using Points</h2>
+ <h1>Fin</h1>
+ <h2>And contact info</h2>
</hgroup>
- <ul>
- <li>Point 1</li>
- <li>Point 2</li>
- <li>Point 3</li>
- <li>Point 4</li>
- </ul>
+
+ <p>
+ Thanks for your interest. Please send all feedback or questions to <a href='mailto:corey@codenothing.com'>corey@codeNothing.com</a>.
+ </p>
+
+ <p>
+ You can also tweet me: <a href='https://twitter.com/codeNothing'>@codeNothing</a>.
+ </p>
</section>
View
73 slideshow/js.js
@@ -1,14 +1,15 @@
/**
- * Node SlideShow [VERSION]
+ * Node Slideshow [VERSION]
* [DATE]
* Corey Hart @ http://www.codenothing.com
*/
jQuery(function(){
- var deck = jQuery('#deck'), slides = deck.children('section'), win = jQuery( window ), slide = 0, width, height;
+ var deck = jQuery('#deck'), slides = deck.children('section'), win = jQuery( window ), slide = 0, width, height, timeid;
// Slide Transition
function change(){
+ window.location.hash = slide + 1;
deck.stop().animate( { marginLeft: ( slide * width ) * -1 }, Config.transitions );
}
@@ -21,30 +22,59 @@ jQuery(function(){
slides.width( width - 60 ).height( height - 30 );
deck.width( width * slides.length + 100 );
- }).resize();
- // Allow custom slide views
- jQuery( document ).keyup(function( event ) {
- // left
- if ( event.keyCode == 37 ) {
- if ( slide > 0 ) {
- slide--;
- change();
- }
+ // Wait for resizing to finish before handling adjustments
+ if ( timeid ) {
+ timeid = clearTimeout( timeid );
}
- // right
- else if ( event.keyCode == 39 ) {
- if ( slide + 1 < slides.length ) {
- slide++;
- change();
- }
+ timeid = setTimeout( change, 200 );
+ })
+ // Allow custom slide views
+ .keydown(function( event ) {
+ switch ( event.keyCode ) {
+ case 9: // Tab
+ case 13: // Enter
+ case 32: // Spacebar
+ case 39: // Right Arrow
+ if ( slide + 1 < slides.length ) {
+ slide++;
+ change();
+ }
+ return false;
+
+ case 8: // Backspace
+ case 37: // Left Arrow
+ if ( slide > 0 ) {
+ slide--;
+ change();
+ }
+ return false;
}
- return false;
- });
+ })
+ // Configure Dimensions
+ .resize();
+
+
+ // Auto select the slide so urls can be shared
+ if ( window.location.hash && window.location.hash !== '' ) {
+ slide = parseInt( window.location.hash.replace( /^.*#/, '' ), 10 ) - 1;
+ }
+
+ // Push the initial slide out
+ change();
// Only create the connection if allowed
if ( Config.enableSocket ) {
var connection = new WebSocket( 'ws://' + Config.host + ':' + Config.port + '/' );
+
+ // Notify devs when connection closes
+ connection.onclose = function(){
+ if ( window.console && window.console.warn ) {
+ window.console.warn( 'Connection Closed' );
+ }
+ };
+
+ // Listening for messages
connection.onmessage = function( event ) {
var msg = JSON.parse( event.data );
if ( msg.slide !== undefined ) {
@@ -52,5 +82,10 @@ jQuery(function(){
change();
}
};
+
+ // Garbage Collection
+ window.onbeforeunload = function(){
+ connection.close();
+ };
}
});
View
8 slideshow/styles.css
@@ -1,5 +1,5 @@
/**
- * Node SlideShow [VERSION]
+ * Node Slideshow [VERSION]
* [DATE]
* Corey Hart @ http://www.codenothing.com
* This stylesheet due in large part to Rob Flaherty(rob@ravelrumba.com)
@@ -13,7 +13,7 @@
}
/* Meyer Reset */
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}:focus{outline:0}body{line-height:1;color:black;background:white}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:""""}
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;}:focus{outline:0}body{line-height:1;color:black;background:white}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:""""}
/* Core Styles */
html{ font-size:100%; overflow: hidden; }
@@ -23,7 +23,7 @@ input, select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, Sans-
strong{ font-weight:bold; }
em { font-style: italic; }
hr { display: none; }
-img { display: block; }
+img { display: block; border: 3px solid #aaa; padding: 3px; background: white; margin: 0 10px; }
a img { border: none; }
cite { font-style: normal; }
code { background: #ececec; padding: 0 3px; }
@@ -50,3 +50,5 @@ pre { font-size: 20px; font-family: monospace; background: #ddd; border: 3px sol
hgroup {margin: 0 0 20px;}
header { overflow: hidden; color: #000; background-image: -moz-linear-gradient(top, #c5c5c5, #b0b0b0); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c5c5c5),color-stop(1, #b0b0b0)); border-top:1px solid #dcdcdc; border-bottom: 1px solid rgb(105, 105, 105); text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); font-family: "Lucida Grande"; padding: 1px 10px; overflow:hidden; }
header h1 { float: left; font-size: 18px; line-height: 32px;}
+.center { margin: 0 auto; }
+.smallprint { font-size: 14px; }
View
2  starttime.sh
@@ -1,6 +1,6 @@
#!/bin/bash
#
-# Node SlideShow [VERSION]
+# Node Slideshow [VERSION]
# [DATE]
# Corey Hart @ http://www.codenothing.com
#
Please sign in to comment.
Something went wrong with that request. Please try again.