I have a table view controller with a cell that contains an UIImageView. I also have a NSMutableArray that contains the url's. I want the url's to download the images and place them in the correct order. The NSMutableArray also contains some empty Strings and the cell that it corresponds too I want to have my placeholder image from my image assets.
How can I get it to work? I have also populated each cell with a title and summary but cannot workout how images work.
UPDATE
The code used for the image download. Note the photoLabels contains the array of images. Some of the photos are in the incorrect place once the first placeholder image occurs (It is one index late). Why is it doing that. Does anyone know why. I have println(photoLabels) and all the 50 strings are correct (with some just being "")
If anyone can help that would be great.
let imageURL: String = photoLabels.objectAtIndex(indexPath.row) as String
println(imageURL)
if imageURL == "" {
cell.imageContainer.image = UIImage(named: "placeholder")
} else {
cell.imageContainer.setImageWithURL(NSURL(string: imageURL))
}
return cell
Thanks
This seemingly innocent question actually entails a rat's nest of interesting details. These include:
Use lazy loading of the image, loading them just-in-time, rather than trying to download them up front;
Download the images asynchronously;
While downloading the images as needed, cache them (using NSCache, not NSMutableArray) so that if you scroll back to see some images recently downloaded that you don't have to download them again;
But, in response to memory pressure, make sure to empty the RAM-based cache (but still avail yourself of the persistent storage cache);
If user scrolls quickly down to the 100th row in the table example, make sure that the images for the visible cells don't get backlogged behind the requests for the previous 99 images (nb: you should test your app in suboptimal conditions, e.g. a poor 2G or 3G cellular environment, which can be simulated with the network link conditioner); and
You might want a placeholder image to show until the asynchronously retrieved image is downloaded (or retrieved from the cache).
The bottom line is that this takes a non-trivial amount of effort to do properly. As a result, I'd encourage you to use an existing solution, for example the UIImageView categories that are available from SDWebImage or AFNetworking. Both of these two frameworks offer a nice category for UIImageView that allows you to request the image to be downloaded asynchronously (it's sd_setImageWithURL in SDWebImage; it's setImageWithURL in AFNetworking).
Related
How can I make InDesign render a region of a page, as it would be rendered when exporting the whole file?
I know I can render a PageItem using the exportFile function, but this will ignore any other PageItems sharing the same region.
My current solution is to make a new document the size of the region of interest, with a copy of each PageItem whose coordinates fall into that region. It’s very inelegant, and it seems it cannot be done without the user seeing windows meaningless to them come and go.
Another approach I can think of is to export the whole spread containing the region, then crop the resulting file using something like ImageMagick. But I’d still prefer to be able to render only the region I need, if possible.
You can open the InDesing document without showing its UI as well.
app.open(filepath, false);
and while closing the doc, simple use
doc.close(SaveOptions.NO);
You anyways don't need to save that doc on disk.
This will let you have the document open without showing its UI at all.
I did something like this recently. Here are my steps:
duplicate all spread items and group them
make a frame with a proper size/position
cut and paste the group into this frame
export the frame as PNG
If you need another region on this spread you don't need to repeat all the steps, you can change size and position of the frame and to export it again.
There is a limitation: master page items will be omitted.
I have a web application that uses Dygraphs to create charts.
The application allows a user to create multiple Dygraph charts (each with their own Y-Axis) that will be stacked on top of each other.
Here's an example of what the multiple Dygraphs look like on a PC browser: Notice that the example displays three different Dygraphs each having their own Y-axis, but the X-axis is hidden for the top 2 charts and visible on the bottom chart.
I will allow the user to save the chart to disk as a PNG. - The way I currently save the multiple Dygraphs as one PNG is:
Create a target canvas that will be used to contain all the visible Dygraphs
Extract each canvas out of each Dygraph, then add each canvas to the target canvas **
Create a PNG via the .toDataURL() function on the target canvas
Here's an example of what the above screenshot looks like when saved as one PNG: (This is exactly what I want from the PNG)
The procedure works fine on browsers on a PC. But when I attempt to save the multiple Dygraphs into one PNG on a phone/tablet browser, the resultant PNG doesn't match the graph that is visible on the screen.
Example:
Here's what the multiple Dygraphs look like on an iPad (screenshot)
And here's what the resultant PNG looks like (Notice how the width and height of each chart does not match the actual iPad display).
I don't understand why the PNG is rendered correctly when I use a PC browser, but is not rendered correctly when I use a browser on a mobile device.
I'm not sure if this problem is due to limitations of the Canvas.toDataURL() function or if this is a Dygraphs problem or something else. I'm fishing for advice that may point me in the right direction and/or shed light on this particular problem.
**I should mention that I use Juan Manuel Caicedo Carvajal's Dygraph-Export extension
I'm guessing the Problem occurs, because the generated canvas isn't rendered fully to the responsive screen of an iPad.
You can try to export the original canvas (instead of generating a new one with the said library) yourself with toDataUrl https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
Dygraphs generates 2 canvas, one for the legend and one for the actual graph and lays them ontop of each other. So make sure you choose the right one (not the _hidden_canvas). If the examples works you can draw the legend onto the graph canvas with canvas.drawImage(otherCanvas)
How to Copy Contents of One Canvas to Another Canvas Locally
Hope this helps. Keep me updated!
My workaround/hack for the problem stated in my OP was to make a change to the Dygraph source in the Dygraph.getContextPixelRatio function.
Notice in the code below that I set devicePixelRatio = 1
dygraph-combined.js
Dygraph.getContextPixelRatio = function (context) {
try {
//var devicePixelRatio = window.devicePixelRatio;
var devicePixelRatio = 1; // Hack!!!
var backingStoreRatio = context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
if (devicePixelRatio !== undefined) {
return devicePixelRatio / backingStoreRatio;
} else {
// At least devicePixelRatio must be defined for this ratio to make sense.
// We default backingStoreRatio to 1: this does not exist on some browsers
// (i.e. desktop Chrome).
return 1;
}
} catch (e) {
return 1;
}
};
In my case, this hack fixed my problem (stated in the OP) and didn't negatively affect any other parts of my application that uses Dygraphs. That said, if you find a better/correct way to fix the problem stated in the OP, please share.
I have a custom list renderer that has a logo for a business in it. It has a label Logo_URLImage that has the placeholder image. In my code I get the data and assign HashMaps to the list model, h.put("Logo_URLImage",imageURL); where imageURL is a string that has the absolute URL to the image.
On Android it seems to always work, but most of the testing has been on iOS devices. What happens is that images are updated as you'd expect the first time or two that you run it. A run later on will show blank images (flash the place holder image and then blank) and once that happens images will never come back.
Any thoughts on what might be causing this?
Check that you defined the LogoName map entry. Check that it is unique per image?
Check that it doesn't include special characters that might cause an issue.
I'm working on an SSRS template at present which pulls lots of its format information from a database. Part of this format information sets the Background Image of cells.
I'm currently filling the image by setting the Source to External and pulling its value from the database. This works lovely, however It means pulling the image from a network source each time and while a small efficiency hit, I'd like to try and remove that pull if possible by embedding the standard images.
Again this works fine, I can pull either an external image or an embedded image and display on screen. The problem comes when I'd like the option to do either.
I find that I cannot set the image Source from a field, there isn't an option in the GUI.
I've tried going into the code and entering the details there but I get a validation error:
The 'http://scemas.microsoft.com/sqlserver/reporting/2008/01/reportdefinition:Source' element is invalid - The value =First(Fields!bodyBackgroundImageSource.Value, "dsTemplate") is invalid according to its datatype String - The Enumeration constraint failed".
Has anyone else come across this and found a solution or know of a workaround? I can continue using only external images, but would prefer to avoid as many external calls as possible.
In our local environment, we tested this scenario and if the expression can return the correct image name, then the image can display properly. You can check if the "First(Fields!bodyBackgroundImageSource.Value, "dsTemplate")" expression return the image name existing under Images folder on Report Data window. And make sure the image source is embedded.
I'm a senior majoring in Computer Science. I'm new at web development. I'm using ASP.NET C# with MS SQL Server. I've been trying to figure out how to load images from the database onto the webpage. I have successfully done this with the following code.
<asp:Image ID="imageClient" runat="server" style="width:100px; height:100px;"/>
protected void LoadImage()
{
ModelDataContext mdc = new ModelDataContext();
byte[] image = (from c in mdc.Clients select c.Logo).FirstOrDefault().ToArray();
string base64String = Convert.ToBase64String(image, 0, image.Length);
imageClient.ImageUrl = "data:image/jpg;base64," + base64String;
}
Right now I'm just doing it for 1 image. I will eventually be using a repeater to display multiple images on the same page.
The problem is with the loading of the image. It does some weird stuff to the masterpage that it uses. It's as if it isn't applying the CSS to the masterpage. But a few seconds later it looks as it should. The problem is definitely with the loading of the image because there is no other loading problems on any of the other pages.
I tried posting pictures of what I am seeing, but my reputation is too low.
The problem isn't browser specific, it does the same thing in all the major browsers...
If anybody could help me with the problem that would be great.
/############################/
Edit: I realized the images that I was trying to view may have had a filesize too large and it was taking too long to get it from the database and to load the image. My new approach is to save the image to a folder within my project and saving the imageurl in the database to refer to the actual location of the image.
Is this the best approach keeping in mind I am nowhere near at being advanced in Web Dev?
Thanks
Caching the image to a folder can give you benefits such as reducing load on the database. If the web pages are in a busy environment (ie. many users) caching everything you can reducing the load on the database is desirable.
As to the initial image-tag. As far as I remember, the asp:Image doesn't support a Style tag as with html img tag. I think you would need to define a css in a style-sheet (or embedded in the page) and refer to that with the CssClass tag instead - or - use the .Style("property") = "mysetting" in code instead.
F.ex:
imageClient.Style("Width") = "100px"
imageClient.Style("Height") = "100px"