supereggbert / aframe-htmlembed-component Goto Github PK

I can see you handle border radius in the component.

How do I set it on the parent element?

i.e.

<div class="poster">
 ....
</div>


.poster = {
        border-radius: 4px;
}

isn't having any effect.

component not working in Android web view.

It display a black box instead.

Tested on: Remi Note7 Andriod Pie MIUI10.3.6.0. Native Browser and webview

Would it be possible to add a boolean setting for double side rendering?

Hi! I tried setting the visibility to hidden just like this:

 function hide(id){
    const elm = document.getElementById(id)
    current.style.visibility = 'hidden'
    document.querySelector('[htmlembed]').components.htmlembed.forceRender()
}

Despite showing changes when I look at the HTML inspector, I don't see it changed in my scene. I tried forcing the rendering with forceRenderer() but didn't have luck.

Hope this can be solved.

Hi,

when you try the provided example, and you switch to mobile mode in chrome, then the execution of the mousedown/click event happens only every second time. Effectively you need two clicks - one on the button and a second one anywhere.

Best regards,
Dirk

I want to use html inside a-scene for web ar. This library works as usual but not showing the contenet between
<a-scene> <a-marker> <a-entity htmlembed> <h1>An Example</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </a-entity> </a-marker> </a-scene>
According to the arjs documentation https://ar-js-org.github.io/AR.js-Docs/marker-based/
I would really appreciate if anyone has alternative solution for this is problem

Hello,

I'm getting a Null is not a valid URL exception in generatePageCSS on line 285.
I think a hasAttribute check will solve the issue.

My situation is that I have my scene within an iframe, so I'm wondering if all the document.querySelectorAll statements are selecting from the parent document? Because there shouldn't be any styles in the iframe.

I love this component as it's making a lot of my project possible. But it appears that it's incompatible with React, the reloading of css breaks the css for everything else. I'm trying to come up with a work around, but I figured I'd let you know.

Seems to be something to do with HMR.

First: thanks a lot for creating this component!

I wondered if there could be a way to have longer content scrolling, e.g. "overflow: scroll" support?

Thanks!

FYI ;)

Hi, i would love to have the ability to use html code outside of the aframe code.
Use case : allowing the user to visite my website in classic html And in VR without duplicate HTML and CSS.

My HTML contains an image with an attached click-listener. I'd like to retrieve the mouse clicks position relative to the image like

var X = (e.pageX - this.offsetLeft);
var Y = (e.pageY - this.offsetTop);

but the offset always returns 0. Is there a way to get the precise relative position of an entity in the document without substracting its precalculated position?

Hi,

first of all - thanks for this great component!

Then: I get tons of 'can't invert matrix, determinant is 0' warnings.
I saw that issue 1a04a62 addressed something like that?
So I rebuild the component, but the warnings are still there.

Everything is running great though, just the warnings are a bit annoying.

Thanks again,
Dirk

Is it possible to have a transparent background?

 background-color: transparent;
}

isn't doing it.

I'm having problems where the browser is freezing during new renders.

Is there a way to pre-render and cache the image?

Ideally we could use web workers to render in a new thread, but they don't support canvas.

EDIT - Seems you can render offscreen.
https://developers.google.com/web/updates/2018/08/offscreen-canvas

I'll see if I can get this working.

I would appreciate an HTML example that shows how to add the inputrequired event to the <input> field of a form, please, like in the following:

First name: <input type="text" name="fname"> 

Thank's.

Using the included example, only change made was to pull in A-Frame 1.3.0 instead of 0.9.2. None of the elements in the demo render, no error thrown. Appears to work fine with A-Frame up to 1.2.0

This component appears to be abandonware - does anyone know of a supported component to display HTML elements in A-Frame that works with the current version? Alternately, what change

Hello, thanks for your work.

We are using this package in Vue.js and, when running the project locally with webpack-dev-server (ONLY when running it locally) we run into a very long browser freeze which we have pinpointed to
generatePageCSS and more specifically to a very long series of calls to csshack.

Attached you can find a Chrome profiler session where the problem occurs:
aframe-html-embed-problem.zip

Do you have any clue about what's happening?

As I mentioned, thi sonly happens in http://localhost:8080 , when the app is built and deployed to an https server the problem goes away.... still I find it worth reporting.

Thanks

Hello.

When using not inline CSS, but .css file loaded in the header page menu is not displayed, while in the browser console have this warning:

• Firefox: "WebGL warning: texSubImage: Offset+size must be <= the size of the existing specified image."
• Chrome: "[.WebGL-00005B4402385500] GL_INVALID_VALUE: Offset overflows texture dimensions."

As soon as I move the css from the file to the html page in the style tag, the menu starts displaying. But, I need to use non-inline styles, how can I avoid this error and get the menu to display?

Live example: https://aframe-htmlembed-component-css-file.glitch.me
Code editor: https://glitch.com/edit/#!/aframe-htmlembed-component-css-file

Thank you.

I'm probably abusing the component but as I try to display "just text" cf https://fabien.benetou.fr/Portfolio/Portfolio?action=xr I hit a snag and get nothing displayed whereas on a simpler page it works well e.g. https://fabien.benetou.fr/?action=xr . Any page from my wiki now has an ?action=xr to (try to) display it in VR so could be useful to isolate issues.

It might be related to WebGL texture size, could be interesting to clarify the limitations.

I'm trying to use this component and dynamically add it to the scene

        this._poster = make('a-entity', {
            'htmlembed': true
        }, this.el)
        this._poster.innerHMTL = '<h1>An Example</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'
        this._poster.components.htmlembed.forceRender()

I'm getting

build.js:1 Uncaught (in promise) TypeError: Cannot read property 'forceRender' of undefined
(from within the component)

And the innerHTML does not appear to be getting set, which is why I assume it's throwing that error.

Is there another way to create the element and set the inner html?

When I start my aframe application for the first time, html component built using htmlembed is visible but when refresh the app it goes invisible and this happens always. Like it is toggling its visibility on when the page is refreshed. It is built using nodejs.

Hello there,

I am working on an app where I am using SVG data extensively and the <use> tag.
At the moment though it doesn't seem like SVG is supported in your library.
The following for eg does not render:
CodePen

<a-scene >
  <a-entity htmlembed="" position="0 1.75 -.5">
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50"/>
</svg>
 </a-entity>
</a-scene>

Is there any chance you might add support for this?

I have try the example. The image doesn't show up. But, if I try to inspect the document, it is downloaded and accessible. If there's any special requirement for using image in html? Beside what stated in the github repo.