I’m developing an application using Laravel 10 and Filament V3. In my application, I have a wizard form where I want to dynamically generate an image using Imagick based on the selected color and font. The image should be rendered immediately after the selection, not after the form is submitted.

However, I keep encountering the error “Undefined variable $imageUrl” when the page loads. I suspect there might be an issue with how I’m generating or passing the image.

Here’s my code so far:

//Form

FormsComponentsWizardStep::make('Nummern')
                        ->icon('heroicon-m-numbered-list')
                        ->schema([
                            FormsComponentsSection::make([
                                FormsComponentsSplit::make([
                                    // Auswahl der Schriftart
                                    FormsComponentsSection::make('Auswahl der Schriftart für Nummern')
                                        ->description('Wähle eine passende Schriftart für den Druck aus')
                                        ->schema([
                                            Select::make('font_type_player_numbers')
                                                ->label('Auswahl der Schriftart für Schriftzüge')
                                                ->options([
                                                    'AcademyFilled3D.ttf' => 'Academy 3D',
                                                    'Libero.ttf' => 'Libero',
                                                    'Prisma.ttf' => 'Prisma',
                                                ])
                                                ->live()
                                                ->reactive()
                                                ->afterStateUpdated(function ($state, $get, $set) {
                                                    $set('fontType', $state); // Synchronisiere die Schriftart
                                                }),

                                            // Farbauswahl
                                            TextInput::make('font_color_player_numbers')
                                                ->label('Schriftfarbe')
                                                ->type('color')
                                                ->default('#000000')
                                                ->live()
                                                ->reactive()
                                                ->afterStateUpdated(function ($state, $get, $set) {
                                                    $set('fontColor', $state); // Synchronisiere die Farbe
                                                }),
                                        ]),

                                    // Vorschau Sektion
                                    FormsComponentsSection::make('Vorschau')
                                        ->description('Hier eine Vorschau')
                                        ->schema([
                                            // Hier binden wir die Vorschau an die Livewire-Komponente
                                            ViewField::make('vorschau')
                                                ->view('livewire.text-image-component'),
                                        ])->columns(2),
                                ]),
                            ]),
                        ]),

//Mein Livewire Component

class TextImageComponent extends Component
{
    public $fontType = 'AcademyFilled3D.ttf'; // Standard-Schriftart
    public $fontColor = '#000000'; // Standard-Schriftfarbe
    public $text = 'Vorschau'; // Text für die Vorschau
    public $imageUrl = ''; // Bild-URL

    public function mount(): void
    {
        // Initialisiere die Vorschau
        $this->updatePreview(); // Erstelle das Bild beim Mount
    }

    public function render(): View|Factory|Application
    {
        return view('livewire.text-image-component', [
            'imageUrl' => $this->imageUrl, // Übergibt das generierte Bild an die View
        ]);
    }

    public function updatePreview(): void
    {
        $imagePath = $this->createImage($this->text, $this->fontType, $this->fontColor);
        $this->imageUrl = Storage::url($imagePath);

        // Debugging: Zeige die generierte URL an
        dd($this->imageUrl);
    }

    public function createImage($text, $font, $color): string
    {
        $imageName = 'text_image_' . time() . '.png';
        $imagePath = storage_path('app/public/' . $imageName);

        $imagick = new Imagick();
        $draw = new ImagickDraw();
        $draw->setFillColor(new ImagickPixel($color));
        $draw->setFont(public_path('fonts/' . $font));
        $draw->setFontSize(48);

        $imagick->newImage(800, 200, new ImagickPixel('#ffffff'));
        $imagick->setImageFormat('png');
        $imagick->annotateImage($draw, 50, 100, 0, $text);
        $imagick->writeImage($imagePath);

        $imagick->clear();
        $imagick->destroy();

        return 'public/' . $imageName;
    }
}

//View

<div>
    @if ($imageUrl)
        <img src="{{ $imageUrl }}" alt="Vorschau Bild" />
    @else
        <p>Keine Vorschau verfügbar</p>
    @endif
</div>

I expected the image to be dynamically generated and displayed in the preview section as soon as the user selects a color and font. To achieve this, I tried binding the preview section to the Livewire component and using live() and reactive() methods on the form fields to trigger the image generation in real-time.

However, instead of showing the generated image, I kept getting the “Undefined variable $imageUrl” error. I have also tried debugging by dumping the $imageUrl value, which showed the correct URL but still caused the error in the view.