Merge pull request #8 from enram/aloft

Adapt crow to aloft
enram · Apr 5, 2023 · 104dd6d · 104dd6d
2 parents fa15f08 + 676c06b
commit 104dd6d
Show file tree

Hide file tree

Showing 14 changed files with 387 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,24 @@ The application can be cited as:
 - [Meteo.be - Benelux](https://www.meteo.be/birddetection/)
 - [Aloft - Europe](https://enram.github.io/crow/)
 
+## ⚠️ About this fork
+
+This fork is created for [aloftdata.eu](https://enram.github.io/crow/).
+
+### Making changes
+
+- Only commit changes in this fork (aloft/crow) that are specific to the Aloft deployment. [Here are all the changes specific to this fork](https://github.com/inbo/crow/compare/main...enram:crow:main). Don't merge those changes into the main repo.
+- Changes that are beneficial to the main app (bug fixes, dependency updates, improvements) should be made in the main repo ([inbo/crow](https://github.com/inbo/crow)).
+- Use `Sync fork` to pull changes from the main repo.
+
+### Where are the data?
+
+This is defined in the `aloftBaltradUrl` variable in [src/config.ts](src/config.ts). The application pulls data from `s3://aloft` (browse the data [here](https://aloftdata.eu/browse/)). It expects the data to formatted as daily [VPTS CSV](https://aloftdata.eu/vpts-csv/) file (`vptsFileFormat: "CSV"`).
+
+### How to update radars?
+
+Radar metadata are hardcoded in [src/config.ts](src/config.ts).
+
 ## Installation and deployment
 
 Install with:
@@ -47,7 +65,7 @@ Build with:
 npm run build
 ```
 
-There is no need to build manually, as this is done automatically by GitHub Actions for every commit pushed to the `main` branch. It will serve the site at <https://inbo.github.io/crow/>.
+There is no need to build manually, as this is done automatically by GitHub Actions for every commit pushed to the `main` branch. It will serve the site at <https://enram.github.io/crow/>.
 
 If the app is to be deployed under a URL prefix (for example `https://inbo.github.io/crow`), create a `env.local` file in the source tree root with content: `URL_PREFIX = "/crow/"`.
 

diff --git a/public/logo/belspo.png b/public/logo/belspo.png
diff --git a/public/logo/inbo.svg b/public/logo/inbo.svg
diff --git a/public/logo/kmi_irm.png b/public/logo/kmi_irm.png
diff --git a/public/logo/rbins.png b/public/logo/rbins.png
diff --git a/src/App.vue b/src/App.vue
@@ -56,35 +56,57 @@ export default Vue.extend({
 </script>
 
 <style>
+/* 
+Style aims to mimic aloftdata.eu, which is based on peterdesmet/[email protected].
+Note that bootstrap-vue is based on Bootstrap v5, while [email protected] is based on Bootstrap v5,
+so some style differences are to be expected.
+*/
+
 main {
- min-height: calc(
- 100vh - 54px
- ); /* Viewport height minus medium screen navbar height, to push footer to bottom */
- padding-bottom: 30px; /* Don't stick to footer */
+ /* See https://github.com/peterdesmet/petridish/blob/3.0/_sass/_main.scss */
+ min-height: calc(100vh - 54px);
+ padding-bottom: 1.5rem;
 }
 
 .container-xl {
  max-width: 1400px; /* Increase from default 1140px to allow space for chart */
 }
 
-/* Colours and style */
 .navbar {
+ /* See https://github.com/peterdesmet/petridish/blob/3.0/_sass/_navbar.scss */
  background-color: white!important;
  border-bottom: 1px solid #e9ecef;
-}
+ }
+
+ .navbar .navbar-brand {
+ font-weight: bold;
+ }
 
-.bg-dark {
- background-color: #2c2c2c!important; /* Slightly darker than #343a4f to improve contrast with text */
-}
 
 footer {
- border-top: 5px solid #e9ecef;
+ /* See https://github.com/peterdesmet/petridish/blob/3.0/_sass/_footer.scss */
+ background-color: #0d1626;
+ border-top: 5px solid #678bcb;
+ color: #678bcb;
  font-size: 0.9rem;
- padding: 15px 0;
+ padding: 0.75rem 0;
  }
+
+ footer .container {
+ margin-top: 1rem;
+ }
+
  footer a,
  footer a:hover,
  footer a:visited {
  color: white;
  }
+
+a {
+ color: #295cc9;
+}
+
+.bg-dark {
+ background-color: #282949!important; /* aloftdata.eu banner colour */
+}
 </style>
diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -1,7 +1,7 @@
 <template>
  <main>
- <Introduction />
- <b-container fluid="xl" class="mt-lg-5">
+ <!-- <Introduction /> -->
+ <b-container fluid="xl">
  <b-row>
  <b-col lg="3" class="bg-dark text-light pt-3">
  <b-form>
@@ -170,7 +170,7 @@ import VPIChart from "@/components/VPIChart.vue";
 import VPChart from "@/components/VPChart.vue";
 import SiteSelector from "@/components/SiteSelector.vue";
 import TimelineChart from "@/components/TimelineChart.vue";
-import Introduction from "@/components/Introduction.vue";
+// import Introduction from "@/components/Introduction.vue";
 import Partners from "@/components/Partners.vue";
 
 import moment from "moment-timezone";
@@ -207,7 +207,7 @@ export default Vue.extend({
  VPIChart,
  VPChart,
  TimelineChart,
- Introduction,
+ // Introduction,
  Partners
  },
  props: {

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -1,9 +1,12 @@
 <template>
  <b-navbar type="light" variant="light">
  <b-container>
- <b-navbar-brand>{{ t("Title") }}</b-navbar-brand>
+ <b-navbar-brand href="https://aloftdata.eu">
+ Aloft
+ </b-navbar-brand>
+ <span class="navbar-text">Visualize bird movement data from European weather radars</span>
  <b-navbar-nav class="ml-auto">
- <language-selector />
+ <!-- <language-selector /> -->
  </b-navbar-nav>
  </b-container>
  </b-navbar>
@@ -20,7 +23,7 @@ import Vue from "vue";
 export default Vue.extend({
  name: "Navbar",
  components: {
- LanguageSelector
+ // LanguageSelector
  },
  data: function () {
  return {

diff --git a/src/components/PageFooter.vue b/src/components/PageFooter.vue
@@ -1,14 +1,14 @@
 <template>
- <footer class="bg-dark text-muted">
+ <footer>
  <b-container>
  <b-row>
  <b-col lg>
  <!-- eslint-disable-next-line vue/no-v-html -->
- <span v-html="t('Created by')" />
+ <p v-html="t('Created by')" />
  </b-col>
  <b-col lg class="text-right">
- <a href="https://github.com/inbo/crow/">{{ t('Source code') }}</a> {{ t('version') }}
- <code><a :href="'https://github.com/inbo/crow/tree/' + commitHash()">{{ commitHash() }}</a></code>
+ <a href="https://github.com/enram/crow/">{{ t('Source code') }}</a> {{ t('version') }}
+ <code><a :href="'https://github.com/enram/crow/tree/' + commitHash()">{{ commitHash() }}</a></code>
  </b-col>
  </b-row>
  </b-container>

diff --git a/src/components/Partners.vue b/src/components/Partners.vue
@@ -2,30 +2,15 @@
  <b-container class="mt-5">
  <b-row>
  <b-col lg>
- <!-- eslint-disable-next-line vue/no-v-html -->
- <p v-html="t('Partner description')" />
- <!-- eslint-disable-next-line vue/no-v-html -->
- <p v-html="t('Algorithm description')" />
- <p class="logos">
- <img src="logo/inbo.svg" width="30%">
- <img src="logo/kmi_irm.png" width="15%">
- <img src="logo/rbins.png" width="30%">
- <img src="logo/belspo.png" width="15%">
- </p>
+ <p>Weather radars do not only detect precipitation, but also birds in the sky. By extracting these bird detections, researchers can study their movements. This is especially useful for studying songbird migration, which takes place at night. In the visualizations above you can explore these data for a selection of European radars (i.e. the <a href="https://aloftdata.eu/baltrad/">BALTRAD dataset</a>).</p>
  </b-col>
  <b-col lg>
- <p>{{ t("The radar data are provided by:") }}</p>
- <ul>
- <!-- eslint-disable-next-line vue/no-v-html -->
- <li v-html="t('RMI source')" />
- <!-- eslint-disable-next-line vue/no-v-html -->
- <li v-html="t('VMM source')" />
- <li><a href="https://www.skeyes.be/">Skeyes</a> (Zaventem)</li>
- <!-- eslint-disable-next-line vue/no-v-html -->
- <li v-html="t('KNMI source')" />
- <li><a href="https://www.dwd.de/">Deutscher Wetterdienst (DWD)</a> (Essen & Neuheilenbach)</li>
- <li><a href="http://www.meteofrance.fr/">Météo-France</a> (Abbeville & Avesnois)</li>
- </ul>
+ <p>Data go back to 2012, but contain numerous gaps for certain periods and radars. Note that the bird numbers are estimates and that the quality of the data varies between radars and time periods. The data is dependent on individual radar settings and is particularly unreliable close to the ground, where bird signals are often mixed with ground echoes. See also our <a href="https://aloftdata.eu/about/">FAQ</a>.</p>
+ </b-col>
+ </b-row>
+ <b-row>
+ <b-col>
+ <p>This webpage makes use of <a href="https://github.com/inbo/crow">CROW</a>, an open source tool to visualize birds detected by weather radars (<a href="https://doi.org/10.5281/zenodo.4629449">Noé et al. 2021</a>).</p>
  </b-col>
  </b-row>
  </b-container>

diff --git a/src/components/SiteSelector.vue b/src/components/SiteSelector.vue
@@ -8,7 +8,7 @@
  :options="availableRadars"
  @change="setSelectedRadarCode"
  />
- <b-form-text>
+ <b-form-text style="min-height: 45px;">
  {{ selectedRadarLocation }} {{ t("is located at") }}
  <a
  :href="`http://www.openstreetmap.org/?mlat=${selectedRadarLatitude}&mlon=${selectedRadarLongitude}&zoom=12`"

diff --git a/src/components/SiteSelectorMap.vue b/src/components/SiteSelectorMap.vue
@@ -2,7 +2,7 @@
  <svg class="d-none d-lg-block mt-3 mx-auto" :width="svgWidth" :height="svgHeight">
  <g>
  <path id="country" :d="countryPath" stroke="#000" stroke-width="1" />
- <circle v-for="radar in radars" :id="'circle-radar-' + radar.odimCode" :key="radar.odimCode" :class="getRadarExtraClass(radar)" r="5px" :cx="projectRadar(radar)[0]" :cy="projectRadar(radar)[1]" @click="$emit('click-circle', radar.odimCode)">
+ <circle v-for="radar in radars" :id="'circle-radar-' + radar.odimCode" :key="radar.odimCode" :class="getRadarExtraClass(radar)" r="3px" :cx="projectRadar(radar)[0]" :cy="projectRadar(radar)[1]" @click="$emit('click-circle', radar.odimCode)">
  <b-popover :target="'circle-radar-' + radar.odimCode" triggers="hover">
  {{ radar.text }}
  </b-popover>
@@ -32,7 +32,7 @@ export default Vue.extend({
  data: function () {
  return {
  svgWidth: 300,
- svgHeight: 200,
+ svgHeight: 400,
 
  xPadding: 15,
  yPadding: 15,