Load an animated gif from http Webserver and show it scaled

[kami]

Hi,

i would like to load an animated gif from a http webserver and show it in a webview or imageview, but always without changing the aspect ratio and with the scale fit to the view. Is this possible and how could i do it on the shortest way. The pyui with a webview or imageview exists and is loaded so i just have to add the gif.

BR kami

[cvp]

@kami try this

import ui
import io
from PIL import Image

class GifImageView(ui.View):
    def __init__(self,gif_file):
        self.ImageView = ui.ImageView(flex='wh')
        self.add_subview(self.ImageView)
        self.pil = Image.open(gif_file)
        wi,hi = self.pil.size
        self.frame = (0,0,wi,hi)
        self.ImageView.frame = self.frame
        # In a GIF file, each frame has its own duration
        #   delay before next frame
        self.update_interval = self.pil.info['duration']/1000
        self.frame_id = 0
    def pil2ui(self,imgIn):
        with io.BytesIO() as bIO:
            imgIn.save(bIO, 'PNG')
            imgOut = ui.Image.from_data(bIO.getvalue())
        del bIO
        return imgOut
    def update(self):
        # Display individual frames from the loaded animated GIF file
        self.pil.seek(self.frame_id)
        self.ImageView.image = self.pil2ui(self.pil)
        self.ImageView.content_mode = ui.CONTENT_SCALE_ASPECT_FIT
        self.frame_id = self.frame_id + 1
        if self.frame_id >= self.pil.n_frames:
            self.frame_id = 0
        # In a GIF file, each frame has its own duration
        #   delay before next frame
        self.update_interval = self.pil.info['duration']/1000

if __name__ == '__main__':
    v = ui.View()
    v.background_color = 'white'
    gif = 'test.gif'
    g = GifImageView(gif)
    v.add_subview(g)
    v.frame = g.frame
    v.present('sheet')

[kami]

@cvp Hi, thanks a lot. Can this open an URL?

BR kami

[cvp]

@kami Not so, but I thought that you had first downloaded your gif. Not true?

Anyway, in an ui.WebView you can download an url, like

import ui

url = 'http://bestanimations.com/Animals/Mammals/Horses/horse-walking-animated-gif1.gif'

wv = ui.WebView()
wv.load_url(url)
wv.present('sheet')

[kami]

@cvp Hi,

first of all Thanks a lot. I tested your example and it works but the image is always to big and not scaled to the size of my Iphone display.

Maybe you can fix it.

BR kami

[kami]

@vivek101

Hi, i tested you script also but if i use my https Webserver i cant get an image. The error is:

cannot identify image file <_io.BytesIO at 0...

Is it a HTTPS problem?

BR kami

[cvp]

@kami said

the image is always to big and not scaled to the size of my Iphone display.

Maybe you can fix it.

If you want that your gif is always scaled to maximum size of your iDevice, modify the script with

        #wi,hi = self.pil.size
        wi,hi = ui.get_screen_size()
        self.frame = (0,0,wi,hi)
        self.ImageView.frame = self.frame
        self.ImageView.content_mode = ui.CONTENT_SCALE_ASPECT_FIT

But, so, even a small gif will fill your screen. Is that what you want?

And this @vivek101 modified script does work, but it does not display an animated gif

import requests
import os
from PIL import Image
import ui

# load the image from the web server
url = 'http://bestanimations.com/Animals/Mammals/Horses/horse-walking-animated-gif1.gif'

gif_file = url.split('/')[-1]
data = requests.get(url).content
with open(gif_file, 'wb') as out_file:
	out_file.write(requests.get(url).content)


# create a PIL Image object from the file
image = Image.open(gif_file)
os.remove(gif_file)

# resize the image to fit the view
view_width = 300
view_height = 300
aspect_ratio = image.width / image.height
if aspect_ratio > 1:
    # landscape orientation
    new_height = int(view_width / aspect_ratio)
    image = image.resize((view_width, new_height))
else:
    # portrait or square orientation
    new_width = int(view_height * aspect_ratio)
    image = image.resize((new_width, view_height))

# create an image view and display the image
iv = ui.ImageView()
iv.frame = (0, 0, view_width, view_height)
iv.image = ui.Image.from_data(data)
iv.content_mode = ui.CONTENT_SCALE_ASPECT_FIT
iv.flex = 'WH'
iv.present()

[kami]

@cvp Hi, thanks a lot. I will try an implement it in my python app.

BR kami

[kami]

@cvp

Hi, just another question. I am loading a UI-Script in a nav-view with push. There is only a webview in the ui-View. But it is always a little bit to big for thr screen. So i can scroll in the webview. How can i reduce the width and height of the webview.

This doesn't work. It is always bigger then 100px :

        nav.push_view(pushed_solveimg)
        
        
        pushed_solveimg.width = 100
        pushed_solveimg.height = 100
        pushed_solveimg['webview1'].scales_page_to_fit = True
        pushed_solveimg['webview1'].x = 0
        pushed_solveimg['webview1'].y = 0
        pushed_solveimg['webview1'].width = 100
        pushed_solveimg['webview1'].height = 100

BR kami

[cvp]

@kami sorry, I don't understand, this works

import ui

v = ui.View()

webview1 = ui.WebView(name='webview1')
v.add_subview(webview1)

v.width = 300
v.height = 300
#uv['webview1'].scales_page_to_fit = True
v['webview1'].x = 0
v['webview1'].y = 0
v['webview1'].width = 300
v['webview1'].height = 300
webview1.load_url('https://www.google.com')

nav = ui.NavigationView(v)

nav.push_view(v)
nav.present()

[kami]

@cvp Hi,

thanks a lot. After some testing i found the problem. I have to use another HTML-code for the Website to show my image. It was not a problem of the webview but of the HTML-Site

BR kami

[cvp]

@kami 👍