How to get proper resolution from image loaded via drawable? - picasso

I am using Picasso in an Android application. The device I am testing with is a Samsung tablet (SM-T110), and is running Android version 4.2.2.
In several places, I load an image into an ImageView where the image is on the net and so I use a URL. This works great. Everything seems to be scaled fine.
I was setting an image with this:
<ImageView
android:id="#+id/news_list_image_view"
android:layout_width="200dp"
android:layout_height="200dp"
android:scaleType="fitXY"
android:layout_centerHorizontal="true"
android:src="#drawable/gf_logo"
tools:ignore="ContentDescription" />
and the image looked great.
Now I have:
<ImageView
android:id="#+id/news_list_image_view"
android:layout_width="200dp"
android:layout_height="200dp"
android:scaleType="fitXY"
android:layout_centerHorizontal="true"
tools:ignore="ContentDescription" />
and
Picasso
.with(getBaseContext())
.load(R.drawable.gf_logo)
.resize(200, 200)
.placeholder(R.drawable.happy_me)
.error(R.drawable.happy_me)
.into((ImageView)findViewById(R.id.news_list_image_view));
in my activity class and the image looks to be the wrong resolution. It looks extremely fuzzy.
I have these versions of the image:
app/src/main/res/drawable/gf_logo.png
app/src/main/res/drawable-ldpi/gf_logo.png
app/src/main/res/drawable-mdpi/gf_logo.png
app/src/main/res/drawable-hdpi/gf_logo.png
app/src/main/res/drawable-xhdpi/gf_logo.png
app/src/main/res/drawable-xxhdpi/gf_logo.png
app/src/main/res/drawable-xxxhdpi/gf_logo.png
I was hoping that I could delete the "drawable/gf_logo.png" of the graphic and that Picasso would do the right thing and see which image to use for the resolution of the device, but that is not working.
Is there a way to get Picasso to use the image that has the resolution desired for the current device? Is there a way to get it to stop using the "drawable/gf_logo.png" version? If I try to delete that copy of the file, Android Studio complains that the Picasso call above is using the image and the deletion is not safe.
BTW, my gradle file starts with this:
android {
compileSdkVersion 22
buildToolsVersion "22.0.1"
defaultConfig {
applicationId "com.xyzzy.xyzzy"
minSdkVersion 14
targetSdkVersion 22
versionCode 1
versionName "1.0"

Related

Android Xamarin Not Seeing My Resource.Id.TagName

I have a project and am trying to use SetTag on my views. But I need a resource id, so according to internet advices, I have created a tags.xml file in my Resources/values folder, like below:
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<item name="TAG_VIEWPAGER_PAGELAYOUT" type="id"/>
<item name="TAG_VIEWPAGER_PAGEPOSITION" type="id"/>
</resources>
Then I try to access it like so after a clean and rebuild, but it doesn't find it. It says TAG_VIEWPAGER_PAGEPOSITION cannot be found.
view.SetTag(Resource.Id.TAG_VIEWPAGER_PAGEPOSITION, position);
Help? I am using Android 5.0 Level 21, C# Xamarin
TRY:
Open the resourcedesigner.cs file [you might want to back it up if you've never done this before]
Click in the file
use CTRL + A to highlight all the code
delete the contents of resourcedesigner.cs completely
clean the solution
rebuild the solution [resourcedesigner.cs should reload automatically]
Sometimes the resource designer file can't keep up with your changes.
If this doesn't work then try searching for TAG_VIEWPAGER_PAGEPOSITION in your resourcedesigner.cs file and let me know if it's in there
It just required a restart for VS, and then everything worked.. so much time trying other solutions.. so agitating...

Cordova - Displaying local image files in a <img> tag

I have a Cordova app (built on Ember.js, using the Corber addon) that I am currently only running on iOS, specifically the iOS simulator (iPhone 8, iOS v12), so it is using a WKWEBVIEW.
The app is using cordova's file plugins to download remote images and store them on the user's device, currently in the "Documents" (cordova.file.documentsDirectory), which works fine, and I've verified that the images do in fact exist there. However I can't figure out the correct URL/URI to use to display those images in the app via standard <img> tags.
Cordova's own documentation says to use the cdvfile:// protocol path (https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/#cdvfile-protocol), but even with following the instructions there (adding the content-security meta tag to the index.html, the access rule to the config.xml, etc), it seems like WKWEBVIEW just flat out does not support this protocol, giving me "unsupported URL" errors in the console when I attempt to use it.
Other SO answers on the subject suggest using a normal URL path relative to the cordova app's web server URL, e.g. things like <img src="/Library/NoCloud/path-to-my/file.jpg"> but any path I try 404's.
This seems like such a simple/common use case, but I'm stumped.
For anyone else struggling as I was - there is also a solution, which requires no significant change to the code which I found after hopeless days when no solution seemed available
There are 2 steps required:
First update your config.xml with following
<platform name="ios">
<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />
</platform>
Then convert your file:// link by using the undocumented method
window.WkWebView.convertFilePath(filePath)
This method performs the conversion into a virtual localhost link that makes the file accessible and bypasses the WkWebView restrictions. A little bit longer sample goes like this
let localFile = cordova.file.dataDirectory + 'logo.png';
let convertedPath = window.WkWebView.convertFilePath(localFile);
document.getElementById("myImg").src = convertedPath;
I did not work with Cordova but docs you linked say this:
To use cdvfile as a tag' src you can convert it to native path via toURL() method of the resolved fileEntry, which you can get via resolveLocalFileSystemURL - see examples below.
And gives this as an example:
resolveLocalFileSystemURL('cdvfile://localhost/temporary/path/to/file.mp4', function(entry) {
var nativePath = entry.toURL();
console.log('Native URI: ' + nativePath);
document.getElementById('video').src = nativePath;
Given all that, I would say that you can try to create a component, cdv-img. Something like this supposed to work, I think:
import Component from '#ember/component';
export default Component.extend({
tagName: 'img',
cdvPath: undefined,
didReceiveAttrs() {
this._super(...arguments);
if (this.cdvPath) {
resolveLocalFileSystemURL(this.cdvPath, (entry) => {
this.$().attr('src', entry.toURL());
});
}
},
});
Use it like this:
{{cdv-img cdvPath='cdvfile://localhost/temporary/path/to/file.jpg'}}
UPD
If it does not work with file protocol, you can try to convert image to data url
import Component from '#ember/component';
export default Component.extend({
tagName: 'img',
cdvPath: undefined,
didReceiveAttrs() {
this._super(...arguments);
if (this.cdvPath) {
const el = this.$();
resolveLocalFileSystemURL(this.cdvPath, (entry) => {
entry.file(function (file) {
const reader = new FileReader();
reader.onloadend = function() {
el.attr('src', this.result);
};
reader.readAsDataURL(file);
});
});
}
},
});
Make sure you don't forget to add these 2 lines and try with whatever solution you are trying, I got my images shown after adding them:
In your config.xml file. add:
<preference name="allowFileAccessFromFileURLs" value="true" />
<preference name="allowUniversalAccessFromFileURLs" value="true" />

React native: images with space in name won't load in IOS (device, not https issue)

Images with spaces in their name won't load in IOS, for android it worked by replacing the spaces with %20, but this solution didn't work on ios. React native.
I m loading the images remotely using uri, in a normal Image container. images without space load fine.
<Image source={{uri: fileName.replace(/ /g, '%20')}} style={styles.image} />
works on react-native#0.59.5
encodeURI("http://www.yourdomain.tld/sample image.jpg")
Output
http://www.yourdomain.tld/sample image.jpg
to
http://www.yourdomain.tld/sample%20image.jpg
Usage
<Image source={{uri: encodeURI(fileUri)}} />
the best way is to use the js builtin javascript function encodeURI
because we also have to convert some special characters in URLs

React Native iOS read image from apps Documents folder

I have to download images to my iOS apps local file system and read them back.
On my simulator I can see file system of my app with directories
/Library/Developer/CoreSimulator/Devices/[UUID]/data/Containers/Data/Application/[UUID]/
/Documents
/Library
/tmp
To try out I copied foo.png to /Documents folder and then tried
<Image source={{uri: "file://Documents/foo.png"}} style={{width:100, height:100}}/>
This does not work, any idea whats a way to do this.
This also took me ages... with better info it would have been 5 minutes!
I use react-native-fs to get directories (which works for ios and android):
var RNFS = require('react-native-fs');
RNFS.DocumentDirectoryPath then returns something like '/var/mobile/Containers/Data/Application/15AC1CC6-8CFF-48F0-AFFD-949368383ACB/Documents' on iOS
My Image element looks like:
<Image
style={{width:100, height:100}}
source={{uri: 'file://' + RNFS.DocumentDirectoryPath + '/myAwesomeSubDir/my.png', scale:1}}
/>
My problem was that I did not set width and height first, which is not needed for urls or paths to assets. When using a base64 uri the width and height are also mandatory (that actually led me to the solution!).
Try tilda (~). React Native should expand that.
<Image
style={{width:100, height:100}}
source={{uri: '~/Documents/myAwesomeSubDir/my.png', scale:1}}
/>

Camera and LookAt tags in KML files processed by the iPad's Google Earth

My iPad app pops the Google Earth app via UIApplication:openURL: and passes it a URL of a file to display. The file displays fine, except for Camera and LookAt tags. It seems that the Camera tag is totally disregarded, while the LookAt is partially processed such that the point of view moves to a point close to the ground, much lower than the LookAt specification.
To debug this, I created two KMLs, copied from Google's documentation. The content is generated by a query on my server. The query's URL is passed to the Google Earth app from my app.
For comparison, I opened the same data on Google Earth running on a Mac. It works fine there.
This file is treated as a no-op by GE - it does not move its point of view at all:
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Placemark>
<Camera>
<longitude>-122.4783</longitude>
<latitude>37.8120</latitude>
<altitude>100</altitude>
<heading>90</heading>
<tilt>90</tilt>
<altitudeMode>absolute</altitudeMode>
</Camera>
</Placemark>
</Document>
</kml>
The following does move the point of view to the general area, but to a point which is exactly 500 meters above the ground, regardless of the range value.
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Placemark>
<name>Machu Picchu, Peru</name>
<LookAt>
<longitude>-72.503364</longitude>
<latitude>-13.209676</latitude>
<altitude>0</altitude>
<range>14794.882995</range>
<tilt>66.768762</tilt>
<heading>71.131493</heading>
</LookAt>
<styleUrl>#msn_icon12</styleUrl>
<Point>
<coordinates>-72.516244,-13.162806,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>
I am using Google Earth 7.0.0.7455 on the iPad.
Any other tag that I passed to the GE app, such as for drawing polygons, works just fine. I'm only having trouble with Camera and LookAt.
I wonder if it's my bug, Google's, or both. If Google's, is there a workaround - any way of setting the camera?

Resources