From dd69a0c395a1cb5df6dcc474c1e9084a3049408d Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Sun, 24 Sep 2017 15:46:43 +0300 Subject: [PATCH] Split coffee.html to multiple files --- coffee_scale/static/css/coffee.css | 121 ++++++++++++ coffee_scale/static/js/coffee.js | 137 ++++++++++++++ coffee_scale/templates/coffee.html | 293 ++--------------------------- 3 files changed, 273 insertions(+), 278 deletions(-) create mode 100644 coffee_scale/static/css/coffee.css create mode 100644 coffee_scale/static/js/coffee.js diff --git a/coffee_scale/static/css/coffee.css b/coffee_scale/static/css/coffee.css new file mode 100644 index 0000000..2594006 --- /dev/null +++ b/coffee_scale/static/css/coffee.css @@ -0,0 +1,121 @@ +body { + background-color: white; + font-family: monospace; + color: black; +} +#container{ + position:relative; + width:95%; + margin-left:auto; + margin-right:auto; + height:100%; + overflow:hidden; + +} +#upper{ + background-size: contain; + background-repeat: no-repeat; + background-position: bottom center; + background-image: url("/static/img/smokes.png"); + transform-origin: bottom; + animation: smokes 8s ease-in-out 0s infinite; + opacity:0; + height:40%; +} +#lower{ + position:relative; + background-size: contain; + background-repeat: no-repeat; + background-position: top center; + background-image: url("/static/img/coffeecup3.png"); + height:60%; +} +#scale{ + position:absolute; + top:80%; + width:90%; + height:10%; + margin: 0% 5% 0% 5%; + background: lightgrey; + border-radius: 10px; + overflow:hidden; +} +#scale2{ + width: 0%; + transition: width 2s; + height:100%; + background: green; + border-radius: 10px; +} +#brewtime{ + text-align:right; + position:absolute; + right:0px; + z-index:5; + font-size:10vw; +} +#address{ + text-align:left; + position:absolute; + left:0px; + z-index:5; + font-size:4vw; + color: #333; +} +noscript{ + color:red; +} +#text{ + color:green; + position:absolute; + top:50%; + left:50%; +} +.brewing{ + animation: brewing 5s ease-in-out 0s infinite; +} +.hurry{ + color:red !important; +} +.unknown{ + color:orange !important; + animation: unknown 5s ease-in-out 0s infinite; +} +.friday{ + animation: friday 20s ease-in-out 0s infinite; +} +.normal{ + animation: normal 1000s ease-in-out 0s infinite; +} +.coffeeready{ + animation: coffeeready 10s ease-in-out 0s; +} +@keyframes smokes { + 0% {transform: skewX(-10deg);} + 50% {transform: skewX(10deg);} + 100% {transform: skewX(-10deg);} +} +@keyframes brewing { + 0% {color:green;} + 50% {color: transparent;} + 100% {color:green;} +} +@keyframes coffeeready { + 0% {background-color:white;} + 25% {background-color:green;} + 50% {background-color:white;} + 75% {background-color:green;} + 100% {background-color:white;} +} +@keyframes unknown { + 0%,40% {transform: rotate(0deg);} + 60%,100% {transform: rotate(360deg);} +} +@keyframes friday { + 0% {transform: rotate(0deg);} + 100% {transform: rotate(360deg);} +} +@keyframes normal { + 0%,49% {transform: rotate(0deg);} + 50%,100% {transform: rotate(360deg);} +} diff --git a/coffee_scale/static/js/coffee.js b/coffee_scale/static/js/coffee.js new file mode 100644 index 0000000..ca97335 --- /dev/null +++ b/coffee_scale/static/js/coffee.js @@ -0,0 +1,137 @@ +var len = 0; +var lastBrew = "∞"; +var brewtext = ""; + +$(document).ready(function(){ + $('#text').bind("DOMSubtreeModified", resize); + updateTime(); + setInterval(updateTime,1000); + formatBrewTime(); + setInterval(formatBrewTime,10000); +}); + +$(window).resize(resize); + +var defaultBackoffTime = 1000; +var modified = 0; + +function fetchdata(data, status){ + var backoffTime = defaultBackoffTime; + modified = 1; + if (typeof status !== 'undefined'){ + if (status == "success"){ + backoffTime = defaultBackoffTime; + parseData(data); + } + else if (status == "error"){ + backoffTime *= 2; + modified = 0 + handleError(); + return; + } + } +} + +$.getJSON("/coffee/cups", fetchdata); +setInterval(function() { + $.getJSON("/coffee/cups", fetchdata); +}, 2000); + +function formatBrewTime(){ + if(!brewtext && lastBrew instanceof Date){ + var now = new Date(); + var timeDiff = Math.max(now.getTime()-lastBrew.getTime(),0); + if(timeDiff < 3600000) + tmp = Math.round(timeDiff/60000) + ' min'; + else + tmp = '~' + Math.round(timeDiff/3600000*2)/2 + ' h'; + $("#brewtime").html(tmp); + }else + $("#brewtime").html(brewtext); +} + +function handleError(){ + setData("?",0,0,Number.MAX_VALUE,Number.MAX_VALUE); +} + +function parseData(data) { + if (data) { + var date = new Date(data.date); + lastBrew = new Date(data.last_brew); + var now = new Date(); + var cups = data.cups; + var brewing = data.brewing; + var timeDiff = Math.max(now.getTime() - lastBrew.getTime(),0); + var opa = Math.max(100-timeDiff/90000,0); + setData(cups, data.temp, opa,now.getTime()-date.getTime(), timeDiff, brewing); + } + else{ + handleError(); + } +} + +function setData(cups, temp, opa, timeFromUpdate, timeFromBrew, brewing){ + var now = new Date(); + if(cups == 0) + opa = 0; + brewtext = ""; + $("#upper").css({opacity: opa/100}); + $("#scale2").css({width: Math.min(cups/9*100,100) + '%'}); + $("#text,body").removeClass(); + + if(timeFromUpdate > 600000){ + cups = "?"; + brewtext = "∞"; + $("#text").addClass("unknown"); + } + else if(brewing){ + cups = "+"; + brewtext = ":)"; + $("#text").addClass("brewing"); + } + else if(cups <= 2){ + $("#text").addClass("hurry"); + } + formatBrewTime(); + if($("#text").html() == "+" && !brewing) + $("body").addClass("coffeeready"); + + cups = Number(cups).toFixed(1); + var cupsString = cups.toString(); + len = cupsString.length; + $("#text").html(cups); +} + +function updateTime(){ + var now = new Date(); + $("#time").html(formatTime(now.getHours(),now.getMinutes(),now.getSeconds())); +} + +function formatTime(hours, minutes, seconds){ + var str = ""; + + if(hours < 10) + str += "0"; + str += hours; + + str += ":"; + + if(minutes < 10) + str += "0"; + str += minutes; + + str += ":"; + + if(seconds < 10) + str += "0"; + str += seconds; + + return str; +} +function resize(){ + var w = $("#container").width(); + var h = $("#container").height(); + var s = w > h ? h : w; + var font = s*0.8*0.38/Math.sqrt(len); + $("#text").css({ top: s*0.16-font/2 + 'px', fontSize: font + 'px', marginLeft: -font*len*3/10 + 'px'}); +} diff --git a/coffee_scale/templates/coffee.html b/coffee_scale/templates/coffee.html index 2d5ee2b..1c2fec9 100644 --- a/coffee_scale/templates/coffee.html +++ b/coffee_scale/templates/coffee.html @@ -1,287 +1,24 @@ -Coffee Cups @Guild Room - AYY SIK RY - - - - - - - - - - - + Coffee Cups @Guild Room - AYY SIK ry + + + + + + + + + + + - -
+
- Kahvivaaka + ka.dy.fi
@@ -292,6 +29,6 @@ function resize(){
-
+