Dynamic image rotation, interactive dashboard

[PasVegan]

Hello Everyone,

I'm looking to develop an interactive dashboard designed for TV display, which users can also access via their computers. I'd like to allow users to upload diverse file formats such as slideshows, PDFs, images, DOCX, etc. Once uploaded, the dashboard should automatically convert these files into images for display. Each image should be showcased in full-screen and should transition every 10 seconds, similar to a slideshow, given its primary display on a TV.

While I've previously achieved this functionality using Streamlit, I'm seeking a more efficient and enhanced solution. Here's a brief overview of my implementation using Streamlit:

1. A login page: Successful authentication grants the user access to a file uploader.
2. Upon file upload, the document is converted first to PDF, and subsequently, each page is turned into a separate image.
3. These images are then stored in a database.
4. A script is deployed to create a unique page for each image, ensuring they remain in sequence.
5. The generated pages are straightforward; they fetch the appropriate image from the database.
6. The dashboard automatically transitions to the next page every 10 seconds.

Though this was my initial approach, I recognize it may not be the most efficient. I'm curious about how I can replicate or even improve this functionality using StreamSync. If you have insights on using a similar or a completely different logic, I'd appreciate the guidance.

Please feel free to ask if you need clarification on any aspect or require further details.

Thank you in advance!

[PasVegan]

up ?

[ramedina86]

Hello,

Rather than multiple pages for display, in Streamsync you'd likely have one, with a Timer component. If you have them all ordered in a database, I'd increment a counter in state (e.g. 1, 2, 3...), and use that to get the right offset from the database.

[PasVegan]

Thanks, to display the images i just need to change the source of an image component every X seconds ?

[ramedina86]

Yes, that's it. You can point the source to a file e.g. /static/myimage.jpeg or pack a file into it. I think you'll want to do the latter if you're reading from a database.

The Image component isn't meant for full screen, so I don't know if it'll fit your rather particular use case. I think if you want full screen you'll have to use an HTML Element set to img.

[PasVegan]

Thanks, I want to integrate plotly chart with , how could I do it ? Changing the html element to img if it's an image or changing it to plotly chart if it isn't ?

[ramedina86]

You could use the Custom visibility feature and show/hide them this way, via a flag in state.