Friday, April 17, 2015

Raspberry Pi Digital Picture Frame: Part 2 Adding an Accelerometer and some more!

UPDATE (4-17-2015): 

To see "Part 1" of this project please go here
So we have few new features!!

  • Ability to hide/show clock and temperature via phone webapp 
  • Change time between image transitions via webapp
  • Uploading multiple images from the web interface now works.
  • Deleting Images now works.
  • Lazy loading of images when looking through them on the webapp. (loads as you scroll)
  •  I just added a 3-axis sensor to the 7" frame and have it broadcast to the HTML side the angle of rotation.

TODO(Coming Soon)

  • Weather feed option in the config. (see weather every 10 slides, and or outside temperature in right hand corner)
  • DNLA Support for those who have NAS servers with millions of images.
  • Option to only show images of the same aspect ratio as your picture frame rotation.(if you frame is vertical show vertical taken images and visa vera)
  • piframe image for download so no setup is required (except hardware)

Details on the new webapp features

To make it more handy to have a IoT picture frame I've added some handy configurations that load when the frame starts up. 



Details on the Acceleromter

I updated the git repository with a class to communicate via i2c to a MMA7455 accelerometer.
https://github.com/SimplyAutomationized/piframe/blob/master/MMA7455.py
The class has a callback method within it so it can broadcast a tilt change to whomever instantiates the class. Which I'm calling it within the websocket code and broadcasting to the client(the frame) the correct angle.

#I check the config file to see if you have enabled the tilt sensor
if(config['tiltsensor']):
 self.tiltSensor=tilt.TiltSensor(self.rotateFrame)
 self.tiltSensor.start()
#...later in the code we define the callback rotateFrame when rotation changes.
#(when the X axis inverts)
def rotateFrame(self,data):
 rotation=data*270
 self.frameconfig.changeKey('rotation',rotation)
 self.sendNewConfig(self,all=True)
#the code then broadcasts it's new rotation, the CSS on the frame then rotate's the images based off of the new rotation :-) win!




And rotation: