Matplotlib

[niccanordhas]

This will support matplotlib? And embedded plot with individual controller?

[FeodorFitsner]

I'm working on the example!

What do you mean by "individual controller"?

[Eliran79]

@FeodorFitsner

I suggest to implement it as a SubClass of Image

utils.py

from matplotlib.figure import Figure
from flet import Image
from io import BytesIO
import base64
from typing import Any, Optional, Union

from flet.control import BlendMode, OptionalNumber
from flet.ref import Ref
from flet.types import (
AnimationValue,
BorderRadiusValue,
OffsetValue,
RotateValue,
ScaleValue,
)

try:
from typing import Literal
except ImportError:
from typing_extensions import Literal

ImageFit = Literal[
None, "none", "contain", "cover", "fill", "fitHeight", "fitWidth", "scaleDown"
]

ImageRepeat = Literal[None, "noRepeat", "repeat", "repeatX", "repeatY"]

class MatplotlibImage(Image):

def __init__(self, src: Figure, ref: Optional[Ref] = None, width: OptionalNumber = None, height: OptionalNumber = None, left: OptionalNumber = None, top: OptionalNumber = None, right: OptionalNumber = None, bottom: OptionalNumber = None, expand: Union[None, bool, int] = None, opacity: OptionalNumber = None, rotate: RotateValue = None, scale: ScaleValue = None, offset: OffsetValue = None, animate_opacity: AnimationValue = None, animate_size: AnimationValue = None, animate_position: AnimationValue = None, animate_rotation: AnimationValue = None, animate_scale: AnimationValue = None, animate_offset: AnimationValue = None, on_animation_end=None, tooltip: Optional[str] = None, visible: Optional[bool] = None, disabled: Optional[bool] = None, data: Any = None, src_base64: Optional[str] = None, repeat: ImageRepeat = None, fit: ImageFit = None, border_radius: BorderRadiusValue = None, color: Optional[str] = None, color_blend_mode: Optional[BlendMode] = None, gapless_playback: Optional[bool] = None, semantics_label: Optional[str] = None):
    image = BytesIO()
    src.savefig(image, format='png')
    image_64 = base64.b64encode(image.getvalue()).decode('utf-8')

    super().__init__(src=None,
                     ref=ref,
                     width=width,
                     height=height,
                     left=left,
                     top=top,
                     right=right,
                     bottom=bottom,
                     expand=expand,
                     opacity=opacity,
                     rotate=rotate,
                     scale=scale,
                     offset=offset,
                     animate_opacity=animate_opacity,
                     animate_size=animate_size,
                     animate_position=animate_position,
                     animate_rotation=animate_rotation,
                     animate_scale=animate_scale,
                     animate_offset=animate_offset,
                     on_animation_end=on_animation_end,
                     tooltip=tooltip,
                     visible=visible,
                     disabled=disabled,
                     data=data,
                     src_base64=image_64,
                     repeat=repeat,
                     fit=fit,
                     border_radius=border_radius,
                     color=color,
                     color_blend_mode=color_blend_mode,
                     gapless_playback=gapless_playback,
                     semantics_label=semantics_label)

main.py

import numpy as np

import flet
from flet import Page
from utils import MatplotlibImage

import matplotlib
matplotlib.use("Agg")
import matplotlib.pyplot as plt

def main(page: Page):

x = np.linspace(0, 10)
y1 = np.sin(x)
y2 = np.sin(2*x)

fig, axes = plt.subplots(2, 1)
axes[0].plot(x, y1)
axes[1].plot(x, y2)

page.add(MatplotlibImage(src=fig, scale=0.5))

flet.app(
target=main,
view=flet.WEB_BROWSER
# assets_dir="assets"
)