Py.Cafe

import solara
import numpy as np
import matplotlib.pyplot as plt
from pathlib import Path

@solara.component
def Logo():
    image_url = "https://flocode.b-cdn.net/Branding/Image_server/header_logo_dark.png"
    return solara.Image(
        image=image_url,
        width="130px",  # This will maintain the aspect ratio
        classes=["logo"]  # You can add custom CSS classes if needed
    )

@solara.component
def BeamCalculator():
    length, set_length = solara.use_state(12.0)
    point_load, set_point_load = solara.use_state(5.0)
    point_load_location, set_point_load_location = solara.use_state(6.0)
    udl_start, set_udl_start = solara.use_state(2.0)
    udl_end, set_udl_end = solara.use_state(10.0)
    udl_magnitude, set_udl_magnitude = solara.use_state(3.0)

    def calculate_bending_moment(x):
        moments = np.zeros_like(x)
        L = length
        a = point_load_location
        P = point_load
        w = udl_magnitude
        start = udl_start
        end = udl_end

        # Point Load Bending Moment Calculation
        for i, xi in enumerate(x):
            if xi <= a:
                moments[i] += P * xi * (L - a) / L
            else:
                moments[i] += P * a * (L - xi) / L

        # UDL Bending Moment Calculation
        for i, xi in enumerate(x):
            if xi < start:
                # Before UDL starts
                R1 = w * (end - start) * (L - (start + end) / 2) / L
                moments[i] += R1 * xi
            elif start <= xi <= end:
                # Within UDL
                R1 = w * (end - start) * (L - (start + end) / 2) / L
                moments[i] += R1 * xi - w * (xi - start)**2 / 2
            else:
                # After UDL ends
                R1 = w * (end - start) * (L - (start + end) / 2) / L
                R2 = w * (end - start) - R1
                moments[i] += R1 * xi - w * (end - start) * (xi - (start + end) / 2)

        return -moments  # Negate to show moments below the beam

    def calculate_shear_force(x):
        shear = np.zeros_like(x)
        L = length
        a = point_load_location
        P = point_load
        w = udl_magnitude
        start = udl_start
        end = udl_end

        # Point Load Shear Force Calculation
        R1 = P * (L - a) / L
        for i, xi in enumerate(x):
            if xi < a:
                shear[i] += R1
            elif xi > a:
                shear[i] += R1 - P

        # UDL Shear Force Calculation
        R1_udl = w * (end - start) * (L - (start + end) / 2) / L
        for i, xi in enumerate(x):
            if xi < start:
                shear[i] += R1_udl
            elif start <= xi <= end:
                shear[i] += R1_udl - w * (xi - start)
            else:
                shear[i] += R1_udl - w * (end - start)

        return shear

    def plot_load_diagram():
        fig, ax = plt.subplots(figsize=(10, 2))
        ax.set_xlim(0, length)
        ax.set_ylim(-2, 2)
        ax.set_yticks([])
        ax.set_title("Load Diagram")
        ax.set_xlabel("Distance along beam (m)")

        # Plot beam
        ax.plot([0, length], [0, 0], color='black', linewidth=2)

        # Plot point load
        if point_load != 0:
            arrow_direction = -1 if point_load > 0 else 1
            ax.arrow(point_load_location, 0, 0, arrow_direction, head_width=0.3, head_length=0.3, fc='red', ec='red')
            ax.text(point_load_location, arrow_direction * 1.7, f'{point_load} kN', color='red', ha='center')

        # Plot UDL
        if udl_magnitude != 0:
            ax.plot([udl_start, udl_end], [0.5, 0.5], color='blue', linewidth=10, alpha=0.3)
            ax.text((udl_start + udl_end) / 2, 1, f'{udl_magnitude} kN/m', color='blue', ha='center')

        # Legend
        handles = [
            plt.Line2D([0], [0], color='red', lw=2, label='Point Load'),
            plt.Line2D([0], [0], color='blue', lw=2, alpha=0.3, label='Uniform Distributed Load')
        ]
        ax.legend(handles=handles)

        return fig

    def plot_bending_moment():
        x = np.linspace(0, length, 100)
        y = calculate_bending_moment(x)

        fig, ax = plt.subplots(figsize=(10, 6))
        ax.plot(x, y, label="Bending Moment", color='green')
        ax.fill_between(x, y, 0, alpha=0.3, color='green')  # Add shading
        ax.set_title("Beam Bending Moment Diagram")
        ax.set_xlabel("Distance along beam (m)")
        ax.set_ylabel("Bending Moment (kNm)")
        ax.grid(True)
        ax.set_xlim(0, length)
        ax.set_ylim(min(y.min() * 1.1, 0), max(0, y.max() * 1.1))
        ax.legend()
        return fig

    def plot_shear_force():
        x = np.linspace(0, length, 100)
        y = calculate_shear_force(x)

        fig, ax = plt.subplots(figsize=(10, 6))
        ax.plot(x, y, label="Shear Force", color='red')
        ax.fill_between(x, y, 0, alpha=0.3, color='red')  # Add shading
        ax.set_title("Beam Shear Force Diagram")
        ax.set_xlabel("Distance along beam (m)")
        ax.set_ylabel("Shear Force (kN)")
        ax.grid(True)
        ax.set_xlim(0, length)
        ax.set_ylim(min(y.min() * 1.1, 0), max(y.max() * 1.1, 0))
        ax.legend()
        return fig

    x = np.linspace(0, length, 100)
    max_moment = np.max(np.abs(calculate_bending_moment(x)))
    max_shear = np.max(np.abs(calculate_shear_force(x)))

    return solara.Column(children=[
        solara.Row(children=[Logo()], justify="start"),
        solara.Card(children=[
            solara.Markdown("""
                # Engineering Dashboard Example in Solara ☀
                ## Beam Bending Moment and Shear Force Calculator 
                This application calculates the bending moment and shear force diagrams for a simply supported beam with specified point load and uniform distributed load (UDL). 
                You can adjust the beam length, point load magnitude and location, and UDL start, end, and magnitude using the controls.
                
                This simple example is part of an engineering dashboard tutorial. To learn more, check out this [introductory article to engineering dashboards](https://open.substack.com/pub/flocode/p/engineering-dashboards-01-solara?r=tbs50&utm_campaign=post&utm_medium=web) from the [Flocode Newsletter](https://flocode.substack.com).
                
                Everything you need to build something like this is available through the docs on [solara.dev]()
            """)
        ]),
        solara.Columns([4, 8], children=[
            solara.Column(children=[
                solara.Card(children=[
                    solara.Markdown("## Controls"),
                    solara.SliderFloat("Beam Length (m)", value=length, min=1, max=20, step=0.1, on_value=set_length),
                    solara.InputFloat("Point Load (kN)", value=point_load, on_value=set_point_load),
                    solara.InputFloat("Point Load Location (m)", value=point_load_location, on_value=set_point_load_location),
                    solara.InputFloat("UDL Start (m)", value=udl_start, on_value=set_udl_start),
                    solara.InputFloat("UDL End (m)", value=udl_end, on_value=set_udl_end),
                    solara.InputFloat("UDL Magnitude (kN/m)", value=udl_magnitude, on_value=set_udl_magnitude),
                ]),
            ]),
            solara.Column(children=[
                solara.Card(children=[
                    solara.Markdown("### Load Diagram"),
                    solara.FigureMatplotlib(plot_load_diagram())
                ]),
                solara.Info(f"Maximum Bending Moment: {max_moment:.2f} kNm"),
                solara.Info(f"Maximum Shear Force: {max_shear:.2f} kN"),
                
                solara.Card(children=[
                    solara.Markdown("### Bending Moment Diagram"),
                    solara.FigureMatplotlib(plot_bending_moment())
                ]),
                solara.Card(children=[
                    solara.Markdown("### Shear Force Diagram"),
                    solara.FigureMatplotlib(plot_shear_force())
                ]),
            ])
        ])
    ], style={"padding": "30px"})

@solara.component
def Page():
    return solara.Column(children=[
        BeamCalculator()
    ])

@solara.component
def Layout(children):
    return children[0]

solara.lab.theme.dark = True

solara.render(Page())