User avatar
sapnho
Posts: 244
Joined: Sun Sep 14, 2014 3:49 pm
Location: Frankfurt am Main
Contact: Website

Re: Image viewer with transition between images

Sat Jan 10, 2015 3:44 pm

That results in:

Code: Select all

shader shaders/blend_bump, Compiled
shader shaders/blend_bump, Compiled
Traceback (most recent call last):
  File "/home/pi/pi3d_demos/PictureFrame.py", line 81, in <module>
    iFiles, nFi = get_files()
  File "/home/pi/pi3d_demos/PictureFrame.py", line 53, in get_files
    for root, dirnames, filenames in os.walk(PIC_DIR):
  File "/usr/lib/python2.7/os.py", line 294, in walk
    for x in walk(new_path, topdown, onerror, followlinks):
  File "/usr/lib/python2.7/os.py", line 284, in walk
    if isdir(join(top, name)):
  File "/usr/lib/python2.7/posixpath.py", line 80, in join
    path += '/' + b
UnicodeDecodeError: 'ascii' codec can't decode byte 0xc3 in position 14: ordinal not in range(128)
www.TheDigitalPictureFrame.com - Build a really great digital picture frame with the Raspberry Pi.
With lots of great tips from this forum.
Please submit your digital picture frame project to the user gallery here: bit.ly/2WkyjW1

User avatar
sapnho
Posts: 244
Joined: Sun Sep 14, 2014 3:49 pm
Location: Frankfurt am Main
Contact: Website

Re: Image viewer with transition between images

Mon Jan 12, 2015 7:50 pm

A strang issue has come up on my sister's picture frame (which is identical to mine): Every now and then (on average every 30 minutes) the frame goes dark (slowly, like a transition to a dark photo) and stays dark for like five minutes, then the photos start to reappear again.

The only difference to my frame is: whereas I only use 1920x1200 photos (my screen's resolution), my sister has a mix of different formats. Could that be it?

If it helps, I have attached her customized PictureFrame script.

Thanks!
Attachments
PictureFrame.py.zip
(2.7 KiB) Downloaded 106 times
www.TheDigitalPictureFrame.com - Build a really great digital picture frame with the Raspberry Pi.
With lots of great tips from this forum.
Please submit your digital picture frame project to the user gallery here: bit.ly/2WkyjW1

User avatar
paddyg
Posts: 2561
Joined: Sat Jan 28, 2012 11:57 am
Location: UK

Re: Image viewer with transition between images

Mon Jan 12, 2015 9:20 pm

Hard to say. I would have said it was a screensaver but that doesn't really make sense for a whole lot of reasons! The next random thought is that there are some pictures that can't be rendered for some reason. Either an odd size (the Texture class ought to resize down if the width isn't one of the golden sizes) too small to notice (!) or some file type that Pillow doesn't cater for. Actually Pillow can cope with pretty much anything but relies on the required libraries being available. But I see you are filtering on png, jpg, jpeg so that doesn't make sense unless there are some of the jpg variants that it can't cope with.

I think I would try to figure out if it was happening at a regular interval or if there are certain files that are not rendering. Maybe you could print the file name as each one is loaded and increase the slideshow speed then keep breaking out when the screen goes black to see what the file was.

Did you get anywhere with the supervisord problem?
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

User avatar
sapnho
Posts: 244
Joined: Sun Sep 14, 2014 3:49 pm
Location: Frankfurt am Main
Contact: Website

Re: Image viewer with transition between images

Mon Jan 12, 2015 9:26 pm

I think I would try to figure out if it was happening at a regular interval or if there are certain files that are not rendering. Maybe you could print the file name as each one is loaded and increase the slideshow speed then keep breaking out when the screen goes black to see what the file was.
That's a good idea, I'll do that next time I am at my sister's place.
Did you get anywhere with the supervisord problem?
Not yet, no. But I have added a try-except to my email check script and since then, it hasn't crashed yet. Fingers crossed. So, I may not need Supervisord after all.
www.TheDigitalPictureFrame.com - Build a really great digital picture frame with the Raspberry Pi.
With lots of great tips from this forum.
Please submit your digital picture frame project to the user gallery here: bit.ly/2WkyjW1

darias
Posts: 1
Joined: Mon Dec 29, 2014 3:59 am

Re: Image viewer with transition between images

Thu Feb 05, 2015 2:58 am

Is it possible to rotate the displayed images? I'd like to try reading the EXIF rotation data and presenting the picture properly. I tried a few methods, but had no success.

Thanks!
Dave

User avatar
sapnho
Posts: 244
Joined: Sun Sep 14, 2014 3:49 pm
Location: Frankfurt am Main
Contact: Website

Re: Image viewer with transition between images

Sun Aug 16, 2015 10:24 am

Hi guys, the manuals can now be found here: https://www.dropbox.com/sh/ydo0xkz48yi0 ... 2G_ma?dl=0
Last edited by sapnho on Thu Mar 10, 2016 3:25 pm, edited 1 time in total.
www.TheDigitalPictureFrame.com - Build a really great digital picture frame with the Raspberry Pi.
With lots of great tips from this forum.
Please submit your digital picture frame project to the user gallery here: bit.ly/2WkyjW1

sawitar
Posts: 9
Joined: Wed Mar 09, 2016 11:43 am

Re: Image viewer with transition between images

Wed Mar 09, 2016 12:37 pm

Hello,

I know this thread is dead for over a year now but I have question precisely related to this topic. So, sorry for resurrecting it.

I build my photo frame based on this thread few months back (Pictureframe.py). While everything is working fine there is one small hiccup.
For photos where aspect ratio do not match screen, I either crop image (for horizontal images) or scale photos (for portraitures). While this works it leaves ugly black (or whatever background colour I set) strips on sides of some photographs.
I would love to have this space filled with slightly blurred version of main picture like here:
Image

So in my new script I create two canvas. One filled with main picture, and second canvas filled with image I want as a background. Depth Z is set correctly (background is behind foreground).
Unfortunately this doesn't work as I only see my foreground picture with black strips on sides. While I was expecting to see background instead of those stripes.
Setting transparency for canvas doesn't really help as it makes whole foreground transparent.

How can I solve this?
Looks like canvas size matches screen. Hot to change this. Or maybe I should try another approach (2d sprites)?

jodder
Posts: 5
Joined: Wed Mar 09, 2016 11:35 am

Re: Image viewer with transition between images

Wed Mar 09, 2016 3:29 pm

How spooky... I was also planning on hijacking this old thread today!

Many thanks to paddyg, sapnho and gkreidl for their valuable contributions so far. I have now almost got my picture frame ready to go on the wall thanks to your discussion and guides in this thread.

The thing that is bugging me at the moment is one pixel wide lines at the edge of my pictures. Paddyg and sapnho seemed to have solved this issue by setting the MIPMAP argument to False (top of page 5 on this thread). However, the quality of the images is far greater when MIPMAP=True because anti-aliasing is used...but MIPMAP=True results in these distracting lines at the edge of each image. The one-pixel-wide lines vary in colour between each new image; I think the colour of the lines is dictated by the colour of the top right (or top-left, bottom left or bottom right...) pixel. I've hunted through countless lines of code on github looking for a solution to no avail... I'm afraid out of my depth now.

Could anyone point me in the right direction to using MIPMAP=True without the one-pixel-wide lines at the edge?

Many, many thanks in advance.

Jodder

User avatar
paddyg
Posts: 2561
Joined: Sat Jan 28, 2012 11:57 am
Location: UK

Re: Image viewer with transition between images

Wed Mar 09, 2016 7:03 pm

Hi, I will have a look at these things in detail as soon as I can but after quick look:

@jodder, do you have the latest version of the PictureFrame shaders? Someone pointed out this issue quite recently and I altered the shaders pushing to github on the 9th Feb. The revised line in, say, pi3d_demos/shaders/blend_false.vs line 13 and 14 ..+vec2(0.5, 0.5)).. if you have the most recent version.

@sawitar, this is a good point and highlights what I regard as a bug in the shaders. Namely that where pixels are outside the foreground or background image they are set to (0,0,0,1) i.e. opaque black, whereas it would make sense to set them to (0,0,0,0) i.e. transparent so the background could show through. To use a texture as a background you can either switch to using an orthographic camera like this

Code: Select all

CAMERA = pi3d.Camera(is_3d=False)
...
bkgsh = pi3d.Shader('uv_flat')
bkg = pi3d.ImageSprite(texture='textures/techy1.jpg', shader=bkgsh, camera=CAMERA, w=2000, h=2000, z=9999)
...
while DISPLAY.loop_running():
  bkg.draw()
or use a Canvas object but you will need to use the 2d_flat shader

Code: Select all

bkgsh = pi3d.Shader('2d_flat')
bkg = pi3d.Canvas(z=0.15)
bkg_tex = pi3d.Texture('textures/techy1.jpg')
bkg.set_draw_details(bkgsh, [bkg_tex])
bkg.set_2d_size(w=2000, h=2000)
...
while DISPLAY.loop_running():
  bkg.draw()
it would even be possible to use the existing blur shader and reload the texture each slide from the Slide instance, something like this

Code: Select all

CAMERA = pi3d.Camera(is_3d=False)
...
bkgsh = pi3d.Shader('defocus')
bkw, bkh = DISPLAY.width  + 4, DISPLAY.height  + 4
bkg = pi3d.Sprite(camera=CAMERA, w=bkw, h=bkh, z=9999)
bkg.unif[42:47] = [9000, 9999, 20, 1.0/bkw, 1.0/bkh]

while DISPLAY.loop_running():
  bkg.set_draw_details(bkgsh, [sbg.tex])
  bkg.draw()
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

sawitar
Posts: 9
Joined: Wed Mar 09, 2016 11:43 am

Re: Image viewer with transition between images

Wed Mar 09, 2016 11:59 pm

Thanks a lot paddyg it was mighty helpful :-)

Here is my current code:

Code: Select all

IMAGE_SCALE = 0.95
CAMERA = pi3d.Camera(is_3d=False)
CAMERA.was_moved = False

foreground_shader = pi3d.Shader("uv_flat")
background_shader = pi3d.Shader("defocus")

Code: Select all

# display loop
foreground_sprite = pi3d.Sprite(camera = CAMERA, w = image.dimensions[0] * IMAGE_SCALE,   h = image.dimensions[1] * IMAGE_SCALE, z=1)
background_sprite = pi3d.Sprite(camera = CAMERA, w = image.background[0]+4, h = image.background[1]+4, z=100)
background_sprite.unif[42:47] = [9000, 100, 5, 1.0/image.background[0]+4, -1/image.background[1]+4]
background_sprite.set_alpha(0.5)

foreground_sprite.set_draw_details(foreground_shader, [image.tex])
foreground_sprite.draw()
background_sprite.set_draw_details(background_shader, [image.tex])
background_sprite.draw()
Now I have nice image on top of blurred background :-)

Few comments:
- had to negate 5th parameter passed to background_sprite.unif as background was flipped
- changed 3rd parameter to 5, as it generates more pleasant results, although less blurry

Questions:
1. Could you describe what other two parameters passed to backgrount_sprite.unif are responsible for?
2. It seems that background_sprite.set_alpha is ignored
3. Is there a simple way to add a shadow under foreground image?

jodder
Posts: 5
Joined: Wed Mar 09, 2016 11:35 am

Re: Image viewer with transition between images

Thu Mar 10, 2016 12:56 am

paddyg wrote:Hi, I will have a look at these things in detail as soon as I can but after quick look:

@jodder, do you have the latest version of the PictureFrame shaders? Someone pointed out this issue quite recently and I altered the shaders pushing to github on the 9th Feb. The revised line in, say, pi3d_demos/shaders/blend_false.vs line 13 and 14 ..+vec2(0.5, 0.5)).. if you have the most recent version.
Yes, I downloaded from GitHub only a day or two ago. Lines 13 and 14 in blend_x.vs do say '+ vec2 (0.5, 0.5));'. I saw on the github history that this used to be '+ vec2 (0.0, 0.0));' so I have been tinkering with different numbers in here (both positive and negative) to no avail. I can't get my head around it so am clutching at straws really. So '+ vec2 (0.5, 0.5));' is the altered code that should solve this issue then? My knowledge is minimal so I could be missing something obvious here...!

Thanks for replying to this thread so quickly, it is greatly appreciated :mrgreen:

User avatar
paddyg
Posts: 2561
Joined: Sat Jan 28, 2012 11:57 am
Location: UK

Re: Image viewer with transition between images

Thu Mar 10, 2016 11:01 am

@jodder, it could well be an undiscovered bug in the blend shaders, I will have a further look. There were a couple of modifications to do with Texture loading and mipmaps so it might be a recent development. I will get back to you when I've found something.

@sawitat, ah, I thought you were using the PictureFrame system with the blend shaders. If you don't need fancy blending then the whole process can be much simpler (unless you add in complications such as blurred backgrounds!)

a) Shape.unif[ 42=blur from distance. This is the focal plane where everything is clear. 43=blur to distance. Everything is at max blur (but things nearer than the focal plane are also blurred so the difference between these values gives a kind of half-depth-of-field! 44=amount of spread in pixels - more than 5 will create banding as it's a fixed 5x5 matrix in the shader. 45=width to map blurred image to.46=height - but as you noticed there is an inconsistency about the direction of the y vector!
b) Yes, This was set as a fixed value of 1.0. I suppose in the normal use of defocus you would never set it otherwise but it might be useful sometimes so I have changed the last line in pi3d/shaders/defocus.fs to
gl_FragColor.a = unif[5][2];
c) You mean a drop shadow? It might be easier to do the whole background blurring and shadow using PIL and not use the gpu defocus system at all. The advantage of the gpu is that it's very fast so you can process 20 or 30 full screen images every second, but for a slideshow you might only need to do the background blurring and drop shadow once every five seconds. I would look at a work flow:
1. use Image.resize to make a smaller version of the foreground image (4 x quicker to process 50% image) convert to RGBA at same time
2. use ImageDraw.Draw.Rectange to draw a partially transparrent grey rectangle to match the size of the original image after scaling down then back up to the size of the background Sprite, offset a bit.
3. use ImageFilter.GaussianBlur to blur the whole thing
4. feed resulting image into new pi3d.Texture object
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

sawitar
Posts: 9
Joined: Wed Mar 09, 2016 11:43 am

Re: Image viewer with transition between images

Thu Mar 10, 2016 1:37 pm

Hello,

1. I solved the shadow by adding new semi transparent black Sprite under foreground image. :-)
I will later tune it by adding a nice gradient.

2. I want fancy transitions as well.
As foreground image is not blurred it is easy. I will switch from uv_flat to one of the blend shaders. I hope blend shaders are allowed to be used on Sprite?
But for background I need defocus and blend at the same time. New shader doing both, or offscreen texture, perhaps?

I was thinking about using PIL as a starting point. But as I already have pi3d working I waned put it to use and learn something new.

p.s.
My project used PictureFrame.py as foundation. But I have modified it in few places. I'm happy to share once I have it all working :-)

User avatar
paddyg
Posts: 2561
Joined: Sat Jan 28, 2012 11:57 am
Location: UK

Re: Image viewer with transition between images

Thu Mar 10, 2016 2:55 pm

Ah, that's a nice simple way. The shaders used for the PictureFrame demo won't work (though not tested) with rendering to a Sprite as the coordinates used to 'lookup' the uv texture mapping are taken from the screen. See, for instance, pi3d_demos/shaders/blend_bump.fs line 23
coord = vec2(gl_FragCoord);
To use use the coordinates from a Sprite shape vertices you would need to change the shaders quite a bit. But I don't see why you can't draw onto a Canvas object in front of a Sprite using the same techniques I used above.
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

User avatar
sapnho
Posts: 244
Joined: Sun Sep 14, 2014 3:49 pm
Location: Frankfurt am Main
Contact: Website

Re: Image viewer with transition between images

Thu Mar 10, 2016 2:58 pm

It's so nice to see this thread alive. Our picture frame continues to work perfectly with the great Paddy transitions making it a pleasure to look at! ;)
www.TheDigitalPictureFrame.com - Build a really great digital picture frame with the Raspberry Pi.
With lots of great tips from this forum.
Please submit your digital picture frame project to the user gallery here: bit.ly/2WkyjW1

User avatar
paddyg
Posts: 2561
Joined: Sat Jan 28, 2012 11:57 am
Location: UK

Re: Image viewer with transition between images

Thu Mar 10, 2016 3:22 pm

And good to hear from you. By the way, I noticed yesterday that there was a 404 error on the link to your detailed instructions, have dropbox stopped it? (I could put it on pi3d github)
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

User avatar
sapnho
Posts: 244
Joined: Sun Sep 14, 2014 3:49 pm
Location: Frankfurt am Main
Contact: Website

Re: Image viewer with transition between images

Thu Mar 10, 2016 3:27 pm

Ah, I just corrected the link. Should work now. And yes, please feel free to upload it to pi3d github.
www.TheDigitalPictureFrame.com - Build a really great digital picture frame with the Raspberry Pi.
With lots of great tips from this forum.
Please submit your digital picture frame project to the user gallery here: bit.ly/2WkyjW1

sawitar
Posts: 9
Joined: Wed Mar 09, 2016 11:43 am

Re: Image viewer with transition between images

Fri Mar 11, 2016 10:51 am

I'm done trying to figure out how to do all this in GPU. It is obvious I lack basics in 3D processing knowledge and it was a struggle. Plus it was supposed to be enhancement project not complete make over :-)
I switched to PIL and had it working in less than 30 minutes with very good results (although, with not much satisfaction :-( )

Here is my process:
1. load image
2. resize image to desired foreground size
3. resize image to background width or height (depending on orientation)
4. crop background to match screen size
5. desaturate by 50%
6. draw black rectangle in place where foreground will be
7. blur whole image (radius=10)
8. paste foreground image into background (to fill blank)
9. pass it to GPU

I cycle photos every 20s and it takes about ~18s for CPU to perform all those steps on photographs I use. I modified main loop so that processing photographs do not interfere with transitions.
There is very little CPU processing power left. So I scheduled file sync time to 30 minutes before photo frame turns on screen in the morning (and on startup). And samba service is very slow indeed. I might need to extend cycle time to recuper some CPU time or fiddle with priorities.

I use GPU to:
- display images with transitions
- display clock
- display EXIF data with fade in/out effect

User avatar
paddyg
Posts: 2561
Joined: Sat Jan 28, 2012 11:57 am
Location: UK

Re: Image viewer with transition between images

Fri Mar 11, 2016 11:13 am

@saitar, you would probably find that the the cpu work was significantly (75%) reduced if you make the background image 50% of the size you want then rescale it just before pasting the foreground on top of it. Doing a blur on 10x10 matrix is quite slow so a) you would only need to do the blur on 5x5 b) you only have a quarter the number of pixels.
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

sawitar
Posts: 9
Joined: Wed Mar 09, 2016 11:43 am

Re: Image viewer with transition between images

Fri Mar 11, 2016 12:11 pm

@paddyg
Indeed, I could scale down before blurring (that is for free, as I'm already scaling background), but than I need to scale up (BILINEAR?) before pasting foreground.
I'm not sure how much time I would save by doing this and if it is worth doing?

I will time both solutions later today.

Thanks

User avatar
paddyg
Posts: 2561
Joined: Sat Jan 28, 2012 11:57 am
Location: UK

Re: Image viewer with transition between images

Fri Mar 11, 2016 1:15 pm

blur_eg.png
blur_eg.png (8.25 KiB) Viewed 3636 times
You are right, scaling up is very expensive. I've just done a timeit() and with BILINEAR and BICUBIC the time is essentially the same (with pro-rata blur radius). However with NEAREST there is a significant speed up, also the smaller the size the more blurred it is so a smaller radius can be used in blur filter. The images are pretty well indistinguishable:
no resize 2000x1000 image blur radius 10, BICUBIC, BILINEAR, NEAREST
154, 152, 146
resize to 500x250 blur radius 3 then back to 2000x1000
110, 85, 19ms on this i5 laptop
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

sawitar
Posts: 9
Joined: Wed Mar 09, 2016 11:43 am

Re: Image viewer with transition between images

Fri Mar 11, 2016 3:20 pm

Following code executes in 4.02 with my test image

Code: Select all

from PIL import Image, ImageFilter
image = Image.open('''C:/delme/test.jpg''')
resized = image.resize([1920,1080])
blured = resized.filter(ImageFilter.GaussianBlur(radius=10))
blured.save('''C:/delme/blured1.bmp''')
while this executes in 2.70

Code: Select all

timeit.timeit("from PIL import Image, ImageFilter
coeff=2
image = Image.open('''C:/delme/test.jpg''')
resized = image.resize([1920/coeff,1080/coeff])
blured = resized.filter(ImageFilter.GaussianBlur(radius=10/coeff))
resized2 = blured.resize([1920,1080],Image.BILINEAR)
resized2.save('''C:/delme/blured2.bmp''')
That is over 30% faster with no significant visual differences.

Just for curiosity here are results with different coefficients (average from 5 runs):
2 -> 2.70s
3 -> 2.58s
4 -> 2.79s
5 -> 2.83

User avatar
paddyg
Posts: 2561
Joined: Sat Jan 28, 2012 11:57 am
Location: UK

Re: Image viewer with transition between images

Fri Mar 11, 2016 7:53 pm

@jodder, I have patched the blend shaders so the line round the edges when using mipmap doesn't show. Still not sure why this happened but the fix was to discard a pixel more round the edges of the background image when blending! I have pushed the changes to github on the develop branch github.com/pi3d/pi3d_demos/archive/develop.zip

@sawitar, and it would be much faster with NEAREST, however that's not going to account for your 18s, I wonder what's taking the time? You're not, by any chance, saving the image to disk and then reading it back in again? You know you can pass an Image object (or a numpy array of suitable dimension and type) directly to pi3d.Texture.
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

sawitar
Posts: 9
Joined: Wed Mar 09, 2016 11:43 am

Re: Image viewer with transition between images

Sun Mar 13, 2016 10:04 pm

No worries. I'm not saving image to disk at any stage :-)
I just notices that sync task was running in background when I was taking measurements before. So this had to influence results. I will repeat measurement soon.

Anyway, I'm happy with the effect now.

sawitar
Posts: 9
Joined: Wed Mar 09, 2016 11:43 am

Re: Image viewer with transition between images

Sun Mar 13, 2016 10:24 pm

grrrr. I just ported my code displaying clock and I got this error when doing quick_change:

Code: Select all

Traceback (most recent call last):
  File "zFrame.py", line 228, in <module>
    time_string.quick_change(time.strftime("%H:%M:%S",time.gmtime()))
  File "/usr/local/lib/python3.4/dist-packages/pi3d/util/String.py", line 145, in quick_change
    self.buf[0]._select() #then just call glBufferData
  File "/usr/local/lib/python3.4/dist-packages/pi3d/Buffer.py", line 192, in _select
    opengles.glBindBuffer(GL_ARRAY_BUFFER, self.vbuf)
AttributeError: 'Buffer' object has no attribute 'vbuf'


Return to “General discussion”