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` + +

+ +##### 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 @@ + + + + + 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" /> + 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'),