Start a new topic

Performance with HtmlDrawable (Android Javascript SDK)


I used HtmlDrawable as POI model in our implementation of the SDK. The html is a local file and the values of the widget are update in the JS using the replace on the html source. The Widget currently have 1 background image (300x200 pixel) and 4 icon (50x50 pixel) plus some texts.
Unfortunately the performances with some Widget around, are very bad, even with top smartphones, a 3d model in place of the html have batter performances despite the bigger size of the 3d obj(2mb).
There is something that can help with the performances of the HtmlDrawable, there is some reason why it seems more cpu-heavy?

Let me know if I can provide other information.
Thank you.


Unfortunately there is nothing you can do to increase the performance, besides ensuring that the HTML content is static and as simple as possible. I highly recommend to only use HTML Drawables for very basic layouts only and use Labels and ImageDrawables where possible.

HTMLDrawables are at first step rendered in a separate scope, out of our SDK's rendering, that's why 3DModels and other Augmentations perform better.

Best regards,


There is something i can do for have batter performance? The worst frame-drop is when the views are rendered the first time on the screen.

 I'm loading the html in this way 

$.get("assets/tag_view.html", function(htmlString) {
    modelWidgetString = htmlString;

 Then i create a copy of the html string for every poi in this way, and create a drawable

var currentModelWidgetString = modelWidgetString;
var currentModelWidgetString = currentModelWidgetString.replace("{{{TITLE}}}", "Some title");
var currentModelWidgetString = currentModelWidgetString.replace("{{{BACKGROUND_IMAGE}}}", "https://URL.jpg");

var placeWidget = new AR.HtmlDrawable({
        html: currentModelWidgetString
    11, {
        onLoaded: this.worldLoaded,
        viewportWidth: 580,
        viewportHeight: 350,
        horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.RIGHT,
        verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP,
        clickThroughEnabled: true,
        allowDocumentLocationChanges: false,
        onClick: function() {
            document.location = "architectsdk://openTagDetail?tagId=000";

var obj = new AR.GeoObject(location, {
    drawables: {
        cam: [placeWidget]

   The html is a classic html with normal css styling.


Could you describe in more details what it is your are doing with the HtmlDrawable so that we can have a more clear picture and maybe understand what is causing the performance issues?



Login or Signup to post a comment