API tools faq
paste
Guest User

Untitled

a guest
Feb 11th, 2020
123
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 14.77 KB | None | 0 0
raw download clone embed print report
  1. /*
  2.     Information about server communication. This sample webservice is provided by Wikitude and returns random dummy
  3.     places near given location.
  4.  */
  5. var ServerInformation = {
  6.     POIDATA_SERVER: "http://192.168.43.58:8000/lokasi",
  7.     POIDATA_SERVER_ARG_LAT: "lat",
  8.     POIDATA_SERVER_ARG_LON: "lon",
  9.     POIDATA_SERVER_ARG_NR_POIS: "nrPois"
  10. };
  11.  
  12. /* Implementation of AR-Experience (aka "World"). */
  13. var World = {
  14.  
  15.     /*
  16.         User's latest known location, accessible via userLocation.latitude, userLocation.longitude,
  17.          userLocation.altitude.
  18.      */
  19.     userLocation: null,
  20.  
  21.     /* You may request new data from server periodically, however: in this sample data is only requested once. */
  22.     isRequestingData: false,
  23.  
  24.     /* True once data was fetched. */
  25.     initiallyLoadedData: false,
  26.  
  27.     /* Different POI-Marker assets. */
  28.     markerDrawableIdle: null,
  29.     markerDrawableSelected: null,
  30.     markerDrawableDirectionIndicator: null,
  31.  
  32.     /* List of AR.GeoObjects that are currently shown in the scene / World. */
  33.     markerList: [],
  34.  
  35.     /* the last selected marker. */
  36.     currentMarker: null,
  37.  
  38.     locationUpdateCounter: 0,
  39.     updatePlacemarkDistancesEveryXLocationUpdates: 10,
  40.  
  41.     /* Called to inject new POI data. */
  42.     loadPoisFromJsonData: function loadPoisFromJsonDataFn(poiData) {
  43.  
  44.         /* Destroys all existing AR-Objects (markers & radar). */
  45.         AR.context.destroyAll();
  46.  
  47.         /* Show radar & set click-listener. */
  48.         PoiRadar.show();
  49.         $('#radarContainer').unbind('click');
  50.         $("#radarContainer").click(PoiRadar.clickedRadar);
  51.  
  52.         /* Empty list of visible markers. */
  53.         World.markerList = [];
  54.  
  55.         /* Start loading marker assets. */
  56.         World.markerDrawableIdle = new AR.ImageResource("assets/marker_idle.png", {
  57.             onError: World.onError
  58.         });
  59.         World.markerDrawableSelected = new AR.ImageResource("assets/marker_selected.png", {
  60.             onError: World.onError
  61.         });
  62.         World.markerDrawableDirectionIndicator = new AR.ImageResource("assets/indi.png", {
  63.             onError: World.onError
  64.         });
  65.  
  66.         /* Loop through POI-information and create an AR.GeoObject (=Marker) per POI. */
  67.         for (var currentPlaceNr = 0; currentPlaceNr < poiData.length; currentPlaceNr++) {
  68.             var singlePoi = {
  69.                 "id": poiData[currentPlaceNr].id,
  70.                 "latitude": parseFloat(poiData[currentPlaceNr].latitude),
  71.                 "longitude": parseFloat(poiData[currentPlaceNr].longitude),
  72.                 "altitude": parseFloat(poiData[currentPlaceNr].altitude),
  73.                 "title": poiData[currentPlaceNr].name,
  74.                 "description": poiData[currentPlaceNr].description
  75.             };
  76.  
  77.             World.markerList.push(new Marker(singlePoi));
  78.         }
  79.  
  80.         /* Updates distance information of all placemarks. */
  81.         World.updateDistanceToUserValues();
  82.  
  83.         World.updateStatusMessage(currentPlaceNr + ' places loaded');
  84.  
  85.         /* Set distance slider to 100%. */
  86.         $("#panel-distance-range").val(100);
  87.         $("#panel-distance-range").slider("refresh");
  88.     },
  89.  
  90.     /*
  91.         Sets/updates distances of all makers so they are available way faster than calling (time-consuming)
  92.         distanceToUser() method all the time.
  93.      */
  94.     updateDistanceToUserValues: function updateDistanceToUserValuesFn() {
  95.         for (var i = 0; i < World.markerList.length; i++) {
  96.             World.markerList[i].distanceToUser = World.markerList[i].markerObject.locations[0].distanceToUser();
  97.         }
  98.     },
  99.  
  100.     /* Updates status message shown in small "i"-button aligned bottom center. */
  101.     updateStatusMessage: function updateStatusMessageFn(message, isWarning) {
  102.  
  103.         var themeToUse = isWarning ? "e" : "c";
  104.         var iconToUse = isWarning ? "alert" : "info";
  105.  
  106.         $("#status-message").html(message);
  107.         $("#popupInfoButton").buttonMarkup({
  108.             theme: themeToUse,
  109.             icon: iconToUse
  110.         });
  111.     },
  112.  
  113.     /*
  114.         It may make sense to display POI details in your native style.
  115.         In this sample a very simple native screen opens when user presses the 'More' button in HTML.
  116.         This demoes the interaction between JavaScript and native code.
  117.     */
  118.     /* User clicked "More" button in POI-detail panel -> fire event to open native screen. */
  119.     onPoiDetailMoreButtonClicked: function onPoiDetailMoreButtonClickedFn() {
  120.         var currentMarker = World.currentMarker;
  121.         var markerSelectedJSON = {
  122.             action: "present_poi_details",
  123.             id: currentMarker.poiData.id,
  124.             title: currentMarker.poiData.title,
  125.             description: currentMarker.poiData.description
  126.         };
  127.         /*
  128.             The sendJSONObject method can be used to send data from javascript to the native code.
  129.         */
  130.         AR.platform.sendJSONObject(markerSelectedJSON);
  131.     },
  132.  
  133.     /* Location updates, fired every time you call architectView.setLocation() in native environment. */
  134.     locationChanged: function locationChangedFn(lat, lon, alt, acc) {
  135.  
  136.         /* Store user's current location in World.userLocation, so you always know where user is. */
  137.         World.userLocation = {
  138.             'latitude': lat,
  139.             'longitude': lon,
  140.             'altitude': alt,
  141.             'accuracy': acc
  142.         };
  143.  
  144.  
  145.         /* Request data if not already present. */
  146.         if (!World.initiallyLoadedData) {
  147.             World.requestDataFromServer(lat, lon);
  148.             World.initiallyLoadedData = true;
  149.         } else if (World.locationUpdateCounter === 0) {
  150.             /*
  151.                 Update placemark distance information frequently, you max also update distances only every 10m with
  152.                 some more effort.
  153.              */
  154.             World.updateDistanceToUserValues();
  155.         }
  156.  
  157.         /* Helper used to update placemark information every now and then (e.g. every 10 location upadtes fired). */
  158.         World.locationUpdateCounter =
  159.             (++World.locationUpdateCounter % World.updatePlacemarkDistancesEveryXLocationUpdates);
  160.     },
  161.  
  162.     /*
  163.         POIs usually have a name and sometimes a quite long description.
  164.         Depending on your content type you may e.g. display a marker with its name and cropped description but
  165.         allow the user to get more information after selecting it.
  166.     */
  167.  
  168.     /* Fired when user pressed maker in cam. */
  169.     onMarkerSelected: function onMarkerSelectedFn(marker) {
  170.         World.currentMarker = marker;
  171.  
  172.         /*
  173.             In this sample a POI detail panel appears when pressing a cam-marker (the blue box with title &
  174.             description), compare index.html in the sample's directory.
  175.         */
  176.         /* Update panel values. */
  177.         $("#poi-detail-title").html(marker.poiData.title);
  178.         $("#poi-detail-description").html(marker.poiData.description);
  179.  
  180.  
  181.         /*
  182.             It's ok for AR.Location subclass objects to return a distance of `undefined`. In case such a distance
  183.             was calculated when all distances were queried in `updateDistanceToUserValues`, we recalculate this
  184.             specific distance before we update the UI.
  185.          */
  186.         if (undefined === marker.distanceToUser) {
  187.             marker.distanceToUser = marker.markerObject.locations[0].distanceToUser();
  188.         }
  189.  
  190.         /*
  191.             Distance and altitude are measured in meters by the SDK. You may convert them to miles / feet if
  192.             required.
  193.         */
  194.         var distanceToUserValue = (marker.distanceToUser > 999) ?
  195.             ((marker.distanceToUser / 1000).toFixed(2) + " km") :
  196.             (Math.round(marker.distanceToUser) + " m");
  197.  
  198.         $("#poi-detail-distance").html(distanceToUserValue);
  199.  
  200.         /* Show panel. */
  201.         $("#panel-poidetail").panel("open", 123);
  202.  
  203.         $(".ui-panel-dismiss").unbind("mousedown");
  204.  
  205.         /* Deselect AR-marker when user exits detail screen div. */
  206.         $("#panel-poidetail").on("panelbeforeclose", function (event, ui) {
  207.             World.currentMarker.setDeselected(World.currentMarker);
  208.         });
  209.     },
  210.  
  211.     /* Screen was clicked but no geo-object was hit. */
  212.     onScreenClick: function onScreenClickFn() {
  213.         /* You may handle clicks on empty AR space too. */
  214.     },
  215.  
  216.     /* Returns distance in meters of placemark with maxdistance * 1.1. */
  217.     getMaxDistance: function getMaxDistanceFn() {
  218.  
  219.         /* Sort places by distance so the first entry is the one with the maximum distance. */
  220.         World.markerList.sort(World.sortByDistanceSortingDescending);
  221.  
  222.         /* Use distanceToUser to get max-distance. */
  223.         var maxDistanceMeters = World.markerList[0].distanceToUser;
  224.  
  225.         /*
  226.             Return maximum distance times some factor >1.0 so ther is some room left and small movements of user
  227.             don't cause places far away to disappear.
  228.          */
  229.         return maxDistanceMeters * 1.1;
  230.     },
  231.  
  232.     /* Updates values show in "range panel". */
  233.     updateRangeValues: function updateRangeValuesFn() {
  234.  
  235.         /* Get current slider value (0..100);. */
  236.         var slider_value = $("#panel-distance-range").val();
  237.         /* Max range relative to the maximum distance of all visible places. */
  238.         var maxRangeMeters = Math.round(World.getMaxDistance() * (slider_value / 100));
  239.  
  240.         /* Range in meters including metric m/km. */
  241.         var maxRangeValue = (maxRangeMeters > 999) ?
  242.             ((maxRangeMeters / 1000).toFixed(2) + " km") :
  243.             (Math.round(maxRangeMeters) + " m");
  244.  
  245.         /* Number of places within max-range. */
  246.         var placesInRange = World.getNumberOfVisiblePlacesInRange(maxRangeMeters);
  247.  
  248.         /* Update UI labels accordingly. */
  249.         $("#panel-distance-value").html(maxRangeValue);
  250.         $("#panel-distance-places").html((placesInRange != 1) ?
  251.             (placesInRange + " Places") : (placesInRange + " Place"));
  252.  
  253.         World.updateStatusMessage((placesInRange != 1) ?
  254.             (placesInRange + " places loaded") : (placesInRange + " place loaded"));
  255.  
  256.         /* Update culling distance, so only places within given range are rendered. */
  257.         AR.context.scene.cullingDistance = Math.max(maxRangeMeters, 1);
  258.  
  259.         /* Update radar's maxDistance so radius of radar is updated too. */
  260.         PoiRadar.setMaxDistance(Math.max(maxRangeMeters, 1));
  261.     },
  262.  
  263.     /* Returns number of places with same or lower distance than given range. */
  264.     getNumberOfVisiblePlacesInRange: function getNumberOfVisiblePlacesInRangeFn(maxRangeMeters) {
  265.  
  266.         /* Sort markers by distance. */
  267.         World.markerList.sort(World.sortByDistanceSorting);
  268.  
  269.         /* Loop through list and stop once a placemark is out of range ( -> very basic implementation ). */
  270.         for (var i = 0; i < World.markerList.length; i++) {
  271.             if (World.markerList[i].distanceToUser > maxRangeMeters) {
  272.                 return i;
  273.             }
  274.         }
  275.  
  276.         /* In case no placemark is out of range -> all are visible. */
  277.         return World.markerList.length;
  278.     },
  279.  
  280.     handlePanelMovements: function handlePanelMovementsFn() {
  281.  
  282.         $("#panel-distance").on("panelclose", function (event, ui) {
  283.             $("#radarContainer").addClass("radarContainer_left");
  284.             $("#radarContainer").removeClass("radarContainer_right");
  285.             PoiRadar.updatePosition();
  286.         });
  287.  
  288.         $("#panel-distance").on("panelopen", function (event, ui) {
  289.             $("#radarContainer").removeClass("radarContainer_left");
  290.             $("#radarContainer").addClass("radarContainer_right");
  291.             PoiRadar.updatePosition();
  292.         });
  293.     },
  294.  
  295.     /* Display range slider. */
  296.     showRange: function showRangeFn() {
  297.         if (World.markerList.length > 0) {
  298.  
  299.             /* Update labels on every range movement. */
  300.             $('#panel-distance-range').change(function () {
  301.                 World.updateRangeValues();
  302.             });
  303.  
  304.             World.updateRangeValues();
  305.             World.handlePanelMovements();
  306.  
  307.             /* Open panel. */
  308.             $("#panel-distance").trigger("updatelayout");
  309.             $("#panel-distance").panel("open", 1234);
  310.         } else {
  311.  
  312.             /* No places are visible, because the are not loaded yet. */
  313.             World.updateStatusMessage('No places available yet', true);
  314.         }
  315.     },
  316.  
  317.     /*
  318.         You may need to reload POI information because of user movements or manually for various reasons.
  319.         In this example POIs are reloaded when user presses the refresh button.
  320.         The button is defined in index.html and calls World.reloadPlaces() on click.
  321.     */
  322.  
  323.     /* Reload places from content source. */
  324.     reloadPlaces: function reloadPlacesFn() {
  325.         if (!World.isRequestingData) {
  326.             if (World.userLocation) {
  327.                 World.requestDataFromServer(World.userLocation.latitude, World.userLocation.longitude);
  328.             } else {
  329.                 World.updateStatusMessage('Unknown user-location.', true);
  330.             }
  331.         } else {
  332.             World.updateStatusMessage('Already requesing places...', true);
  333.         }
  334.     },
  335.  
  336.     /* Request POI data. */
  337.     requestDataFromServer: function requestDataFromServerFn(lat, lon) {
  338.  
  339.         /* Set helper var to avoid requesting places while loading. */
  340.         World.isRequestingData = true;
  341.         World.updateStatusMessage('Requesting places from web-service');
  342.  
  343.         /* Server-url to JSON content provider. */
  344.         var serverUrl = ServerInformation.POIDATA_SERVER + "?" + ServerInformation.POIDATA_SERVER_ARG_LAT + "=" +
  345.             lat + "&" + ServerInformation.POIDATA_SERVER_ARG_LON + "=" +
  346.             lon + "&" + ServerInformation.POIDATA_SERVER_ARG_NR_POIS + "=20";
  347.  
  348.         var jqxhr = $.getJSON(serverUrl, function (data) {
  349.                 World.loadPoisFromJsonData(data);
  350.             })
  351.             .error(function (err) {
  352.                 World.updateStatusMessage("Invalid web-service response.", true);
  353.                 World.isRequestingData = false;
  354.             })
  355.             .complete(function () {
  356.                 World.isRequestingData = false;
  357.             });
  358.     },
  359.  
  360.     /* Helper to sort places by distance. */
  361.     sortByDistanceSorting: function sortByDistanceSortingFn(a, b) {
  362.         return a.distanceToUser - b.distanceToUser;
  363.     },
  364.  
  365.     /* Helper to sort places by distance, descending. */
  366.     sortByDistanceSortingDescending: function sortByDistanceSortingDescendingFn(a, b) {
  367.         return b.distanceToUser - a.distanceToUser;
  368.     },
  369.  
  370.     onError: function onErrorFn(error) {
  371.         alert(error);
  372.     }
  373. };
  374.  
  375.  
  376. /* Forward locationChanges to custom function. */
  377. AR.context.onLocationChanged = World.locationChanged;
  378.  
  379. /* Forward clicks in empty area to World. */
  380. AR.context.onScreenClick = World.onScreenClick;
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!