There is a moment in which you start wondering: Why do I take thousands a pictures in every vacation with a “real” camera, and dozens of photos every week with the mobile phone ? Who will ever have the time to watch all of them ? Me certainly not, or at least not now. Not in front of computer screen.
So certainly, I somehow need a photo frame. But wait: That small screen showing a photo for several seconds before dissolving it into another photo is quite boring. I mean I certainly don’t see myself staring into something like that for enough time to justify the investment.
That being said, the direction is clear: I want to build a photo wall to display my own photos with nice frames, floating over the screen the way you see the pictures when you walk along the walls in a museum. And btw, it must run on a PI connected to a TV fixed on the wall.
The first attempt was to build it to run in a browser. The Internet is full with instructions on how to build a raspberry pi kiosk. For example this one, or this one.
So as result, here in GitHub there is the first implementation I did using HTML5 and canvas. Or you can see it “live” here.
As for the code on GitHub, you may fine tune it if you adjust some of the constants defined in the beginning:
- traverseTime to indicate how long should it take for a picture to move over the entire screen,
- postX to indicate how far in the invisible area on the right hand side of the screen should a new picture start
- gapX to indicate how many pixels should stay open between 2 images
- maxQueue – how many images should be buffered before the first images start navigating over the screen.
For the version running locally (the one whose source is in GitHub), the idea is to randomly get certain photos to be displayed, and for this I wrote a small cgi-bin script to accomplish this. Stay tuned for another blog on the cgi-bin topic. For the live version, I prepared some photos statically on the WebServer to be able to more easily illustrate the idea.
Ok, so: Is this all ? Well not really ! 😦 I have a problem; Quite a big one. And the problem is: On Raspberry PI it’s definitely too slow. There is no browser for PI who can use the GPU (maybe except for ChromiumOS, but this was not available at the moment I did this project, not now that I write this post), and the CPU for the PI2 I have around is far too weak; And I’m pretty sure the PI3 CPU is also too slow for this. However, please feel free to test the online version for the WallJS, on a PI3 if you want. So, what else ? Well, for me the answer was JavaFX, and for this there will be an additional blog, too.
Before leaving this blog, just to notice an interesting page I found while researching on HTML5-Canvas performance: Myths and realities of canvas / JavaScript performance.
Update: Link to the cgi-bin blog.
Update: Link to the working implementation on Pi, the WallFX.
For any questions, bug reports, suggestions, use the appropriate thread in the Raspberry PI forum.
Jasm.eu 
Leave a comment