I am trying to add a new band to an image in Earth Engine APP but it doesn't appear to be working. I can get it to work for an image collection but not a single image.
Here is my code:
var test = ee.Image.expression(('VV')/('VH')).rename('test');
ee.initialize();
image = ee.Image('COPERNICUS/S1_GRD/S1A_IW_GRDH_1SDV_20170415T062305_20170415T062330_016151_01AAE9_5D0F');
var combined = image.addBands(test);
var visParams = {"opacity":1,"bands":["VV"],"min":-30,"max":10,"gamma":1};
var eeMapConfig = combined.getMap(visParams);
Does anyone have any ideas why this isn't working?
Related
I used react-dropzone for image upload and I got “file name” and “preview” for each uploaded item from the dropzone.
And I would like to use ColorThief for detecting the uploaded image of colors. Because I have to reject when the color is more than 20 from the uploaded image.
I got the following error when I put “file name” in image.src:
Unhandled Rejection (IndexSizeError): Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
Here is my code.
var image = new Image;
image.src = FILENAME_FROM_DROPZONE;
var colorThief = new ColorThief();
var dominantColor = colorThief.getPalette(image);
Is there any way to get a complete file path from DropZone?
Now I just got the uploaded file name.
I think the error occurs because there is no complete file path in image.src.
How can I get a complete file path from Dropzone? Is there any another way to solve this error please?
I am doing this using FileReader, here is the code:
// let's get the data from DropZone
const { acceptedFile } = e.detail
let reader = new FileReader()
reader.readAsDataURL(acceptedFile)
// create an image
let img = new Image()
img.src = reader.result
// and now let use the colorThief
const colorThief = new ColorThief()
const colors = colorThief.getColor(img)
This way you have your dominant color and can use image for preview.
I get an image on a remote server with :
var response = UrlFetchApp.fetch(fileURL);
var fileBlob = response.getBlob();
How to get the image from the blob ? I would like to use this image in order to get its size (with getHeight() and getWidth()) and do different other operations on it.
Thanks
You want to directly retrieve the width and height from the blob of image data using Google Apps Script.
If my understanding is correct, how about this answer?
Pattern 1:
In this pattern, the width and height are retrieved from the blob of image data using Google Apps Script.
Unfortunately, in the current stage, there are no methods for directly retrieving the width and height from the blob of image data. So I created the script for retrieving by analyzing the binary level as a GAS library. This is also mentioned by Cooper's comment. Using this library, you can directly retrieve the width and height from the blob of image data using Google Apps Script.
Sample script:
About the install of the library, please check here.
var response = UrlFetchApp.fetch(fileURL);
var fileBlob = response.getBlob();
var res = ImgApp.getSize(fileBlob);
Logger.log(res)
Result:
{
identification : ### BMP, GIF, PNG and JPG ###,
width : ### pixel ###,
height : ### pixel ###,
filesize : ### bytes ###
}
In this library, the width and height can be retrieved from BMP, GIF, PNG and JPG.
Pattern 2:
In this pattern, the width and height are retrieved using a Google Document. In this case, please enable Drive API at Advanced Google services.
Sample script:
function getSize_doc(blob) {
var docfile = Drive.Files.insert({
title: "temp",
mimeType: "application/vnd.google-apps.document",
}).getId();
var img = DocumentApp.openById(docfile).insertImage(0, blob);
Drive.Files.remove(docfile);
return {width: img.getWidth(), height: img.getHeight()};
}
function main() {
var response = UrlFetchApp.fetch(fileURL);
var fileBlob = response.getBlob();
var res = getSize_doc(fileBlob);
Logger.log(res)
}
In this script, at first, Google Document is created as a temporal file, and the width and height are retrieved from the inserted image from the blob. Then, the temporal file is deleted.
Pattern 3:
In this pattern, the width and height are retrieved by creating the blob as a file. In this case, please enable Drive API at Advanced Google services.
Sample script:
var response = UrlFetchApp.fetch(fileURL);
var fileBlob = response.getBlob();
var res = Drive.Files.insert({title: "temp"}, fileBlob);
Drive.Files.remove(res.id);
Logger.log(res.imageMediaMetadata.width)
Logger.log(res.imageMediaMetadata.height)
In this script, at first, a file is created from the blob as a temporal file, and the width and height are retrieved from the created file. Then, the temporal file is deleted.
References:
ImgApp
Advanced Google services
Class InlineImage of Document service
Files of Drive API
If this answer was not the direction you want, I apologize.
I am passing proper latitude and longitude to the map but it shows old map, having old lat lng. I know I am doing something wrong in this, but I can't figure out it. My project in ionic framework and for map I am using this plugin map plugin
This my html code
<div style="width:100%;height:200px" id="mapDisplay"></div>
This my angularJS code
var getLat = $scope.dealer.lat;
var getLng = $scope.dealer.lng;
var address = $scope.dealer.address;
var mapDiv = document.getElementById("mapDisplay");
const myGeoLocation = new plugin.google.maps.LatLng(getLat,getLng);
var map = plugin.google.maps.Map.getMap(mapDiv, {
'camera': {
'latLng': myGeoLocation,
'zoom': 15
}
});
map.addEventListener(plugin.google.maps.event.MAP_READY, function() {
map.addMarker({
'position': myGeoLocation,
'title': address
}, function(marker) {
marker.showInfoWindow();
});
});
From the docs of the map plugin you are using
This plugin generates only one map instance using the Map.getMap()
method. In general, you may want to create multiple maps, but this
plugin doesn't allow it.
So your plugin.google.maps.Map.getMap is only grabbing the existing instance, not creating a new one and the plugin.google.maps.event.MAP_READY is only fired once, the first time. However looking at the source code it looks like the instance exposes a remove method which you can use to destroy the existing instance and create a new one with the new sets of coordinates when the callback is called, e.g: map.remove(function() { /** reset map coordinates **/ }
** Extra **
If you just need to display a map with a set of coordinates you can do it using the native app by passing lat/lon to the $cordovaInAppBrowser plugin. As an example for iOS and Android you'd have the following:
iOS
$cordovaInAppBrowser.open('maps://?q=<latitude>,<longitude>', '_system');
Android
$cordovaInAppBrowser.open('geo:0,0?q=<latitude>,<longitude>', '_system');
And finally you need to enable the geo uri in your config.xml like so:
<allow-intent href="geo:*" />
The plugin doesn't allow to create multiple maps instance More detail.
But you can achieve this by using this code
var map = plugin.google.maps.Map.getMap(div);
map.clear();
map.off();
map.trigger("test");
map.addEventListener(plugin.google.maps.event.MAP_READY);
$('<div/>').addClass('centerMarker').appendTo(map.getDiv())
var mp = $('.centerMarker');
google.maps.event.addListener(mp.data('win'), 'position_changed', function(){
var locations = mp.data('win').getPosition();
});
Above code is working fine, but getPosition() retirning data is changing frequently from {H:'latdat',L:'Logdat'}, to {G:'latdat',K:'Logdat'}
And today it is not returning the latitude and longitude. Is it a mistake from google side or from my side.
I called it Incorrectly.
Below one is correct implementation
var lat = myMarker.getPosition().lat();
var lng = myMarker.getPosition().lng();
Previously if I do getPosition() i'm getting latitude and longitude. But it is not the correct way
I am facing a slight issue while editing a file.
I am saving a file (image) with a certain name on ios using the code below.
But the problem is that when i replace the image stored in a file (eg temp.jpg) the app still picks up the previous image when i open the file. However the new image can be seen in the explorer.
If i restart the app the new image appears while opening the image.
var folder = Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory, 'DocImages');
// DocImages is a folder for files
// ImageVar contains the blob for the new image from camera or gallery
// docImgModel is the model class containing the name and image path of the image
if(imageVar !== null && imageVar !== undefined){
if (docImgModel.imagePath !== null && docImgModel.imagePath !== undefined){
tempFile = Ti.Filesystem.getFile(docImgModel.imagePath);
if (tempFile.exists()) {
tempFile.deleteFile(); // deleting already existing file
}}
// in case of changing the image stored in a file(the case in which i have a
// problem) the imgFile(below) is same as docImgModel.imagePath (above)
imgFile = Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory + 'DocImages/', filenameWithExtension); // creating a new file
// writing image to file
imgFile.write(imageVar);
Ti.API.info('new image saved');
}
}
I was wondering if titanium saves cache of the file already opened and is hence not able to show the new image.
If not, is there anything else i am doing wrong or something i could do to make it work.
I just want to show the new saved image. Is there any way to do it.
Thanks.
I haven't worked with opening files from the device, but I ran into a similar issue when trying to update data on my screen. If you are saying when you open the app and it loads the correct image comes up, then the code that you use to load the image appears correct and working. I assume that is the code you posted above. Even that appears to be a code fragment of a more complete file.
You didn't post any UI code, which is probably where your real problem is coming from. You have an object, a view of some sort I'm guessing, that is already rendered using the old image before you load the new image. So debugging, you might see the new image's data loaded in the code above, but the UI element hasn't been assigned or updated correctly.
As a test, I would suggest that you put some test code into your app that allows you to destroy your UI elements and recreate them, you will probably see the picture come up properly in that case.
According to this post: http://developer.appcelerator.com/question/31181/simple-image-refresh
Just assigning the image you loaded to the url of the image should update it. Your example code doesn't show the image object that you are attempting to update and how that communication is made from the code that is loading the image.
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
var image1 = 'image1.png';
var image2 = 'image2.png';
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1
});
var img = Titanium.UI.createImageView({
width:100,
height:100,
top:50,
left:110,
url:image1
});
win1.add(img);
var btn = Titanium.UI.createButton({
title:'load',
width:100,
height:35,
top:50,
left:0
});
function switchImage(){
if(img.url == image1){
img.url = image2;
} else {
img.url = image1;
}
}
btn.addEventListener('click',function(){
switchImage();
});
setInterval(switchImage,3000);
win1.add(btn);
//
// add tabs
//
tabGroup.addTab(tab1);
// open tab group
tabGroup.open();