Kiri:Moto Frame Message API

Kiri:Moto
1

Hi. I’m trying to embed the slicer in my website, but I’m having some issues and I hope you could give me some light.

I embedded the slicer using an iframe, and I was wondering if it’s possible to listen to the “export” event, so I can send the generated g-code to my server for processing. Tried with window.addEventListener(“message”, …) with no results.

Thanks in advance.

2

using the example on Kiri:Moto Frame Message API try:

let api = kiri.frame;
api.setMode('FDM');
api.clear();
api.load('/obj/cube.stl');
api.on('loaded', () => {
    api.slice();
});
api.on('slice.done', () => {
  api.prepare();
});
api.on('prepare.done', () => {
    api.export(true);
});
api.on('export.done', gcode => {
    console.log(gcode);
})

and when you run code open the javascript console and the gcode will be there

3

Hi, thanks for the quick reply. I’m really lost here. But can that code only be executed here Kiri:Moto Frame Message API ?, or is there a script source I should include first?

This is what I have done so far with postMessage (sorry I didn’t include this in my question):

<div wire:init="init">
    <div class="px-4 py-20">
        <div class="max-w-screen-xl mx-auto">
            <iframe wire:ignore class="w-full h-40r" id="{{ $iframeId }}" src="https://grid.space/kiri/" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>

    <script>
        document.addEventListener('livewire:load', () => {
            console.log('Livewire component loaded.');

            @this.on('set-iframe', (iframeId, fileUrl) => {
                console.log('set-iframe event executed.', 'iframeId: ' + iframeId, 'fileUrl: ' + fileUrl);

                const kiriFrame = document.getElementById(iframeId);
        
                kiriFrame.onload = () => {
                    console.log('kiriFrame onload executed.');

                    kiriFrame.contentWindow.postMessage({ command: 'setFrame', id_obj: iframeId }, 'https://grid.space');
                    kiriFrame.contentWindow.postMessage({ command: 'clear' }, 'https://grid.space');
                    kiriFrame.contentWindow.postMessage({ command: 'load', url: fileUrl }, 'https://grid.space');
                    kiriFrame.contentWindow.postMessage({ command: 'setMode', mode: 'FDM' }, 'https://grid.space');
                    
                    window.addEventListener('message', function (event) {
                        console.log('Message received.');

                        if (event.origin !== 'https://grid.space') return;

                        console.log(event);
                    }, false);
                }
            });
        });
    </script>
</div>

It’s a Laravel + Livewire website.

I’m trying to communicate with the iframe using postMessage, but it’s not working. The onload function is being called, though.

Note:

I was hoping to receive a message in the window event listener when the user clicks “Export” inside the iframe.

4

if you inspect the example page, you’ll notice it loads this:

Screenshot 2024-11-05 at 9.33.27 AM

the original code for this is here so you can see what’s happening with the api wrapper.

I had not anticipated sending the gcode as an event when the user initiates an export, but this is not hard to do.

5

Hi stewart. Thank you for your patience. I included the script, and copied my code to a plain html file to see if it was my Laravel implementation messing with it, but it’s still not working. Here’s my attempt to communicate with the iframe:

<div>
        <div class="px-4 py-20">
            <div class="max-w-screen-xl mx-auto">
                <iframe class="w-full h-40r" width="800" height="600" id="kiri-frame" src="https://grid.space/kiri/" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
        
        <script src="https://grid.space/code/frame.js"></script>
        <script>
            const kiriFrame = document.getElementById('kiri-frame');
            let api = kiri.frame;

            kiriFrame.onload = function () {
                api.setFrame('kiri-frame');
                api.clear();
            }
        </script>
</div>

I also tried moving the code outside from the onload function, and checked the console for errors, but there’s nothing.

kiri.frame is defined, I checked with console.log.

6

I’ll try to reproduce and let you know what I find