SEA-Design-Dev · gkbroderick · Nov 3, 2014 · Nov 3, 2014 · Nov 3, 2014 · Nov 3, 2014
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,14 @@
+# Generated CSS output
+public/stylesheets/*.css
+
+# No node packages
+node_modules/
+
+# OS generated files #
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
diff --git a/Galen-Wendy/Audio/Audio Converts/FillOutSomeForms.mp3 b/Galen-Wendy/Audio/Audio Converts/FillOutSomeForms.mp3
diff --git a/Galen-Wendy/Audio/Audio Converts/FillOutSomeForms.ogg b/Galen-Wendy/Audio/Audio Converts/FillOutSomeForms.ogg
diff --git a/Galen-Wendy/Audio/Audio Converts/FillOutSomeForms.wav b/Galen-Wendy/Audio/Audio Converts/FillOutSomeForms.wav
diff --git a/Galen-Wendy/Audio/audio.html b/Galen-Wendy/Audio/audio.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+  <head>
+  <title>HTML5 Audio Demo</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="../main.css" type="text/css"  rel="stylesheet">
+  </head>
+  <body>
+    <p> Audio</p>
+    <div class="clearfix">
+      <audio id = "audio" width="320" height="240" controls>
+      <source src="Audio Converts/FillOutSomeForms.mp3" type="audio/mp3">
+      <source src="Audio Converts/FillOutSomeForms.ogg" type="audio/mp3">
+      <source src="Audio Converts/FillOutSomeForms.wav" type="audio/mp3">
+      </audio>
+    </div>
+    <button onclick="playVid()" type="button" class="">Play Audio</button>
+    <button onclick="pauseVid()" type="button">Pause Audio</button>
+    <button onclick="frameChange(2)" type="button">Fast Forward</button>
+    <button onclick="frameChange(-2)" type="button"> Rewind </button>
+    <button onclick="restart()" type="button">Restart</button>
+    <button onclick="pauseplay()" type="button">PausePlay</button>
+  </body>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+  <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
+  <script type="text/javascript" src=audio.js></script>
+</html>
diff --git a/Galen-Wendy/Audio/audio.js b/Galen-Wendy/Audio/audio.js
@@ -0,0 +1,35 @@
+var vid = document.getElementById("audio")
+    function pauseVid(){
+        var vid = document.getElementById("audio");
+        vid.pause();
+    }
+    function playVid(){
+        var vid = document.getElementById("audio");
+        vid.play();
+    }
+    function frameChange(value){
+        var vid = document.getElementById("audio");
+        vid.currentTime += value;
+    }
+
+    function sneeze(){
+        var vid = document.getElementById("audio");
+        vid.currentTime = 11;
+        vid.play();
+    }
+    function restart(){
+        var vid = document.getElementById("audio");
+        vid.currentTime = 0;
+        vid.play();
+    }
+
+    function pauseplay(){
+        var vid = document.getElementById("audio");
+        if (vid.paused){
+            vid.play();
+        }
+        else{
+            vid.pause();
+        }
+
+    }
diff --git a/README.md → Galen-Wendy/Audio/stylesheet.css b/README.md → Galen-Wendy/Audio/stylesheet.css
diff --git a/Galen-Wendy/Camera/README.md b/Galen-Wendy/Camera/README.md
@@ -0,0 +1,7 @@
+#Camera Access via Browser Example!
+We combined David Walsh's Camera Access / snapshot code with a Canvas Element drawing app to make a (slow) app that can draw over the captured image with black circles using mouseclicks.
+
+####Sources
+Browser Camera from [David Walsh](http://davidwalsh.name/browser-camera)
+
+Canvas Drawing Adapted from [bogonko](http://stackoverflow.com/questions/2368784/draw-by-mouse-with-html5-canvas) and his [jsfiddle example](http://jsfiddle.net/ArtBIT/kneDX/)
diff --git a/Galen-Wendy/Camera/camera.html b/Galen-Wendy/Camera/camera.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset='utf-8'>
+    <title>HTML5 Photo</title>
+    <link href="../main.css" type="text/css"  rel="stylesheet">
+  </head>
+  <body>
+    <header>
+      <h1>HTML5 Photo</h1>
+    </header>
+    <main>
+      <video id="video" width="640" height="480" autoplay></video>
+      <button id="snap">Snap Photo</button>
+      <section class="camera-output">
+        <canvas id="canvas" width="640" height="480"></canvas>
+        <h3>Once it ouputs, Draw on the Still Image with your Mouse!</h3>
+      </section>
+    </main>
+    <script type="text/javascript" src="photo.js"></script>
+  </body>
+</html>
diff --git a/Galen-Wendy/Camera/photo.js b/Galen-Wendy/Camera/photo.js
@@ -0,0 +1,69 @@
+// Browser Camera from David Walsh http://davidwalsh.name/browser-camera
+// Canvas Drawing Adapted from bogonko http://stackoverflow.com/questions/2368784/draw-by-mouse-with-html5-canvas
+// http://jsfiddle.net/ArtBIT/kneDX/
+
+// Put event listeners into place
+window.addEventListener("DOMContentLoaded", function() {
+  // Grab elements, create settings, etc.
+  var canvas = document.getElementById("canvas"),
+    context = canvas.getContext("2d"),
+    video = document.getElementById("video"),
+    videoObj = { "video": true },
+    errBack = function(error) {
+      console.log("Video capture error: ", error.code);
+    };
+
+  // Put video listeners into place
+  if(navigator.getUserMedia) { // Standard
+    navigator.getUserMedia(videoObj, function(stream) {
+      video.src = stream;
+      video.play();
+    }, errBack);
+  } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
+    navigator.webkitGetUserMedia(videoObj, function(stream){
+      video.src = window.webkitURL.createObjectURL(stream);
+      video.play();
+    }, errBack);
+  }
+  else if(navigator.mozGetUserMedia) { // Firefox-prefixed
+    navigator.mozGetUserMedia(videoObj, function(stream){
+      video.src = window.URL.createObjectURL(stream);
+      video.play();
+    }, errBack);
+  }
+
+}, false);
+
+document.getElementById("snap").addEventListener("click", function() {
+  canvas.getContext("2d").drawImage(video, 0, 0, 640, 480);
+
+  //Add Drawing Functionality
+  var ctx = canvas.getContext("2d");
+    // define a custom fillCircle method
+    ctx.fillCircle = function(x, y, radius, fillColor) {
+      this.fillStyle = fillColor;
+      this.beginPath();
+      this.moveTo(x, y);
+      this.arc(x, y, radius, 0, Math.PI * 2, false);
+      this.fill();
+    };
+    // bind mouse events
+    canvas.onmousemove = function(e) {
+      if (!canvas.isDrawing) {
+         return;
+      }
+      var x = e.pageX - this.offsetLeft;
+      var y = e.pageY - this.offsetTop;
+      var radius = 3; // or whatever
+      var fillColor = '#000000';
+      ctx.fillCircle(x, y, radius, fillColor);
+    };
+    canvas.onmousedown = function(e) {
+      canvas.isDrawing = true;
+    };
+    canvas.node.onmouseup = function(e) {
+      canvas.isDrawing = false;
+    };
+
+});
+
diff --git a/Galen-Wendy/Email_Form/README.md b/Galen-Wendy/Email_Form/README.md
@@ -0,0 +1,12 @@
+#Email Form Example
+A sample 'Contact' form using name/email/message inputs for when you want spam from bots.
+Has potential PHP functionality if it's on a server that supports it. Python local servers return a 501 error.
+
+###LocalStorage!
+localStorage functionality for saving form values courtesy of Jon Duckett's Javascript book.
+Added an event listener for the submit button that clears the local storage form values.
+
+
+#####Sources
+[Jon Duckett's LocalStorage Code](http://javascriptbook.com/code/c09/js/local-storage.js)
+Tangled in Design's [PHP form Example](http://tangledindesign.com/how-to-create-a-contact-form-using-html5-css3-and-php/)
diff --git a/Galen-Wendy/Email_Form/email_form.css b/Galen-Wendy/Email_Form/email_form.css
@@ -0,0 +1,23 @@
+label {
+  display: block;
+  margin-top: 15px;
+}
+
+input:focus, textarea:focus {
+    border:1px solid #97d6eb;
+}
+
+input, textarea {
+  width:200px;
+  border-radius: 2px;
+}
+
+textarea {
+  height: 240px;
+}
+
+#submit {
+  display: block;
+  width: 60px;
+  margin-top: 15px;
+}
diff --git a/Galen-Wendy/Email_Form/email_form.html b/Galen-Wendy/Email_Form/email_form.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- Adapted from http://tangledindesign.com/how-to-create-a-contact-form-using-html5-css3-and-php/ -->
+<html lang="en">
+  <head>
+    <meta charset='utf-8'>
+    <title>HTML5 Email Form</title>
+    <link href="email_form.css" type="text/css"  rel="stylesheet">
+    <link href="../main.css" type="text/css"  rel="stylesheet">
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1>HTML5 Email Contact Form</h1>
+      </header>
+      <form id="contact-form" method="post" action="email_form.php">
+        <label for="name">Name</label>
+        <input id ="name" name="name" type="text" placeholder="Full name" required autofocus>
+        <label for="email">Email</label>
+        <input id="email" name="email" type="email" placeholder="Example@Domain.com" required>
+        <label for="message">Message</label>
+        <textarea id="message" name="message" type="text" placeholder="Your Message" value=""></textarea>
+        <input id="submit" name="submit" type="submit" value="Submit" role="button">
+      </form>
+    </main>
+    <script type="text/javascript" src="email_form.js"></script>
+  </body>
+</html>
diff --git a/Galen-Wendy/Email_Form/email_form.js b/Galen-Wendy/Email_Form/email_form.js
@@ -0,0 +1,32 @@
+// From Jon Duckett's Javascript and Jquery 2014 and David Winer's local storage demo
+if (typeof (Storage) != undefined) {
+  // Get form elements
+  var txtName = document.getElementById('name');
+  var txtEmail = document.getElementById('email');
+  var txtMessage = document.getElementById('message');
+
+  // Elements populated by localStorage data
+  txtName.value = localStorage.getItem('name');
+  txtEmail.value = localStorage.getItem('email');
+  txtMessage.value = localStorage.getItem('message');
+
+  // Data saved on keyup
+  txtName.addEventListener('input', function () {
+      localStorage.setItem('name', txtName.value);
+  }, false);
+
+  txtEmail.addEventListener('input', function () {
+      localStorage.setItem('email', txtEmail.value);
+  }, false);
+
+  txtMessage.addEventListener('input', function () {
+      localStorage.setItem('message', txtMessage.value);
+  }, false);
+
+  //clear local Storage by Keys on submit
+  document.getElementById('submit').addEventListener('click', function () {
+      localStorage.removeItem('name');
+      localStorage.removeItem('email');
+      localStorage.removeItem('message');
+  }, false);
+};
diff --git a/Galen-Wendy/Email_Form/email_form.php b/Galen-Wendy/Email_Form/email_form.php
@@ -0,0 +1,20 @@
+<?php
+// Adapted from http://tangledindesign.com/how-to-create-a-contact-form-using-html5-css3-and-php/
+
+  $name = $_POST['name'];
+  $email = $_POST['email'];
+  $message = $_POST['message'];
+  $from = 'From: DemoTestSite';
+  $to = 'galen.broderick@gmail.com';
+  $subject = 'DemoTestSite Email';
+  $human = $_POST['humanCheck'];
+
+  $body = "From: $name\n E-Mail: $email\n Message:\n $message";
+if ($_POST['submit']) {
+    if (mail ($to, $subject, $body, $from)) {
+        echo '<p>Your message has been sent!</p>';
+    } else {
+        echo '<p>Something went wrong, go back and try again!</p>';
+    }
+}
+?>