Load image from Colab server to display in Anvil client

Anvil Q&A
1

When button click on Anvil Client side display (access a *.png) from Colab server side
This should be simple but I cant solve it, probably its my lack of understanding of things.

Here are the steps I have:

  1. Anvil client
  • button to upload a dxf file on colab (working)
    def file_loader_1_change(self, file, **event_args)
  • file gets saved on server with same name no mater what the original file name is
    on the server its always saved under: “dxf_for_ezdxf.dxf” (working)
  • on client I have a image holder
    self.image_1.source
  • and I have a button
    def check_dxf_1_click(self, **event_args)

Code Sample:

from ._anvil_designer import Form1Template
from anvil import *
import anvil.server
import anvil.media
from anvil import app

class Form1(Form1Template):
    def __init__(self, **properties):
        # Set Form properties and Data Bindings.
        self.init_components(**properties)
        self.uploaded_file = None

    def file_loader_1_change(self, file, **event_args):
        """This method is called when a new file is loaded into this FileLoader"""
        file_name = file.name
        parsed_file_name = f"dxf_for_ezdxf.dxf"#self.parse_file_name(file_name)
        self.uploaded_file = file
        anvil.server.call("uplink_download", file, parsed_file_name)

    def check_dxf_1_click(self, **event_args):
        """This method is called when the button is clicked"""
        if not self.uploaded_file:
            return

        parsed_file_name = f"dxf_for_ezdxf.dxf"
        polygons, circles = anvil.server.call('get_dxf_data', f"dxf_for_ezdxf.dxf")

        # Plot the data
        fig, ax = anvil.mpl_util.create_plot(figsize=(10, 10))
        
        for polygon in polygons:
            x, y = polygon.exterior.xy
            ax.plot(x, y, color='black')
            
        for circle in circles:
            x, y = circle.boundary.xy
            ax.plot(x, y, color='green', linestyle='-', linewidth=1)

        # Set the plot as the image source
        self.image_1.source = anvil.mpl_util.plot_image(fig)
  1. Colab Server side

  • I get the dxf file and save it with same name
    “dxf_for_ezdxf.dxf”

  • I parse the dxf file to extract data and plot with matplotlib (working on server)

  • I save the plot as a *.png file with same name “dxf_for_ezdxf.png”

  • I try to use anvil.mpl_util to generate the plot for Anvil client unsuccessfull

  • I cant retrieve neither the *.png from the server

Code Sample:

@anvil.server.callable
def uplink_download(media, file_name):
    with open(file_name, 'wb') as f:
        f.write(media.get_bytes())

import anvil.mpl_util
#I cant use this library on Anvil side as I am on the free tier

@anvil.server.callable
def get_dxf_data(file):
    dxf = ezdxf.readfile(file.name)
    msp = dxf.modelspace()

    polygons = []
    circles = []

    for entity in msp:
        if entity.dxftype() == 'POLYLINE':
            polygon = shapely.geometry.Polygon([(vertex.dxf.location[0], vertex.dxf.location[1]) for vertex in entity.vertices()])
            polygons.append(polygon)
        elif entity.dxftype() == 'CIRCLE':
            center = entity.dxf.center
            radius = entity.dxf.radius
            circle = shapely.geometry.Point(center[0], center[1]).buffer(radius)
            circles.append(circle)

    return polygons, circles


@anvil.server.callable
def plot_polygons(polygons, circles):
    fig = plt.figure(figsize=(10, 10))
    ax = plt.axes()

    for polygon in polygons:
        x, y = polygon.exterior.xy
        ax.plot(x, y, color='black')

    for circle in circles:
        x, y = circle.boundary.xy
        ax.plot(x, y, color='green', linestyle='-', linewidth=1)

    # Convert the plot to a PNG image
    img = anvil.mpl_util.plot_image(fig)

    return img

@anvil.server.callable
def get_png_image():
    with open('dxf_for_ezdxf.png', 'rb') as f:
        return f.read

So, how do I retrieve a image from the server to the client when I click a button on the Anvil client side?
I really appreciate all the help I can get!
It should be a simple task but I cant manage to have it working.
PS. anvil.mpl_util - I cant use it on Anvil side as I’m on the free tier till I get the app concept working
so my option now is to retrieve the *.png image from server side directly

2

It works like this to retrieve the image *.png from Colab

Server side

import anvil.media
import os

@anvil.server.callable
def get_png_image(file_name):
    with open(file_name, 'rb') as f:
        return anvil.BlobMedia("image/png", f.read())

Client side

    # Client side code
    def check_dxf_1_click(self, **event_args):
        """This method is called when the button is clicked"""
        image_bytes = anvil.server.call('get_png_image', "dxf_for_ezdxf.png")
        self.image_1.source = image_bytes
3

Hello. Can you post the method to load a picture from anvil to a python code in colab please ? i am stuck

CLIENT SIDE
def button_1_click(self, **event_args):
self.file_loader_1.visible = False
result = anvil.server.call(‘test’,self.file_loader_1.file)

SERVER SIDE
@anvil.server.callable
def test(img):
img

return 0

BUT after even if i get the image on the server i need to put it the python code here
image = cv2.imread(path of image is place here)
i think i need to convert the image into path or something like that please help

4

Hello,
What I did was to upload a dxf file to Colab, parse it and generate an image from it and then show that image from Colab to Anvil client side “image container”.
The code posted above works for me.
I am fairly new to Python and Anvil so I cant help much with your request, look at my code and see if you can replicate for your need.
Thanks!