omz:forum

    • Register
    • Login
    • Search
    • Recent
    • Popular

    Welcome!

    This is the community forum for my apps Pythonista and Editorial.

    For individual support questions, you can also send an email. If you have a very short question or just want to say hello — I'm @olemoritz on Twitter.


    Image.UI gets color inverted if photo is PNG

    Pythonista
    2
    20
    1103
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • FuckingNerd
      FuckingNerd last edited by

      So I am working on something that involves the photo and scene modules. I take a photo from the photoalbum and display it as SpriteNode on the screen through Texture. However, I noticed that some pictures get displayed color inverted this way. I figured out that it seemed to be when the images are PNGs, JPEGs are just fine. To solve this, I could run an color inversion filter if the asset is PNG, but I would like to know where the problem comes from in the first place. Any advice ?

      cvp 1 Reply Last reply Reply Quote 0
      • cvp
        cvp @FuckingNerd last edited by

        @FuckingNerd never seen that. Just tried with a png, no problem. Possible to post your png?

        1 Reply Last reply Reply Quote 0
        • FuckingNerd
          FuckingNerd last edited by

          here is the image from my album and a screenshot from my app

          1 Reply Last reply Reply Quote 0
          • FuckingNerd
            FuckingNerd last edited by ccc

            relevant code

            def prev_image(self):
            		if self.current_album_pic_id <= 0:
            			return
            		self.current_album_pic_id -= 1
            		
            		self.canvasSprite.texture = Texture( self.get_current_image() )
            		self.rescale_canvas() 
            
            def get_current_image(self):
            		image = self.get_current_asset().get_ui_image()
            		return image
            
            cvp 1 Reply Last reply Reply Quote 0
            • cvp
              cvp @FuckingNerd last edited by

              @FuckingNerd I see it correctly, non inverted colors, but not as an asset, as a downloaded file

              1 Reply Last reply Reply Quote 0
              • FuckingNerd
                FuckingNerd last edited by FuckingNerd

                The file is fine. The display as SpriteNode is the issue. JPG gets rendered correctly PNG not. I have many other PNGs, all seem to be color inverted when displayed as a spritenode.

                cvp 1 Reply Last reply Reply Quote 0
                • cvp
                  cvp @FuckingNerd last edited by

                  @FuckingNerd Weird. I use a SpriteNode with texture = your .png, without colors inversion
                  iPadOS 15.6.1

                  1 Reply Last reply Reply Quote 0
                  • FuckingNerd
                    FuckingNerd last edited by

                    Can you change the texture with .yourSpriteNode.texture = Texture( image ) ? I suspect it might be the assignment where it happens. Not during initialization.

                    cvp 1 Reply Last reply Reply Quote 0
                    • cvp
                      cvp @FuckingNerd last edited by

                      @FuckingNerd that's what I did. I use an old script where I put your png as texture

                      from scene import *
                      import sound
                      import random
                      import math
                      
                      class MyScene (Scene):
                          def setup(self):
                              self.background_color = 'midnightblue'
                              self.ship = SpriteNode()#'spc:PlayerShip1Orange')
                              self.ship.texture = Texture('1 - 97f7tRn.png')
                              self.ship.position = self.size / 2
                              self.add_child(self.ship)
                              self.lasers=[]
                          def updatex(self):
                              x, y, z = gravity()
                              pos = self.ship.position
                              pos += (x * 15, y * 15)
                              # Don't allow the ship to move beyond the screen bounds:
                              pos.x = max(0, min(self.size.w, pos.x))
                              pos.y = max(0, min(self.size.h, pos.y))
                              self.ship.position = pos
                      
                          
                          def touch_began(self, touch):
                       
                              laser_animation=Action.repeat_forever(Action.sequence(Action.call(self.fire_laser), Action.wait(0.1) ) )
                              self.run_action(laser_animation, 'laser')
                       
                          def touch_ended(self,touch):
                                 self.remove_action('laser')
                          def remove_laser(self,laser):
                              del self.lasers[laser]
                          def fire_laser(self):
                              a=random.random()*500-250
                              laser = SpriteNode('spc:LaserBlue9', position=self.ship.position, z_position=-1, parent=self)
                              self.lasers.append(laser)
                              laser.run_action(Action.sequence(Action.move_by(a, 1000), Action.remove(), Action.call(lambda:self.remove_laser(laser))))
                              sound.play_effect('arcade:Laser_1')
                              
                      run(MyScene(), show_fps=True)
                      
                      1 Reply Last reply Reply Quote 0
                      • FuckingNerd
                        FuckingNerd last edited by

                        So the photo module as asset is the issue.

                        cvp 1 Reply Last reply Reply Quote 0
                        • cvp
                          cvp @FuckingNerd last edited by cvp

                          @FuckingNerd No idea, try to import your photo as a local Pythonista file and then use it as texture

                          1 Reply Last reply Reply Quote 0
                          • FuckingNerd
                            FuckingNerd last edited by

                            I have no idea how to access those imported files(never done it). This is not the way it seems. Can you help me out ?

                            cvp 1 Reply Last reply Reply Quote 0
                            • cvp
                              cvp @FuckingNerd last edited by

                              @FuckingNerd I think you have correctly imported some images and you can replace in my little script my 1 - 97f7tRn.png by one of your IMG_xxxx.PNG

                              1 Reply Last reply Reply Quote 0
                              • FuckingNerd
                                FuckingNerd last edited by

                                Did that. No color invert. So it’s the asset.

                                cvp 1 Reply Last reply Reply Quote 0
                                • cvp
                                  cvp @FuckingNerd last edited by

                                  @FuckingNerd I guess, sorry, I can't help more 😢

                                  1 Reply Last reply Reply Quote 0
                                  • FuckingNerd
                                    FuckingNerd last edited by

                                    Helps for the effort man!

                                    cvp 1 Reply Last reply Reply Quote 0
                                    • cvp
                                      cvp @FuckingNerd last edited by

                                      @FuckingNerd Perhaps, you could

                                      • get the asset as an ui.Image
                                      • write it as a local (temporary) file
                                      • use it as Texture
                                      • remove the local file
                                      1 Reply Last reply Reply Quote 0
                                      • FuckingNerd
                                        FuckingNerd last edited by FuckingNerd

                                        I was able to solve the problem.

                                        Instead of using asset.get_ui_image() and pass it on to SpriteNode(Texture(..ui_image..)) I got a PIL image directly with asset.get_image() and transformed it with the scripts found here to and ui image.

                                        relevant from above link:

                                        # pil <=> ui
                                        def pil2ui(imgIn):
                                        	with io.BytesIO() as bIO:
                                        		imgIn.save(bIO, 'PNG')
                                        		imgOut = ui.Image.from_data(bIO.getvalue())
                                        	del bIO
                                        	return imgOut
                                        

                                        I hope you find this useful google hero from the future. This solves “weird false inverted colors for PNG ui.image from assets in photo module”.

                                        cvp 2 Replies Last reply Reply Quote 0
                                        • cvp
                                          cvp @FuckingNerd last edited by

                                          @FuckingNerd 👍

                                          1 Reply Last reply Reply Quote 0
                                          • cvp
                                            cvp @FuckingNerd last edited by cvp

                                            @FuckingNerd you could try Asset.get_image_data which could be quicker

                                            Asset.get_image_data(original=False)
                                            Fetch the asset’s image data, and return it as a io.BytesIO object. 
                                            You can use io.BytesIO.getvalue() to get the image data as a byte string.
                                            
                                            By default, the most recent version of the image is returned; 
                                            pass original=True to get the image without any adjustments/edits.
                                            
                                            If you only need the image for saving it as a file, 
                                            this is more efficient than Asset.get_image(). 
                                            The returned io.BytesIO has an additional uti attribute 
                                            that can be used to determine the file type of the image data.
                                            
                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post
                                            Powered by NodeBB Forums | Contributors