Added Droverlay Hangout App

droverlay/README

@@ -0,0 +1,45 @@
+Description
+-----------
+
+Draw your own static and/or face-tracking overlay.
+(Still in early development, many features still planned.)
+
+Installation
+------------
+
+  * Edit droverlay.xml and change <YOUR PATH> to where you plan to upload the files.
+
+  * Upload all the files to <YOUR PATH>
+
+  * Please note that the files need to be publicly accessible.
+
+  * Go to https://code.google.com/apis/console/ and create a new project.
+
+  * Activate the "Google+ Hangouts API" in Services.
+
+  * Go to "Hangouts" and put the full URL to <YOUR PATH>/droverlay.xml in "Gadget URL"
+
+  * Save and you are ready to "Enter a hangout!" :)
+
+
+-----------
+This script uses the Google+� Hangouts API. (https://developers.google.com/+/hangouts/)
+
+Google+ is a trademark of Google Inc. Use of this trademark is subject to Google Permissions. (http://www.google.com/permissions/index.html)
+
+I'm not affiliated with, sponsored by, or endorsed by Google Inc. (http://www.google.com/)
+
+-----------
+Copyright 2012-2013 Gerwin Sturm, FoldedSoft e.U., https://plus.google.com/112336147904981294875, http://www.foldedsoft.at/
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

droverlay/css/droverlay.css

@@ -0,0 +1,25 @@
+* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+
+html, body, #droverlay { height: 100%; width: 100%; margin: 0; padding: 0; }
+
+#dredit {
+  width: 315px; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 5px; position: relative;
+  -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
+}
+
+#drcanvas { width: 300px; height: 200px; position: absolute; top: 5px; z-index: 10; border: 1px solid black; cursor: crosshair;}
+#drface { width: 300px; height: 200px; position: absolute; top: 5px; z-index: 5; border: 1px solid black; background-color: #CFC; }
+
+#drtools { width: 300px; position: absolute; top: 250px; text-align: center;}
+
+#face { position: absolute; display: none; }
+
+#lefteye { position: absolute; background-image: url(../images/lefteye.png); background-size: contain; background-repeat: no-repeat; }
+#righteye { position: absolute; background-image: url(../images/righteye.png); background-size: contain; background-repeat: no-repeat; }
+
+#nose { position: absolute; background-image: url(../images/nose.png); background-size: contain; background-repeat: no-repeat; }
+#mouth { position: absolute; background-image: url(../images/mouth.png); background-size: contain; background-repeat: no-repeat; }
+
+.color { display: inline-block; width: 30px; height: 30px; border: 1px solid black; cursor: pointer; }
+
+#drcursor { display: inline-block; width: 60px; height: 60px; border: 1px solid black; }

droverlay/droverlay.xml

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ * Copyright (c) 2012-2013 Gerwin Sturm, FoldedSoft e.U.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+-->
+<Module>
+  <ModulePrefs title="Droverlay">
+    <Require feature="dynamic-height"/>
+    <Require feature="rpc"/>
+  </ModulePrefs>
+  <Content type="html"><![CDATA[
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="UTF-8">
+        <title>Droverlay</title>
+        <link rel="stylesheet" type="text/css" href="<YOUR PATH>/css/droverlay.css">
+        <script src="//talkgadget.google.com/hangouts/_/api/hangout.js?v=1.3"></script>
+      </head>
+      <body>
+        <div id="droverlay">
+          <div id="dredit">
+            <div id="drface">
+			  <div id="face">
+                <div id="lefteye"></div>
+                <div id="righteye"></div>
+                <div id="mouth"></div>
+                <div id="nose"></div>
+              </div>
+            </div>
+            <canvas id="drcanvas"></canvas>
+            <div id="drtools">
+ 			  <button id="drclear">Clear</button><br><br>
+              <div class="color" style="background-color: black;"></div>
+              <div class="color" style="background-color: gray;"></div>
+              <div class="color" style="background-color: silver;"></div>
+              <div class="color" style="background-color: white;"></div>
+              <div class="color" style="background-color: maroon;"></div>
+              <div class="color" style="background-color: red;"></div>
+              <div class="color" style="background-color: olive;"></div>
+              <div class="color" style="background-color: yellow;"></div>
+              <div class="color" style="background-color: green;"></div>
+              <div class="color" style="background-color: lime;"></div>
+              <div class="color" style="background-color: teal;"></div>
+              <div class="color" style="background-color: aqua;"></div>
+              <div class="color" style="background-color: navy;"></div>
+              <div class="color" style="background-color: blue;"></div>
+              <div class="color" style="background-color: purple;"></div>
+              <div class="color" style="background-color: fuchsia;"></div><br><br>
+
+              <canvas id="drcursor" width="60" height="60"></canvas><br>
+              Size: <input id="drsize" type="range" min="0" max="100" value="50">
+            </div>
+          </div>
+        </div>
+        <script type="text/javascript" src="<YOUR PATH>/scripts/droverlay.js"></script>
+      </body>
+    </html>
+  ]]></Content>
+</Module>