Start a new topic

Styling HtmlDrawable

Styling HtmlDrawable


I'm adding dynamic overlays (AR.HtmlDrawable) in the onEnterFieldOfVision event, but the styles defined in my stylesheet don't affect the visualization of my drawable. When I use css in the style attribute of the HtmlDrawable it works, but I would like to separate styling from the Javascript. Is it possible to style elements that are added dynamicly without using css in Javascript?

Thanks in advance.

Hi Bastiaan!
You can reference a external .css file in your AR.HTMLDrawable source. You just have to take care how you've added your ARchitect World to your project. 
On iOS there is a difference between folder groups (yellow folder icon) and folder references (blue folder icon). All files inside groups are simply copied into the root folder of your app bundle. The folder structure of folder references is preserved in the final app bundle. The HTMLDrawable will have as root folder the location of your main .html file. Depending on the relative path to the .css file inside the bundle, you have to change the path to the .css file.

Hope you can fix your path issues with these information!

Also, you can change css attributes with js: here is a quick introduction on how to do so.

Best regards

Andreas

Thanks Andreas. I understand the folder structure of the iOS application. I checked all files with iExplorer and everything seems to be bundeled in the root.
This matches with the references in my main.html file. Maybe it is useful to explain my situation:

We have a database which contains users and data about users. Every user has it's own marker/target.
By scanning the target with the application, data about the user will be shown. To visualise this data I'm using an external library to create diagrams and graphs.
Because these diagrams and graphs need to be pinned to the target it's not possible to just add some HTML, but the use of a Drawable is necessary.
I don't think it's possible to load the Drawble from an HTML file because the data to be displayed is dynamic. It may be possible to alter the data with Javascript before showing it, but every extra step can cause some lag. 

In my Proof Of Concept project I added a stylesheet to the main.html file. The stylesheet is loaded successfully because I can change the style of static elements.
When the event onEnterFieldOfVision gets called I'm adding a HtmlDrawable to display dynamic data in a div with a class. The style of the class is specified in the stylesheet, but the element seems to ignore the styles. When I add the style properties directly on the div (<div style="{properties here}">) the styles work.

Can you tell me what is a suitable solution for me?

Hi,
Thanks for explaining your problem in detail. I know understood your problem.
The short answer is: A HTML drawable has nothing to do with the main ARchitect World and all the .css files that are attached to it. HTMLDrawables are seperate web views, so you have to include/reference the same stylesheet in the html that is loaded by the HTMLDrawable.

Are you creating your HTMLDrawables with an html string of from a url?

I hope this answer was helpful for you.

Best regards

Andreas

Hi Andreas,

I created the Drawable from a string. I did this because the content is dynamic.
As i see it, there are two possible solutions:

- Create a Drawable (webview) from a string and attach a stylesheet through Javascript SDK. Is this possible?
- Create a Drawable from a url which already contains a stylesheet. Replace parts of the HTML Drawable with dynamic data. Is this possible?

The first option would be great, but I don't know if that's possible. The second option is heavier in performance.

Thanks in advance.

 

Hi,
As you're creating the HTMLDrawable dynamically using a string, you can simply add a additional line which includes a .css file.

<link rel="stylesheet" type="text/css" href="css/myCSS.css" />

 

Best regards

Andreas

Thank you Andreas, your very helpful.

My final question:
Is it also possible to load a HTMLDrawable with by url and update the content of the HTMLDrawable when a target is scanned?
This way it's possible to seperate view code with controller code.

 

Hi
The HTMLDrawable will update it's content if the URI or HTML property changes.
HTMLDrawable documentation: If the properties are changed afterwards, the last change will take immediate effect, regardless of if it is specified via plain HTML or via URI

Hopefully you can impl. your HTMLDrawable with these information :)

 

Best regards
Andreas
Login or Signup to post a comment