[SOLVED] Help with Dashboard slideshow gallery

Dashboard
21

Try this link...

I think you missed the last digit (i.e. 8) off of the link you posted.

1 Like
22

You are right indeed. You have to find the template node named "Slideshow Grid" and do a small change on it.

<style>

#Slide_Slideshow .nr-dashboard-template {
    background-image : url(/slideshow/{{payload}});
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

</style>

It is hardcoded to work with a tab named "Slide" and group named "Slideshow". Change the first line inside the style tag to fit your TAB_Group. In the very same line use the CSS selector ".nr-dashboard-template" as it is more specific then the one used previously (md-card). I will add this explanation to the flow posted in the Library.

1 Like
23

Thanks @Andrei . It did work after changed as you mentioned.

to recap for future:

Changing the below line in the "Slideshow Grid" node in the flow

#Slide_Slideshow md-card {

to

#TAB_GROUP .nr-dashboard-template {

where TAB is the the tab name. And, GROUP is the group name.

1 Like
24

Dashboard slideshow

This flow based on the @Andrei flow above :
creates a slideshow in the Dashboard with pictures from a local directory in your Raspberry pi. The slideshow is controlled by nod-red dashboard buttons.

Features

  • You can play and pause the slideshow. Go to next/previous , last/first.
  • The time each picture displays is configurable in a delay node.
  • You can delete pictures.

image
image548×598 100 KB

See the complete topic in the #share-your-projects area : Dashboard slideshow gallery

2 Likes
25

:white_check_mark: Probably best to cut/paste just that last post into the #share-your-projects area

26

yes i will :wink:

27

Thank you @SuperNinja and @Andrei for good word. There is a minor side effect (not critical). Requiring the name of the TAB and GROUP names within the CSS will create a small limitation. It is limiting the user to write the TAB and GROUP names in English only :slight_smile:

28

Hi @newbie for my part, I do not use images in the background, they are displayed as images that can be resized, arranged, as desired in the "web page". I do not modify the CSS.
For testing , use this classic html code:

<style>        
img {
    width: 100%;
    height: auto;
}
</style>
<body>
<div >
<img src= "/camAlerte/{{msg.fileName}}" alt="Camera Picture"   ><br>
</div>
</body>

Where msg.fileName is the name of the file to display Ex: car.jpg send by the previous node.
Of course , change camAlerte by your folder
Try it out.

1 Like
29

I will try. Thanks @SuperNinja

30

Take a look at the complete project :

1 Like
31

@SuperNinja, Thanks again. You are right. It did work very well regardless of the language. I will modify my comments. I encountered two small obstacles (maybe because I use windows environment). I will write them in the project page.

2 Likes
32

Edit (correction) : @SuperNinja work is independent from interface language.

1 Like
33

@SuperNinja Thanks again, regarding the small obstacle (only one :slight_smile: ) . It is the path of images. In windows, the path type in DIRECTORY node (fs-op-dir node) should be string as shown in image below to work. Hence, we may benefit from @Andrei work to implement the path directly and not using SET PATH node.

image

That is it :slight_smile:

1 Like
34

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.