F
Filament•7mo ago
Xonardon

QR in Form Section [CreateRecord, EditRecord]

Is it possible to do something similar using a component?
No description
24 Replies
toeknee
toeknee•7mo ago
Easily yes, as @Lara Zeus has your back https://filamentphp.com/plugins/lara-zeus-qr
Filament
Qr ⚡️ Component by Lara Zeus - Filament
Qr Code Component, Form Field to generate Qr with designing options.
Xonardon
XonardonOP•7mo ago
toeknee
toeknee•7mo ago
What are you trying to do that the plugin won't do?
toeknee
toeknee•7mo ago
https://github.com/SimpleSoftwareIO/simple-qrcode you can use this and a Filamentphp View Field
GitHub
GitHub - SimpleSoftwareIO/simple-qrcode: An easy-to-use PHP QrCode ...
An easy-to-use PHP QrCode generator with first-party support for Laravel. - SimpleSoftwareIO/simple-qrcode
Xonardon
XonardonOP•7mo ago
https://web.archive.org/web/20240221193114/https://www.simplesoftware.io/#/docs/simple-qrcode their site is not working and I would like to have a reactive field with a link and download buttons png, svg
Simple Software
SimpleSoftware.io -- providing the world with better, simple software solutions to make your online experience faster and easier to use.
Xonardon
XonardonOP•7mo ago
https://www.youtube.com/watch?v=nLNClenxwSs
Tapan Sharma
YouTube
How to Work with QR Code generation in Filament PHP | Beginners Tut...
In this video, we will be working on generating QR codes with Filament PHP. It seems tricky to deal with these tasks while working on Filament since all the logic is abstracted away. But, it's quite easy and we'll be looking at it in this video. -------------------------------------------------------------------------------- Link to the Course...
Xonardon
XonardonOP•7mo ago
@toeknee @Lara Zeus how to do this could you write an example
No description
Xonardon
XonardonOP•7mo ago
and I would like to be able to assign and hide these fields by default and be able to pass an anonymous function there, with the possibility of reactivity, as in filament 3)
No description
Xonardon
XonardonOP•7mo ago
Lara Zeus
Lara Zeus•7mo ago
everything is in the doc https://larazeus.com/docs/qr/v1/introduction you cant pick the fields to show/hide but they all form components you just copy the code and use it directlly in your form
toeknee
toeknee•7mo ago
If you were to for example use: 
ViewField::make('qr')->view('filamnet.components.qrcode')
ViewField::make('qr')->view('filamnet.components.qrcode')
then create a view: resources/views/filament/components/qrcode.blade.php with say 
{!! QrCode::size(300)->generate('https://www.google.com') !!}
{!! QrCode::size(300)->generate('https://www.google.com') !!}
Using the package: simplesoftwareio/simple-qrcode
Xonardon
XonardonOP•7mo ago
what is there? I don't see an example of creating a form component
No description
Lara Zeus
Lara Zeus•7mo ago
not even in the installations page!! 😉
Xonardon
XonardonOP•7mo ago
I almost managed to make a working component, can you tell me? and it doesn't update either qr if edit link
No description
Xonardon
XonardonOP•7mo ago
no, what data should be here? LaraZeus\Qr\Facades\Qr::render(): Argument #1 ($data) must be of type ?string, array given, called in /home/roman/PhpstormProjects/historia-back/app/Filament/Resources/BoxResource.php on line 94 
\LaraZeus\Qr\Facades\Qr::render(data: [
                                                'url' => 'https://filamentphp.com/',
                                                'size' => '300',
                                                'margin' => '1',
                                                'color' => 'rgb(0, 0, 0)',
                                                'back_color' => 'rgb(252, 252, 252)',
                                                'gradient_form' => 'rgb(69, 179, 157)',
                                                'gradient_to' => 'rgb(241, 148, 138)',
                                                'eye_color_inner' => 'rgb(241, 148, 138)',
                                                'eye_color_outer' => 'rgb(69, 179, 157)',
                                                'gradient_type' => 'vertical',
                                                'style' => 'square',
                                                'eye_style' => 'square',
                                            ])
\LaraZeus\Qr\Facades\Qr::render(data: [
                                                'url' => 'https://filamentphp.com/',
                                                'size' => '300',
                                                'margin' => '1',
                                                'color' => 'rgb(0, 0, 0)',
                                                'back_color' => 'rgb(252, 252, 252)',
                                                'gradient_form' => 'rgb(69, 179, 157)',
                                                'gradient_to' => 'rgb(241, 148, 138)',
                                                'eye_color_inner' => 'rgb(241, 148, 138)',
                                                'eye_color_outer' => 'rgb(69, 179, 157)',
                                                'gradient_type' => 'vertical',
                                                'style' => 'square',
                                                'eye_style' => 'square',
                                            ])
Lara Zeus
Lara Zeus•7mo ago
these are the parameters: 
?string $data = null,
?array $options = null,
string $statePath = 'url',
string $optionsStatePath = 'options',
bool $downloadable = true
?string $data = null,
?array $options = null,
string $statePath = 'url',
string $optionsStatePath = 'options',
bool $downloadable = true
$data is string, its what you want to apply to the QR code $options is the array for the options like size and color etc 
\LaraZeus\Qr\Facades\Qr::render(
    data:'https://filamentphp.com/',
    options: [
    'size' => '300',
    'margin' => '1',
    'color' => 'rgb(0, 0, 0)',
    'back_color' => 'rgb(252, 252, 252)',
    'gradient_form' => 'rgb(69, 179, 157)',
    'gradient_to' => 'rgb(241, 148, 138)',
    'eye_color_inner' => 'rgb(241, 148, 138)',
    'eye_color_outer' => 'rgb(69, 179, 157)',
    'gradient_type' => 'vertical',
    'style' => 'square',
    'eye_style' => 'square',
]);
\LaraZeus\Qr\Facades\Qr::render(
    data:'https://filamentphp.com/',
    options: [
    'size' => '300',
    'margin' => '1',
    'color' => 'rgb(0, 0, 0)',
    'back_color' => 'rgb(252, 252, 252)',
    'gradient_form' => 'rgb(69, 179, 157)',
    'gradient_to' => 'rgb(241, 148, 138)',
    'eye_color_inner' => 'rgb(241, 148, 138)',
    'eye_color_outer' => 'rgb(69, 179, 157)',
    'gradient_type' => 'vertical',
    'style' => 'square',
    'eye_style' => 'square',
]);
Xonardon
XonardonOP•7mo ago
PHP 8.2.18 11.7.0 Filament\Forms\ComponentContainer::Filament\Forms\Concerns{closure}(): Argument #1 ($component) must be of type Filament\Forms\Components\Component, Illuminate\Support\HtmlString given
Xonardon
XonardonOP•7mo ago
<x-filament::page>
    <div class="flex items-stretch justify-center gap-4">
        <div class="w-full lg:w-1/2">
            {{ $this->form }}
        </div>
        <div class="w-full lg:w-1/2">
            <x-filament::section>
                <x-slot name="heading">
                    Preview
                </x-slot>

                <div id="qrcode" class="text-center flex justify-center items-center">
                    {!! \App\Filament\Pages\QrCode::maketheqr($this->form->getState()) !!}
                </div>

                <x-slot name="headerEnd">
                    <x-filament::button type="button" @click="download('{{ 'filename' }}')">
                        Download
                    </x-filament::button>
                </x-slot>
            </x-filament::section>
        </div>
    </div>
{{--    better to use @push...--}}
    <<script defer src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script defer>
        import domtoimage from 'dom-to-image';
        import {saveAs}   from 'file-saver';

        window.download = function (domain) {
            var node = document.querySelector('#qrcode svg');
            domtoimage.toBlob(node)
                .then(function (blob) {
                    window.saveAs(blob, domain + '.png');
                })
                .catch(function (error) {
                    console.error('oops, something went wrong!', error);
                });
        }
    </script>
</x-filament::page>
<x-filament::page>
    <div class="flex items-stretch justify-center gap-4">
        <div class="w-full lg:w-1/2">
            {{ $this->form }}
        </div>
        <div class="w-full lg:w-1/2">
            <x-filament::section>
                <x-slot name="heading">
                    Preview
                </x-slot>

                <div id="qrcode" class="text-center flex justify-center items-center">
                    {!! \App\Filament\Pages\QrCode::maketheqr($this->form->getState()) !!}
                </div>

                <x-slot name="headerEnd">
                    <x-filament::button type="button" @click="download('{{ 'filename' }}')">
                        Download
                    </x-filament::button>
                </x-slot>
            </x-filament::section>
        </div>
    </div>
{{--    better to use @push...--}}
    <<script defer src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script defer>
        import domtoimage from 'dom-to-image';
        import {saveAs}   from 'file-saver';

        window.download = function (domain) {
            var node = document.querySelector('#qrcode svg');
            domtoimage.toBlob(node)
                .then(function (blob) {
                    window.saveAs(blob, domain + '.png');
                })
                .catch(function (error) {
                    console.error('oops, something went wrong!', error);
                });
        }
    </script>
</x-filament::page>
` help me make a working download button

QrCode.php

Xonardon
XonardonOP•7mo ago
Forms\Components\Livewire::make(\App\Filament\Pages\QrCode::class) I want to improve the component and make it a fully customizable builder
Lara Zeus
Lara Zeus•7mo ago
I downloaded your code and its working there is an error when click on the download button because you cant import in inline js
No description
Xonardon
XonardonOP•7mo ago
how can I fix this?
Lara Zeus
Lara Zeus•7mo ago
check the code of the package on github you need to add the packages in your js build
Xonardon
XonardonOP•7mo ago
Tell me why these properties are required, I still haven’t found where they are used, the breakpoint does not work. is there a built-in method for this? I would like to go deeper into understanding this fill() not work
Lara Zeus
Lara Zeus•7mo ago
Tell me why these properties are required you mean the colors and size etc? its required for the underline package simplesoftwareio/simple-qrcode you can check and see how it used if you only want the QR without any other options and have full control you can used the package mentioned by toeknee
Want results from more Discord servers?
Add your server