Unable to embed with alpha / transparency - SOLVED

I have to say I’m loving Cables more and more every patch I make. Awesome work guys!

So I am in a testing phase right now and I and trying to embed a patch into a website. A few quirks here and there to figure out but it is mostly working well.
The thing I need to figure out right now is if is possible to embed a patch with transparency/alpha, meaning I only want to see shapes I am drawing and set the background in the webpage.
It’s weird because I can see the checkerboard transparency when working in the Cables UI, but when embedded it defaults to a black background that I just cannot get rid of.
I believe I have tried every setting combination I could find in the MainLoop op but without any success…

First of all, transparency is possible when embedding right?
What are the steps to get embedding transparency?
Is there any setting somewhere else I am missing?

Hope somebody can point in the right direction :crossed_fingers:

hey,

try playing around with “clear” and “clear alpha” in the mainloop. that should do the work.
if not you may want to check whether your div/canvas has a background image (maybe inherited from somewhere), and finally you can play around with

canvas: {
    alpha: true
}

as a parameter to new CABLES.Patch

one of these should work :slight_smile:

Cool! Thanks :grinning:

I have tried both “Clear” and “Clear Alpha” in the main loop without any success. (I even made a Sidebar Boolean to test these directly in the embedded. Again no success.)

I made another color background on the div and I can see it briefly as I load the page so I know that work. Turn of the Cables embed and I can also see the color.

So I will try out your code snippet tomorrow and hope that will do the trick!
Thank you for that one :+1:

Hello again!

@stephan, I have now tried every single one of these tricks without success…
To be sure that there isn’t a problem with where I intended to test med embed, I have tried to only work within the “index.html” that Cables spits out.

I made this patch: https://cables.gl/p/sOFjtY
It has buttons to toggle Clear and Clear Alpha.

And I made this export of the patch: https://www.dropbox.com/transfer/AAAAAFp-oNqkO602rQDEUA7a3YWmiFEbosgjWbuJOiMqwGc6uYJECzY
Inside the folder I made another “index AlphaTest.html”, where I set the alpha snippet you gave me and resize to false so that I can be sure that the background color is actually set/visible.

Any chance you could give me a push in the right direction to what I am doing wrong here?

hey,

sorry for the late reply, in your indexAlphaTest.html i changed the patch constuctor to:

        document.addEventListener('DOMContentLoaded', function(event) {
        CABLES.patch = new CABLES.Patch({
            canvas: {
                alpha:true
            },
            premultipliedAlpha:true,
            patch: CABLES.exportedPatch,
            prefixAssetPath: '',
            glCanvasId: 'glcanvas',
            glCanvasResizeToWindow: false,
            onError: showError,
            onPatchLoaded: patchInitialized,
            onFinishedLoading: patchFinishedLoading,
        });
    });

notice the “canvas”-property being an object containing and “alpha” property.
that was initially not “nested enough”. this makes alpha work for me and doesn’t even need clear/clearalpha.

hope this helps, even when late…

greets,
stephan

This is super @stephan!
Thank you so much for this! Coming from a non-web background, I wouldn’t have figured this one out :smiley:

Looking at the documentation again with a somewhat wiser mind, it is clearly explained by you guys.