Wikitude
How can we help you today?
HTMLDrawable viewPort
5 CommentsSorted by Oldest First
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%; }
</style>
<script src="architect://architect.js"></script>
<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);
//jsonObject.length
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(jsonObject.id), backgroundColor:'#00000055'})
? jsonObject.lat = parseFloat(jsonObject.lat);
? jsonObject.lon = parseFloat(jsonObject.lon);
? var geoLoc = new AR.GeoLocation(jsonObject.lat, jsonObject.lon);
? locations = new AR.GeoObject(geoLoc, {drawables: {cam: node}});
}
}
</script>
--------------------------------------------------------------------------------------------------
You need include the meta-tag viewport and set the rendering viewport width when creating the html drawable. See this article for a step by step guide: http://forum.wikitude.com/documentation?p_p_id=2_WAR_knowledgebaseportlet&p_p_lifecycle=0&p_p_state=normal&p_p_mode=view&p_p_col_id=column-2&p_p_col_count=1&_2_WAR_knowledgebaseportlet_mvcPath=%2Fdisplay%2Fview_article.jsp&_2_WAR_knowledgebaseportlet_resourcePrimKey=35564
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(jsonObject.lat), 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:
<script>
var params = {};
if (location.search) {
var parts = location.search.substring(1).split('&');
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>")
</script>
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.
Thanks!
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.
© 2023 Wikitude, a Qualcomm company
Daniel Fernández