I am currently working on an application that requires the use of a WebView. It basically takes up the entire screen space.
Initially the images inside of the WebView look fine and high quality. Unfortunately, when a user taps (and holds) a button in the webview, the images then lose quality and dither until the finger is released. Is there any way to disable this?
A good note, my app does not need any scrolling whatsoever. I thought Android would only lower the quality on scroll to better performance.
the only solution is to make your own image viewer, the webview resamples images at lower qualities
I've been dealing with the same issue for a long while. The best solution is to split the image into several sub-images and load them altogether within the same html file.
The easiest and fastest solution I found is with Adobe Photoshop:
Open you image
Create horizontal and vertical guides
Select the Slicing tool and activate the "create slices from guides"
Save for web (I'm not using the English version, but you get what I mean)
Select your desired image format
Save, but while saving check the option "Html and images"
With this, you'll avoid dithering with any image as long as you split it into enough pieces,
Related
I have a webview which opens a page that shows different images like a gallery.
The image is saved locally on an sdcard and is loaded through css with background-image: url(file://...).
This issue seems (not sure though) to be connected to Android's request for resources for some reason. The longer the OS needs resources the bigger the white (or black) band is.
This doesn't happen always in one test session and affects images randomly (in a cycle a certain image displays ok, in the next it doesn't). Also it seems to affect only images, displaying an iframe is always loaded normally.
I wouldn't have a problem if this happened for one second and then it would display normally, the problem is that the image stays like that until the next refresh of the webview.
android's version is 4.4.2. It is a mk808b plus device if any of this helps...
Any ideas on how to solve or somehow decrease the times this happens... anything really... except using imageview, I want to keep all in the webview. Any directions to follow for further debugging are also greatly appreciated.
Thank you for any help you can provide.
If it is possible I would try converting background images to a vectorial format (like SVG). Rendering should be easier and less memory hungry.
I am making an app and part of it will view PDF's. The pdf's are on a web server and downloaded to the app. I am trying to understand what happens when a viewer loads a pdf. If it is converted to an image then I would like to try converting the pdf to a png on the server and just using that copy to view in app as png is a lot less hassle to deal with.
The only reason I would not convert to png is if an android pdf viewer maintains the vector nature of the file as zooming is critical and I want a nice crisp image.
Ultimately someone is always going to convert the PDF to an image. Or better said to pixels because that is what you need to display on the tablet screen (or any screen that I know of). The question is who does the conversion, when it is done and how well and quickly it is done.
For a tablet viewer, the challenge is to do the conversion quickly enough not to bother the user with load times and that often goes at the price of quality. There are virtually no PDF viewing applications on either iOS or Android at this point that do a really good job at showing all intricacies of the PDF file format.
That being said, the quality is usually good enough and if the viewer is well implemented, zooming for a PDF file should be a no brainer. Zooming simply means for the application that the viewport (the part of the PDF page that is visible) is different, but it doesn't really change the algorithm used to convert the PDF page elements into pixels.
That is also the difference between you converting the PDF to an image on the server and the app converting it to pixels on the device. Your server likely has more calculation power (at least it might have :-)) but the application knows at which resolution it needs to convert to pixels and what part of the page it has to convert to pixels. And a good viewing application can use these details to adapt how it does the conversion to pixels. There are lots of optimisation algorithms that can be used to only render visible elements and take shortcuts based on knowing exactly what resolution will be used for rendering.
In short, yes, you can do the rendering on the server and feed an image to your viewer. But keep in mind that - especially while allowing the user to zoom - you'll get lots of data and probably poorer quality than when you let a good viewer handle things in PDF...
The idea is to build a website which can grant a mobile and desktop user the full experience. 'The full experience' meaning the use of jquery.
The most important thing is accessibility, so I'm wondering if their is a cross platform way to build a slider/carousel which supports text, links and most importantly touch swipes.
To improve speed, I'd much prefer to load the slides seperately. I understand ajax maybe the solution.. but haven't a clue how. Can anyone direct me towards any basic tutorials that cover this?
A follow up question to the last.. Is ajax safe for dynamically loading content onto mobile devices too?
Also in terms of website layout. Most of the layout will change depending on css media rules when the page is resized. But there are a few elements that will need to teleport depending on the size of the screen.
I considered creating separate elements that would be hidden and shown with jquery/css, but not particularly liking the sound of the code being loaded when it's not needed.
This is slightly different to the sliders in the sense that this code needs to be instantly responsive if the screen size changes (for example, a tablet user changing from portrait to landscape.. or a desktop user zooming in.)
I just don't like the sound of code being loaded if it's hidden.. what is best practice for this?
Again the questions are..
How can i go about building a cross-platform slider, that allows text,links and touch swipe (literally have no idea where to start with touch swipes.)
How can I dynamically load content? (with ajax)? Will this work with smartphones too?
Do people load 'layout' code (on page load) that is only visible if certain parameters are met (eg screen-size.) An example being 2 different menus, one for a small screen and one for a large. Or is there a safe way to load layout code only when it is needed, which would reduce page load times (especially for mobile users.)
thanks
3) touch swipes work the same way as a click + drag, so you should be able to use the same code for mobile and desktop. Here is a great example of this: http://scripterlative.com/files/dragdivscroll.htm
I want to implement an application like "The star Epaper" available on Android and Apple Markets. This app is pretty amazing: it uses an small images but if u pinch this image, the quality of texts never change. It means by zoom in or zoom out the quality of image is still same. I went to files of app and found that there is a jpg image ( i.e. 183 KB) and each image has another file "22 KB" with no-extension. I used openwith and found that this file is also an image. Therefore, This app is using both of these images ( maybe one of the is vector) to replace the good quality for text file whenever pinch event fired.
What is this technique ? and how to implement it?
Correct, you need a file format that stores text as vector graphics. For example .pdf or .svg.
You can display such files using WebView on Android or UIWebView on iOS.
If you want more control, you can also implement your own view with zoom behavior. At each zoom level, you scale the text and render it again using the operating system's drawing API. There won't be any jaggies.
If you don't want to use web views, and don't want to do everything yourself either, look around SO: .svg libraries have been covered for example
here for iOS: How to render SVG images in iphone without uiwebview?
and here for Android: SVG support on Android .
I've been struggling for a long time with large images that are able to zoom. I am loading some picture from the network that can have very variable size: it might go from 0.5MP up to 10MP. Simply loading one to a bitmap can produce application crash because of OOM exception. But details are very important so I want the user to be able to zoom on them such that full quality is maintained (so the picture should refine itself during zooming). I don't find a proper way to do this. I've used the TouchImageView library, but it doesn't manage large pictures at all. If I first down sample my picture with the inSampleSize parameter of the BitmapFactory, I lose the quality definitively. I don't want to code a whole new zooming tool, as it is already implemented on every android phone in the default Gallery app. There has to be a way to use this kind of tool, and simply display a large image that is able to zoom, right?
Have you tried PhotoView?
You could also do it with loadUrl(String) of standard WebView which should handle big images too. WebView has built-in zoom controls.
BitmapRegionDecoder(added in 2.3.3) may work. But I've not tried it.
It seems that the implementation in Gallery is OpenGL, there is no way to use it simply.