Browse files

Kiosk Map

  • Loading branch information...
1 parent 79c0b77 commit 3ddb62e9261107ccdd9661dd303709cb970fc306 @dustball dustball committed Apr 18, 2013
Showing with 197 additions and 31 deletions.
  1. +3 −3 app.yaml
  2. +6 −21 main.html
  3. +85 −7 main.py
  4. +103 −0 map.html
  5. BIN static/map1000.png
View
6 app.yaml
@@ -1,11 +1,11 @@
-application: hackerdojo-kiosk
+application: hackerdojo-kiosk-hrd
version: 1
-runtime: python
+runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /static
static_dir: static
- url: .*
- script: main.py
+ script: main.app
View
27 main.html
@@ -8,34 +8,19 @@
<title>Hacker Dojo Kiosk</title>
</head>
<body id="body">
-
- <div id="top">
- <table width="100%"><tr>
- <td>
- <img class="jiggle" src="/static/logo345.png" width="345" height="122" alt="Hacker Dojo" />
- </td>
- <td>
- <h1 class="jiggle">Welcome to Hacker Dojo</h1>
- <h3 id="motd" class="jiggle">Please sign in at the main desk :)</h3>
- </td>
- </tr></table>
- </div>
- <div id="left">
- <div class="jiggle" style="height:100%">
- <h2 class="sectionhead">Currently Staffing</h2>
- <div class="reloadcount" id="staffReloadCount">&nbsp;0</div>
- <iframe style="border:none" id="staff" border="0" height="80%" width="100%" src="http://hackerdojo-signin.appspot.com/staff"></iframe>
- </div>
- </div>
+ <iframe class="jiggle map" id="left" style="top:0; left:1%; height:100%; width:62%; border:none; overflow:hidden" id="staff" border="0" src="/readonly?scale={{scale}}" scrolling="no"></iframe>
- <div id="right">
+ <div id="right" style="left:58%; height:95%; width:42%; top:5%">
<div class="jiggle" style="height:100%">
- <h2 class="sectionhead">Schedule</h2>
+ <h2 class="sectionhead">Upcoming Events</h2>
<div class="reloadcount" id="eventsReloadCount">&nbsp;0</div>
<iframe id="events" src="http://events.hackerdojo.com/?base=mini" style="border-width:0;" width="100%" height="90%" frameborder="0" scrolling="no"></iframe>
</div>
</div>
+
+
</body>
</html>
+
View
92 main.py
@@ -1,21 +1,99 @@
#!/usr/bin/env python
import wsgiref.handlers
+from datetime import datetime, timedelta
+import webapp2
+import hashlib
from google.appengine.ext.webapp import template
-from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
+from google.appengine.api import urlfetch, mail, memcache, users, taskqueue
+from google.appengine.ext import db
-class MainHandler(webapp.RequestHandler):
+class Location(db.Model):
+ username = db.StringProperty()
+ discuss = db.StringProperty()
+ x = db.StringProperty()
+ y = db.StringProperty()
+ created = db.DateTimeProperty(auto_now_add=True)
+ until = db.DateTimeProperty()
+ def icon(self):
+ return "http://www.gravatar.com/avatar/" + hashlib.md5(self.username.lower()+"@hackerdojo.com").hexdigest()
+
+
+class MainHandler(webapp2.RequestHandler):
def get(self):
+ scale = "0.75"
+ if self.request.get('scale'):
+ scale = self.request.get('scale')
self.response.out.write(template.render('main.html', locals()))
-def main():
- application = webapp.WSGIApplication([('/', MainHandler)], debug=True)
- run_wsgi_app(application)
+class ReadonlyHandler(webapp2.RequestHandler):
+ def get(self):
+ scale = "1.00"
+ if self.request.get('scale'):
+ scale = self.request.get('scale')
+ readonly = True
+ now = datetime.now()
+ locations = Location.all().filter('until >', now).fetch(500)
+ self.response.out.write(template.render('map.html', locals()))
+
+
+class MapHandler(webapp2.RequestHandler):
+ def get(self):
+ user = users.get_current_user()
+ if not user:
+ self.redirect(users.create_login_url('/map'))
+ else:
+ name = user.nickname()
+ myicon = "http://www.gravatar.com/avatar/" + hashlib.md5(name.lower()+"@hackerdojo.com").hexdigest()
+ now = datetime.now()
+ locations = Location.all().filter('until >', now).fetch(500)
+ self.response.out.write(template.render('map.html', locals()))
+
+ def post(self):
+ user = users.get_current_user()
+ if not user:
+ self.redirect(users.create_login_url('/map'))
+ else:
+ username = user.nickname()
+ discuss = self.request.get('discuss')[:100].replace('\n', ' ')
+ x = self.request.get('x')
+ y = self.request.get('y')
+ strhours = self.request.get('hours')
+ now = datetime.now()
+ until = now
+
+ try:
+ h = int(strhours)
+ if h > 12:
+ h = 12
+ delta = timedelta(hours=h)
+ until = now + delta
+ except:
+ self.response.out.write("Please enter a whole number in the 'hours' field.")
+ return
+
+ location = Location.all().filter('username =', username).get()
+ if location:
+ location.x = x
+ location.y = y
+ location.discuss = discuss
+ location.until = until
+ else:
+ location = Location(x=x,y=y,username=username,discuss=discuss,until=until)
+ location.put()
+ self.response.out.write("Okay, you are on the map! Have a good day. <a href='/map'>Back</a>")
+
+
+app = webapp2.WSGIApplication([
+ ('/', MainHandler),
+ ('/map', MapHandler),
+ ('/readonly', ReadonlyHandler),
+],debug=True)
+
+
-if __name__ == '__main__':
- main()
View
103 map.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+ <title>Hacker Dojo Map</title>
+<style>
+body,p {font-family:sans-serif}
+.marker {
+-moz-transform: rotate(-38deg) translate(25px,-60px);
+-webkit-transform: rotate(-38deg) translate(25px,-60px);
+-o-transform: rotate(-38deg) translate(25px,-60px);
+-ms-transform: rotate(-38deg) translate(25px,-60px);
+transform: rotate(-38deg) translate(25px,-60px);
+
+} `
+html, body, img {overflow:hidden}
+
+::-webkit-scrollbar, #element::-webkit-scrollbar {
+ display: none;
+}
+
+body {
+ -moz-transform: scale({{scale}}, {{scale}});
+ -webkit-transform: scale({{scale}}, {{scale}});
+ -o-transform: scale({{scale}}, {{scale}});
+ -ms-transform: scale({{scale}}, {{scale}});
+ transform: scale({{scale}}, {{scale}});
+ -moz-transform-origin: top left;
+ -webkit-transform-origin: top left;
+ -o-transform-origin: top left;
+ -ms-transform-origin: top left;
+ transform-origin: top left;
+} `
+
+</style>
+
+</head>
+<body id="body">
+
+<div style="position:relative; top:0; left:0; width:1000px; height:1000px">
+<form id="deets" method=post style="display:none; position:absolute; background:white; z-index:40; top:400px; left:300px; width:400px; height:250px; border:2px solid #a9bbff; padding:12px; border-radius:6px; box-shadow: 10px 10px 20px #999;">
+<div style="border-bottom:1px solid black; font-weight:bold; font-variant:small-caps; margin-bottom:1em">Saving your position</div>
+<label>1) How long do you expect to be there? </label>
+<input id="hours" type=text value="6" size=2 maxlength=3 name="hours"> hours
+<br><br>
+<label>2) Actively interested in communicating with humans? List your interested topics here.</label>
+<br><br>
+<textarea maxlength=100 placeholder="linux kernel development, python, css" name=discuss style="width:90%" rows=3></textarea><p><small>(Leave blank otherwise.)</small></p>
+<input type=hidden name=x id=locx value="">
+<input type=hidden name=y id=locy value="">
+<input type=submit value="Save Location">
+</form>
+
+{% if not readonly %}
+<div id="legend" style="position:absolute; text-align:right; background:white; z-index:20; top:24px; right:24px; font-size:90%">
+<p><b>Hello, Dojo Friend.</b></p>
+<p>Where are you working today?<br>Click on the map if you want<br>to share with others.</p>
+</div>
+{% endif %}
+
+<!--
+<div id="marker" style="z-index:3; position:absolute; top:-100px; left:-100px; display:inline; color:red"><nobr>
+x <div style="background:#fffab0; display:inline; color: black; padding:3px 6px"><nobr>{{user.nickname}}</nobr></div>
+</nobr></div>
+-->
+
+<div class='marker' id="marker" style="white-space:nowrap; z-index:10; position:absolute; top:-100px; left:-100px; display:inline; color:red"><table border=0 cellspacing=0 cellpadding=0><tr><td>x&nbsp;</td><td><img src="{{myicon}}" height=24 width=24 style="border:0; "></td><td style="background:#fffab0"><div style="white-space:nowrap; color: black; background:#fffab0;">&nbsp;{{user.nickname}}&nbsp;</div></td></tr></table></div>
+
+
+{% for l in locations %}
+<div class='marker' style="white-space:nowrap; z-index:3; position:absolute; top:{{l.y}}px; left:{{l.x}}px; display:inline; color:red"><table border=0 cellspacing=0 cellpadding=0><tr><td width=1>x&nbsp;</td><td width=24><img src="{{l.icon}}" height=24 width=24 style="border:0; "></td><td style="background:#fffab0"><div style="white-space:nowrap; color: black; background:#fffab0;">&nbsp;{{l.username}}&nbsp;</div></td></tr>
+{% if l.discuss %}
+<tr><td></td><td colspan=2 style="background:white; color:#666; font-size:82%; padding:2px"><div style="max-width:200px; white-space:normal">Talk to me about: {{l.discuss}}<div></td></tr>
+{% endif %}
+
+</table></div>
+{% endfor %}
+
+<img style="{% if not readonly %}cursor:pointer;{% endif %} z-:index:2; position:absolute; top:0; left:0" id="map" src="/static/map.png" width="1000" height="1000" alt="map" border="0">
+
+{% if not readonly %}
+<script>
+$(document).ready(function() {
+ $("#map").click(function(e) {
+ var offset = $(this).offset();
+ x = e.pageX - offset.left;
+ y = e.pageY - offset.top;
+ $("#marker").css("left",x);
+ $("#marker").css("top",y);
+ $("#deets").show();
+ $("#locx").val(x);
+ $("#locy").val(y);
+ });
+ jQuery('#hours').keyup(function () {
+ this.value = this.value.replace(/[^0-9]/g,'');
+ });
+});
+</script>
+{% endif %}
+
+</body>
+</html>
View
BIN static/map1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3ddb62e

Please sign in to comment.