{"id":298,"date":"2017-03-29T03:18:34","date_gmt":"2017-03-29T03:18:34","guid":{"rendered":"http:\/\/www.piboxproject.com\/?p=298"},"modified":"2017-03-29T03:30:26","modified_gmt":"2017-03-29T03:30:26","slug":"pipics-slideshow-app-with-touchscreen-support","status":"publish","type":"post","link":"https:\/\/www.piboxproject.com\/index.php\/2017\/03\/29\/pipics-slideshow-app-with-touchscreen-support\/","title":{"rendered":"PiPics: slideshow app with touchscreen support"},"content":{"rendered":"

\"\"On February 5th, we lost out oldest dog Reba.\u00a0 Reba was a 14 1\/2 year old rescue and the prettiest Golden Retriever (or more likely Nova Scotia Duck Tolling<\/a> retriever) mix we’ve ever seen.\u00a0 Adopted from a shelter when she was perhaps 3 or 4 months old with her twin sister Phoebe (who died very young, sadly), Reba was a lover and a sneak who for some reason thought she was a cat.\u00a0 She was a joy and friend for many years.\u00a0 You will be sorely missed, our love.<\/p>\n

Reba passed a couple of days before a PiBox Meetup<\/a> meeting.\u00a0 Being very close to my dogs – we still have Bailey and Cody<\/a> – I was very distraught and wasn’t sure I would make the meeting.\u00a0 So I decided to dive into a PiBox project that was well suited the situation:\u00a0 creating a digital photo frame with PiBox and a Raspberry Pi 7″ touchscreen display.\u00a0 Having some work to focus on was the only way to help ease the thoughts of Reba’s passing.\u00a0 And it gave me a way to help remember her always.<\/p>\n

The photo frame project (which I noted as the In Memoriam<\/em> project on the Meetup group) needed two new apps:\u00a0 a photo slideshow and a video player that looped a video collection.\u00a0 The existing video player, VideoFE<\/a>, got a kiosk mode to handle cycling through random videos without user interaction.\u00a0 That work led to the long needed scalability update to the launcher app, a task that turned out to be easier than expected using gdk_pixbuf<\/a> and Cairo<\/a>. Both of these tasks I’ll cover in separate articles.\u00a0 That left just the slideshow app, which I call PiPics<\/em>.<\/p>\n

PiPics<\/a> is an app that searches for images on USB media sticks and displays each one for 10 seconds before moving to the next image, looping back to the start when it has shown all images.\u00a0 The fact that the app would need to find all files of a given type on a USB media stick made it appear to be a near duplicate of what VideoFE does.\u00a0 VideoFE searches for database files (created with the VideoLib<\/a> java app) and calls an external player, omxplayer<\/a>, to play a user selected file.<\/p>\n

The first pass at PiPics utilized a large amount of VideoFE.\u00a0 I switched to looking for a variety of static image file formats instead of video file formats.\u00a0\u00a0 Also, I no longer needed a database because I only have filenames to track.\u00a0 There is no photo metadata.\u00a0 VideoFE’s code for launching an external player was modified to launch a different app, feh<\/a>.\u00a0 This is a static image player that utilized a simple signal-based mechanism for moving to the next or previous image in a list.\u00a0 Seemed like a perfect fit for this use case.\u00a0 But it didn’t work.<\/p>\n

Feh, as good as it is, crashed often.\u00a0 While it displayed images fine it wasn’t happy moving to and fro between images using the signal mechanism.\u00a0 So I dropped that plan pretty quick.<\/p>\n

Thinking about how much I’d learned about the Cairo graphics library recently I decided I could easily build an app to draw images with that library, but only if I found some way to read more than just PNG format files.\u00a0 Cairo is limited in this respect.\u00a0 It reads PNG files, but nothing else.\u00a0 The average user would probably be using JPEG or GIF files and perhaps a few others.\u00a0 So I started looking for other libraries.<\/p>\n\n\n\n
\n

\"\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

GDK Pixbuf and Cairo<\/h3>\n

Enter gdk_pixbuf.\u00a0 For a digital frame we really want the most popular formats:\u00a0 gif, jpeg, png and perhaps tiff.\u00a0 The gdk_pixbuf library has a single function<\/a> for reading a multitude of file formats<\/a> including the ones I needed.\u00a0 More importantly it provided two additional features.\u00a0 The first was an easy way to translate gdk_pixbuf data to Cairo data and the other was an easy way to scale the image data.<\/p>\n

Loading an image starts with passing a filename to gdk_pixbuf.\u00a0 The pointer returned is then passed to another gdk_pixbuf function to handle automatic rotation based on image metadata.<\/p>\n

\u00a0\u00a0\u00a0 image\u00a0 = gdk_pixbuf_new_from_file(imagePath, NULL);\r\n\u00a0\u00a0\u00a0 newimage = gdk_pixbuf_apply_embedded_orientation (image);\r\n\u00a0\u00a0\u00a0 g_object_unref(image);\r\n\u00a0\u00a0\u00a0 image = newimage;<\/pre>\n
The second call returns a new pointer or a new reference.\u00a0 By removing the reference to the original we keep from leaking references.\u00a0 We then return the new pointer\/reference to the original variable for later use.<\/p>\n
The size of the image is retrieved so we can choose a scaling factor.\u00a0 We want to fit the image to the display without losing the aspect ratio.\u00a0 I found a good algorithm for scaling while keeping aspect ratio<\/a> online.<\/p>\n
\u00a0\u00a0\u00a0 iwidth\u00a0 = gdk_pixbuf_get_width(image);\r\n\u00a0\u00a0\u00a0 iheight = gdk_pixbuf_get_height(image);\r\n\r\n\u00a0\u00a0\u00a0 \/* Compute scaling to keep aspect ratio but fit in the screen *\/\r\n\u00a0\u00a0\u00a0 ri = iwidth \/ iheight;\r\n\u00a0\u00a0\u00a0 rs = req.width \/ req.height;\r\n\u00a0\u00a0\u00a0 if ( rs > ri )\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 swidth = (gint)(iwidth * req.height\/iheight);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 sheight = req.height;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 else\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 swidth = req.width;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 sheight = (gint)(iheight * req.width\/iwidth);\r\n\u00a0\u00a0\u00a0 }<\/pre>\n
The gdk_pixbuf is scaled first, then it’s set as the source for a Cairo surface and the surface is displayed.<\/p>\n
\u00a0\u00a0\u00a0 newimage = gdk_pixbuf_scale_simple(image, swidth, sheight, GDK_INTERP_BILINEAR);\r\n\u00a0\u00a0\u00a0 iwidth\u00a0 = gdk_pixbuf_get_width(newimage);\r\n\u00a0\u00a0\u00a0 iheight = gdk_pixbuf_get_height(newimage);\r\n\u00a0\u00a0\u00a0 piboxLogger(LOG_INFO, \"image w\/h: %d \/ %d\\n\", iwidth, iheight);\r\n\r\n\u00a0\u00a0\u00a0 \/* Center on the display *\/\r\n\u00a0\u00a0\u00a0 offset_x = (double) (((double)req.width - (double)iwidth) \/ (double)2.0);\r\n\u00a0\u00a0\u00a0 offset_y = (double) (((double)req.height - (double)iheight) \/ (double)2.0);\r\n\u00a0\u00a0\u00a0 gdk_cairo_set_source_pixbuf(cr, newimage, offset_x, offset_y);<\/pre>\n
Cairo is not strictly required here but it’s easier than working within the bounds of widget layout of GTK+.\u00a0 With Cairo and a drawing area widget I can just paint on the screen.<\/p>\n
Touchscreen Navigation<\/h3>\n
The digital photo frame uses the same launcher as the PiBox Media Center, but it only has two apps: the new PiPics app and the updated VideoFE in kiosk mode.<\/p><\/div>\n
PiPics is very simplistic.\u00a0 It’s designed to run in a kiosk mode where images are simply displayed but little user interaction is needed.\u00a0 However, it does support skipping forward and backward in the list of pictures.\u00a0 The usual PiBox key presses are supported – ESC to exit, left and right arrows do what you’d expect – but the point here was to integrate the new touch screen support from libpibox<\/a>.\u00a0 The original implementation of this support was tested with VideoFE so, again, I was able to port example code from that project.<\/p>\n
The touchscreen support provides two ways to identify touches.\u00a0 The first is an absolute screen coordinate.\u00a0 This is useful for the launcher which needs to know exactly which icon was touched in order to launch a specific application.\u00a0 The other method is to get a screen region.\u00a0 The touchscreen is divided into 9 equal regions in a 3×3 cell matrix.\u00a0 This provides a nice consumer orientation for the touchscreen while using as much screen space as possible.<\/p>\n
The first thing you need is to initialize the touch screen library.<\/p>\n
\u00a0\u00a0\u00a0 if ( piboxGetDisplayType() == PIBOX_LCD )\r\n\u00a0\u00a0\u00a0 {\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 piboxLogger(LOG_INFO, \"Registering imageTouch.\\n\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 piboxTouchRegisterCB(imageTouch, TOUCH_REGION);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 piboxTouchStartProcessor();\r\n\u00a0\u00a0\u00a0 }<\/pre>\n
The pibox functions are a new libpibox features.\u00a0 Here we register a callback that will use touch regions from the touch screen library and starts the thread that handles touch screen notifications.<\/p>\n
Due to the way GTK+ works with threads, you can’t update the screen directly in the imageTouch<\/em> callback.\u00a0 Instead, this callback simply adds a callback to the glib idle loop so it gets called the next chance the main loop has an opportunity.<\/p>\n
PiPics uses the region feature of the touch screen library.\u00a0 Prev and next images are accessed using cells in the middle of the display on the left and right, respectively.\u00a0 Exit, to be consistent with other apps ported to use the touchscreen library, is the upper right and causes the launcher to regain control of the UI.\u00a0 Pause and play are in the middle of the screen.<\/p>\n
\u00a0--------------------------------\r\n\u00a0| 0: N\/A | 1: N\/A\u00a0\u00a0\u00a0 | 2: Exit |\r\n\u00a0--------------------------------\r\n\u00a0| 3: Prev| 4: N\/A\u00a0\u00a0\u00a0 | 5: Next |\r\n\u00a0--------------------------------\r\n\u00a0| 6: N\/A | 7: N\/A\u00a0\u00a0\u00a0 | 8: N\/A\u00a0 |\r\n\u00a0--------------------------------<\/pre>\n
Deployment<\/em><\/p>\n
PiPics, like all PiBox apps, is built as an opkg.\u00a0 Installation just requires copying the package over as root and running the installation.<\/p>\n
opkg-cl install pipics_0.10_arm.opk<\/em><\/p>\n
The recent updates to the launcher app allow me to use only a couple of apps and they will be displayed centered on their section of the launcher display.\u00a0 So the digital photo frame now has a more polished appearance, all based on the original PiBox Media Center work.<\/p>\n