My app has a ARSCNView and recognises an image with image detection
The goal is to look for an image and once it is recognised change the world position to its center
Something is not working. Any help would be greatly appreciated!
func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
guard let imageAnchor = anchor as? ARImageAnchor else {return}
if let imageName = imageAnchor.referenceImage.name {
switch imageName {
case "myImage":
//OK, the image gets recognized
let refSphere = SCNSphere(radius: 0.02)
let refNode = SCNNode(geometry: refSphere)
refSphere.firstMaterial?.diffuse.contents = UIColor.red.withAlphaComponent(0.8)
node.addChildNode(refNode) // OK, there's a sphere representation on top of the recognized image
sceneView.session.pause()
self.sceneView.session.setWorldOrigin(relativeTransform: node.simdTransform) // Trying to move the world Origin to the center of recognized image
sceneView.session.run(configuration, options: [.resetTracking])
let box = SCNBox(width: 0.05, height: 0.05, length: 0.05, chamferRadius: 0.01)
let boxNode = SCNNode(geometry: box)
box.firstMaterial?.diffuse.contents = UIColor.green.withAlphaComponent(0.9)
boxNode.position = SCNVector3(0,0,0)
sceneView.scene.rootNode.addChildNode(boxNode) // Not OK - I was expecting to have world Origin in the center of the recognized image and a green box on top of it
default:
print("other")
}
}
}
I did it this way:
self.sceneView.session.setWorldOrigin(relativeTransform: imageAnchor.transform)
Don't know if it's still relevant to you, but after you change the world origin, with self.sceneView.session.setWorldOrigin, you resume session with .resetTracking option, which sets your world origin to the location of the camera.
Getting rid of that option should help.
Related
I really can't find any good documentation or any good samples on how to do this.
Here is my code. This is running in an Asp.net Core View.
var imageMarker = "https://unpkg.com/leaflet#1.7.1/dist/images/marker-icon.png";
for (var i = 0; i < locationData; i++) {
let imageName = 'image' + i;
map.imageSprite.add(imageName, imageMarker).then(function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create a point feature and add it to the data source.
datasource.add(new atlas.data.Feature(new atlas.data.Point(i.longitude, i.latitude), {
name: i.name
}));
//Add a layer for rendering point data as symbols.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//Pass in the id of the custom icon that was loaded into the map resources.
image: imageName,
//Optionally scale the size of the icon.
size: 0.5
},
textOptions: {
//Add some text
textField: name,
//Offset the text so that it appears on top of the icon.
offset: [0, -2]
}
}));
});
}
I'm not getting any errors. The Symbols just don't appear on the map.
The sample linked below works in my map.events.add ready function.
Image Sprite sample
Any help is much appreciated! Thanks!
Here is what ended up working for me. I worked with Microsoft Support on this. locationData contains the image, longitude and latitude. The min and max of both longitude and latitude is passed in as well to set the camera boundry. The biggest issue with my original code was setting iconOptions size to 0.5. The plugin did not like that. It's now set to 1.
function addMarkerSymbols(locationData, min_long, min_lat, max_long, max_lat)
{
map.setCamera({
bounds: [min_long, min_lat, max_long, max_lat],
padding: 50
});
$.each(locationData, function (i, item)
{
map.imageSprite.add('default-icon' + i, item.locationImage);
//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a data set to the data source.
datasource.add(new atlas.data.Feature(new atlas.data.Point([item.longitude, item.latitude]), null));
//Create a symbol layer to render the points.
layer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//The map control has built in icons for bar, coffee and restaurant that we can use.
image: 'default-icon' + i,
anchor: 'center',
allowOverlap: true,
size: 1
}
});
map.layers.add(layer);
});
}
The image below is the output of the code I wrote. The text automatically gets centred when placing it with my image in a ZStack. But I want the Text to be placed over the 100 number on the y-axis. How can I do this? Image
Disclaimer: I am using Swift Playground
This is my Code
import SwiftUI
import PlaygroundSupport
struct ContentView : View {
var body: some View {
ZStack {
Image(uiImage: UIImage(named: "Screenshot 2020-05-12 at 14.14.22")!).resizable()
.frame(width: 700.0, height: 700.0)
Text("Hello")
.foregroundColor(Color.black)
}
}
}
PlaygroundPage.current.setLiveView(ContentView())
Here is possible approach
ZStack {
Image(uiImage: UIImage(named: "large_image")!).resizable()
.frame(width: 700.0, height: 700.0)
.overlay(GeometryReader { gp in
Text("Hello")
.foregroundColor(Color.black)
.position(x: gp.size.width / 2, y: gp.size.height / 4)
}
)
}
of course if you generate image then you should know more exact y: coordinate to position text. GeometryReader in such case gives image's local coordinate space.
I want to download a pdf file with Arabic fonts in react and haven't found any solution. I am currently using jsPdf but it's not rendering Arabic font's properly
let doc = new PDFDocument
let doc = new pdf();
doc.setFontSize(10);
doc.rect(20, 20, doc.internal.pageSize.getWidth() - 40,
doc.internal.pageSize.getHeight() - 40, 'S');
doc.setTextColor(128,0,128);
doc.text("Date", 30, 25);
doc.text(this.state.date, 50, 25);
doc.text("السلام عليكم", 30, 35);
doc.text("Quantity", 120, 35);
let distance = 30;
doc.save("data.pdf");
Thanks in advance
First download a desired font. Then go to https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html
and convert & download the file. Move it to your project directory and import it in the desired module.
You can also take the large string and put it in a variable const myFont = "VVV....VVV"
Then use it like this.
doc.addFileToVFS("MyFont.ttf", myFont);
doc.addFont("MyFont.ttf", "MyFont", "normal");
doc.setFont("MyFont");
Now you will need to right-align the text.
doc.text("Arabic Text", 200, 20, "right");
//OR
doc.text("Arabic Text", 200, 20, { align : "right" } );
/*
200 is the x coordinate and marks the starting position of the text from right.
y coordinate is the distance from the top of the page.
*/
Did you try adding {lang: 'value'} Option ?
doc.text(['لا إله إلا الله محمد رسول الله', 'لا إله إلا الله', 'a'], 100, 100, { lang: 'ar' });
The Arabic font can be printed into pdf by following these steps
Convert HTML to canvas using html2canvas
Convert the image to pdf using jspdf
const input = document.getElementById('divIdToPrint');
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save("download.pdf");
});
Details in this blog
Demo link on Stackblitz
Add this styling to the wrapper object to properly render arabic font:
letter-spacing: normal !important;
source : Arabic font rendering
I have written my own google map directive in Angular.
I have drawn polygon using the drawing manager. Then from the coordinates drew by the user, got the coordinates and drew the Polygon.
Now I want to add the image in polygon.
How to add the image in polygon area?
bermudaTriangle = new google.maps.Polygon({
paths: polygonsArray,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
, editable: true
});
Here we need do a trick like following.
Add a polygon
Get the polygon coordinates.
Now draw a icon with the marker in the specified coordinates
Then it will look like an icon inside the polygon
So here, after adds the polygon, I have drawn icon with the help of marker in the center place of the polygon.
var bounds = new google.maps.LatLngBounds();
var i, center;
for (i = 0; i < polygonsCoordinates.length; i++) {
bounds.extend(polygonsCoordinates[i]);
}
center = bounds.getCenter();
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: { lat: center.lat(), lng: center.lng() },
map: map,
icon: image
});
I'm developing a mobile app in Ionic.My requirement is I had a stationary image on the map, I need the location under that image.. Below is the code I found for dragging a marker and getting a location.
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
title: "My Location",
draggable:true
});
google.maps.event.addListener(loc, 'dragend', function(evt){
console.log('Current Latitude:',evt.latLng.lat(),'Current Longitude:',evt.latLng.lng());
});
But I need a stationary Image and get the location when the map is dragged some thing like in the below image. There is a rounded circle, when i drag the Map , I can see the location under the Image..
Anyone please guide me to achieve that.
Thankyou