Start a new topic

HTMLDrawable viewPort

HTMLDrawable viewPort

Hi! I'm having some issues with the viewPort area and the HTMLDrawable object. When I create the object I can see the "clickeable" area setting a background color. In all my objects the height is bigger than the real height for my DIV and also the background image is pixeled. How can I calculate the real viewPort and the SDU width? my DIV is 110x70 px. Thanks!



 <style type="text/css">

      * { margin: 0; }

      html, body { height: 100%; }        


<script src="architect://architect.js"></script>




      // Variables

      var jsonObject;

      var locations;

      var images = new Array("map-pin-light", "map-pin-street", "map-pin-water", "map-pin-other");

      var cssStyle = 'display: inline-block; width: 40px; height: 70px; font-family: "PassionOne-Regular"; font-size: 30px; padding-right: 5px; padding-left: 65px; color: #FFFFFF; text-align: center; text-shadow: 0 1px 0px #000000; line-height: 70px;  background-color: #FF000044';


                // Invoca el callback para el reporte seleccionado

      function clickReport(id) {

            return function() {

                  document.location = "architectsdk://opendetailpage?id="+id;  




                // Función que parsea los datos del JSON. Requiere adicionalmente el parámetro del BUNDLE PATH.

      function newData(jsonData, bundlePath){


            locations = new Array();

            jsonObject = JSON.parse(jsonData); 



            for(var i = 0; i < jsonObject.length; i++) {


                  var textData = parseInt(jsonObject.supports) + 1; 

            ?      var imageData = bundlePath + "/" + images + (parseInt(jsonObject.status) == 1 ? "@2x.png" : "-ok@2x.png");

            ?      var htmlData = "<body style='margin:0;'><div style='background-image:url("+imageData+");"+cssStyle+"'>+"+textData+"</div></body>";

            ?      var node = new AR.HtmlDrawable({html:htmlData}, 1, {viewportWidth:30, scale:2, onClick : clickReport(, backgroundColor:'#00000055'})



            ? = parseFloat(;

            ?      jsonObject.lon = parseFloat(jsonObject.lon);

            ?      var geoLoc = new AR.GeoLocation(, jsonObject.lon);               

            ?      locations = new AR.GeoObject(geoLoc, {drawables: {cam: node}});










So It's not possible using the dynamic HTML and I need to use a external HTML?

Well, the external HTML option works very well but I never could make work the method evalJavascript to pass data inside of my html. For this reason I used this option and worked very well. First I create the HTMLDrawable:



var uri = "report.html?id=1&count=2";

var node = new AR.HtmlDrawable({uri:uri}, 4, {scale:1, updateRate:AR.HtmlDrawable.UPDATE_RATE.STATIC})

var geoLoc = new AR.GeoLocation(parseFloat(, parseFloat(jsonObject.lon));               

new AR.GeoObject(geoLoc, {drawables: {cam: node}});



In this way I add some URL params and I can read them inside of my HTML (report.html) in this way:



    var params = {};

    if ( {

        var parts ='&');

        for (var i = 0; i < parts.length; i++) {

            var nv = parts.split('=');

            if (!nv) continue;

            params = nv || true;



    document.write("<div class='report'>+"+params.count+"</div>")




And this works perfect. I also could thanks if you can provide me a sample for the evalJavascript (I can't find one). I tried to define a custom function in my report.html and call it using the evalJavascript with no successful. 




Great that you got it working.

Just a clarification: You don't need to use an external html (.uri="" ), it is still possible to define the html directly (.html="" ). However I find it clearer to have it in a separate file.

Calling evalJavascript only works for if you set the updateRate at construction to any of the DYNAMIC_ flags (see API reference for more details). Unfortunately as I mentioned in the previous post this introduces framerate jiggers and therefore is currently not recommended. Which means for evalJavascript that it is also not recommended at the moment.
Login or Signup to post a comment