Dynaframe - a Feature Rich Photo / Video Frame!

Note: I've decided to enter this into the remix content! Please consider me if you find this project enjoyable!

Hey there! Dynaframe is a digital photo frame that aims to be differnet. I looked through the dozens of implementations out there, but they all felt like glorified slideshows, and many of them felt difficult to update (Requiring the MicroSD Card to be removed for instance). So I learned a bit of python, and put my own spin on it. Here's the features that Dynaframe has (Most are demo'd in the trailer video above

• Remote uploads - First and foremost, I didn't want to touch an SD card to update it. Dynaframe supports updating of the media via a file share, and if you use Allsync, you can update it via the cloud. I can (and have) wait for an oil change and browse for artwork to update my digital frame with at home!
• Video support - It supports both images and videos.. This means it also supports:
  • Plotagraphs - These are created when you add video elements to still images (Plotaverse/Werble apps can do this for example)
  • Cinemagraphs - These are when you freeze portions of a video to make it look like an animated gif almost
• Home Automation support (MQTT with control through Node-Red)
  • Dynaframe can receive MQTT messages to tell it what playlist to play. This allows it to be controlled via many home automation systems, and allows for amazing scnearios such as showing movie posters when you start Netflix, or showing game art when you sign into Xbox Live. This also can be used to do presence things so that when a person walks into the room, their favorite artwork is displayed.
• Playlist support - Dynaframe supports playing media in folders, treating each folder as a 'playlist'. So if you organize your media so that you have comic artwork in one folder, sports artwork in another, and movie poster artwork in yet another...you can select which folder of media you want to play and it'll cycle through it. This allows the room that Dynaframes are in to have 'moods'. Sometimes I set mine to play game artwork, sometimes movie artwork. Sometimes Sci fi, sometimes fantasy. When I'm in a 'maker mode' I set it to a folder of patent artwork and schematics. I tried to make it flexible, but easy to use.
• Remote control - Each Dynaframe supports a webserver, so you can browse to the frame and will get a hosted webpage which shows the playlists. You can then easily change playlists. Since it's a webserver, you can do this from any operating system with a browser, or device. This means that you can control it with phones, tablets, PC's, and even some Televisions nowadays.
• Power efficient - This I solved via Zwave and home automation, but essentially Dynaframe is designed to not write to the SD Card in any meaningful way (it only logs here and there). So you can turn it off suddenly and boot it back up and it'll be fine. I've run multiple frames for months with no problems at all, and they turn off with my lights when I leave the room. Despite that, if you were to keep the frames on for a full year it's about $13.00 each assuming $0.08 per KW/h. (With Zwave and 3 hours a day it brings it down to about $1.50 a year!
• Open source / Free software - I'd found some solutions that required monthly payments / service contracts. I am just a hobbyist and was looking for something where once I had the hardware, I could just load software and go. I've put the software on GitHub for others to use, update, and add features if they so wish.

Hopefully with that list, you see why I went through the work to yet again reinvent the wheel. I'm going to enter this into the Remix contest, but it's not so much a remix of one thing, as a remix of a dozen or so :)

Step 1: Step 1: What Do You Need to Do This!?

Ok, first things first..what do we need?

1. Raspberry pi 3 - the brains of the operation
2. A short HDMI cable
3. LG MK430H-B IPS 27" monitor (You can use whatever monitor you want, but this is what I used)
4. Micro SD Card
5. Wire picture frame hanging kit
6. Super Glue

Optional, but useful for extended features or cleaner looks:

1. Z Wave plugs (For powering on/off via home automaion) - https://www.amazon.com/Automation-Z-Wave-Applianc...

2. A Home automation setup supporting MQTT (Such as HomeSeer, Home Assistant, or Smart Things

3. Wire concealing conduits (usually just a plastic rail to run wires through...this helps hide the wires coming off of the frames)

4. Paint - This is to match the concealing conduit with your walls. I find that if you take the time to do this, it helps with the illusion that the frames are simply floating. The other way to do this of course would be to run the wire into/through the wall, but that is out of scope of this instructable

Step 2: Step 2: Putting the Frame Together

There's honestly not a lot of magic here. Please see the images to know what I was using...I super glued the hanging hardware on both sides of the back of the monitor, ran the wire through, and then mounted it with one nail into a stud in the wall. The monitors aren't terribly heavy, but if you need to, please use a screw with an anchor. You can use any monitor you want, just please mount it accordingly...for instance if you're using a 37" TV, you'll want to do a wall mount kit for that (I actually use a wall mount TV as one of my frames!)

The only other thing to worry about is the Raspberry pi...I simply double stick taped it to the back of the monitor. There doesn't need to be a lot of finesse there. I don't add fans or any active cooling...the frames don't drive the Pi too hard.

The benefit of hanging on a single nail is that you can easily ensure that things are level without having to make further holes in the wall. Also please note that there is a version of this where you can take the frame apart and make your own out of wood to make this look more like a photo frame....one of my goals when I created this was to do it in such a way that I didn't destroy the monitor, in case I decided I didn't like the effect (I ended up loving it!). I chose monitors with thin simple bezels for this reason. I also mount them vertically to make them look as much like photo frames as possible!

Step 3: Step 3: Using the Ready Made Raspberry Pi Image

There are two options to building this. I'll start with the simple one, which is to image a raspberry pi with an image I've prepapred that does most of the other steps for you. However, if you want more control of the image, I'll go over the steps of what you'll need to set it up manually. That would allow you to add this to an image which may have other features you desire such as home automation software, MQTT servers, etc.

Please note that the video walks you through the steps for the 'ready made' portion. I'll walk through the other steps in this instructable so that it's fully documented however.

To use the ready made version, please use Etcher to write the following image to a MicroSD Card:

https://1drv.ms/u/s!AqxjM4_uBDJguOsrwD3z4ovMJwFF9g (Updated 6/7/2019)

That image is a full raspberry pi image which is missing one thing, a python library. To setup everything you want to:

1. Boot that image onto a raspberry pi 3 or later (3B+ should work fine)
2. Start a command line, and run raspi-config
3. Set the password to something secure
4. Setup your wifi
5. Set the hostname to something unique but descriptive for each frame you're setting up
6. When you're done, save and reboot. Run 'ifconfig' to get the IP address of the frame (this should show as WLAN0)
7. Run the command: "sudo pip3 install paho-mqtt". This will install a critical library left out of the image
8. Reboot

Next: Copy files to the raspberry pi by navigating to the ip address such as: \\{ipaddress}\Frame

In that folder, create a subfolder for each 'playlist' you want, and place at least one file in it (jpg, mov, or mp4). Then you can navigate to http://{ipaddress}:8000 to see the web UI, and you should see the folders listed. If so, then you've set things up correctly, and you are ready to rock and roll! Easy..Right? Well as simple as I could make it for now :)

Notes about the image:

1) Samba is installed and configured, but configured for guest. You'll want to lock that down if you want it to be secured.

2) The default password/login is pi / raspberry. Which is the default Raspbian OS password. You'll definitely want to change that!

3) SSH AND VNC are enabled, so you can remote into the pi to manage it if need be.

4) The 'logs' folder in the Frame share contains a cronlog...if anything blows up, that's where the log is.

5) Samba is sharing out the 'Frame' folder. This is where your media should go..in subfolders!

6) There is a webserver on that has no auth. This makes it easy to navigate to the IP address (port 8000) of the frame to control it, however I wouldn't expose it externally the way it is setup now.

7) The default setup on this image is portrait mode (Vertical). If you'd like to change this to horizontal mode, you'll want to look at: https://www.ceos3c.com/open-source/rotate-screen-r... to change the correct setting.

At this point you're up and running the 'easy way'. There are two bonuses you may want to add:

1) A Home automation smart plug is handy if you have a Zwave switch already in the room you install these. Then you can setup automations to do things to keep the frame's in sync with the room lights. For instance, when I turn my lights on in my makerspace, my frames turn on with them. When I turn them off, the frames turn off. To do this, simply power the monitor itself by the plug. You can choose to power the pi as well...the benefit if you do is quick startup times...but you will lose the power draw of the pi. To really be 'green' I keep my pi's and my monitors on the plug, and turn both off, but it's really your choice.

2) Allwayssync (https://allwaysync.com/). I use this software to sync my onedrive / cloud storage to the Dynaframe samba shares. This software can do 2 way syncing, conflict management and more. I find it useful and it's worked really well for me.

The rest of this instructable will talk about the 'manual' way to set this up, and go into some more depth on the Zwave setup / Allwayssync as needed.

-

Step 4: Step 4: Manual Setup Steps

If you're doing the steps the long way, I'm going to assume you know a bit about Linux and how to configure a raspberry pi. In that case, here's the list of things you'll want to do. What's great about this list is I used Instructables on here to figure this stuff out, so I'll get to directly link back to the Instructables that made this possible :)

1) Clone the repository at: https://github.com/Geektoolkit/Dynaframe into a folder named "Frame". I'll reference this Frame folder for the rest of the instructable to be consistent, so that if you want to call it something else, you'll know which folder I'm talking about. This is where the show.py file needs to reside.

2) Set show.py to be executable

3) Install Python 3, as well as feh, Samba, and omxplayer. These are required for executing the scripts

4) You'll want to use pip3 to install paho-mqtt (sudo pip3 install paho-mqtt) as well as the HTTP libraries for python.

5) Setup a bash script to start show.py on launch. I used this instructable:

https://www.instructables.com/id/Raspberry-Pi-Laun...

6) If you want it to be in portrait mode, set the correct value for screen rotate. Make sure that any OpenGL drivers are NOT turned on (or the rotate will be ignored...this cost me some hours of my life to debug :) )

https://www.ceos3c.com/open-source/rotate-screen-r...

7) Setup Samba to share out the Frame folder. I don't recall what I used to do this, but these steps are well written;

https://everyday-tech.com/samba-share-on-your-rasp...

8) Configure VNC and SSH so you can remotely manage the pi (highly recommend this unless you want to run around with keyboards to manage them later)

At this point the python script should start on boot, you should be able to remotely manage the pi, get the python file running, and see images and videos load.

9) One optional component...you'll likely want to set the IP static. Definitely set the hostname to something unique if nothing else so you can use it to ping the device/navigate to the webpage for control

If there are tons of questions I can fill this in more. I created the image so that most people wouldn't have to go through all of these steps yet again!

Now lets walk through the code a bit so you'd know where to edit it if you choose...

Step 5: Step 6: Code Walkthrough

The code is at:

https://github.com/Geektoolkit/Dynaframe

I won't walk through all of it, but I want to point out some important parts:

In 'show.py' there are portions that setup the MQTT server. You'll want to configure these if you're going to use home automation to control your screens. This portion is at the top so it's easy to edit, and looks like:

# customize before using!
brokeraddress = "test.mosquitto.org" # you can use this as a test broker, or setup msoquitto on a rpi as an internal broker

mqttclient = "dynaframe1" # must be unique for each frame...

brokerport = 1883

subscriptionname = "jfarro/house/makerspace/display" # this should be a string that is unique and describes where your frame is

The "Webpagebody" mentioned in the code is one long string that gets sent back when a browser navigates to the frame. In that string you'll see the CSS which must be edited if you want to configure the webpage that gets served to be..prettier :) I am not great at design sometimes. It can definitely be improved.

This variable:

refreshInterval = 30 # number of seconds between images in a slideshow

is how you set the length of time the images are shown. It's one of the things you may want to configure if you don't want pages flipping every 30 seconds (though I find it refreshing...I always have new art showing up!)

Ok, those are the main sections of code that you'll want to edit to make this 'yours'. It's entirely optional, but I wanted to point it out.

Step 6: Step 7: What's Next? and Some Tips...

Hopefully all went well and, if you're building this, you have a working raspberry pi powered digital photo frame that supports videos and a ton of other gadgets and gimmicks! I'm still working to add features to this..next I'd like to add the ability to use web urls for images, RSS feeds, or websites such as traffic/weather. I could see these being art displays that can become functional in a moments notice...even becoming momentary game / emulation screens (via a Bluetooth controller). I'll update this instructable as I add things.

Some quick tips:

1) This is designed to run at 1080p. 4K would be great, but then it raises the cost of everything, and I was working with a target price of $150 (which I slightly missed)

2) The Raspberry Pi 3 A+ was not out when I created this. It's a much better suited module, and cuts the price by 10 dollars!

3) Since it's designed for 1080p, all artwork works best if you resize it to 16:9 (or 9:16 if portrait) and 1080p. That's where you'll get the sharpest images

4) To create excellent fun content that moves (where this really shines) you can use Werble (iPhone) or Plotaverse (or Enlight's suite). Basically if you search for 'plotoagraph' and 'cinemagraph' you can create some amazing content for these that really makes them shine.

5) Searching for artwork that is 9:16 / 1080p may get you to some sites that design background wallpaper for cellphones...that's a great source of art. DeviantArt has also been amazing.

6) If you search for 1080x1920 on youtube, you'll find some video content that works well on these frames right off!

I think that's it for now. I'll keep adding as I go. I hope you can see form the videos I made and what I've shared here...these are IMO a step way above any photo frames out there! Thanks, and until next time...

Please consider voting for me for the 'remix' contest if you enjoy this!