How can we help you today?

Start a new topic
Discussions Wikitude SDK (Android, iOS, UWP) Wikitude SDK Questions or Problems

Radar is not working

Radar is not working
11 CommentsSorted by Newest First

Agg, it wasn't working. Thanks for your support Wolfang!

It actually works for me, the only thing is that your div where the radar should be positioned is not transparent. As we are drawing the radar in the background and not on top of the HTML content it is hidden. To fix this simply use "background: none" for the #radar css style.

Sending...thanks :D

please send it to forum (at) wikitude (dot) com

thanks

Hi Wolfang, 

Could you provide me a email? Thanks!

I quickly scanned over the code and do not see anything wrong with it. Could you please provide a zipped archive of the complete world including resources. Additionally you can test to see if there are any errors when loading the radar images by adding an onError trigger:

AR.radar.background = new AR.ImageResource("radar_bg.png", {onError: function() {alert('error loading resource radar_bg.png');} });

 

Yes, I have the lastest SDK (I downloaded it the last week). My Objective-C code (defined in the viewDIdLoad):

if ( ) {

        

        _wtArView = ;

        ;

        

        _wtArView.delegate = self;

        

        ;

        

        NSString *architectWorldURL = ;

        ;

}

 

My inyect locations:

if () {

        NSData *data = ;

        NSString *jsonString = ;

        NSString *javaScriptToCall = ;

        ;

}

 

The _coupons variable comes from http://sutsix.com/api/coupons_ar and the coupon.html is:

<html>

    <head>

        <meta name="viewport" content="target-densitydpi=device-dpi, width = 245, user-scalable = 0" />

        <style>

            * {margin:0;}

            body, html { margin:0; width: 245px; font-family:Helvetica; }

            table {border-collapse:collapse;border:none;}

            div.coupon {border-radius:50%; overflow:hidden; width: 245px; height:245px;}

            td {vertical-align:middle; text-shadow:0 1px 0 #000000; font-weight:bold; text-align: center; line-height:17px; width: 245px; padding: 0;}

            td.title {font-size:17px; color:#FFFFFF; height:60px; overflow:hidden; padding:20px 35px 0 35px; border-bottom:4px solid #000000; }

            td.title div {height:53px; text-overflow:ellipsis; overflow:hidden; width: 175px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

            td.distance div {font-size:14px; color:#e2cf00; background-color:#000000; height:30px; margin-top:140px; line-height:30px;}

            </style>

    </head>

    

    <body>

        <script>

            

            var colors  = ;

            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 = unescape(nv);

                    //|| true;

                }

            }

        

            var color = (colors != null ? colors : "#888888");

            var html = "<div class='coupon' style='background:url("+params.image+") no-repeat;'><table><tbody><tr><td class='title' style='background-color:"+color+"'><div>"+params.title+"</div></td></tr><tr><td class='distance'><div>A "+params.distance+"</div></td></tr></tbody></table></div>";

            document.write(html)

                        

            </script>

    </body>

    

</html>

 

Thanks.

 

Hi, I'm trying to implement the radar but something is missing. With the code below everything works excepts the radar. Also the Ar.ImageResource onError/onLoad is not triggering  :(

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

            <meta name="viewport" content="target-densitydpi=device-dpi, width=540, user-scalable = 0" />

            <title>Sutsix</title>

            

            <!-- CSS Styles -->

            <style type="text/css">

                * { margin: 0; }

                html, body { height: 100%; font-weight:bold; }

                #radar { position:absolute; top:10px; left:10px; width:100px; height:100px; background-color:#FF5500; }

            </style>

            

            <!-- Libreria Wikitude -->

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

            <script>

                

                // Variables

                var locations, counter, data, maxdistance = 50000;

                

                var arRadar = {

                    

                    hide: function hideFn() { AR.radar.enabled = false;},

                    setMaxDistance: function setMaxDistanceFn(maxDistanceMeters) { AR.radar.maxDistance = maxdistance; },

                    

                    show: function initFn() {

                        

                        AR.radar.container = document.getElementById("radar");

                        AR.radar.background = new AR.ImageResource("radar_bg.png");

                        AR.radar.northIndicator.image = new AR.ImageResource("radar_north.png");

                        

                        AR.radar.centerX = 0.5;

                        AR.radar.centerY = 0.5;

                        AR.radar.radius = 0.3;

                        AR.radar.northIndicator.radius = 0.0;

                        AR.radar.enabled = true;

                        

                    },

                    

                    updatePosition: function updatePositionFn() {

                        if (AR.radar.enabled) { AR.radar.notifyUpdateRadarPosition(); }

                    },

                };

            

                // Invoke the POI callback

                function clickCoupon(id) {

                    return function() {

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

                    }

                }

            

                // Function to inyect data and create POI

                function inyectLocations(data, url){

                

                    locations = new Array();

                    try {

                        data = JSON.parse(data);

                    }catch(e){

                        data = new Array();

                    }

                    

                    arRadar.show();

                

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

                    

                        data.latitude = parseFloat(data.latitude);

                        data.longitude = parseFloat(data.longitude);

                    

                        var location = new AR.GeoLocation(data.latitude, data.longitude, null);

                        var params = new Array();

                        var distance = Math.floor(location.distanceToUser());

                        var from = isNaN(distance) ? "N/A" : (distance + "mts");

                    

                        if (distance > maxdistance) continue;

                    

                        counter++;

                    

                        params = "image="    + url + data.id;

                        params = "title="    + escape(data.title);

                        params = "distance=" + escape(from);

                        params = "id="       + data.id;

                                            

                        var uri = "coupon.html?" + params.join("&");

                        var node = new AR.HtmlDrawable({uri:uri}, 5, {scale:1, updateRate:AR.HtmlDrawable.UPDATE_RATE.STATIC, onClick:clickCoupon(i)});

                        

                        var radar    = new AR.Circle(0.03, {

                                horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.CENTER,

                                opacity: 0.8,

                                style: { fillColor: "#ffffff" }

                        });

                        var indicator = new AR.Circle(0.03, {

                                horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.CENTER,

                                opacity: 0.8,

                                style: { fillColor: "#000000" }

                        });

                                                                                   

                        locations = new AR.GeoObject(location, {drawables: {cam: node, radar:, indicator:}});

                    

                    }

                

                    if (counter == 0) {

                        alert("Sorry, there are not coupons available.");

                    }

                }

            </script>

        </head>

    <body>

        <div id="radar">My radar</div>

    </body>

</html>

 

 

 

 

Are you using the latest SDK? Version 3.2 enbaled the usage of html divs to define the radar position.

If you are using 3.2 please provide a complete sample including an example input for your inyectLocations function, so I can have a look at it. 

Yes, actually everything works (POI and indicators) except the radar as I said in the beggining of the post. Also the radar images are not loading and I downloaded the lastest Wikitude SDK version.

Are you executing inyectLocations() correctly from the native part? Without this the arRadar.show() function won't be called. I quickly tried tested the code in the desktop browser using ade.js and it does not show any errors.
Login or Signup to post a comment
More topics in Wikitude SDK Questions or Problems
See all 3876 topics
© 2023 Wikitude, a Qualcomm company