From c4fb1bafecc66498b2db3e43b1195bf144e42233 Mon Sep 17 00:00:00 2001 From: altf4arnold Date: Mon, 1 Apr 2024 00:15:00 +0200 Subject: [PATCH 1/3] animation --- app.py | 18 +++---- static/animation.css | 115 ++++++++++++++++++++++++++++++++++++++++++ templates/screen.html | 77 ++++++++++++++++------------ 3 files changed, 168 insertions(+), 42 deletions(-) create mode 100644 static/animation.css diff --git a/app.py b/app.py index d85eea5..e1e5711 100644 --- a/app.py +++ b/app.py @@ -16,12 +16,12 @@ def hello_world(): rawdata = datapull.grabber() airport = {"name": "", "icao": "", "iata": ""} for flight in rawdata: - # Source Airport naming + # Source Airport naming : airport["name"] = flight["origin"]["name"] airport["icao"] = flight["origin"]["code_icao"] airport["iata"] = flight["origin"]["code_iata"] - # Converting departures time from UTC to local time + # Converting departures time from UTC to local time : origintimezone = flight["origin"]["timezone"] from_zone = tz.gettz('UTC') to_zone = tz.gettz(origintimezone) @@ -29,7 +29,13 @@ def hello_world(): utctime = utctime.replace(tzinfo=from_zone) flight["scheduled_off"] = utctime.astimezone(to_zone).strftime(localformat) - # Calculating Delays in human readable ways + # Adding the secondary flight numbers : + flightnr = flight["ident"] + flight["ident"] = [] + flight["ident"].append(flightnr) + for otherrefs in flight["codeshares"]: + flight["ident"].append(otherrefs) + # Calculating Delays in human readable ways : negative = False delay = flight["departure_delay"] if delay != 0: @@ -45,9 +51,3 @@ def hello_world(): if negative: flight["departure_delay"] = ("-" + str(flight["departure_delay"])) return render_template('screen.html', len=len(rawdata), airport=airport, flight=rawdata) - - -@app.route("/style.css") -def style(): - with open("static/style.css", "r") as f: - return f.read(), 200, {'Content-Type': 'text/css; charset=utf-8'} diff --git a/static/animation.css b/static/animation.css new file mode 100644 index 0000000..2315345 --- /dev/null +++ b/static/animation.css @@ -0,0 +1,115 @@ +.content { + overflow:hidden; + + &__container { + overflow: hidden; + + &:before { + content: '['; + left: 0; + } + + &:after { + content: ']'; + position: absolute; + right: 0; + } + + &:after, &:before { + top: 0; + -webkit-animation-name: opacity; + -webkit-animation-duration: 2s; + -webkit-animation-iteration-count: infinite; + animation-name: opacity; + animation-duration: 2s; + animation-iteration-count: infinite; + } + &__list { + -webkit-animation-name: change; + -webkit-animation-duration: 10s; + -webkit-animation-iteration-count: infinite; + animation-name: change; + animation-duration: 10s; + animation-iteration-count: infinite; + + &__item { + line-height:40px; + margin:0; + } + } + } +} + +@-webkit-keyframes opacity { + 0%, 100% {opacity:0;} + 50% {opacity:1;} +} + +@-webkit-keyframes change { + 0%, 12.66%, 100% {transform:translate3d(0,0,0);} + 16.66%, 29.32% {transform:translate3d(0,-25%,0);} + 33.32%,45.98% {transform:translate3d(0,-50%,0);} + 49.98%,62.64% {transform:translate3d(0,-75%,0);} + 66.64%,79.3% {transform:translate3d(0,-50%,0);} + 83.3%,95.96% {transform:translate3d(0,-25%,0);} +} + +@-o-keyframes opacity { + 0%, 100% {opacity:0;} + 50% {opacity:1;} +} + +@-o-keyframes change { + 0%, 12.66%, 100% {transform:translate3d(0,0,0);} + 16.66%, 29.32% {transform:translate3d(0,-25%,0);} + 33.32%,45.98% {transform:translate3d(0,-50%,0);} + 49.98%,62.64% {transform:translate3d(0,-75%,0);} + 66.64%,79.3% {transform:translate3d(0,-50%,0);} + 83.3%,95.96% {transform:translate3d(0,-25%,0);} +} + +@-moz-keyframes opacity { + 0%, 100% {opacity:0;} + 50% {opacity:1;} +} + +@-moz-keyframes change { + 0%, 12.66%, 100% {transform:translate3d(0,0,0);} + 16.66%, 29.32% {transform:translate3d(0,-25%,0);} + 33.32%,45.98% {transform:translate3d(0,-50%,0);} + 49.98%,62.64% {transform:translate3d(0,-75%,0);} + 66.64%,79.3% {transform:translate3d(0,-50%,0);} + 83.3%,95.96% {transform:translate3d(0,-25%,0);} +} + +@keyframes opacity { + 0%, 100% {opacity:0;} + 50% {opacity:1;} +} + +@keyframes change { + 0%, 12.66%, 100% {transform:translate3d(0,0,0);} + 16.66%, 29.32% {transform:translate3d(0,-25%,0);} + 33.32%,45.98% {transform:translate3d(0,-50%,0);} + 49.98%,62.64% {transform:translate3d(0,-75%,0);} + 66.64%,79.3% {transform:translate3d(0,-50%,0);} + 83.3%,95.96% {transform:translate3d(0,-25%,0);} +} + +// 6 is the number of animation. +// Here, there are 4 lines : + +// 1 to 2 +// 2 to 3 +// 3 to 4 +// 4 to 3 +// 3 to 2 +// 2 to 1 + +// 6x + 6y = 100 (100% duration) + +// HERE : +// y = 4 -> Animation between two lines +// x = 12.66 -> Time spent on a line + +// You can define a value and calculate the other if you want change speed or the number of lines \ No newline at end of file diff --git a/templates/screen.html b/templates/screen.html index ad80571..9118615 100644 --- a/templates/screen.html +++ b/templates/screen.html @@ -2,7 +2,8 @@ - + + {{ airport["icao"] }} Departure Schedule @@ -34,43 +35,53 @@ - {% for i in range(0,len) %} - {% if i%2 == 0 %} - - {% else %} - + {% for i in range(0,len) %} + {% if i%2 == 0 %} + + {% else %} + {% endif %} - {{ flight[i]["ident"] }} - {{ flight[i]["scheduled_off"] }} - {% if flight[i]["departure_delay"] %} - {{ flight[i]["departure_delay"] }} - {% else %} - {% endif %} - - {{ flight[i]["operator"] }} - - {% if flight[i]["destination"]["name"] %} + +
+
+
    + {% for ident in flight[i]["ident"] %} +
  • {{ ident }}
    • + {% endfor %} +
+
+
+ + {{ flight[i]["scheduled_off"] }} + {% if flight[i]["departure_delay"] %} + {{ flight[i]["departure_delay"] }} + {% else %} + {% endif %} + + {{ flight[i]["operator"] }} + + {% if flight[i]["destination"]["name"] %} {{ flight[i]["destination"]["name"] }} {{ flight[i]["destination"]["code_icao"] }} / {{ flight[i]["destination"]["code_iata"] }} - {% else %} - {% endif %} - + {% else %} + {% endif %} + {% if flight[i]["status"] != "Scheduled" %} - {% if flight[i]["cancelled"] %} - - {{ flight[i]["status"] }} - {% elif flight[i]["blocked"] %} - - {{ flight[i]["status"] }} - {% else %} - - {{ flight[i]["status"] }} - {% endif %} - {% else %} - - {% endif %} - + {% if flight[i]["cancelled"] %} + + {{ flight[i]["status"] }} + {% elif flight[i]["blocked"] %} + + {{ flight[i]["status"] }} + {% else %} + + {{ flight[i]["status"] }} + {% endif %} + {% else %} + + {% endif %} + {% endfor %} From 0af61db7f2f105a3c10befca12484cec7c9f5a83 Mon Sep 17 00:00:00 2001 From: altf4arnold Date: Mon, 1 Apr 2024 00:57:50 +0200 Subject: [PATCH 2/3] testing --- static/animation.css | 129 +++++++----------------------------------- static/scroll.js | 17 ++++++ templates/screen.html | 15 +++-- 3 files changed, 43 insertions(+), 118 deletions(-) create mode 100644 static/scroll.js diff --git a/static/animation.css b/static/animation.css index 2315345..3a00876 100644 --- a/static/animation.css +++ b/static/animation.css @@ -1,115 +1,24 @@ -.content { - overflow:hidden; - - &__container { +/* Style for the container of the carousel */ +.carousel-container { + width: 70px; + height: 15px; overflow: hidden; - - &:before { - content: '['; - left: 0; - } - - &:after { - content: ']'; - position: absolute; - right: 0; - } - - &:after, &:before { - top: 0; - -webkit-animation-name: opacity; - -webkit-animation-duration: 2s; - -webkit-animation-iteration-count: infinite; - animation-name: opacity; - animation-duration: 2s; - animation-iteration-count: infinite; - } - &__list { - -webkit-animation-name: change; - -webkit-animation-duration: 10s; - -webkit-animation-iteration-count: infinite; - animation-name: change; - animation-duration: 10s; - animation-iteration-count: infinite; - - &__item { - line-height:40px; - margin:0; - } - } - } + position: relative; } -@-webkit-keyframes opacity { - 0%, 100% {opacity:0;} - 50% {opacity:1;} +/* Style for the list inside the carousel */ +.carousel-list { + list-style: none; + padding: 0; + margin: 0; + position: absolute; + top: 0; + transition: top 0.5s ease-in-out; } -@-webkit-keyframes change { - 0%, 12.66%, 100% {transform:translate3d(0,0,0);} - 16.66%, 29.32% {transform:translate3d(0,-25%,0);} - 33.32%,45.98% {transform:translate3d(0,-50%,0);} - 49.98%,62.64% {transform:translate3d(0,-75%,0);} - 66.64%,79.3% {transform:translate3d(0,-50%,0);} - 83.3%,95.96% {transform:translate3d(0,-25%,0);} -} - -@-o-keyframes opacity { - 0%, 100% {opacity:0;} - 50% {opacity:1;} -} - -@-o-keyframes change { - 0%, 12.66%, 100% {transform:translate3d(0,0,0);} - 16.66%, 29.32% {transform:translate3d(0,-25%,0);} - 33.32%,45.98% {transform:translate3d(0,-50%,0);} - 49.98%,62.64% {transform:translate3d(0,-75%,0);} - 66.64%,79.3% {transform:translate3d(0,-50%,0);} - 83.3%,95.96% {transform:translate3d(0,-25%,0);} -} - -@-moz-keyframes opacity { - 0%, 100% {opacity:0;} - 50% {opacity:1;} -} - -@-moz-keyframes change { - 0%, 12.66%, 100% {transform:translate3d(0,0,0);} - 16.66%, 29.32% {transform:translate3d(0,-25%,0);} - 33.32%,45.98% {transform:translate3d(0,-50%,0);} - 49.98%,62.64% {transform:translate3d(0,-75%,0);} - 66.64%,79.3% {transform:translate3d(0,-50%,0);} - 83.3%,95.96% {transform:translate3d(0,-25%,0);} -} - -@keyframes opacity { - 0%, 100% {opacity:0;} - 50% {opacity:1;} -} - -@keyframes change { - 0%, 12.66%, 100% {transform:translate3d(0,0,0);} - 16.66%, 29.32% {transform:translate3d(0,-25%,0);} - 33.32%,45.98% {transform:translate3d(0,-50%,0);} - 49.98%,62.64% {transform:translate3d(0,-75%,0);} - 66.64%,79.3% {transform:translate3d(0,-50%,0);} - 83.3%,95.96% {transform:translate3d(0,-25%,0);} -} - -// 6 is the number of animation. -// Here, there are 4 lines : - -// 1 to 2 -// 2 to 3 -// 3 to 4 -// 4 to 3 -// 3 to 2 -// 2 to 1 - -// 6x + 6y = 100 (100% duration) - -// HERE : -// y = 4 -> Animation between two lines -// x = 12.66 -> Time spent on a line - -// You can define a value and calculate the other if you want change speed or the number of lines \ No newline at end of file +/* Style for individual items in the carousel */ +.carousel-item { + height: 15px; /* Adjust height as needed */ + line-height: 15px; /* Adjust line-height to vertically center text */ + /*border-bottom: 1px solid #ccc; /* Optional: Add border between items */ +} \ No newline at end of file diff --git a/static/scroll.js b/static/scroll.js new file mode 100644 index 0000000..3811a17 --- /dev/null +++ b/static/scroll.js @@ -0,0 +1,17 @@ +const carouselList = document.getElementById('carouselList'); +const items = carouselList.getElementsByClassName('carousel-item'); +const itemHeight = items[0].offsetHeight; +const totalItems = items.length; +let currentIndex = 0; + +function scrollCarousel() { + currentIndex++; + if (currentIndex === totalItems) { + currentIndex = 0; + } + const displacement = -currentIndex * itemHeight; + carouselList.style.top = displacement + 'px'; +} + +// Set interval for autoscrolling (adjust timing as needed) +const scrollInterval = setInterval(scrollCarousel, 2000); \ No newline at end of file diff --git a/templates/screen.html b/templates/screen.html index 9118615..585b1e3 100644 --- a/templates/screen.html +++ b/templates/screen.html @@ -42,14 +42,12 @@ {% endif %} -
-
-
    - {% for ident in flight[i]["ident"] %} -
  • {{ ident }}
    • - {% endfor %} -
-
+
+
{{ flight[i]["scheduled_off"] }} @@ -87,5 +85,6 @@
+ \ No newline at end of file From 58448e8d0ac93678c6317da6baf189cd1f6b2779 Mon Sep 17 00:00:00 2001 From: altf4arnold Date: Mon, 1 Apr 2024 01:42:34 +0200 Subject: [PATCH 3/3] Carousel done ! --- static/animation.css | 2 +- static/scroll.js | 56 +++++++++++++++++++++++++++++++++---------- templates/screen.html | 5 ++-- 3 files changed, 47 insertions(+), 16 deletions(-) diff --git a/static/animation.css b/static/animation.css index 3a00876..7b7c247 100644 --- a/static/animation.css +++ b/static/animation.css @@ -13,7 +13,7 @@ margin: 0; position: absolute; top: 0; - transition: top 0.5s ease-in-out; + transition: top 1s ease-in-out; } /* Style for individual items in the carousel */ diff --git a/static/scroll.js b/static/scroll.js index 3811a17..b949390 100644 --- a/static/scroll.js +++ b/static/scroll.js @@ -1,17 +1,47 @@ -const carouselList = document.getElementById('carouselList'); -const items = carouselList.getElementsByClassName('carousel-item'); -const itemHeight = items[0].offsetHeight; -const totalItems = items.length; -let currentIndex = 0; +// JavaScript for autoscrolling all carousels simultaneously +const carouselContainers = document.querySelectorAll('.carousel-container'); +const carousels = []; -function scrollCarousel() { - currentIndex++; - if (currentIndex === totalItems) { - currentIndex = 0; +carouselContainers.forEach(container => { + const carouselList = container.querySelector('.carousel-list'); + const items = carouselList.getElementsByClassName('carousel-item'); + const itemHeight = items[0].offsetHeight; + const totalItems = items.length; + let currentIndex = 0; + let isResetting = false; + + // Push each carousel object into an array + carousels.push({ + carouselList, + itemHeight, + totalItems, + currentIndex, + isResetting + }); +}); + +function scrollAllCarousels() { + carousels.forEach(carousel => { + carousel.currentIndex++; + if (carousel.currentIndex === carousel.totalItems) { + carousel.isResetting = true; + carousel.currentIndex = 0; + carousel.carouselList.style.transition = 'top 0.5s ease-in-out'; // Enable transition for smooth scrolling + carousel.carouselList.style.top = `${-carousel.itemHeight}px`; // Start scroll animation } - const displacement = -currentIndex * itemHeight; - carouselList.style.top = displacement + 'px'; + if (carousel.isResetting && carousel.currentIndex === 0) { + // If resetting and back to the top, reset the top position instantly without animation + carousel.isResetting = false; + carousel.carouselList.style.transition = 'none'; // Disable transition for instant reset + carousel.carouselList.style.top = '0px'; // Reset to the top instantly + setTimeout(() => { + carousel.carouselList.style.transition = ''; // Re-enable transition + }, 50); // Add a slight delay before re-enabling transition to ensure it takes effect + } + const displacement = -carousel.currentIndex * carousel.itemHeight; + carousel.carouselList.style.top = `${displacement}px`; + }); } -// Set interval for autoscrolling (adjust timing as needed) -const scrollInterval = setInterval(scrollCarousel, 2000); \ No newline at end of file +// Set interval for autoscrolling all carousels simultaneously +setInterval(scrollAllCarousels, 3000); diff --git a/templates/screen.html b/templates/screen.html index 585b1e3..dcc3d3c 100644 --- a/templates/screen.html +++ b/templates/screen.html @@ -4,6 +4,7 @@ + {{ airport["icao"] }} Departure Schedule @@ -42,8 +43,8 @@ {% endif %} -
-