daikazu/filament-size-visualizer-field

Size Visualizer Field for FilamentPHP

This repository contains a custom size visualizer component for FilamentPHP. It dynamically renders and resizes a visual comparison between a selected product size and a static object (e.g., a coin) on an interactive grid

Installation

You can install the package via composer:

composer require daikazu/filament-size-visualizer-field

You can publish the views using

php artisan vendor:publish --tag="filament-size-visualizer-field-views"

Usage

public function getFormSchema(): array
    {
        return [
            Section::make('Filament Size Visualizer Example')
                ->schema([
                    Fieldset::make('Rounded Size Visualizer')
                        ->columns(1)
                        ->schema([

                            TextInput::make('size')
                                ->debounce(600)
                                ->type('range')
                                ->minValue(1)
                                ->maxValue(15)
                                ->extraInputAttributes(['step' => 0.25])
                                ->live()
                                ->numeric()
                                ->default(2),

                            Toggle::make('show_coin')
                                ->live(),

                            RoundedSizeVisualizer::make('size')
                                ->size(960)
                                ->padding(50)
                                ->sizeText('Inches')
                                ->staticObjectImage(asset('vendor/filament-size-visualizer-field/assets/quarter.png'))
                                ->dynamicObjectImage(asset('vendor/filament-size-visualizer-field/assets/example-1.png'))
                                ->showStaticObject(fn (Get $get) => $get('show_coin')),
                        ]),
                ]),

        ];
    }

Available Properties

Property	Type	Description	Default Value
size	number	The height of the canvas.	1080
sizeText	string	Text to append to display size	Inches
padding	number	Padding around the canvas grid.	50
dynamicObjectImage	string	URL of the dynamic object image (e.g., product).	'' (empty string)
staticObjectSize	number	Size of the static object in the visualizer.	0.955
staticObjectImage	string	URL of the static object image (e.g., coin).	'' (empty string)
fontFamily	string	Font family for text elements on the canvas.	Arial
backgroundColor	string	Background color of the canvas.	#DFE1E6
gridLineColor	string	Color of the main grid lines (inch markers).	rgba(0, 0, 0, 0.25)
halfGridLineColor	string	Color of the half-inch grid lines.	rgba(0, 0, 0, 0.20)
patternGridColor	string	Color used in the pattern overlay.	rgba(100, 100, 255, .50)
showStaticObject	boolean	Whether to show the static object on the canvas.	true

Style Customization

You style the canvas wrapper by targeting the .filament-size-visualizer class.

Example:

.filament-size-visualizer {
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: clip;
}

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Mike Wall
• All Contributors

License

The MIT License (MIT). Please see License File for more information.