Dash Grocery Components 🎇

Hi Community,

I just released a Dash component that wraps some interesting React components. This package currently includes lazy loading, particles, QR codes and weather components. Welcome to try it out, send issues and PRs.

Installation:

pip install dash-grocery

LazyLoad:

import dash_grocery
from dash import html, dcc, Dash
import plotly.express as px

df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species")

app = Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
            [
                dash_grocery.LazyLoad(
                    html.Img(
                        src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/cat-eyes-cute.jpg",
                        height=300,
                    ),
                    throttle=200,
                    height=300,
                ),
                dash_grocery.LazyLoad(dcc.Graph(figure=fig), throttle=200, height=300),
            ]
        )
        for i in range(10)
    ],
)


if __name__ == "__main__":
    app.run_server(debug=True)

dash-3

Particles:

import dash_grocery
from dash import html, dcc, Dash

app = Dash(__name__)

app.layout = html.Div(
    [
        dash_grocery.MouseParticles(),
        dash_grocery.ParticlesBg(),
        dash_grocery.PowerModeInput(
            style=dict(
                position="absolute",
                top="50%",
                left="50%",
                transform="translateX(-50%) translateY(-50%)",
            )
        ),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

dash-1
dash-2

import dash_grocery
from dash import html, dcc, Dash

app = Dash(__name__)

app.layout = html.Div(
    [
        dash_grocery.QRCodeCanvas(value="https://plotly.com/"),
        dash_grocery.QRCodeSVG(value="https://github.com/"),
        dash_grocery.Barcode(value=5901234123457, format="EAN13", displayValue=True),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Weather:

dw

Clock:

import dash_grocery
from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div(
    [
        dash_grocery.Textfit(
            dash_grocery.Clock(format="dddd, MMMM Mo, YY, HH:mm:ss", ticking=True),
            max=400,
            mode="single",
        )
    ]
)


if __name__ == "__main__":
    app.run_server(debug=True)

dash_clock

PyPI Latest Release
This is an initial version, I haven’t made the documentation yet. :yum:

Hope you like this. XD

8 Likes

Great collection!!

3 Likes

Great stuff!

2 Likes

yessir

3 Likes

How is my greedy snake playing?

dash_snake

import dash_grocery
from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div(
    dash_grocery.Snake(color1="black", color2="tomato", backgroundColor="darkgrey")
)


if __name__ == "__main__":
    app.run_server(debug=True)
2 Likes

Well done mate! Amazing stuff to integrate… all pumped up to use lazy loading!!

Just a rough draft for demo of all particle type options for ParticlesBg

import dash
from dash import dcc, html
from dash.dependencies import Input, Output, State
import dash_grocery

# Initialize the app
app = dash.Dash(__name__, suppress_callback_exceptions=True)

# App layout
app.layout = html.Div([
    html.H1("Dynamic Particles Background"),

    html.Div([
        html.Label("Particle Type"),
        dcc.Dropdown(
            id="particle-type",
            options=[
                {"label": "Color", "value": "color"},
                {"label": "Ball", "value": "ball"},
                {"label": "Lines", "value": "lines"},
                {"label": "Thick", "value": "thick"},
                {"label": "Circle", "value": "circle"},
                {"label": "Cobweb", "value": "cobweb"},
                {"label": "Polygon", "value": "polygon"},
                {"label": "Square", "value": "square"},
                {"label": "Tadpole", "value": "tadpole"},
                {"label": "Fountain", "value": "fountain"},
                {"label": "Random", "value": "random"},
                {"label": "Custom", "value": "custom"},
            ],
            value="random",
        ),
    ], style={'marginBottom': '20px'}),

    html.Div([
        html.Label("Particle Color"),
        dcc.Input(id="particle-color", type="text", value="random"),
    ], style={'marginBottom': '20px'}),

    html.Div([
        html.Label("Background Enabled"),
        dcc.Checklist(
            id="particle-bg",
            options=[
                {"label": "Enable", "value": "enabled"},
            ],
            value=["enabled"],
        ),
    ], style={'marginBottom': '20px'}),

    html.Div(id='custom-options', children=[], style={'marginBottom': '20px'}),

    # The ParticlesBg component to be updated
    html.Div(id="particles-bg-container"),

    # Hidden div to store custom config
    dcc.Store(id='custom-config', storage_type='memory')
])

# Callback to update custom options when 'custom' is selected as type
@app.callback(
    Output('custom-options', 'children'),
    [Input('particle-type', 'value')]
)
def display_custom_options(particle_type):
    if particle_type == "custom":
        return html.Div([
            html.H4("Custom Configuration"),
            html.Div([
                html.Label("Number of Particles"),
                dcc.Input(id="custom-num", type="number", value=50),
            ], style={'marginBottom': '10px'}),
            html.Div([
                html.Label("Particle Speed (rps)"),
                dcc.Input(id="custom-rps", type="number", value=0.1, step=0.1),
            ], style={'marginBottom': '10px'}),
            html.Div([
                html.Label("Particle Radius"),
                dcc.Input(id="custom-radius", type="number", value=10),
            ], style={'marginBottom': '10px'}),
            html.Div([
                html.Label("Particle Life"),
                dcc.Input(id="custom-life", type="number", value=10),
            ], style={'marginBottom': '10px'}),
            html.Div([
                html.Label("Particle Velocity (v)"),
                dcc.Input(id="custom-v", type="number", value=2, step=0.1),
            ], style={'marginBottom': '10px'}),
        ])
    return []

# Callback to update custom config
@app.callback(
    Output('custom-config', 'data'),
    [Input('particle-type', 'value')],
    [State('custom-num', 'value'),
     State('custom-rps', 'value'),
     State('custom-radius', 'value'),
     State('custom-life', 'value'),
     State('custom-v', 'value')]
)
def update_custom_config(p_type, num, rps, radius, life, v):
    if p_type == "custom":
        return {
            "num": num or 50,
            "rps": rps or 0.1,
            "radius": radius or 10,
            "life": life or 10,
            "v": v or 2,
        }
    return None

# Callback to update ParticlesBg properties based on input
@app.callback(
    Output("particles-bg-container", "children"),
    [Input("particle-color", "value"),
     Input("particle-type", "value"),
     Input("particle-bg", "value"),
     Input("custom-config", "data")]
)
def update_particles_bg(color, p_type, bg, custom_config):
    bg_value = True if bg and "enabled" in bg else False

    return dash_grocery.ParticlesBg(
        id="particles-bg",
        color=color,
        type=p_type,
        bg=bg_value,
        config=custom_config
    )

# Run the app
if __name__ == '__main__':
    app.run_server(debug=True, port=8751)

2 Likes