Lissy93 / dashy

🚀 A self-hostable personal dashboard built for you. Includes status-checking, widgets, themes, icon packs, a UI editor and tons more!
https://dashy.to
MIT License
17.25k stars 1.32k forks source link

[FEATURE_REQUEST] Random image and video background #721

Open jokob-sk opened 2 years ago

jokob-sk commented 2 years ago

Is your feature request related to a problem? If so, please describe.

no

Describe the solution you'd like

I'm using my own dashboard app (https://github.com/jokob-sk/mount-bookmark), however it pales compared to dashy. The only thing that I'd like to see added is support of random custom backgrounds. Currently I'm using a folder to dump all images/gifs into which then is used as a source for a random background every time I open a new tab. An alternative solution would be to have a collection of links specified in the configuration which would point to gifs/images to be used as a random background.

Priority

Low (Nice-to-have)

Is this something you would be keen to implement

Maybe

GitHub - jokob-sk/mount-bookmark: Mount Bookmark is a self-hosted, highly customizable bookmark board that allows you to view any YouTube stream/video in the background.
Mount Bookmark is a self-hosted, highly customizable bookmark board that allows you to view any YouTube stream/video in the background. - GitHub - jokob-sk/mount-bookmark: Mount Bookmark is a self-...
Lissy93 commented 2 years ago

Hey @jokob-sk 👋

This shouldn't be too hard to implement, if images were defined as a list of links. But I wonder if this feature would be useful to anyone else?

In the meantime, another alternative, would be to run a simple web server, which selects and serves up a random image from a given directory, the exposed URL/path of which can be used for the value of appConfig.backgroundImg

Something which I personally think could be quite cool, is having time-based background images. E.g. morning, day, evening, night, etc. But again, not sure if anyone other than me would find that useful 🥴

devosm commented 2 years ago

Something which I personally think could be quite cool, is having time-based background images. E.g. morning, day, evening, night, etc. But again, not sure if anyone other than me would find that useful 🥴

+1 For this, time/weatherbased images would be a nice thing to make dashboards look a bit more dynamic 😃

Lissy93 commented 2 years ago

Awesome, well since there's interest, I'll get it added in the next version :)

jokob-sk commented 2 years ago

Something which I personally think could be quite cool, is having time-based background images. E.g. morning, day, evening, night, etc. But again, not sure if anyone other than me would find that useful 🥴

This was my initial plan as well, but got distracted by other projects. Thanks for considering it! I actually already have folders for different times of day (brown/light/dark/vape) so that would be amazing. PS. Glad to see Pi.Alert in your screenshots, trying to maintain the docker image for it.

liss-bot commented 2 years ago

This issue has gone 6 weeks without an update. To keep the ticket open, please indicate that it is still relevant in a comment below. Otherwise it will be closed in 5 working days.

Lissy93 commented 2 years ago

/keep-open

Z0pyrus commented 2 years ago

Maybe use unsplash to retrieve an random image when opening

cookandy commented 11 months ago

This might be a little hacky, but I was able get get a random background image working on my home page by creating a "hidden" section with an embed widget that updates the div.

For example

  - name: Hidden Background Randomizer Widget
    displayData:
      customStyles: "display: none;"
    widgets:
      - type: embed
        options:
          script: |
            var backgrounds = [
              "/backgrounds/1.jpg",
              "/backgrounds/2.jpg",
              "/backgrounds/3.jpg",
            ];
            var divElement = document.querySelector('div.home');
            var randomIndex = Math.floor(Math.random() * backgrounds.length);
            divElement.style.backgroundImage = 'url("' + backgrounds[randomIndex] + '")';
            divElement.style.backgroundRepeat = 'no-repeat';
            divElement.style.backgroundSize = 'cover';
            divElement.style.backgroundPosition = 'center';