Dynaframe - a Feature Rich Photo / Video Frame!

5,996

24

30

Introduction: Dynaframe - a Feature Rich Photo / Video Frame!

About: I’m a maker by night, computer engineer by day! I’m passionate about teaching others the skills I’ve acquired so that they can make stuff so cool it looks like science fiction

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!

Be the First to Share

    Recommendations

    • Puzzles Speed Challenge

      Puzzles Speed Challenge
    • "Can't Touch This" Family Contest

      "Can't Touch This" Family Contest
    • CNC Contest 2020

      CNC Contest 2020

    30 Discussions

    0
    cracrastephenson
    cracrastephenson

    1 day ago

    The Dynaframe software seems to have fallen apart on my Pi. The Error log shows all sorts of things happening. Do you want to see it?

    0
    cracrastephenson
    cracrastephenson

    Question 2 days ago

    I got it working (not, yet, with wifi thought). How do you Stop it from playing, please? And then Start it again?

    0
    cracrastephenson
    cracrastephenson

    Question 4 days ago

    How can it rotate the display to Landscape, please?
    thanks.

    0
    cracrastephenson
    cracrastephenson

    4 days ago

    BalenaEtcher says that - Dynaframe_2132019.7z - has "Missing Partition Table"
    I tried it anyway and it does not Boot.
    help Please...

    CS

    0
    cracrastephenson
    cracrastephenson

    Reply 4 days ago

    Found it - .7z is a Zip file (of sorts). Took me two days to find that out...

    0
    Inalambrico
    Inalambrico

    3 months ago

    Excellent project. I did make a few changes since:
    - Files on my NAS include spaces which it did not support.
    For this, I changed the feh command with the following:
    os.system("DISPLAY=:0.0 feh -qYzF \"" + filename + "\" &")

    - killing 'feh' at each picture makes the desktop show, so I commented that line and just kill older feh processes.

    - I did not want to create new folders with the photos to be displayed but wanted to use what is already on my NAS. Since the frame is vertical, I added a condition that only displays Portrait pictures.




    0
    RoswellUFO
    RoswellUFO

    Reply 8 days ago

    Inalambrico, This is pretty much what I'm looking for but since I am very new to this. I don't know how to get it to look at an NAS server and add the username and password to it. Another thing I'd like to know is how to change this to only landscape 16:9? I would appreciate it if you would help me out on this.
    Thanks

    1
    jankroh80
    jankroh80

    Reply 3 months ago

    That's great.
    Is it possible for you also uploading a File for landscape?
    I am not alle to do this by myself.

    And one question. Do you copy the files from your NAS to the pi or can you link to them?

    And another question.
    Is it possible that the pictures a randomized? I have 3000 pictures and i would be great to view them randomized.

    For those who look for audio playback in videos via audiojack, i used this.
    In show.py i changed
    if file.upper().endswith(".MOV"):
    os.system('omxplayer ' + file)
    if file.upper().endswith(".MP4"):
    os.system('omxplayer' + file)
    with
    if file.upper().endswith(".MOV"):
    os.system('omxplayer -o local ' + file)
    if file.upper().endswith(".MP4"):
    os.system('omxplayer -o local ' + file)

    To set the audio output via raspi-config doesn't work

    0
    dave16273849
    dave16273849

    2 months ago

    Hi, thank you for your kind sharing, this looks very good on my display. I wonder if you can share (I have done some customization on the setting) how to generate it to an image (.img file). Thanks.

    0
    danhyman
    danhyman

    Question 3 months ago

    Hi

    I have got this great project up and running, but I am trying to get the code to run using a folder in the Frame directory that is a symbolic link to a Debian mounted Windows Shared directory on my Home Photo Server. The symbolic link works and the folders and files appear underneath the relevant folder in the Frame folder.
    However, even though show.py runs on startup, and I can navigate to the web server and see the Photos folder symbolic link, the folders and files that sit beneath it are not displayed by the script.
    Any ideas on how to get this work?
    Thanks
    Dan

    0
    jankroh80
    jankroh80

    4 months ago

    Is it possible that feh shows all the images in fullscreen mode? That would help me to show all my pictures with a different resolution perfektly fit at the official raspberry 7" scren and i can use this for a very good picture frame.
    I found it in the show.py
    DISPLAY=:0.0 feh -x -F " + file + "&"
    Just inster the -F and it works great for me!
    Best slideshow out there.
    Really great would it be, if it could take the pictures out of an samba folder on my nas storage.

    0
    jfarro
    jfarro

    Reply 4 months ago

    Thankyou so much for this, that's a great update! Yeah, I'm working on trying to figure out what the best way to update this would be....one thing I like about it is if the network on the device goes down it still works, so if you were to say load it up with pictures and send it to someone it'd work fine. But there's something about having it load files from a share that would be powerful as well. I'll have to think on that as I design the update. Right now I'm working on a better, more reliable slideshow that does actual fades and such

    1
    김영빈1
    김영빈1

    5 months ago

    Hello
    I take a dynaframe image and am using it well
    The problem is that after using a few days,
    it does not work

    The launch.sh file does not run automatically and http: // adress: 8000

    FEH does not run automatically



    Where should I check?

    0
    jfarro
    jfarro

    Reply 4 months ago

    I would look at the logs in cronlog and try to see what playlist it's choosing. it could very well be a file that is crashing it. I had found a bug that involved underscores in files causing issues for Feh. So I'd go through the file names, look for anything odd, and try renaming those files. Let me know how that goes. I'm working on fixing the bugs, but the coronovirus has me making face shields with my 3d printer and keeping me busy helping the community so this has fallen to the wayside sadly

    0
    jasonjasont
    jasonjasont

    Reply 4 months ago

    I am having the same issue

    0
    moodog0372
    moodog0372

    9 months ago

    This has been a fun project and appreciate your posting of it. I want to keep all the functions but I ask this, is there a way we can leave the image static. Like just put 1 image in a playlist and have refresh at 0, but have 0 keep it from refreshing, Im trying to get the blink that happens on refresh out. I would just load a webpage with 1 image but I would like to have the ability on multiple frames to either cycle or pause on image with no refresh.

    I guess maybe I could add a static playlist, if there is a file in there and the config has use static that I could just change things around on that. ill have to dig and try, just wondering if you know a quick way with your code to stop that refresh.

    thanks much..

    0
    random-login
    random-login

    9 months ago

    Wow! Beautiful project. It is exactly what I have been thinking about doing but you beat me to it and did a great job. I had wanted in the past to run movieposterapp but it is a windows app and thought a PC (even an old one) was overkill. I wondered why nobody had done a similar thing on a Pi!

    I wonder how well it would run on a pi zero w. I might just have to give it a shot! :)

    Thanks for all the work on this project.

    0
    random-login
    random-login

    Reply 9 months ago

    I was able to run Dynaframe on my pi3 and zero W.
    I have found a few images and thrown them in and it cycles nicely.
    I haven't found any motion images to try yet but my time is limited, Ill find some soon and try them out.

    I have some notes from when I ran through it that might be helpful to your instructable thatI will post when I am done.

    0
    jfarro
    jfarro

    Reply 9 months ago

    Excellent!!! Sorry for slow replies been busy working on my makerspace (and I have a 1 year old, she keeps me busy :) ). I’m going to try to get animated gifs working and see if I can make a bash script to ease installing this. I am just new to Linux and am not sure how software like this gets distributed...apt-get is maybe the solution but I think I’d have to host my own server.