From 2d37dd487f0571ce94a0e4e966931dd6697d685f Mon Sep 17 00:00:00 2001 From: Aaron Perley Date: Tue, 11 Oct 2016 02:03:49 -0400 Subject: Add event passing between webapp and show --- webapp/app/templates/index.html | 2 ++ 1 file changed, 2 insertions(+) (limited to 'webapp/app/templates/index.html') diff --git a/webapp/app/templates/index.html b/webapp/app/templates/index.html index b0d9bb3..d4d1853 100644 --- a/webapp/app/templates/index.html +++ b/webapp/app/templates/index.html @@ -43,6 +43,8 @@ socket.on('disconnect', function() { console.log('disconnected'); }); + + socket.emit('ready'); }); -- cgit v1.3.1 From a862e866db252a6eceb50ee222d645c31f0ab3b4 Mon Sep 17 00:00:00 2001 From: Aaron Perley Date: Tue, 11 Oct 2016 17:08:34 -0400 Subject: Add pretty webpage --- webapp/app/static/carousel.css | 138 ++++++++++++++++++++++++++++ webapp/app/templates/index.html | 194 +++++++++++++++++++++++++++++----------- webapp/app/views.py | 6 +- 3 files changed, 285 insertions(+), 53 deletions(-) create mode 100644 webapp/app/static/carousel.css (limited to 'webapp/app/templates/index.html') diff --git a/webapp/app/static/carousel.css b/webapp/app/static/carousel.css new file mode 100644 index 0000000..9ef5474 --- /dev/null +++ b/webapp/app/static/carousel.css @@ -0,0 +1,138 @@ +/* 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

more */ +} + +/* Thin out the marketing headings */ +.featurette-heading { + font-weight: 300; + line-height: 1; + letter-spacing: -1px; +} + + +/* 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 d4d1853..a8e3479 100644 --- a/webapp/app/templates/index.html +++ b/webapp/app/templates/index.html @@ -1,57 +1,147 @@ - - - - - - + + + + - {{ title }} - - -

Ocean Fun Times

- + socket.on('new creature', function(msg) { + console.log('new!'); + var c = new creature(msg.name, socket); + c.render($('#creatures')); + }); + + socket.on('disconnect', function() { + console.log('disconnected'); + }); + + socket.emit('ready'); + }); + + function clickImg(element) { + console.log(element.id); + var c = new creature(element.id, socket); + c.click() + } + + + + + + + diff --git a/webapp/app/views.py b/webapp/app/views.py index 1c68688..b03f6ab 100644 --- a/webapp/app/views.py +++ b/webapp/app/views.py @@ -1,4 +1,4 @@ -from flask import render_template, request +from flask import render_template, request, send_from_directory from app import app, sio, send_queue, recv_queue import time @@ -10,6 +10,10 @@ def index(): return render_template('index.html', title='F16 Group1') +@app.route('/static/') +def send_static(path): + return send_from_directory('static', path) + connections = set() @sio.on('connect', namespace='/spawn') -- cgit v1.3.1 From 26ed0bd9400a888b2603db734d47e9ea64c6c3d7 Mon Sep 17 00:00:00 2001 From: Aaron Perley Date: Thu, 13 Oct 2016 21:17:59 -0400 Subject: Update fish show with increasing depth and fish type handling --- fish_show.py | 81 +++++++++++++++++++++++++++++------------ show.py | 3 ++ webapp/app/templates/index.html | 2 +- 3 files changed, 62 insertions(+), 24 deletions(-) (limited to 'webapp/app/templates/index.html') diff --git a/fish_show.py b/fish_show.py index d42e520..6677ddd 100644 --- a/fish_show.py +++ b/fish_show.py @@ -7,6 +7,8 @@ from constants import * import math from show import Show + + class Fish(object): """Object displayed on the bridge, probably a fish.""" def __init__(self, x, y, width, height, color, step): @@ -31,6 +33,9 @@ class Fish(object): def update(self): """Swim gently to the other side of the bridge.""" + if self.x > constants.BRIDGE_WIDTH or self.x < -self.width: + return False + self.speed += self.drag * self.speed if abs(self.speed) < self.tailThreshold: self.tailMoving = True @@ -44,15 +49,8 @@ class Fish(object): self.tailMoveCount += 1 self.x += self.speed.components[0] self.y += self.speed.components[1] - # - # THIS NEEDS TO CHANGE - # - if self.x > constants.BRIDGE_WIDTH: - self.x = -self.width - if self.x < -self.width: - self.x = constants.BRIDGE_WIDTH - #print(self.x, self.y) + return True def fix_direction(self): min_theta = -0.32 @@ -65,7 +63,29 @@ class Fish(object): #theta = rand_in_range(min_theta, max_theta) theta = random.gauss((max_theta+min_theta)/2, (max_theta - min_theta)/12) self.tailAcceleration = Vector(self.tailAccelMag, 0).rot2d(theta) - + + @classmethod + def by_type(cls, fish_type): + if (fish_type == 'jellyfish'): + return cls(0, 0.5, 23, 1.5, color.black, 1) + if fish_type == 'dolphin': + return cls(0, 0.5, 23, 1.5, color.black, 1) + if fish_type == 'boat': + return cls(0, 0.5, 23, 1.5, color.black, 1) + if fish_type == 'dory': + return cls(0, 0.5, 23, 1.5, color.black, 1) + if fish_type == 'nemo': + return cls(0, 0.5, 23, 1.5, color.black, 1) + if fish_type == 'whale': + return cls(0, 0.5, 23, 1.5, color.black, 1) + if fish_type == 'stingray': + return cls(0, 0.5, 23, 1.5, color.black, 1) + if fish_type == 'eel': + return cls(0, 0.5, 23, 1.5, color.black, 1) + if fish_type == 'shark': + return cls(0, 0.5, 23, 1.5, color.black, 1) + + class Light(object): """Represent a bridge light and its state.""" @@ -78,10 +98,10 @@ class Light(object): self.x = x self.y = y - def update(self, fishes): + def update(self, depth, fishes): """Change color depending on where the fish is.""" if abs(self.transitioning_to - self.color) <= self.step: - self.transitioning_to = pick_HSV().to_RGB() + self.transitioning_to = pick_HSV(depth).to_RGB() self.step = (random_change() * abs(self.color - self.transitioning_to)) new_background = transition( @@ -111,10 +131,12 @@ def compute_coverage(fish, x, y): return coverage * scale -def pick_HSV(): +def pick_HSV(depth): """Return a random color in an appropriate interval.""" - hue = random.random() * (constants.MAX_HUE - constants.MIN_HUE) + constants.MIN_HUE - saturation = random.random() * (MAX_SATURATION - MIN_SATURATION) + MIN_SATURATION + min_hue = constants.MIN_HUE + (10/360)*depth + min_saturation = constants.MIN_SATURATION + 0.05*depth + hue = random.random() * (constants.MAX_HUE - min_hue) + min_hue + saturation = random.random() * (MAX_SATURATION - min_saturation) + min_saturation value = random.random() * (MAX_VALUE - MIN_VALUE) + MIN_VALUE return color.HSV(hue, saturation, value) @@ -141,25 +163,38 @@ def clamp(low, x, high): return max(low, min(x, high)) class FishShow(Show): + # 1 minute show + TICKS_PER_DEPTH = FRAME_RATE * 10 + MAX_DEPTH = 6 + def init(self): self.lights = [Light(x, y, self.bridge.get_light(x, y)) for y in xrange(self.bridge.HEIGHT) for x in xrange(self.bridge.WIDTH)] - self.fishes = [] - self.send_event('new creature', {'name': 'test fishy'}) - + self.fishes = set() + self.tick_count = 0 + self.depth = 0 def update(self): event = self.recv_event() if event and event[0] == 'spawn': - random_hue = random.random() - fish_color = color.HSV(random_hue, 1, 20/100).to_RGB() - self.fishes.append(Fish(0, 0.5, 23, 1.5, fish_color, 1)) + new_fish = Fish.by_type(event[1]['type']) + self.fishes.add(new_fish) - for fish in self.fishes: - fish.update() + for fish in list(self.fishes): + if not fish.update(): + self.fishes.remove(fish) for light in self.lights: - light.update(self.fishes) + light.update(self.depth, self.fishes) + + self.tick_count += 1 + if self.tick_count % self.TICKS_PER_DEPTH == 0: + self.depth += 1 + print("DEPTH: ", self.depth) + + if self.depth > self.MAX_DEPTH: + self.stop() + def rand_in_range(low, high): return random.random() * (high - low) + low diff --git a/show.py b/show.py index 19066c0..5749863 100644 --- a/show.py +++ b/show.py @@ -33,6 +33,9 @@ class Show(object): self.bridge.update() self.clock.tick(framerate) + def stop(self): + self.running = False + def send_event(self, event_name, data=None): self.send_queue.put((event_name, data)) diff --git a/webapp/app/templates/index.html b/webapp/app/templates/index.html index a8e3479..3592985 100644 --- a/webapp/app/templates/index.html +++ b/webapp/app/templates/index.html @@ -106,7 +106,7 @@ }; self.click = function() { - self.socket.emit('spawn', {name:self.name}); + self.socket.emit('spawn', {type:self.name}); } } -- cgit v1.3.1 From ad2fbe28d4e345c9b100f47eef2da0b8f76ff9a5 Mon Sep 17 00:00:00 2001 From: liwencTaiwan Date: Fri, 14 Oct 2016 13:33:01 -0400 Subject: Add img-disable css and usage MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The “socket.on(enable/disable image)” haven’t been tested. --- webapp/app/static/carousel.css | 10 ++++++++-- webapp/app/templates/index.html | 24 ++++++++++++++++++++++++ 2 files changed, 32 insertions(+), 2 deletions(-) (limited to 'webapp/app/templates/index.html') diff --git a/webapp/app/static/carousel.css b/webapp/app/static/carousel.css index 9ef5474..4e49305 100644 --- a/webapp/app/static/carousel.css +++ b/webapp/app/static/carousel.css @@ -93,6 +93,14 @@ body { 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 -------------------------------------------------- */ @@ -133,6 +141,4 @@ body { margin-top: 120px; } - - } diff --git a/webapp/app/templates/index.html b/webapp/app/templates/index.html index 3592985..4dadb7b 100644 --- a/webapp/app/templates/index.html +++ b/webapp/app/templates/index.html @@ -124,6 +124,23 @@ 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'); @@ -134,6 +151,13 @@ 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() } -- cgit v1.3.1