Migrated ImageCarousel widget

platypush/backend/http/app/routes/resources.py

@@ -4,7 +4,7 @@ import re
 from flask import Blueprint, abort, send_from_directory
 
 from platypush.config import Config
-from platypush.backend.http.app import template_folder, static_folder
+from platypush.backend.http.app import template_folder
 
 
 img_folder = os.path.join(template_folder, 'img')
@@ -24,7 +24,6 @@ __routes__ = [
 def resources_path(path):
     """ Custom static resources """
     path_tokens = path.split('/')
-    filename = path_tokens.pop(-1)
     http_conf = Config.get('backend.http')
     resource_dirs = http_conf.get('resource_dirs', {})
 
@@ -61,6 +60,7 @@ def serve_favicon():
     """ favicon.ico icon """
     return send_from_directory(template_folder, 'favicon.ico')
 
+
 @img.route('/img/<path:path>', methods=['GET'])
 def imgpath(path):
     """ Default static images """

platypush/backend/http/webapp/src/components/widgets/DateTime/Index.vue

@@ -68,7 +68,7 @@ export default {
 <style lang="scss" scoped>
 .date-time {
   .date {
-    font-size: 1.3em;
+    font-size: 1.1em;
   }
 
   .time {

platypush/backend/http/webapp/src/components/widgets/DateTimeWeather/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="date-time-weather">
     <div class="row date-time-container">
-      <DateTime :show-date="_showDate" :show-time="_showTime" :animate="animate"
+      <DateTime :show-date="_showDate" :show-time="_showTime" :show-seconds="_showSeconds" :animate="animate"
                 v-if="_showDate || _showTime" />
     </div>
 
@@ -30,8 +30,8 @@
 
 <script>
 import Utils from "@/Utils";
-import DateTime from "@/widgets/DateTime/Index";
-import Weather from "@/widgets/Weather/Index";
+import DateTime from "@/components/widgets/DateTime/Index";
+import Weather from "@/components/widgets/Weather/Index";
 import Sensor from "@/components/Sensor";
 
 // Widget to show date, time, weather and temperature information
@@ -44,7 +44,7 @@ export default {
     // Otherwise, it will be a static image.
     animate: {
       required: false,
-      default: false,
+      default: true,
     },
 
     // Size of the weather icon in pixels.
@@ -84,6 +84,12 @@ export default {
       default: true,
     },
 
+    // If false then don't display the seconds.
+    showSeconds: {
+      required: false,
+      default: true,
+    },
+
     // Name of the attribute on a received SensorDataChangeEvent that
     // represents the temperature value to be rendered.
     sensorTemperatureAttr: {
@@ -117,6 +123,10 @@ export default {
       return this.parseBoolean(this.showTime)
     },
 
+    _showSeconds() {
+      return this.parseBoolean(this.showSeconds)
+    },
+
     _showWeather() {
       return this.parseBoolean(this.showWeather)
     },

platypush/backend/http/webapp/src/components/widgets/ImageCarousel/Index.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="image-carousel">
+    <Loading v-if="!images.length" />
+    <div ref="background" class="background" />
+    <img ref="img" :src="imgURL" alt="Your carousel images"
+         :style="{display: !images.length ? 'none' : 'block'}">
+
+    <div class="row info-container" v-if="_showDate || _showTime">
+      <div class="col-6 weather-container">
+        <span v-if="!_showWeather">&nbsp;</span>
+        <Weather :show-icon="_showWeatherIcon" :show-summary="_showWeatherSummary" :show-temperature="_showTemperature"
+                 :icon-color="weatherIconColor" :icon-size="weatherIconSize" :animate="_animateWeatherIcon" v-else />
+      </div>
+
+      <div class="col-6 date-time-container">
+        <DateTime :show-date="_showDate" :show-time="_showTime" :show-seconds="_showSeconds"
+                  v-if="_showTime || _showDate" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Utils from "@/Utils";
+import Loading from "@/components/Loading";
+import DateTime from "@/components/widgets/DateTime/Index";
+import Weather from "@/components/widgets/Weather/Index";
+
+export default {
+  name: "ImageCarousel",
+  components: {Weather, DateTime, Loading},
+  mixins: [Utils],
+  props: {
+    // Images directory
+    imgDir: {
+      type: String,
+      required: true,
+    },
+
+    // Refresh interval in seconds.
+    refreshSeconds: {
+      type: Number,
+      required: false,
+      default: 15,
+    },
+
+    // Show the current date on top of the images
+    showDate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    // Show the current time on top of the images
+    showTime: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    // If false then don't display the seconds.
+    showSeconds: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    // If false then don't display weather info.
+    showWeather: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    // If false then temperature won't be displayed.
+    showTemperature: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+
+    // If false then don't display the weather state icon.
+    showWeatherIcon: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+
+    // If false then don't display the weather summary text.
+    showWeatherSummary: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+
+    // Weather con color.
+    weatherIconColor: {
+      type: String,
+      required: false,
+      default: 'white',
+    },
+
+    // Size of the weather icon in pixels.
+    weatherIconSize: {
+      type: Number,
+      required: false,
+      default: 40,
+    },
+
+    // If false then the weather icon will be animated.
+    // Otherwise, it will be a static image.
+    animateWeatherIcon: {
+      required: false,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      images: [],
+      currentImage: undefined,
+      loading: false,
+    }
+  },
+
+  computed: {
+    imgURL() {
+      let port = 8008
+      if ('backend.http' in this.$root.config && 'port' in this.$root.config['backend.http']) {
+        port = this.$root.config['backend.http'].port
+      }
+
+      return '//' + window.location.hostname + ':' + port + this.currentImage
+    },
+
+    _showDate() {
+      return this.parseBoolean(this.showDate)
+    },
+
+    _showTime() {
+      return this.parseBoolean(this.showTime)
+    },
+
+    _showSeconds() {
+      return this.parseBoolean(this.showSeconds)
+    },
+
+    _showTemperature() {
+      return this.parseBoolean(this.showTemperature)
+    },
+
+    _showWeather() {
+      return this.parseBoolean(this.showWeather)
+    },
+
+    _showWeatherIcon() {
+      return this.parseBoolean(this.showWeatherIcon)
+    },
+
+    _showWeatherSummary() {
+      return this.parseBoolean(this.showWeatherSummary)
+    },
+
+    _animateWeatherIcon() {
+      return this.parseBoolean(this.animateWeatherIcon)
+    }
+  },
+
+  methods: {
+    async refresh() {
+      if (!this.images.length) {
+        this.loading = true
+
+        try {
+          this.images = await this.request('utils.search_web_directory', {
+            directory: this.imgDir,
+            extensions: ['.jpg', '.jpeg', '.png'],
+          })
+
+          this.shuffleImages()
+        } finally {
+          this.loading = false
+        }
+      }
+
+      if (this.images.length) {
+        this.currentImage = this.images.pop()
+      }
+    },
+
+    onNewImage() {
+      if (!this.$refs.img)
+        return
+
+      this.$refs.background.style['background-image'] = 'url(' + this.imgURL + ')'
+      this.$refs.img.style.width = 'auto'
+
+      if (this.$refs.img.width > this.$refs.img.height) {
+        const ratio = this.$refs.img.width / this.$refs.img.height
+        if (4/3 <= ratio <= 16/9) {
+          this.$refs.img.style.width = '100%'
+        }
+
+        if (ratio <= 4/3) {
+          this.$refs.img.style.height = '100%'
+        }
+      }
+    },
+
+    shuffleImages() {
+      for (let i=this.images.length-1; i > 0; i--) {
+        let j = Math.floor(Math.random() * (i+1))
+        let x = this.images[i]
+        this.images[i] = this.images[j]
+        this.images[j] = x
+      }
+    },
+  },
+
+  mounted() {
+    this.$refs.img.addEventListener('load', this.onNewImage)
+    this.$refs.img.addEventListener('error', this.refresh)
+
+    this.refresh()
+    setInterval(this.refresh, Math.round(this.refreshSeconds * 1000))
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.image-carousel {
+  width: calc(100% + 1.5em);
+  height: calc(100% + 1.5em);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  margin: -0.75em 0.75em 0.75em -0.75em !important;
+
+  .background {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: black;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    filter: blur(13px);
+    -webkit-filter: blur(13px);
+  }
+
+  img {
+    position: absolute;
+    max-height: 100%;
+    z-index: 2;
+  }
+}
+
+.info-container {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  align-items: flex-end;
+  z-index: 10;
+  color: white;
+  text-shadow: 3px 3px 4px black;
+  font-size: 1.25em;
+  margin: 0.5em;
+  padding: 0 1em;
+
+  .date-time {
+    text-align: right;
+  }
+}
+</style>
+
+<style lang="scss">
+.info-container {
+  .weather-container {
+    margin-bottom: 0.5em;
+
+    h1 {
+      justify-content: left;
+      margin-bottom: -0.5em;
+      font-size: 0.8em;
+    }
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/widgets/Row.vue

@@ -31,8 +31,13 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .row {
   width: 100%;
+  height: 49%;
+
+  &:not(:last-child) {
+    margin-bottom: 1%;
+  }
 }
 </style>

platypush/backend/http/webapp/src/components/widgets/Weather/Index.vue

@@ -3,8 +3,9 @@
     <Loading v-if="loading" />
 
     <h1 v-else>
-      <skycons :condition="weatherIcon" :paused="animate" :size="iconSize" v-if="weatherIcon" />
-      <span class="temperature" v-if="weather">
+      <skycons :condition="weatherIcon" :paused="!animate" :size="iconSize" :color="iconColor"
+               v-if="_showIcon && weatherIcon" />
+      <span class="temperature" v-if="_showTemperature && weather">
         {{ Math.round(parseFloat(weather.temperature)) + '&deg;' }}
       </span>
     </h1>
@@ -28,7 +29,7 @@ export default {
     // Otherwise, it will be a static image.
     animate: {
       required: false,
-      default: false,
+      default: true,
     },
 
     // Size of the weather icon in pixels.
@@ -38,12 +39,30 @@ export default {
       default: 50,
     },
 
+    // Icon color.
+    iconColor: {
+      type: String,
+      required: false,
+    },
+
+    // If false then the weather icon won't be displayed.
+    showIcon: {
+      required: false,
+      default: true,
+    },
+
     // If false then the weather summary won't be displayed.
     showSummary: {
       required: false,
       default: true,
     },
 
+    // If false then the temperature won't be displayed.
+    showTemperature: {
+      required: false,
+      default: true,
+    },
+
     // Refresh interval in seconds.
     refreshSeconds: {
       type: Number,
@@ -64,6 +83,14 @@ export default {
     _showSummary() {
       return this.parseBoolean(this.showSummary)
     },
+
+    _showIcon() {
+      return this.parseBoolean(this.showIcon)
+    },
+
+    _showTemperature() {
+      return this.parseBoolean(this.showTemperature)
+    },
   },
 
   methods: {
@@ -102,8 +129,8 @@ export default {
 
   h1 {
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
   }
 
   .temperature {

platypush/backend/http/webapp/src/components/widgets/Widget.vue

@@ -25,13 +25,7 @@ export default {
 
   computed: {
     classes() {
-      let classes = ['widget', 'column']
-      if (this.class && this.class.length)
-        classes = classes.concat(this.class.split(' '))
-      else
-        classes = classes.concat('col-3')
-
-      return classes
+      return (this.class && this.class.length ? this.class.split(' ') : ['col-3']).concat(['widget', 'column'])
     },
   },
 }
@@ -39,9 +33,9 @@ export default {
 
 <style lang="scss" scoped>
 .widget {
+  height: calc(100% - 1em);
   background: $background-color;
   border-radius: 5px;
-  margin-bottom: 1em;
   display: flex;
   justify-content: center;
   align-content: center;
@@ -49,16 +43,4 @@ export default {
   overflow: hidden;
   box-shadow: 0 3px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
 }
-
-@media screen and (max-width: $tablet){
-  .widget {
-    height: calc(100% - 1em);
-  }
-}
-
-@media screen and (min-width: $desktop){
-  .widget {
-    height: calc(50% - 1em);
-  }
-}
 </style>

platypush/backend/http/webapp/src/views/Dashboard.vue

@@ -16,8 +16,8 @@
 import { defineAsyncComponent } from 'vue'
 import Utils from '@/Utils'
 import Loading from "@/components/Loading";
-import Row from "@/widgets/Row";
-import Widget from "@/widgets/Widget";
+import Row from "@/components/widgets/Row";
+import Widget from "@/components/widgets/Widget";
 
 export default {
   name: 'Dashboard',
@@ -60,7 +60,7 @@ export default {
           class: row.attributes.class ? row.attributes.class.nodeValue : undefined,
           widgets: [...row.children].map((el) => {
             const component = defineAsyncComponent(
-                () => import(`@/widgets/${el.nodeName}/Index`)
+                () => import(`@/components/widgets/${el.nodeName}/Index`)
             )
 
             const style = el.attributes.style ? el.attributes.style.nodeValue : undefined
@@ -120,6 +120,7 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: column;
   margin: 0;
   padding: 1em 1em 0 1em;
   background: $dashboard-bg;