Map Autodesk Forge heatmaps to room - Data Visualization Api - javascript

Okay so I've been trying to map some heatmaps to a Revit room using the DataViz api. I was able to get X Y Z from Revit for the sensor inside the rooms, i've substracted the viewer.model.getGlobalOffset() and managed to show some sprites on these points. I know for a fact that those sprites / points are inside Rooms, but whenever I try to use the same points to load a heatmap I get the Some devices did not map to a room: warning and no heatmap is displayed.
Following the API documentation this warning appears when there is no room information in the point. Did I miss anything? This is "my" code:
async function loadHeatmaps(model){
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
// Given a model loaded from Forge
const structureInfo = new Autodesk.DataVisualization.Core.ModelStructureInfo(model);
const devices = [
{
id: "Oficina 6", // An ID to identify this device
name:"Oficina-",
position: { x: 22.475382737884104, y: 7.4884431474006163, z: 3.0 }, // World coordinates of this device
sensorTypes: ["temperature", "humidity"], // The types/properties this device exposes
}
];
var offset = viewer.model.getGlobalOffset();
removeOffset(devices[0],offset)
// Generates `SurfaceShadingData` after assigning each device to a room.
const shadingData = await structureInfo.generateSurfaceShadingData(devices);
console.log(shadingData)
// Use the resulting shading data to generate heatmap from.
await dataVizExtn.setupSurfaceShading(model, shadingData);
// Register color stops for the heatmap. Along with the normalized sensor value
// in the range of [0.0, 1.0], `renderSurfaceShading` will interpolate the final
// heatmap color based on these specified colors.
const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000];
// Set heatmap colors for temperature
const sensorType = "temperature";
dataVizExtn.registerSurfaceShadingColors(sensorType, sensorColors);
// Function that provides sensor value in the range of [0.0, 1.0]
function getSensorValue(surfaceShadingPoint, sensorType) {
// The `SurfaceShadingPoint.id` property matches one of the identifiers passed
// to `generateSurfaceShadingData` function. In our case above, this will either
// be "cafeteria-entrace-01" or "cafeteria-exit-01".
const deviceId = surfaceShadingPoint.id;
// Read the sensor data, along with its possible value range
let sensorValue = readSensorValue(deviceId, sensorType);
const maxSensorValue = getMaxSensorValue(sensorType);
const minSensorValue = getMinSensorValue(sensorType);
// Normalize sensor value to [0, 1.0]
sensorValue = (sensorValue - minSensorValue) / (maxSensorValue - minSensorValue);
return clamp(sensorValue, 0.0, 1.0);
}
// This value can also be a room instead of a floor
const floorName = "01 - Entry Level";
dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue);
}
function removeOffset(pos, offset) {
pos.position.x = pos.position.x - offset.x;
pos.position.y = pos.position.y - offset.y;
pos.position.z = pos.position.z - offset.z;
}
And I'm calling the loadHeatmaps() function inside onDocumentLoadSuccess callback.

EDIT: It looks like in this particular case it was a problem with floorName not being set to the right value. Note that this value (first parameter to dataVizExtn.renderSurfaceShading) should be set either to the name of the room, or to the name of the floor you want to update.
The offsets are a bit tricky so I'd suggest debugging that area, for example:
What coordinate system are the sensors defined in? If they are in the same coordinate system as the building model itself, you shouldn't subtract or add any offset to them. Whenever there's a model with a "global offset" in its metadata, it basically means that the Model Derivative service moved the model to origin to avoid floating point precision issues, and the viewer will then add the global offset back to each geometry when its loaded.
Try using the viewer APIs to get the bounding box of one of the rooms that the devices should map to, and see if the bounding box actually contains the XYZ point of the device you're trying to pass into the DataViz extension. The bounds of any object can be found like so:
function getObjectBounds(model, dbid) {
const tree = model.getInstanceTree();
const frags = model.getFragmentList();
let bounds = new THREE.Box3();
tree.enumNodeFragments(dbid, function (fragid) {
let _bounds = new THREE.Box3();
frags.getWorldBounds(fragid, _bounds);
bounds.union(_bounds);
}, true);
return bounds;
}

I have the same issue and my revit model was built by revit 2020. When I update model to 2022, heatmap can show on the room correctly.

Related

get a list of locations for indoor routing

I'm trying to add indoor routing to our HERE map. I'm trying to use the example from the sample site to start with. However I don't know the longitude and latitude of the rooms in our building, or the levelId. Is it possible to get this data from api?
below is the code I'm using:
function addRouteToMap(map) {
let venuesRoute = venuesService;
venuesRoute.calculateRoute({
origin: { coordinates: [47.450022, 8.563396]},
destination: { coordinates: [47.451259,8.560136], venueId: 24860, levelId: 9049 },
transportMode: 'pedestrian',
avoid: { features: 'elevator' }
}).then((result) => {
// Get objects for the calculated route
const route = new H.venues.Route(result.routes[0]);
const indoorObjects = route.getIndoorObjects();
// Link route map objects with the Indoor Map levels for automatic visibility updates:
for (let venueId in indoorObjects) {
for (let levelIndex in indoorObjects[venueId]) {
const venue = venuesProvider.getVenue(venueId);
const objectGroup = indoorObjects[venueId][levelIndex];
map.addObject(objectGroup);
venue.setMapObjects(objectGroup.getObjects(), levelIndex);
}
}
// Get H.map.Group that contains map objects representing outdoor segments:
const outdoorObjects = route.getOutdoorObjects();
map.addObject(outdoorObjects);
});
}
Room coordinates are centre points of an indoor space or geometry, they can be fetched by getCenter() method where you would need the geometry id as an input. A level object of the geometry can be fetched by getLevel() method, if you have the space id, or with getLevels() to fetch them all. You may also use search() method to retrieve geometry arrays.
The addEventListener also is an option. The event listener helps get the geometry on say event ‘tap’.
Please refer to the API references for more help at https://developer.here.com/documentation/maps/3.1.30.13/api_reference/H.venues.Geometry.html
Indoor Routing Service is currently provided as beta version, and we will discontinue that for a while to integrate indoor routing with HERE routing service.

Property 'landcover' of feature '1_1_1_1_1_0' is missing

I'm trying to implement algorithm on Earth Engine Code to predict cultivated area.
This is my code:
var landsatCollection = ee.ImageCollection('LANDSAT/LC08/C01/T1')
.filterDate('2017-01-01', '2017-12-31');
// Make a cloud-free composite.
var composite = ee.Algorithms.Landsat.simpleComposite({
collection: landsatCollection,
asFloat: true
});
// Merge the three geometry layers into a single FeatureCollection.
var newfc = urban.merge(vegetation).merge(water).merge(urban).merge(fields);
// Use these bands for classification.
var bands = ['B2', 'B3', 'B4', 'B5', 'B6', 'B7'];
// The name of the property on the points storing the class label.
var classProperty = 'landcover';
// Sample the composite to generate training data. Note that the
// class label is stored in the 'landcover' property.
var training = composite.select(bands).sampleRegions({
collection: newfc,
properties: [classProperty],
scale: 30
});
// Train a CART classifier.
var classifier = ee.Classifier.smileCart().train({
features: training,
classProperty: [classProperty],
});
// Print some info about the classifier (specific to CART).
print('CART, explained', classifier.explain());
// Classify the composite.
var classified = composite.classify(classifier);
Map.centerObject(newfc);
Map.addLayer(classified, {min: 0, max: 3, palette: ['red', 'blue', 'green','yellow']});
// Optionally, do some accuracy assessment. Fist, add a column of
// random uniforms to the training dataset.
var withRandom = training.randomColumn('random');
// We want to reserve some of the data for testing, to avoid overfitting the model.
var split = 0.7; // Roughly 70% training, 30% testing.
var trainingPartition = withRandom.filter(ee.Filter.lt('random', split));
var testingPartition = withRandom.filter(ee.Filter.gte('random', split));
// Trained with 70% of our data.
var trainedClassifier = ee.Classifier.smileCart().train({
features: trainingPartition,
classProperty: classProperty,
inputProperties: bands
});
// Classify the test FeatureCollection.
var test = testingPartition.classify(trainedClassifier);
// Print the confusion matrix.
var confusionMatrix = test.errorMatrix(classProperty, 'classification');
print('Confusion Matrix', confusionMatrix);
I am getting these errors:
CART, explained
Dictionary (Error)
Property 'landcover' of feature '1_1_1_1_0_0' is missing.
Confusion Matrix
ConfusionMatrix (Error)
Property 'landcover' of feature '1_1_1_1_1_0' is missing.
Layer 1: Layer error: Property 'landcover' of feature '1_1_1_1_0_0' is missing.
Give me some suggestions to resolve these errors.
The error seems like in line 11,
var newfc = urban.merge(vegetation).merge(water).merge(urban).merge(fields);
Make sure urban and others are a FeatureCollection from Configure geometry import tool.
Add Property 'landcover' and value 1 for urban, 2 for water and so on.
you can check print(newfc) and look at the properties and check for feature '1_1_1_1_0_0'
I have attached the image.configure geometry point

How do I find all markers/features within a given radius of any arbitrary point and store the lat/lng of said markers?

Given a point, say [-75.343, 39.984], how do I go about finding all features/markers within a 5km radius of it? I'm utilizing turf.js so I'll be using their circle() function to generate the circle about the point.
Would this work?
const center = [-75.343, 39.984];
const radius = 5;
const options = {steps: 10, units: 'kilometers', properties: {foo: 'bar'}};
const circle = turf.circle(center, radius, options);
}
const features = map.queryRenderedFeatures(
circle,
{ filter: {["within", circle] : true} }
);
I'm hoping to find all features within the circle and be able to store them in an array or in a database for further processing like accessing the feature's lat/lng, etc.
Thank you for the help!
Using queryRenderedFeatures you will be able to get the features that are actually in the viewport (visible). In case your source data is GeoJSON, you can use querySourceFeatures, so it will look to all your source features:
const filteredFeatures = map.querySourceFeatures('routes', {
filter: ['within', circle]
});

How to customize HERE Maps Clusters

In my current Hybrid app I am in the process of switching from using Leaflet and its Clusterer plugin to using the HERE Maps v3 JavaScript API. The HERE Maps documentation can be rather dense at times for someone used to the clarity of Leaflet documentation. Nevertheless the process of using HERE is fairly straightforward. However, there is one Leaflet feature that I really miss:
In Leaflet when you add markers to a cluster it is possible to assign custom map pins to each marker. Further, you can quite easily customize the pin used to represent the cluster itself. In HERE the documentation indicates the following
var dataPoints = [];
//create an array for the clustered marker datapoints
dataPoints.push(new H.clustering.DataPoint(43.25539364396839, -79.07150530321474));
dataPoints.push(new H.clustering.DataPoint(43.255434408174246, -79.07175552759227));
dataPoints.push(new H.clustering.DataPoint(43.25557588373579, -79.07203209137799));
dataPoints.push(new H.clustering.DataPoint(43.25567419706804, -79.07218354297491));
//populate that array
var clusteredDataProvider = new H.clustering.Provider(dataPoints);
//create a cluster data provider and assign it the freshly created data points
var layer = new H.map.layer.ObjectLayer(clusteredDataProvider);
//create a new layer that uses this provider
map.addLayer(layer);
//inject this layer into the map
This works. However, it leaves me with three unanswered questions
How can I make the Cluster icon "explode" when tapped so the map zooms in automatically to the clustered map pins and shows each individual map pin with its assigned icon?
How do I assign individual PNG icon images to each of the "datapoints" above?
How to I customize the look and feel of the actual Cluster map pin itself?
Clusters and noise points are represented on the map with markers. Unless otherwise configured, the clustering provider uses the default bitmap markers theme with weight information to display clusters and noise points on the map. You can define your own custom theme and pass it to the provider as the theme property.
Read please this docu on https://developer.here.com/documentation/maps/3.1.22.0/dev_guide/topics/clustering.html
A custom theme is defined in an object that implements the interface H.clustering.ITheme as demonstrated by the code below.
/**
* Make clustering of markers with a custom theme
*
* Note that the maps clustering module https://js.api.here.com/v3/3.1/mapsjs-clustering.js
* must be loaded to use the Clustering
*
* #param {H.Map} map A HERE Map instance within the application
* #param {H.ui.UI} ui Default ui component
* #param {Function} getBubbleContent Function returning detailed information about photo
* #param {Object[]} data Raw data containing information about each photo
*/
function startClustering(map, ui, getBubbleContent, data) {
// First we need to create an array of DataPoint objects for the ClusterProvider
var dataPoints = data.map(function(item) {
// Note that we pass "null" as value for the "altitude"
// Last argument is a reference to the original data to associate with our DataPoint
// We will need it later on when handling events on the clusters/noise points for showing
// details of that point
return new H.clustering.DataPoint(item.latitude, item.longitude, null, item);
});
// Create a clustering provider with a custom theme
var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
clusteringOptions: {
// Maximum radius of the neighborhood
eps: 64,
// minimum weight of points required to form a cluster
minWeight: 3
},
theme: CUSTOM_THEME
});
// Note that we attach the event listener to the cluster provider, and not to
// the individual markers
clusteredDataProvider.addEventListener('tap', onMarkerClick);
// Create a layer that will consume objects from our clustering provider
var layer = new H.map.layer.ObjectLayer(clusteredDataProvider);
// To make objects from clustering provider visible,
// we need to add our layer to the map
map.addLayer(layer);
}
// Custom clustering theme description object.
// Object should implement H.clustering.ITheme interface
var CUSTOM_THEME = {
getClusterPresentation: function(cluster) {
// Get random DataPoint from our cluster
var randomDataPoint = getRandomDataPoint(cluster),
// Get a reference to data object that DataPoint holds
data = randomDataPoint.getData();
// Create a marker from a random point in the cluster
var clusterMarker = new H.map.Marker(cluster.getPosition(), {
icon: new H.map.Icon(data.thumbnail, {
size: {w: 50, h: 50},
anchor: {x: 25, y: 25}
}),
// Set min/max zoom with values from the cluster,
// otherwise clusters will be shown at all zoom levels:
min: cluster.getMinZoom(),
max: cluster.getMaxZoom()
});
// Link data from the random point from the cluster to the marker,
// to make it accessible inside onMarkerClick
clusterMarker.setData(data);
return clusterMarker;
},
getNoisePresentation: function (noisePoint) {
// Get a reference to data object our noise points
var data = noisePoint.getData(),
// Create a marker for the noisePoint
noiseMarker = new H.map.Marker(noisePoint.getPosition(), {
// Use min zoom from a noise point
// to show it correctly at certain zoom levels:
min: noisePoint.getMinZoom(),
icon: new H.map.Icon(data.thumbnail, {
size: {w: 20, h: 20},
anchor: {x: 10, y: 10}
})
});
// Link a data from the point to the marker
// to make it accessible inside onMarkerClick
noiseMarker.setData(data);
return noiseMarker;
}
};
/**
* Boilerplate map initialization code starts below:
*/
// Helper function for getting a random point from a cluster object
function getRandomDataPoint(cluster) {
var dataPoints = [];
// Iterate through all points which fall into the cluster and store references to them
cluster.forEachDataPoint(dataPoints.push.bind(dataPoints));
// Randomly pick an index from [0, dataPoints.length) range
// Note how we use bitwise OR ("|") operator for that instead of Math.floor
return dataPoints[Math.random() * dataPoints.length | 0];
}
/**
* CLICK/TAP event handler for our markers. That marker can represent either a single photo or
* a cluster (group of photos)
* #param {H.mapevents.Event} e The event object
*/
function onMarkerClick(e) {
// Get position of the "clicked" marker
var position = e.target.getGeometry(),
// Get the data associated with that marker
data = e.target.getData(),
// Merge default template with the data and get HTML
bubbleContent = getBubbleContent(data),
bubble = onMarkerClick.bubble;
// For all markers create only one bubble, if not created yet
if (!bubble) {
bubble = new H.ui.InfoBubble(position, {
content: bubbleContent
});
ui.addBubble(bubble);
// Cache the bubble object
onMarkerClick.bubble = bubble;
} else {
// Reuse existing bubble object
bubble.setPosition(position);
bubble.setContent(bubbleContent);
bubble.open();
}
// Move map's center to a clicked marker
map.setCenter(position, true);
}
// Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
// Step 2: initialize a map
var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
center: new H.geo.Point(50.426467222414374, 6.3054632497803595),
zoom: 6,
pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
// Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Step 4: create the default UI component, for displaying bubbles
var ui = H.ui.UI.createDefault(map, defaultLayers);
/**
* Merges given data with default bubble template and returns resulting HTML string
* #param {Object} data Data holding single picture information
*/
function getBubbleContent(data) {
return [
'<div class="bubble">',
'<a class="bubble-image" ',
'style="background-image: url(', data.fullurl, ')" ',
'href="', data.url, '" target="_blank">',
'</a>',
'<span>',
// Author info may be missing
data.author ? ['Photo by: ', '<a href="//commons.wikimedia.org/wiki/User:',
encodeURIComponent(data.author), '" target="_blank">',
data.author, '</a>'].join(''):'',
'<hr/>',
'<a class="bubble-footer" href="//commons.wikimedia.org/" target="_blank">',
'<img class="bubble-logo" src="data/wikimedia-logo.png" width="20" height="20" />',
'<span class="bubble-desc">',
'Photos provided by Wikimedia Commons are <br/>under the copyright of their owners.',
'</span>',
'</a>',
'</span>',
'</div>'
].join('');
}
// Step 5: request data that will be visualized on a map
startClustering(map, ui, getBubbleContent, photos);
This worked example try please on JsFiddle: https://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/maps-api-for-javascript-examples/tree/master/custom-cluster-theme
The data for this example loaded from https://heremaps.github.io/maps-api-for-javascript-examples/custom-cluster-theme/data/photos.js
How the Cluster icon to "explode" when tapped you can see sources of this example https://tcs.ext.here.com/examples/v3.1/cluster_marker_spider . Note please on loaded additional js module "ClusterMarkerSpider-..."
How zoom-in to "exploded" of the clustered map pins - note please on "forEachDataPoint" (in Spider example) there are created all Markers which you can simple push to some H.map.Group and after zoom-in to this group by its bounding box.

Three.js Object3D.applyMatrix() setting incorrect scale

Three.js r.71
I'm just getting into Three.js (awesome btw) but am having an issue. I am trying to stream geometry and position/scale/rotation changes between clients using Socket.io and NodeJS. On the server I store the JSON representation of the scene and stream object changes between clients.
When the object's matrix changes (position, scale, rotation), I stream the new matrix to the server and forward it to the other clients. On the other clients I call applyMatrix() with the streamed object (the source object's matrix).
The problem I ran into is that when calling applyMatrix(sourceMatrix), it seems to multiple the existing scale by the scale found in sourceMatrix. For example, when the current object has a scale of x: 2, y:1, z:1, and I apply a matrix with the same scale, after calling applyMatrix, the destination object's scale is x:4, y:1, z:1.
This seems like a bug to me, but wanted to double check.
// Client JS:
client.changeMatrix = function (object) {
// Set the object's scale to x:2 y:1 z:1 then call this twice.
var data = {uuid: object.uuid, matrix: object.matrix};
socket.emit('object:changeMatrix', data);
};
socket.on('object:matrixChanged', function (data) {
var cIdx = getChildIndex(data.uuid);
if (cIdx >= 0) {
scene.children[cIdx].applyMatrix(data.matrix);
// At this point, the object's scale is incorrect
ng3.viewport.updateSelectionHelper();
ng3.viewport.refresh();
}
});
// Server JS:
socket.on('object:changeMatrix', function (data) {
socket.broadcast.emit('object:matrixChanged', data);
});
#WestLangley is correct, I really did not understand what apply matrix is doing (and still don't quite know what it is used for).
I solved my problem by manually setting each element in the source matrix and calling decompose:
// Client JS:
socket.on('object:matrixChanged', function (data) {
var cIdx = getChildIndex(data.uuid);
var child = null;
var key;
if (cIdx >= 0) {
child = scene.children[cIdx];
for (key in child.matrix.elements) {
if (child.matrix.elements.hasOwnProperty(key)) {
child.matrix.elements[key] = data.matrix.elements[key];
}
}
child.matrix.decompose(child.position, child.quaternion, child.scale);
}
}
Unfortunately, once the server picks up the Matrix object, calling:
child.matrix.copy(data.matrix);
does no work. That's why I ended up setting each element manually.

Categories