Can I get the result of detecting a picture to go to the next page in AR.js, for example. Since I saw that it is sending object detection messages to the console, but I cannot use the detection result in the code
According to AR.js documentation, the 'markerFound' is 'Fired when a marker in Marker Based, or a picture in Image Tracking, has been found'.
So if this is how you define an image to track:
<a-nft type="nft" imageMarkerName ...
To add listener:
AFRAME.registerComponent(imageMarkerName, {
init: function () {
var marker = this.el;
marker.addEventListener('markerFound', function() {
// The image is found.
});
});
Related
Can any one help me through react native gifted chat? I want to share files like (.pdf, docs, .txt, .jpg.) How to do that?
You have to use renderCustomView (Function) - Custom view inside the bubble prop.
And add some meta information into your message data like this is a SPECIAL message and finally test in renderCustomView if you are in the case of a special message.
https://github.com/FaridSafi/react-native-gifted-chat/blob/master/App.tsx#L128
https://github.com/FaridSafi/react-native-gifted-chat/blob/master/example-expo/CustomView.tsx
react-native-gifted-chat already includes support for images and videos, using the properties video and image of IMessage, just past pass the the link of the resource
{
_id: 1,
text: 'My message',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
image: 'https://facebook.github.io/react/img/logo_og.png',
// You can also add a video prop:
video: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
// Mark the message as sent, using one tick
sent: true,
// Mark the message as received, using two tick
received: true,
// Mark the message as pending with a clock loader
pending: true,
// Any additional custom parameters are passed through
}
For the rest of types you have to implement your own logic, using one of the render functions, i think you could renderMessageImage with a link to the icon of the resources and add a description, also you should handle the click event to start download
What is actually happening?
main.dart
In initState, we are calling server to get image from database, then add it into sink
var capturedImagesList = List<dynamic>();
#override
void initState() {
super.initState();
_bloc.getImages(); //
});
}
bloc class
final _urlImage = BehaviorSubject<List<dynamic>>();
get urlImageSink => _urlImage.sink;
get urlImageStream => _urlImage.stream;
Future getImages() async {
Response image = await _repo.getImages(); // call server
var imageResponse = Response.fromJson(image.body);
urlImageSink.add(imageResponse.images); // add image to sink
}
The retrieved image will be displayed in horizontal ListView.
When the + image is clicked, it will allow user to select an image from gallery, then placed beside the ListView as image below.
Everything works fine !
But when I click the + image again to add one more image, it throw us this error
[ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception:
Concurrent modification during iteration: Instance(length:3) of
'_GrowableList'. E/flutter (32313): #0 List.addAll
(dart:core-patch/growable_array.dart:187:11)
main.dart
This is the code after image is selected from gallery.
#override
List<dynamic> userImage(File images) {
if (images != null) {
capturedImagesList.add(images.path); // add selected image to List
capturedImagesList.addAll(_bloc.urlImageStream.value); // add the server image to list
_bloc.urlImageSink.add(capturedImagesList); // add all images to list
}
return null;
}
Errror is pointed to this line
capturedImagesList.addAll(_bloc.urlImageStream.value);
Why it works for the first time, but failed for second time?
You could just do that
_bloc.urlImageSink.add([images])
And the image would reflected immediately in UI.
I think the problem is in this line
capturedImagesList.addAll(_bloc.urlImageStream.value);
this looks strange, you can't copy the stream into array, it won't work.
Did you check out this thread: Exception: Concurrent modification during iteration: Instance(length:17) of '_GrowableList'
I quote from the article:
This error means that you are adding or removing objects from a collection during iteration. This is not allowed since adding or removing items will change the collection size and mess up subsequent iteration.
So I don't see all the code, but could it be that when you add a picture via the add button, you clear the list or remove the current items?
Try to clear the array like this before doing addAll
_myLeaveRequests?.clear();
I'm trying to test if an image has been set by an imageView extension. I have the test passing when trying to load in from an http url. Now I want to test if the image gets set from an https url.
My current code is:
func test_DateImageLoadedFromHTTPSURL() {
let expected = expectation(description: "Image from https did load")
let viewer = UIImageView(frame: CGRect(x: 0, y: 0, width: 300, height: 250))
viewer.imageFromServerURL(urlString: "https://dummyimage.com/300x250/000/fff.png")
if viewer.image != nil {
expected.fulfill()
} else {
XCTFail()
}
waitForExpectations(timeout: 3.0, handler: nil)
}
It should work, unless I'm not seeing it.
Thanks
The order that you are doing things here will never work. Your method is asynchronous here so the order of things happening will be something like...
Run the method to get the image
Check the imageView.image is not nil (it is still nil at this point)
Wait for expectations
Download of image finished
Set the image
The method is asynchronous so the order of things happening changes.
You need to add some sort of completion to your method so that you can check the image is not nil AFTER it has been set and the completion been called.
Like...
viewer.imageFromServerURL(urlString: "https://dummyimage.com/300x250/000/fff.png") {
// image has finished loading here...
// check the image is not nil
}
Of course, you will need to update the actual method so that it will accept a closure and run the closure once the image is loaded.
The example code for the ionic 2 Loading feature that is shown in their docs is:
let loading = Loading.create({
content: 'Please wait...'
});
this.nav.present(loading);
Their online example shows the loading spinner appearing in the centre of the screen but when I try it in my app it appears in the top left hand corner.
How do they get it to appear in the centre?
Do you have the latest CSS/Sass in place?
The following works fine for me:
import {Loading} from "ionic-angular"
// put this inside a method
let loading = Loading.create({
content: 'Please wait...'
});
this.nav.present(loading);
See a working example here:
http://plnkr.co/edit/HzuzbF9sFVEKRsBrnIVI?p=preview
Look at home.ts for the code.
I have the following jsfiddle which he an existing image with a button that when clicked will change the image src randomly from an array.
JSFIDDLE: http://jsfiddle.net/GpSbd/7/
Some of these images will be very large, is it possible to reduce or compress the image file down before it does setImage and draws it onto the stage as i will eventually be uploading the images onto our server so want them to be as small as possible
// CHANGE IMAGE FUNCTION
$('#changeImage').on("click", function(){
var newImage = new Image();
var img = layer.get('#Image1')[0];
newImage.onload = function() {
<-- CAN I COMPRESS IT AT THIS STAGE? -->
img.setImage(newImage);
layer.draw();
};
var random = pictures[Math.floor(Math.random()*pictures.length)];
newImage.src = random;
});
You already have the image urls saved in your pictures[] array.
Just save that url (random) on your server and not the image itself.
This cuts your storage size by 20-100 times.
If the server needs to temporarily use the image, the server can use the url to fetch it.