We saw in the past blogs how to display a nice Photo Wall using JavaFX and how cgi-bin scripts can randomly choose the photos to be displayed, with versions for Mac (any “regular” Linux probably, too) as well as for Synology DiskStation.
We’ll now move on step further and extend the cgi-bin scripts to put the photos into nice wooden frames (or actually whatever kind of frames you prefer), as you see in the museum (could be also modern art museum).
However, be warned that you must do some work to get this part done. As always, you get the needed sources in Github (Mac or DS), but there are some further activities you should perform.
First of all you must search on the Internet for photos of Frames you like and which you may use (or buy such photos). Below I use as example a Public Domain photo from Wikimedia to illustrate what next steps you should perform with the scripts.
Download the frame files on your machine, crop them to make sure that there is no white space between the frame itself and the edges of the image and resize the images to 1000 – 2000 px width. Place the images with the frames in a folder called “frames” as child of “cgi-bin” folder, or in a folder of your convenience. Name the files with the frames 0.jpg, 1.jpg, 2.jpg, aso ..
And now we need a bit of attention: Check for every image i.jpg the following numbers: width of the frame and height of the frame in pixels. Assuming the upper left corner has the coordinates (0,0) and the lower right has the coordinates (width-1, height-1), find the coordinate of the upper left corner of the white area. That is, the x and y coordinate for the upper-left corner of the white area. And finally the width and the height of the white area inside the frame. It is important to precisely determine both the coordinate for the upper-left corner of the white area, as well as its width and height, as the algorithm will take care to place the actual photo inside the frame, covering the white area, and this should be as precise as possible. Otherwise your photo will either overwrite the frame, or some white space will be visible between photo and frame. Which is not nice.
Once you determined the number frameWidth, frameHeight, x, y, whiteAreaWidth, whiteAreaHeight for the image i.jpg, enter these value in the script in the arrays: fwidths, fheigths, fxs, fys, pws, phs on the position i, by overwriting the values I left there just as example for you.
In my example I used 5 different frames … You may have more than 5, or less than 5. If however you don’t have 5 frames, adjust the line
frIdx=$(( RANDOM % 5 ))
and replace 5 with the number of frames you have.
Have fun with your Photo Wall !
For any questions, bug reports, suggestions, use the appropriate thread in the Raspberry PI forum.
Jasm.eu 
Leave a Reply