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

Re: Image viewer with transition between images

Wed Apr 15, 2020 5:14 am

Hi Chris, glad you found the culprit!

I never use Textedit because there is always a risk that programs like this will add some special characters. I do all my editing in https://www.sublimetext.com/.
www.TheDigitalPictureFrame.com - Build a really great digital picture frame with the Raspberry Pi.
With lots of great tips from this forum.

satnerd
Posts: 10
Joined: Sun Oct 29, 2017 9:23 am

Re: Image viewer with transition between images

Tue May 12, 2020 11:15 am

Hi

I am writing a python class allowing me to retrieve weather information from openweathermap.org.
I also came across the erikflowers.github.io/weather-icons weather icons and I managed to
merge them with another font so I can display text and weather icons. In the end, I want to display weather information
on PictureFrame.py.

While using below block from PictureFrame.py, I noticed that sending a carriage return would not break lines as expected.

Code: Select all

textblock = pi3d.TextBlock(x=-DISPLAY.width * 0.5 + 50, y=-DISPLAY.height * 0.4,
                          z=0.1, rot=0.0, char_count=199,
                          text_format="{}".format(" "), size=0.99, 
                          spacing="F", space=0.02, colour=(1.0, 1.0, 1.0, 1.0))
text.add_text_block(textblock)
I then tried using pi3d.FixedString but this broke the beautiful blending implemented in /home/pi/pi3d_demos/PictureFrame.py

Proportional fonts (and particularly Thai fonts) are rendered with plenty of white space in between when using pi3d.TextBlock.

So I thought to myself, why not using
  • a: a Libreoffice template to do text formatting
  • b: substitute weather information in the template
  • c: generate a png using 'soffice --convert-to png'
  • d: and blend the png into the picture on display
Quick test shows no problem for task a...c., but I have no clue on how to best implement d.

I'd highly appreciate some code snippet for building this.

KR Beat

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

Re: Image viewer with transition between images

Tue May 12, 2020 12:43 pm

Hi, yes, carriage returns in the TextBlock/PointText system is still on the TODO list. The advantage of the TextBlock is that the characters can be moved around and changed very easily with little CPU load. Basically each character is an OpenGL point textured from a location on grid of characters- the font that you fed into PointText was basically 'just' an image filled with characters. FixedString basically is the same kind of image as the font but filled with the characters you supply it - so it ought to be capable of blending in just the same way. However there are some tricky aspects to do with blending and the sequence of drawing text and images that need to be sorted out. I will have a look at it now and get back to you.

Paddy
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

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

Re: Image viewer with transition between images

Tue May 12, 2020 1:52 pm

Hi, this seems to work OK with text fading identical to PointText system

Code: Select all

...
sbg = None # slide for foreground
if nFi == 0:
  print('No files selected!')
  exit()
######################################################
# FixedString. If SHOW_NAMES is False then this is just used for no images message
text = pi3d.FixedString(config.FONT_FILE, "place-holder", justify="L")
flatsh = pi3d.Shader("uv_flat")
text.set_shader(flatsh)
text.sprite.position(x=-DISPLAY.width * 0.5 + 50, y=-DISPLAY.height * 0.4, z=0.1)
######################################################

num_run_through = 0
while DISPLAY.loop_running():
  tm = time.time()
....
          slide.unif[49] = 0.0
          kb_up = not kb_up
      # set the file name as the description
      if config.SHOW_NAMES:
######################################################
        raw_str = "THIS IS A STRING WITH {} EMBEDDED IN IT THAT WILL BE CHOPPED UP".format(
            tidy_name(iFiles[pic_num][0])).split(" ")
        new_str = [""]
        for w in raw_str:
          if len(new_str[-1]) > 20:
            new_str.append("")
          new_str[-1] = new_str[-1] + w + " "
        text = pi3d.FixedString(config.FONT_FILE, "\n".join(new_str), justify="L")
        text.set_shader(flatsh)
        text.sprite.position(x=-DISPLAY.width * 0.2, y=-DISPLAY.height * 0.3, z=0.1)
######################################################
    if config.KENBURNS:
      t_factor = nexttm - tm
...
    if a < 1.0: # transition is happening
      a += delta_alpha
      slide.unif[44] = a
      if config.SHOW_NAMES:
######################################################
        text.sprite.set_alpha(1.0 - abs(1.0 - 2.0 * a))
######################################################
    else: # no transition effect safe to resuffle etc
...
  else:
######################################################
    pass
######################################################

  text.draw()
I'm in the process of moving the great list of alternatives into a config (that also allows you to specify options on the command line) so that's why there are occasional config.Xs - basically they're the same as the present const variables.

Let me know if this does what you want, or if I've misunderstood the problem.

Paddy
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

satnerd
Posts: 10
Joined: Sun Oct 29, 2017 9:23 am

Re: Image viewer with transition between images

Tue May 12, 2020 4:35 pm

Hi Paddy

Thanks for the swift reply. Much appreciated.
I'd rather know how to blend in a transparent png. Seems more flexible. (Single characters can change color, different font size)

Beat

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

Re: Image viewer with transition between images

Tue May 12, 2020 5:30 pm

Well in many ways blending an image file is easier. You need to apply it as a texture to a Plane (with the same dimensions as the image), set the z location in front of the slide, use the uv_flat shader, set Texture.blend = True and draw() after drawing slide. Approximately like

Code: Select all

...
libre = pi3d.Textures("myfile.png", blend=True)
plane = pi3d.Plane(w=libre.ix, h=libre.iy, z=0.1) #NB x,y both default zero puts it in the middle of the screen
plane.set_draw_details(flatsh, [libre])
    ...
    plane.set_alpha(1.0 - abs(1.0 - 2.0 * a)) #or whatever behaviour you want
    ...
    plane.draw()
If the images you use to make the Texture don't change then it doesn't really matter where they come from, but if you need to generate text dynamically, Texture can be 'fed' a PIL Image or a numpy array. Either of those two gives you a great deal of flexibility - for instance the PIL.ImageDraw functionality allows you to draw whatever characters you want in whatever colour at whatever location. Which is what pi3d.FixedString uses.

Let me know if you have any problems

Paddy
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

satnerd
Posts: 10
Joined: Sun Oct 29, 2017 9:23 am

Re: Image viewer with transition between images

Fri May 22, 2020 12:00 pm

Hi Paddy

For long texts, it would be nice to display a subset of the string as horizontally scrolling text.
I implemented scrolling text using pi3d.TextBlock. I just update the text object with a varying substring.
The resulting scrolling is very jerky.
In ~/pi3d_demos/StringMulti.py is an example a «moving string/string moving».
It’s close to what I want. But I don’t know how to make parts of a character appear and disappear.
Is this possible?

Then there is another problem:
In Thai, some characters take no space, for example the character " ั" is always on top of other characters.
When I render text using pi3d.TextBlock with such characters, the result looks "ว ัน" but should look "วัน".
Is this a PIL problem? I updated to PIL 7.1.2, but still the same.

KR Beat

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

Re: Image viewer with transition between images

Fri May 22, 2020 5:06 pm

Hi, If you implemented your earlier idea of using a png file with the text on it then you can make a rectangular mask effect by changing the UV values on the plane you use to display the text. Here is a cut-down version to give you an indication what to do.

Code: Select all

import pi3d

SCALE_FACTOR = 2.0 # this will make it half as big

disp = pi3d.Display.create(w=960,h=600, frames_per_second=20)
cam = pi3d.Camera(is_3d=False)
shader = pi3d.Shader("uv_flat")

backg = pi3d.Plane(w=disp.width, h=disp.height, z=5.0)
backtex = pi3d.Texture("textures/pi3d_splash.jpg")
backg.set_draw_details(shader, [backtex])

plane = pi3d.Plane(w=200, h=100, z=4.0)
libre = pi3d.Texture("textures/atlas01.png")
(xfact, yfact) = (SCALE_FACTOR * plane.width / libre.ix, 
                  SCALE_FACTOR * plane.height / libre.iy)
plane.set_draw_details(shader, [libre], umult=xfact, vmult=yfact)

offset = [0.1, 0.1]
kbd = pi3d.Keyboard()
while disp.loop_running():
    backg.draw()
    plane.set_offset(offset)
    plane.draw()
    offset[0] += 0.01
    offset[1] += 0.00872 # non-round number!
    if kbd.read() == 27:
        kbd.close()
        disp.destroy()
        break
If something doesn't make sense or you get stuck, don't hesitate to ask.

PS I will check out the issue with character spacing in languages like Thai. It might be a assumption in pi3d, thanks for pointing it out.
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

satnerd
Posts: 10
Joined: Sun Oct 29, 2017 9:23 am

Re: Image viewer with transition between images

Sat May 23, 2020 5:50 am

Hi Paddy

On the Thai spacing:
there is a good article in https://stackoverflow.com/a/30105788 explaining on how to tackle the spacing.
I had to use regexp to get the character based scrolling working properly. (But jerky)

Yeah, I implemented the PNG rendering. It is a fairly straight forward way well suited for layouts using
different font sizes, alignments and the like. Problem is, the rendering, cropping and adding transparency
to the PNG takes a few seconds per image. If I start generating PNG for all text elements, I probably need to
do all this stuff in a separate thread to prevent the picture on display showing much longer than average.
I retrieve weather information every 30 minutes.

I am currently looking into the pi3d.TextBlock/pi3d.PointText implementation which is offering a rich set
of functionality. Would it not possible to use «moving string/string moving» from StringMulti.py with an
additional layer mask on top of the string?

Beat

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

Re: Image viewer with transition between images

Sat May 23, 2020 7:11 am

OK. There are three ways to achieve that (probably more). 1 blend mode where you would draw the text and mask before the main image and probably not get nice edges. 2 stencil mask 3 tweak the shader. The latter two are further into the workings of OpenGL than most of pi3d but not so tricky. I will post some ideas later.

Paddy

EDIT: using the stencil is probably the easiest. Like this, i.e. enable just before drawing the text and disable after.

Code: Select all

import pi3d
from pi3d import opengles
from pi3d.constants import GL_SCISSOR_TEST, GLint, GLsizei

disp = pi3d.Display.create(w=960,h=600, frames_per_second=20)
cam = pi3d.Camera(is_3d=False)
shader = pi3d.Shader("uv_flat")

backg = pi3d.Plane(w=disp.width, h=disp.height, z=5.0)
backtex = pi3d.Texture("textures/pi3d_splash.jpg")
backg.set_draw_details(shader, [backtex])

plane = pi3d.Plane(w=400, h=400, z=4.0)
libre = pi3d.Texture("textures/atlas01.png")
plane.set_draw_details(shader, [libre])

opengles.glScissor(GLint(400), GLint(300),  GLsizei(100), GLsizei(100))

(x, y, z) = (0.0, 0.0, 4.0)
kbd = pi3d.Keyboard()
while disp.loop_running():
    backg.draw()
    opengles.glEnable(GL_SCISSOR_TEST)
    plane.draw()
    opengles.glDisable(GL_SCISSOR_TEST)
    x -= 4 if x > -200 else -400
    y -= 1.231 if y > -100 else -200
    plane.position(x, y, z)
    if kbd.read() == 27:
        kbd.close()
        disp.destroy()
        break
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

satnerd
Posts: 10
Joined: Sun Oct 29, 2017 9:23 am

Re: Image viewer with transition between images

Fri Jun 05, 2020 1:33 pm

Hi Paddy

meanwhile I managed to get the .PNG based scrolling to work.
Now, I noticed that the function tex_load in PictureFrame.py takes quite some time
to load the pi3d.Texture: It takes 0.2s for a 100k picture, but whopping 4s for 3Mb.
The effect on the scrolling items: The scrolling grinds to a halt.

How would you implement some sort of prefetching on the next file? There is ample of time
for this, as the pictures are shown for like 5s each. I have no good grasp on the concepts
used with the DISPLAY.loop_running(). And it probably takes threads, too...

KR Beat

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

Re: Image viewer with transition between images

Fri Jun 05, 2020 2:32 pm

Hi, With the slide image loading I check if the variable a (for alpha but it's actually a uniform parameter passed to the shader) is less than 1 https://github.com/pi3d/pi3d_demos/blob ... me.py#L332 and prevent any file loading while the transition is taking place. If you do the image loading and Texture creation in the else block.

On threads: the GPU calls (to libopenGLESv2.so) have to happen on the main thread the program (python) started. Other jobs can happen on other threads but they're not real threads and mainly serve the function of making the code easier to read and write, they are a way of providing async functions rather than using multiple processors, (some modules (such as numpy) do use multiple pthreads and are pretty efficient). OS jobs such as reading or writing streams will be highly optimised and will go as fast as the Raspberry Pi hardware can manage - they almost certainly use a different process and run on a different processor, but if the file reading and Texture creation blocks the main loop then this will cause the frame rate to fluctuate or freeze. So you could do the file reading and some of the Texture creation in a python thread and that wouldn't slow the frame rate down much, but the final GPU work would happen on the main thread and you would probably notice that. TLDR; load Textures while no transition is taking place

Paddy

PS there is quite a major revision called PictureFrame2020 with the latest version of pi3d (v2.37) Probably little of the core has changed but there are a couple of tweaks in MQTT functionality and all the const values have been moved out into a config file that allows modification by passing command line arguments. If you've done lots of modifications you might not want to swap!
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

satnerd
Posts: 10
Joined: Sun Oct 29, 2017 9:23 am

Re: Image viewer with transition between images

Fri Jun 05, 2020 2:59 pm

Hi Paddy

as always: thanks :)
PictureFrame2020.py w/ argparse looks versatile. Makes it much easier to try out different options an see their effect.
Should not be too much work to merge with my changes.

I am also thinking to write a cgi script to facilitate changing PIC_DIR, e.g. from a list of favorite directories.
I played with MQTT and Home Assistant, but I am not satisfied with the convenience.

Beat

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

Re: Image viewer with transition between images

Fri Jun 05, 2020 3:21 pm

Hi Beat, while Paddy was busy updating PictureFrame2020, I updated all the tutorials for building digital picture frames: https://www.thedigitalpictureframe.com/?s=pi3d

If you want to change subdirectories you can use PiHelper (https://www.thedigitalpictureframe.com/ ... ure-frame/) or DashMQTT (https://www.thedigitalpictureframe.com/ ... oto-frame/) depending on your mobile platform.

It's summarized here: https://www.thedigitalpictureframe.com/ ... -or-voice/

No need for Home Assistant, all you need it to send the MQTT messages directly.
www.TheDigitalPictureFrame.com - Build a really great digital picture frame with the Raspberry Pi.
With lots of great tips from this forum.

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

Re: Image viewer with transition between images

Fri Jun 05, 2020 3:25 pm

And all the current options of Pi3D are summarized here: https://www.thedigitalpictureframe.com/ ... ry-config/

Thanks, Paddy, for a great update of Pi3D!
www.TheDigitalPictureFrame.com - Build a really great digital picture frame with the Raspberry Pi.
With lots of great tips from this forum.

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

Re: Image viewer with transition between images

Fri Jun 05, 2020 3:27 pm

Beat, Allowing web access to change things is very easy to do in python (almost just a line or two of code (plus HTML and javascript if you want it to look nice)) and it obviously doesn't need any kind of performance... but there would be security issues if you wanted to access it from outside the local network. Using MQTT is quite handy if you have a more IOThings you want to control as well.

Paddy
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

gnic
Posts: 1
Joined: Tue Jan 05, 2021 9:29 pm

Re: Image viewer with transition between images

Tue Jan 05, 2021 10:20 pm

Not sure if anyone is reviewing this forum anymore, but figured I'd post anyway and see what happens...

Installed Pi3d today for use as a picture frame with the PictureFrame2020.py program.

AMAZING STUFF !!!!

Reviewing the config file, it's not clear to me how to DISABLE displaying the photo's file name, along with the image. So far, I've tried changing the display time to 0.0 seconds and when that didn't work, I changed the text size to zero, which appears to have done the job...

Is this the proper way to shut off the text ?

Next steps to connect a motion detector to the PI, take TV out of standby via HDMI command and run the slideshow as long as someone is present...

Thanks !

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

Re: Image viewer with transition between images

Wed Jan 06, 2021 11:27 am

TLDR; ... "--show_text", default="", ...

Hi, Yes this forum still sends me emails when anyone posts something on this thread! The value of config.SHOW_TEXT controls what text gets show see here and that gets set in config.py by looking at the string entered in --show_text see here

Wolfgang probably has something on his blog explaining how to add in a movement detector - that sounds like a very good idea. Post something if you get stuck. Or just when you get it working so the rest of us can benefit!

There are a few 'improvements' pending on the develop branch but the whole program really needs a major restructuring which will probably happen over the next few weeks.

Paddy
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

User avatar
jgodfrey
Posts: 10
Joined: Wed Jan 13, 2021 10:21 pm
Location: MO, USA

Re: Image viewer with transition between images

Wed Jan 13, 2021 10:51 pm

I've recently started playing with a Pi4-based photo frame using Pi3D and the PictureFrame2020.py demo. I've been hacking on the script and have run into something I have a question about.

For the text overlay, I'm not really fond of the "gray bar" that's laid behind the text to ensure its visibility. After some research, I've found a "scrim-based" solution to be more to my liking (described at: https://uxdesign.cc/techniques-to-displ ... 89de1cc8bc). Essentially, that just puts a transparent gradient behind the text. The gradient is a black rectangle that starts at about 50% transparency at the bottom of the screen and transitions to 100% transparency at about 40% up the height of the image. The "center" of the transparency range is hedged a bit towards the bottom, but that's not important. The result (in theory) is a nearly imperceptible darkening of the bottom edge of the image, which is enough to make white text easily visible in nearly any situation, with no need for a clunky, forced background.

To do that, I created an appropriate transparency PNG image and loaded it like this:

Code: Select all

scrim_tex = pi3d.Texture("/home/pi/pi3d_demos/scrim.png", blend=True, m_repeat=False,
            automatic_resize=config.AUTO_RESIZE, free_after_load=True)
scrim_plane = pi3d.Plane(w=scrim_tex.ix, h=scrim_tex.iy, z=3)
scrim_plane.set_draw_details(flatsh, [scrim_tex])
.
.
scrim_plane.draw()
Generally, that works as intended, but I could visibly see a hard line where the transparency ended (40% up the image) - even though it was technically a smooth gradient to 100% transparency. After some poking around, I found this in the pi3d FAQ on blending:
If blend is True then pixels with alpha < 0.05 are discarded if blend is False then pixels with alpha < 0.6 are discarded
Checking where my "hard line" was visible, I could tell that it was very near what should have been the 95% transparency (so, the 0.05 mentioned above).

Poking around in the pi3d source, I found 2 references in Buffer.py like the following:

Code: Select all

self.unib[2] = 0.05
Changing both to 0.01, I noticed a remarkable difference, with a much-less perceptible break at the edge of my transparency. Though, I could still see it, so I dropped it further to 0.005. With that, I have nicely visible text with no "forced" background, and no visible break at the edge of my transparency.

So, I like the results, but now wonder why the cut-off value was so high to begin with? As I'm wholly unfamiliar with the inner-workings of pi3d, I have no idea if my change will cause other issues (performance or otherwise).

Any input or advice appreciated.

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

Re: Image viewer with transition between images

Thu Jan 14, 2021 5:53 pm

TLDR; good idea. I will implement that.

Hi, off the cuff the only thing I can see happening is where a texture with transparency is drawn before and in front of something. It's hard to avoid that where there are complicated shapes such as the forest in the demos. But the difference is small between 0.05 and 0.005 so though the difference is perceivable occasionally those can probably be regarded as edge cases.

The value is essentially used to decide whether a "fragment" being rendered should be discarded, which means there is nothing entered in the depth buffer so something rendered behind it will still be seen - even if rendered later. On the basis of normal RGBA textures (i.e. in png) the smallest value of alpha is bit value 0b00000001 or 0.00392 (assuming 0b11111111 represents 1.0) so that would make a reasonable cut-off.

There are potential further complications but I think they won't matter: 1. It's possible to apply an additional alpha value to a Shape so that would produce smaller float values that the simple conversion of uint8 2. the ability of GLSL to define floats as highp, mediump, lowp and some GPUs (Mali) that have been used with pi3d don't support highp (can't remember if they support medium) but I think lowp is fixed with 1/256 precision. So just in case the cut-off value gets rounded down I could change the standard shaders to

Code: Select all

if (texc.a <= unib[0][2]) discard;
and the lines in Buffer to

Code: Select all

  self.unib[2] = 0.0035
Finally your idea with the scrim plane sound interesting. You could generate the texture within the program by a simple formula as a numpy array as pi3d.Texture can accept that as input. The texture also only needs to be one pixel wide, though I don't suppose it will be using too much memory. I will post the code later.

Thanks again for your input.

Paddy
Last edited by paddyg on Thu Jan 14, 2021 7:50 pm, edited 1 time in total.
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

User avatar
jgodfrey
Posts: 10
Joined: Wed Jan 13, 2021 10:21 pm
Location: MO, USA

Re: Image viewer with transition between images

Thu Jan 14, 2021 6:14 pm

Thanks for the fast and very informative reply @paddyg - I really appreciate the input.

Bottom line, it sounds like I can get away with my Buffer.py adjustments, and maybe even lower the value a little more. Incidentally, that'd be nice as I can still (barely) see the edge of the gradient on certain images, even when using a value of 0.005 - although that could be a function the monitor I'm displaying my experiments on ATM...

Regarding the creation of the scrim image. I assumed there was a way to "create" it quickly and cheaply, but I didn't figure it out in a cursory look around the 'net and decided I could start testing using a pre-created image. I'd definitely prefer to simply create the transparent scrim overlay "on the fly" and may look into doing that soon. I look forward to any code snippets you're able to post.

On a slightly different note, do you (potentially) accept contributions to the PictureFrame2020.py script? I've been doing lots of experiments recently and have made a number of changes along the way - including a few bug fixes, some general clean up, MQTT enhancements, etc... Really, I just have a big experimental mess ATM, but could clean-up / wrap-up some specific enhancements for your review (perhaps as a standard pull request?) if there's any interest.

Anyway, thanks again for the input and the great work on pi3d and the pictureframe script.

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

Re: Image viewer with transition between images

Thu Jan 14, 2021 6:43 pm

@jgodfrey, That scrim system is amazing. It really is almost impossible to see. I think I will convert the standard system as per this

Code: Select all

"""
back_shader = pi3d.Shader("mat_flat")
text_bkg = pi3d.Sprite(w=DISPLAY.width, h=90, y=-DISPLAY.height * 0.4 - 20, z=4.0)
text_bkg.set_shader(back_shader)
text_bkg.set_material((0, 0, 0))
"""
import numpy as np # this should really be at the top with other imports
bkg_ht = DISPLAY.height // 2
text_bkg_array = np.zeros((bkg_ht, 1, 4), dtype=np.uint8)
text_bkg_array[:,:,3] = np.linspace(0, 255, bkg_ht).reshape(-1, 1)
text_bkg_tex = pi3d.Texture(text_bkg_array, blend=True, free_after_load=True)
text_bkg = pi3d.Plane(w=DISPLAY.width, h=bkg_ht, y=-(bkg_ht // 2), z=4.0)
back_shader = pi3d.Shader("uv_flat")
text_bkg.set_draw_details(back_shader, [text_bkg_tex])
Also I've updated pi3d develop branch
Paddy

PS seems better using linspace(1, 255... rather than 127 i.e full alpha rather than 50% right at the bottom. Bit surprising but the whole perception thing is quite odd.
PPS also should start at zero not one. Changed in the code abvoe
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

User avatar
jgodfrey
Posts: 10
Joined: Wed Jan 13, 2021 10:21 pm
Location: MO, USA

Re: Image viewer with transition between images

Thu Jan 14, 2021 8:11 pm

Thanks for the update @paddyg and I'm happy that you like the scrim idea... Also, thanks for the pi3d core updates and the sample numpy scrim-transparency creation code. I'll replace my static image with something similar.

User avatar
jgodfrey
Posts: 10
Joined: Wed Jan 13, 2021 10:21 pm
Location: MO, USA

Re: Image viewer with transition between images

Thu Jan 14, 2021 11:35 pm

@paddyg - I've replaced my static scrim image with your auto-generated one, which is a big win so thanks for that. I've also made a few adjustments to my text (made it smaller, lower on the screen, and centered). With those changes, I've found I like a shorter scrim panel, so I made mine only 25% the height of the screen. Though, in doing so, I realized that the "y" value calculated in the scrim's Plane constructor doesn't work with other scrim heights. With that in mind, I made a minor change to the math (from your originally posted code above) that allows it to work with varying scrim heights. So, this..

Code: Select all

bkg_ht = DISPLAY.height // 4
.
.
text_bkg = pi3d.Plane(w=DISPLAY.width, h=bkg_ht, y=-DISPLAY.height // 2 + bkg_ht // 2, z=4.0)

User avatar
jgodfrey
Posts: 10
Joined: Wed Jan 13, 2021 10:21 pm
Location: MO, USA

Re: Image viewer with transition between images

Fri Jan 15, 2021 6:26 pm

PS seems better using linspace(1, 255... rather than 127 i.e full alpha rather than 50% right at the bottom.
Regarding the above, I agree that 255 looks reasonable with the numpy-based scrim - although I don't understand why. That should be solid black at the bottom edge and only be 50% transparent at 25% up the image. If I create a similar transparency gradient in a photo app and overlay an image, it's *much* too dark - which is why I settled on 40-50% transparency at the bottom. Is there some other blend-mode at work in pi3d that makes the resulting blend much lighter than I see elsewhere?

Return to “General discussion”