currently working on a side project, but I'm stuck on one big part.
The goal is that the user can take a screenshot from a different popular app that contains 6 images/icons. I want it so when the user goes into my app they can upload that screenshot and I can detect the 6 images and place them into a collection view.
The issue is detecting the type of 6 images in the screen shot, I thought about using an OCR like Tesseract but I'm not sure if that would work because there's zero text in the screenshot, only the 6 images. Something that might help is that in that app there all only 50 kind of images. Would create some sort of database of images help? But how would I compare them?
I apologise if this doesn't make sense I just don't know how to word it. Any help would be great.
Assuming you want to be able to do this across multiple types of devices, a computer vision library like OpenCV might be the way to go.
If your users always run the app on the same device (always on an iPhone 5, say) then the icons might always land in exactly the same spot, and you could simply slice the screenshot up, extract the component images, and do a byte-wise compare on the sub-images. However, you've got iPhone 4, iPhone 5, iPhone 6, 6+ screen-sizes, iPad, iPad retina, iPad pro (small and large) to deal with, and possibly portrait and landscape orientations. Presumably the 6 images will land at different spots on the screens of all those different devices, and you'll have different image resolutions to deal with as well. With OpenCV you should be able to find the bounding rects for the images by "looking at" the screen-shots rather than building a complex set of rules.
Take a look at the OpenCV example code for matching SIFT features (the python version here, but you can find examples in other languages as well). It demonstrates a simpler version of what you want to do.
Related
I usually do not care much about my assets even if I support the iPads in my project. As long as the imageView for the background of the app is set to Aspect Fill.
Also, here are some links I've found, but not so related to this question.
OLD Question and old answers: How to support both iPad and iPhone retina graphics in universal apps
Cool question and cool answers, however, question and answers focus merely in iPhones:
iOS: Preparing background images for applications
Going back to the question, if I have an Adobe XD file or Sketch, or Photoshop or whatever file that lets me export an image/asset, in what resolution should I start? Do I start with the largest possible size (for iPad Pro) which is 1024x1366 then let the software cut the sizes into #1x and #2x?
If I'm only to support the iPhones, then this would be way lots easier. Thank you!
If your source is vector based, then (obviously?) it's a non-issue...
With bitmap / raster images, you almost always get better results by scaling down.
Depending on the image itself (a photo tends to scale much better than a line-drawing), you may not be happy with simple "auto-gen" features... in which case, you'd need to manually "scale and tweak".
(Hope that helps).
I know this is a topic that has a plethora of useful information on the web, but there's one piece of the puzzle I can't seem to figure out.
In the app I'm designing, which will support all devices that support iOS 9, I have an image that I want to have take up the whole screen when the device is in landscape.
For the sake of learning, I am trying to use size classes and auto-layout, rather than using code (I've been successful in doing this pragmatically, but I'm trying to figure out this concept).
My images for iPhone are named like so;
image#3x~iphone.png
image#2x~iphone.png
image#2x~ipad.png
image~ipad.png
What I can't seem to figure out is how to work with a device like iPhone 4s, which has a completely different aspect ratio than iPhone 5s, 6, 6 Plus. When I run my app, the image appears "squished," since the image is designed for a 16:9 screen. From this site, I tried naming an image image-960h#2x~iphone.png, which does not seem to get called when I build the app.
Can anyone advise how you'd work with images #2x resolutions that are going to be shown on devices with different aspect ratios? Thanks!
I am working on an iOS application that will show photos either in full screen or in frames in various sizes - like product catalog.
I know I am supposed to use images.xcassets to make things simple and I know I am supposed to create more than one version of the same photo in different sizes.
All I can find is AppIcon and LaunchImage guidelines. What would be the rules I should follow preparing photos to show in different devices? Sizes, resolutions?
Sample: I have 2048 x 1536 raw sized photo (even bigger ones). When it comes to prepare it for iOS app (will work both in iPad and iPhone), what are the dimensions to export my photos from PhotoShop? What would be the biggest sized version?
Could someone please show me a starting point to understand this?
Thanks in advance.
This design guidelines guide is very good. You will find everything you have to know about sizes.
But the simplest way is to use a tool like Asset Catalog Creator to generate your assets. Just drop your original image in it, select your #1x size, and it will generate the catalog for you, for all sizes.
Here is a screen size reference for iPhone devices you may find helpful. Here's one for iPads.
Additionally, if you've got a lot of files you need to resize that you've already exported, you might consider using ImageMagick for batch resizing.
I am new to iOS programming and programming in general so this will probably be a fairly easy question to answer for someone who is experienced.
I am making a game using sprite kit and I need to include different background image sizes for the different retina display sizes on the iPhone 4 and 5. I am using a graphics package to create the images in .png format then adding them into the project, the issue I have is that, if I make a 640x1136 size image, it works on the 5, and if I use a 640x960, it works fine on the 4 but leaves blank space around the edge on the 5. (I am running it on the simulator)
If I include two identical images with different names, one for each device, how can I load the right one in? Do I only need high resolution image and can use some code to change how it loads the image in, so that it covers the whole screen without pixelation or loss of quality on both devices?
Any help or advice is appreciated. I apologise if this is a simple question, thanks for your time.
Note:
I found out plenty on the internet about using the #2x suffix for high resolution images, but that's not what I'm looking for. I know how to code for different resolutions, just not two different screen sizes with the same resolution, if that makes any sense.
If you're on iOS 7 SDK which you most likely are, make use of the .xcassets catalogue. It has options for different screen sizes, put the different versions of your image there. And then load image in code.
I am developing an iphone application and i am using a background picture for my app. I know that before iphone 4 , the resolution of the screen was 480x320 and after 960x640. I read that i should use 2 images like : MyImage.png and MyImage#2x.png with the 2 different resolutions and the app will know which one to choose according to the phone. My question is very simple. If i just use the 960x480 , whats the difference? I am developing on an iphone 3gs and i am using this resolution and everything works perfect. So why have a small resolution for these phones?
The difference, in my opinion, is the following: the phone is going to resize the doubled-resolution to half the size, and this will lead to (1) the final image is not as smooth as if you would have exported it from a image application like Illustrator or Photoshop - at least from my own experience, when I export both resolutions, in non retina devices, the images don't look as good if I had exported the normal resolution. Also (2) the device will waste time/performance to make this conversion, although I don't know how much it is significant. And (3) finally, you may overload memory with no need, considering that the doubled sized images are bigger files, and you could use smaller files instead.
If you don't mind about this issues, you can go ahead. Try yourself.
If nothing else, the high-resolution images will tax the memory much more. One full-screen image at 320✕480 is around 600K in memory, whereas the 640✕960 is almost 2.5M, four times as much. On the older devices the memory is much more scarce than on the new ones and you might run into problems later in the development cycle, when there are more resources in play.
Even if you are able to test the app on all older supported devices and you can guarantee that there are no immediate performance problems or visual glitches, the app will take more memory, forcing the OS to kill other apps more frequently (= worse overall user experience).
if you use one version of image, (960x640) , there will be a memory overhead when the app run on non-retina. you dont need to display the high res in non-retina, only in retina display, making two versions of images .png and #2x.png will tell ios which image version it should load, depends on what device is currently in use.