From 7b6815a3188628bb1cf1a9f34a43632ec6be8155 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 13 Feb 2022 23:24:16 +0000
Subject: [PATCH] :sparkles: Adds a static image widget (#487)

---
 docs/widgets.md                        | 36 ++++++++++++++++++++++++++
 src/components/Widgets/ImageWidget.vue | 28 ++++++++++++++++++++
 src/components/Widgets/WidgetBase.vue  |  8 ++++++
 3 files changed, 72 insertions(+)
 create mode 100644 src/components/Widgets/ImageWidget.vue

diff --git a/docs/widgets.md b/docs/widgets.md
index 475c494a..1059d7ad 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -12,6 +12,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Weather](#weather)
   - [Weather Forecast](#weather-forecast)
   - [RSS Feed](#rss-feed)
+  - [Image](#image)
   - [Public IP Address](#public-ip)
   - [Crypto Watch List](#crypto-watch-list)
   - [Crypto Price History](#crypto-token-price-history)
@@ -210,6 +211,41 @@ Display news and updates from any RSS-enabled service.
 
 ---
 
+### Image
+
+Displays an image.
+
+This may be useful if you have a service (such as Grafana - [see example](https://mattionline.de/grafana-api-export-graph-as-png/)), which periodically exports charts or other data as an image.
+
+You can also store images within Dashy's public directory (using a Docker volume), and reference them directly. E.g. `-v ./path/to/my-homelab-logo.png:/app/public/logo.png`, then in the widget `imagePath: /logo.png`.
+
+Similarly, any web service that serves up widgets as image can be used. E.g. you could show current star chart for a GitHub repo, with: `imagePath: https://starchart.cc/Lissy93/dashy.svg`.
+
+If you'd like to embed a live screenshot, of all or just part of a website, then this can be done using [API Flash](https://apiflash.com/).
+
+Or what about showing a photo of the day? Try `https://source.unsplash.com/random/400x300` or `https://picsum.photos/400/300`
+
+<p align="center"><img width="300" src="https://i.ibb.co/P48Y443/image-widget.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`imagePath`** | `string` |  Required | The path (local or remote) of the image to display
+
+##### Example 
+
+```yaml
+- type: image
+  options:
+    imagePath: https://i.ibb.co/yhbt6CY/dashy.png
+```
+
+##### Info
+Unless image fetched from remote source, no external data request is made.
+
+---
+
 ### Public IP
 
 Often find yourself searching "What's my IP", just so you can check your VPN is still connected? This widget displays your public IP address, along with ISP name and approx location. Data can be fetched from either [IpApi.co](https://ipapi.co/), [IP-API.com](https://ip-api.com/) or [IpGeolocation.io](https://ipgeolocation.io/).
diff --git a/src/components/Widgets/ImageWidget.vue b/src/components/Widgets/ImageWidget.vue
new file mode 100644
index 00000000..a556810f
--- /dev/null
+++ b/src/components/Widgets/ImageWidget.vue
@@ -0,0 +1,28 @@
+<template>
+<div class="image-widget">
+  <img :src="imagePath" class="embedded-image" />
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+
+export default {
+  mixins: [WidgetMixin],
+  computed: {
+    imagePath() {
+      if (!this.options.imagePath) this.error('You must specify an imagePath');
+      return this.options.imagePath;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.image-widget {
+  img.embedded-image {
+    max-width: 100%;
+    margin: 0.2rem auto;
+  }
+}
+</style>
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index ffd1d737..63b13be5 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -230,6 +230,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <ImageWidget
+        v-else-if="widgetType === 'image'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <Jokes
         v-else-if="widgetType === 'joke'"
         :options="widgetOptions"
@@ -423,6 +430,7 @@ export default {
     GlCpuTemp: () => import('@/components/Widgets/GlCpuTemp.vue'),
     HealthChecks: () => import('@/components/Widgets/HealthChecks.vue'),
     IframeWidget: () => import('@/components/Widgets/IframeWidget.vue'),
+    ImageWidget: () => import('@/components/Widgets/ImageWidget.vue'),
     Jokes: () => import('@/components/Widgets/Jokes.vue'),
     NdCpuHistory: () => import('@/components/Widgets/NdCpuHistory.vue'),
     NdLoadHistory: () => import('@/components/Widgets/NdLoadHistory.vue'),