Send a zimObj to a iframe

Questions
1

fileA.html

import zim from "https://zimjs.org/cdn/018/zim_three";
import pizzazz from "https://zimjs.org/cdn/018/zim_pizzazz";
        var iframe = document.createElement('iframe');
        iframe.style = `overflow:hidden;position: absolute;width:${window.innerWidth}px;height:${window.innerHeight / 2}px;border:medium none;top:50%;left:50%;transform:translate(-50%,-50%) ;z-index:2`
        iframe.src = 'fileB.html';
        document.body.appendChild(iframe);
        new Frame(FIT, 2000, 2000, black, interstellar, ready);
        function ready() {
            var three = new Three({
                width: window.innerWidth,
                height: window.innerHeight,
                cameraPosition: new THREE.Vector3(0, 0, 50),
                ortho: true,
                textureActive: true
            });

            var scene = three.scene;
            var camera = three.camera;
            var renderer = three.renderer;

            // for HUD
            var sceneOrtho = three.sceneOrtho;
            var cameraOrtho = three.cameraOrtho;
            // CONTROLS
            var controls = new OrbitControls(camera, three.canvas);
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            var panel = new TextureActive({
                width: 600,
                height: 200,
                color: yellow.toAlpha(.1),
                corner: 20
            });

            var textureActivesOrtho = new TextureActives([panel], THREE, three, renderer, sceneOrtho, cameraOrtho, controls);
            var HUD_panel = three.makePanel(panel, textureActivesOrtho).pos(0, 30, CENTER, BOTTOM);
            sceneOrtho.add(HUD_panel);
            var type = new Pick(['pixels', 'noise', 'dots', 'stripes', 'slants', 'hatch', 'plaid', 'bling', 'check'])
            var color = new Pick(series('#06a', '#0a0', '#a00', '#aa0'))
            timeout(1.5,function(){
                var patternA = makePattern({ type: 'stripes', colors:color, size: 20, interval: .400, startPaused: false, cache: false, cols: 48, rows: 20, spacingH: 4, spacingV: 4, })
                var winEvent=new CustomEvent('sendToTexture',{ detail: patternA })
                window.dispatchEvent(winEvent)
            })
            var patternB = makePattern({ type: 'stripes', colors: color, size: 20, interval: .400, startPaused: false, cache: false, cols: 48, rows: 20, spacingH: 4, spacingV: 4, })
            .center(panel);
            
        } // end ready

fileB.html

import zim from "https://zimjs.org/cdn/018/zim_three";
import pizzazz from "https://zimjs.org/cdn/018/zim_pizzazz";
new Frame(FIT, 2000, 2000, clear, clear, ready);
function ready() {
    const three = new Three({
        width: window.innerWidth,
        height: window.innerHeight,
        cameraPosition: new THREE.Vector3(0, 0, 50),
        ortho: true,
        textureActive: true
    });

    const scene = three.scene;
    const camera = three.camera;
    const renderer = three.renderer;

    // for HUD
    const sceneOrtho = three.sceneOrtho;
    const cameraOrtho = three.cameraOrtho;
    // CONTROLS
    const controls = new OrbitControls(camera, three.canvas);
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // SCENEORTHO - TextureActive work on sceneOrtho with HUD
    const panel = new TextureActive({
        width: 600,
        height: 200,
        color: black.toAlpha(0.5),
        corner: 20
    });

    const textureActivesOrtho = new TextureActives(
        [panel],
        THREE,
        three,
        renderer,
        sceneOrtho,
        cameraOrtho,
        controls
    );
    const HUD_panel = three
        .makePanel(panel, textureActivesOrtho)
        .pos(0, 0, CENTER, CENTER);
    sceneOrtho.add(HUD_panel);
    window.parent.addEventListener("sendToTexture", function (winEvt) {
        var zimObj = winEvt.detail;
        zimObj.center(panel);
    });
} // end ready

you can see the patternA have't animation,why?

2

Just tried moving an object from one page to an iFrame without using TextureActive and the same thing happens. It shows up but you can't animate it or drag it, etc. Weird. This must be something to do with security and it is most likely happening to CreateJS and other frameworks too.

Depending on what you are moving, you could send ZIMON data and recreate the object on the iframe canvas. I tried cloning the moved object and it does not work either. Strange... it shows the cursor for a drag but does not capture a mousedown event or animate.

3

fileB.html

        import zim from "https://zimjs.org/cdn/018/zim_three";
        import pizzazz from "https://zimjs.org/cdn/018/zim_pizzazz";
        new Frame(FIT, 2000, 2000, orange.toAlpha(.3), clear, ready);
        function ready(frame,stage) {
            window.parent.addEventListener("sendToTexture", function (winEvt) {
                var zimObj = winEvt.detail;
                zimObj.pos(0,0,'center','top').vis(false);
                timeout(.2,function(){
                    zimObj.pos(0,0,'center','top',frame.stage).vis(true);
                })

            });
            Ticker.add(function(){stage.update()})
        } // end ready

the problem solved
image
image

4

Does just Ticker.always() work?

Also, without (frame, stage) does S.update() work?

The animate() or drag() - I also tried with drag() must be reporting to the original stage then, rather than the new stage. I wonder if the stage property... ah... that is it. When it was made, it was on the other stage, so the animate and drag are updating the wrong stage. Maybe cloning is also cloning the old stage property. Will do some testing.

Cheers.

5

yes,
Ticker.always()
||
Ticker.add(function(){S.update()})

without (frame, stage)
zimObj.pos(0,0,'center','top',stage)
||
zimObj.pos(0,0,'center','top',S)

zimObj.pos(0,0,'center','top') !=zimObj.pos(0,0,'center','top',S)

1 Like
6

And you are okay to use CENTER and TOP, etc. if you want.