Exportation and working outside of cables

Tags: #<Tag:0x00007f703d3c7008>
#1

Hi,

After exporting the patch from Cables, I am trying to update some details like adding some text on top of the patch. But when I try to modify the html code and including the text between two text tags, the text appears as a different entity than the website and for exemple : doesn’t scroll when the mouse is on the patch - but then scrolls if I am on the texte and either way.
The website is on Github at the moment : https://sylenne.github.io/FireBackground3.com/
Thank you for reading and let me know if I missed anything.

Roly

#2

hey,

if you do stuff like this you have to either do it all in cables, work with callbacks or variables, or do it all in the surrounding html. cables does not know anything about it’s outside world.

in your specific example cables is even grabbing the scrollevent of your browser, so your page will never really scroll.

maybe these can give your some direction:



#3

@roly and @stephan I may have a similar problem but not sure. I am trying to embed a cables.gl patch in the Observable notebook (which is perfect for js). Cables.gl does load but “steals focus” by shifting the scrolling to the Cables.gl patch when I want the notebook to start and (stay!) at the beginning of the document. I’ve looked all over the web for solutions, including trying two sandbox settings. Here is the iframe (with angle brackets deleted otherwise it gets interpreted):

iframe sandbox=“allow-scripts allow-same-origin” src=“https://cables.gl/edit/fNk8lj” frameborder = “0” style="width:900px; height:600px;"iframe

I tested the sandbox attribute, trying to limit cables.gl but “allow-scripts” and “allow-same-origin” must be set in in the iframe. Otherwise, the cable.gl will not load into Observable. I can always just delete the part of the notebook that launches cables.gl but that would be sad- as cables.gl is a nice example of javascript data flow (which produces graphics).

I’ll read over the links you posted for other solutions.

Here is the complete Observable notebook. Note when loaded (after about 5-10 secs), focus is lost to cables.gl: https://observablehq.com/@metaphorz/the-snake-that-ate-its-tail

#4

uhhh, you are trying to import the editor via an iframe? i really can’t help there as this is something we do not support. also, this will need to have the user logged in into cables to even see…did you consider that?

for security reasons the editor itself runs in an iframe on cables.gl and hence does a lot of focus-tricks to work. i don’t really see a way of preventing this and making this run in even one more iframe…sorry…

#5

Understood and thanks. I do see what you mean about the focus issue