PHPackages daikazu/filament-size-visualizer-field - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. daikazu/filament-size-visualizer-field ActiveLibrary[Utility & Helpers](/categories/utility) daikazu/filament-size-visualizer-field ====================================== This is my package filament-size-visualizer-field v1.0.3(1y ago)0930↓33.3%MITJavaScriptPHP ^8.2 Since Sep 6Pushed 1y ago1 watchersCompare [ Source](https://github.com/daikazu/filament-size-visualizer-field)[ Packagist](https://packagist.org/packages/daikazu/filament-size-visualizer-field)[ Docs](https://github.com/daikazu/filament-size-visualizer-field)[ GitHub Sponsors](https://github.com/Daikazu)[ RSS](/packages/daikazu-filament-size-visualizer-field/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (4)Dependencies (15)Versions (5)Used By (0) Size Visualizer Field for FilamentPHP ===================================== [](#size-visualizer-field-for-filamentphp) [![Latest Version on Packagist](https://camo.githubusercontent.com/7a76e16f4bbc4b253618c5f0ab08d285100388c550968945050cc8444847b3e8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6461696b617a752f66696c616d656e742d73697a652d76697375616c697a65722d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/daikazu/filament-size-visualizer-field)[![Total Downloads](https://camo.githubusercontent.com/d94a3818948a50b51dd976b6903cac919e9da1ce9c239999981d05880128ccfc/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6461696b617a752f66696c616d656e742d73697a652d76697375616c697a65722d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/daikazu/filament-size-visualizer-field) 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 [![](docs/example.png)](docs/example.png) Installation ------------ [](#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 ----- [](#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 -------------------- [](#available-properties) PropertyTypeDescriptionDefault 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 ------------------- [](#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 --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Mike Wall](https://github.com/daikazu) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 33 — LowBetter than 75% of packages Maintenance44 Moderate activity, may be stable Popularity16 Limited adoption so far Community7 Small or concentrated contributor base Maturity55 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~59 days Total 4 Last Release 435d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/00a5aa701f964455918b2e454e7b460fe2ef729639337a059d5bac12e162027e?d=identicon)[daikazu](/maintainers/daikazu) --- Top Contributors [![daikazu](https://avatars.githubusercontent.com/u/4039367?v=4)](https://github.com/daikazu "daikazu (7 commits)") --- Tags laravelfilamentfilamentphpdaikazufilamentphp fieldsize visualizer ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/daikazu-filament-size-visualizer-field/health.svg) ``` [![Health](https://phpackages.com/badges/daikazu-filament-size-visualizer-field/health.svg)](https://phpackages.com/packages/daikazu-filament-size-visualizer-field) ``` ### Alternatives [codewithdennis/filament-select-tree The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths. 320392.1k17](/packages/codewithdennis-filament-select-tree)[dotswan/filament-map-picker Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications. 124139.3k2](/packages/dotswan-filament-map-picker)[defstudio/filament-searchable-input A searchable autocomplete input for Filament forms 3212.4k](/packages/defstudio-filament-searchable-input)[jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12247.8k](/packages/jibaymcs-filament-tour)[codebar-ag/laravel-filament-json-field A Laravel Filament JSON Field integration with CodeMirror support 1124.1k](/packages/codebar-ag-laravel-filament-json-field)[rupadana/filament-announce An easy way to shout your exceptional offerings to the potential users 5712.4k1](/packages/rupadana-filament-announce) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)