diff options
Diffstat (limited to 'webapp')
| -rw-r--r-- | webapp/app/__init__.py | 5 | ||||
| -rw-r--r-- | webapp/app/static/carousel.css | 144 | ||||
| -rw-r--r-- | webapp/app/templates/index.html | 206 | ||||
| -rw-r--r-- | webapp/app/views.py | 29 | ||||
| -rwxr-xr-x | webapp/run.py | 10 |
5 files changed, 339 insertions, 55 deletions
diff --git a/webapp/app/__init__.py b/webapp/app/__init__.py index 29cd22b..3e188ec 100644 --- a/webapp/app/__init__.py +++ b/webapp/app/__init__.py @@ -1,6 +1,11 @@ from flask import Flask import socketio +import Queue + +recv_queue = Queue.Queue() +send_queue = Queue.Queue() + sio = socketio.Server(async_mode='threading') app = Flask(__name__) app.wsgi_app = socketio.Middleware(sio, app.wsgi_app) diff --git a/webapp/app/static/carousel.css b/webapp/app/static/carousel.css new file mode 100644 index 0000000..4e49305 --- /dev/null +++ b/webapp/app/static/carousel.css @@ -0,0 +1,144 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-bottom: 40px; + color: #5a5a5a; + /*background: lighten(#000, 93.5%);*/ +} + + +/* CUSTOMIZE THE NAVBAR +-------------------------------------------------- */ + +/* Special class on .container surrounding .navbar, used for positioning it into place. */ +.navbar-wrapper { + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 20; +} + +/* Flip around the padding for proper display in narrow viewports */ +.navbar-wrapper > .container { + padding-right: 0; + padding-left: 0; +} +.navbar-wrapper .navbar { + padding-right: 15px; + padding-left: 15px; +} +.navbar-wrapper .navbar .container { + width: auto; +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + height: 500px; + margin-bottom: 60px; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel .item { + height: 500px; + background-color: #777; +} +.carousel-inner > .item > img { + position: absolute; + top: 0; + left: 0; + min-width: 100%; + height: 500px; +} + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + margin-bottom: 20px; + text-align: center; +} +.marketing h2 { + font-weight: normal; +} +.marketing .col-lg-4 p { + margin-right: 10px; + margin-left: 10px; +} + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 80px 0; /* Space out the Bootstrap <hr> more */ +} + +/* Thin out the marketing headings */ +.featurette-heading { + font-weight: 300; + line-height: 1; + letter-spacing: -1px; +} + +img.img-disable { + -webkit-filter: grayscale(100%); + -moz-filter: grayscale(100%); + -o-filter: grayscale(100%); + -ms-filter: grayscale(100%); + filter: grayscale(100%); + opacity: 0.5; +} + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 768px) { + /* Navbar positioning foo */ + .navbar-wrapper { + margin-top: 20px; + } + .navbar-wrapper .container { + padding-right: 15px; + padding-left: 15px; + } + .navbar-wrapper .navbar { + padding-right: 0; + padding-left: 0; + } + + /* The navbar becomes detached from the top, so we round the corners */ + .navbar-wrapper .navbar { + border-radius: 4px; + } + + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 20px; + font-size: 21px; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } +} + +@media (min-width: 992px) { + .featurette-heading { + margin-top: 120px; + } + +} diff --git a/webapp/app/templates/index.html b/webapp/app/templates/index.html index b0d9bb3..4dadb7b 100644 --- a/webapp/app/templates/index.html +++ b/webapp/app/templates/index.html @@ -1,55 +1,171 @@ -<html> - <head> - <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script> - <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script> - - <script> - var SPAWN_URL = "/spawn"; +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> + <!--<meta name="description" content=""> + <meta name="author" content=""> + <link rel="icon" href="../../favicon.ico">--> + + <!-- Bootstrap core CSS --> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> + + <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> + <![endif]--> + + <!-- Custom styles for this template --> + <link href="static/carousel.css" rel="stylesheet"> + + </head> + +<div class = "page-header"> +<center> + <h1> + Welcome to the Underwater World <br> + <small>Select your favorite sea creature and relax!</small> + </h1> +</center> + +</div> + + + <!-- Marketing messaging and featurettes + ================================================== --> + <!-- Wrap the rest of the page in another container to center all the content. --> + + <div class="container marketing"> + + <!-- Three columns of text below the carousel --> + <div class="row"> + <div class="col-lg-4"> + <img id="jellyfish" onClick="clickImg(this)" class="img-circle" src="http://animalia-life.com/data_images/jellyfish/jellyfish7.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="dolphin" onClick="clickImg(this)" class="img-circle" src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/A-G/bottlenose-dolphin-jumping.jpg.adapt.945.1.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="boat" onClick="clickImg(this)" class="img-circle" src="http://yachtpals.com/files/groupimages/woodduck.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + </div><!-- /.row --> +<br> + <div class="row"> + <div class="col-lg-4"> + <img id="dory" onClick="clickImg(this)" class="img-circle" src="https://www.sciencenewsforstudents.org/sites/default/files/2016/06/main/articles/wt_blue_tang_dory_free.jpg" alt="Generic placeholder image" width="150" height="150"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="nemo" onClick="clickImg(this)" class="img-circle" src="http://img.wallpaperfolder.com/f/63DCF495B5BC/clown-fish-75948.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="whale" onClick="clickImg(this)" class="img-circle" src="http://media-channel.nationalgeographic.com/media/uploads/photos/content/photo/2013/01/30/KillerWhale_01_BuiltForTheKillV.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + </div><!-- /.row --> +<br> + <div class="row"> + <div class="col-lg-4"> + <img id="stingray" onClick="clickImg(this)" class="img-circle" src="http://3.bp.blogspot.com/-enlwcfp2skQ/Tlxxws9FRlI/AAAAAAAAAmg/0-TEWn8Sokw/s1600/stingray_5.JPG" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="eel" onClick="clickImg(this)" class="img-circle" src="http://blogs.courierpostonline.com/fishhead/files/2012/11/eel.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="shark" onClick="clickImg(this)" class="img-circle" src="http://www.livescience.com/images/i/000/083/926/original/shark-attacks-increased-in-2015.jpg?interpolation=lanczos-none&downsize=*:1000" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + </div><!-- /.row --> + + </div><!-- /.container --> - function creature(name, socket) { - var self = this; - self.name = name; - self.socket = socket; - - self.render = function($parent) { - var $a = $('<a>'); - $a.text(self.name); - $a.click(self.click.bind(self)); - var $li = $('<li>'); - $li.append($a); - $parent.append($li); - }; + <!-- Bootstrap core JavaScript + ================================================== --> + <!-- Placed at the end of the document so the pages load faster --> + <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script> + <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> - self.click = function() { - self.socket.emit('spawn', {name:self.name}); - } + <script> + var SPAWN_URL = "/spawn"; + + function creature(name, socket) { + var self = this; + self.name = name; + self.socket = socket; + + self.render = function($parent) { + var $a = $('<a>'); + $a.text(self.name); + $a.click(self.click.bind(self)); + + var $li = $('<li>'); + $li.append($a); + $parent.append($li); + }; + + self.click = function() { + self.socket.emit('spawn', {type:self.name}); } + } - $(document).ready(function() { - var namespace = '/spawn'; - var socket = io.connect('http://' + document.domain + ':' + location.port + namespace); - - socket.on('connect', function() { - console.log('connected!'); - }); - socket.on('new creature', function(msg) { - console.log('new!'); - var c = new creature(msg.name, socket); - c.render($('#creatures')); - }); + $(document).ready(function() { + var namespace = '/spawn'; + socket = io.connect('http://' + document.domain + ':' + location.port + namespace); + + socket.on('connect', function() { + console.log('connected!'); + }); + + socket.on('new creature', function(msg) { + console.log('new!'); + var c = new creature(msg.name, socket); + c.render($('#creatures')); + }); + + socket.on('enable image', function(msg) { + console.log('enable image'); + // to be tested + var name = msg.name; + var myImgElement = $("#" + name); + myImgElement.removeClass('img-disable'); + + }); + + socket.on('disable image', function(msg) { + console.log('disable image'); + // to be tested + var name = msg.name; + var myImgElement = $("#" + name); + myImgElement.addClass('img-disable'); + }); - socket.on('disconnect', function() { - console.log('disconnected'); - }); + socket.on('disconnect', function() { + console.log('disconnected'); }); - </script> - <title>{{ title }}</title> - </head> - <body> - <h1>Ocean Fun Times</h1> - <ul id="creatures"></ul> - </body> + socket.emit('ready'); + }); + + function clickImg(element) { + console.log(element.id); + + //-----Testing------------------ + //var name = element.id; + //var myImgElement = $("#" + name); + //myImgElement.addClass('img-disable'); + // ----------------------------- + + var c = new creature(element.id, socket); + c.click() + } + + </script> + <!-- Just to make our placeholder images work. Don't actually copy the next line! --> + <!--<script src="../../assets/js/vendor/holder.min.js"></script>--> + <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> + <!--<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>--> + </body> </html> diff --git a/webapp/app/views.py b/webapp/app/views.py index 4aa2c05..b03f6ab 100644 --- a/webapp/app/views.py +++ b/webapp/app/views.py @@ -1,17 +1,19 @@ -from flask import render_template, request -from app import app, sio +from flask import render_template, request, send_from_directory +from app import app, sio, send_queue, recv_queue import time import threading -thread = None - @app.route('/') @app.route('/index') def index(): return render_template('index.html', title='F16 Group1') +@app.route('/static/<path:path>') +def send_static(path): + return send_from_directory('static', path) + connections = set() @sio.on('connect', namespace='/spawn') @@ -22,6 +24,14 @@ def connect(sid, environ): @sio.on('spawn', namespace='/spawn') def message(sid, data): print("message ", data) + send_queue.put(('spawn', data)) + +@sio.on('ready', namespace='/spawn') +def ready(sid): + print("got ready message from ", sid) + for event in received_events: + print "sending missed event", event + sio.emit(event[0], event[1], room=sid, namespace='/spawn') @sio.on('disconnect', namespace='/spawn') def disconnect(sid): @@ -29,9 +39,12 @@ def disconnect(sid): connections.remove(sid) +received_events = [] +def recv_events(): + while True: + event = recv_queue.get() + sio.emit(event[0], event[1], namespace='/spawn') + received_events.append(event) -def add_creature(): - time.sleep(5) - sio.emit('new creature', {'name': 'fish1'}, namespace='/spawn') -thread = sio.start_background_task(add_creature) +thread = sio.start_background_task(recv_events) diff --git a/webapp/run.py b/webapp/run.py index b5c8c6f..2290f41 100755 --- a/webapp/run.py +++ b/webapp/run.py @@ -3,5 +3,11 @@ import sys sys.path.append('packages') -from app import app -app.run(threaded=True, host='', port=8000) +import threading + +from app import app, send_queue, recv_queue + +def run_server(): + app.run(threaded=True, host='', port=8000) + +server_thread = threading.Thread(target=run_server) |