Photos aren't loading: triangle with exclamation mark inside

[inukshuk]

Yes, this means that the file is there on your local disk. And the permissions seem fine, there are no extended attributes and Tropy seems to have no issues consolidating the photo (otherwise there would be error messages in the log). In other words, everything looks just fine. Odd!

Could you open this specific photo once more in Tropy, in the item view and take a screenshot of the full window? Then, open the dev-tools one more time (while you’re still in the item view), making sure the console tab is active, and take a second screenshot. Finally, take a look at the log file again, to see if there is any error reported all the way at the bottom (I know you’ve posted the log file a couple times already, but that was after consolidating photos, I’m not sure that we looked at it after you tried to open the image in the item view). If you could post the two screenshots and, in case it contains an error message, the log file I hope I’ll be able to solve this.

[GRW]

Righto. Two screenshots uploaded and here is the log file - not sure I can see an error message:

{“level”:30,“time”:1601972984259,“type”:“browser”,“name”:“main”,“opts”:{“_”:[],“environment”:“production”,“env”:“production”,“auto-updates”:true,“ignore-gpu-blacklist”:false,“debug”:false,“trace”:false,“port”:null,“p”:null,“$0”:“Applications/Tropy.app/Contents/MacOS/Tropy”,“data”:“/Users/robilliard/Library/Application Support/Tropy”,“cache”:“/Users/robilliard/Library/Caches/Tropy”,“logs”:“/Users/robilliard/Library/Logs/Tropy”},“version”:“1.8.0”,“msg”:“main.init 1.8.0 Darwin 19.6.0 (x64)”}
{“level”:30,“time”:1601972984423,“type”:“browser”,“name”:“main”,“msg”:“plugins scanned: 0”}
{“level”:30,“time”:1601972984424,“type”:“browser”,“name”:“main”,“msg”:“app state restored”}
{“level”:30,“time”:1601972984425,“type”:“browser”,“name”:“main”,“file”:“/Users/robilliard/Documents/Intoxicating Spaces.tpy”,“msg”:“open new project window”}
{“level”:30,“time”:1601972984458,“type”:“browser”,“name”:“main”,“msg”:“ready after 222ms [req:45ms]”}
{“level”:30,“time”:1601972984492,“type”:“browser”,“name”:“main”,“msg”:“switch to "system" theme”}
{“level”:30,“time”:1601972984496,“type”:“browser”,“name”:“main”,“msg”:“checking for updates…”}
{“level”:30,“time”:1601972984593,“type”:“renderer”,“name”:“project”,“dpx”:1,“opts”:{“contrast”:false,“dark”:false,“environment”:“production”,“documents”:“/Users/robilliard/Documents”,“maximizable”:true,“minimizable”:true,“pictures”:“/Users/robilliard/Pictures”,“scrollbars”:true,“theme”:“system”,“file”:“/Users/robilliard/Documents/Intoxicating Spaces.tpy”,“recent”:[“/Users/robilliard/Documents/Intoxicating Spaces.tpy”],“data”:“/Users/robilliard/Library/Application Support/Tropy”,“debug”:true,“dev”:false,“cache”:“/Users/robilliard/Library/Caches/Tropy”,“plugins”:“/Users/robilliard/Library/Application Support/Tropy/plugins”,“fontSize”:“13px”,“frameless”:true,“level”:“info”,“locale”:“en”,“log”:“/Users/robilliard/Library/Logs/Tropy/tropy.log”,“uuid”:“ab0b6da0-dbc3-11ea-9a07-631c093e6d67”,“update”:{},“version”:“1.8.0”,“webgl”:true,“zoom”:1},“msg”:“project.init”}
{“level”:30,“time”:1601972984610,“type”:“renderer”,“name”:“project”,“msg”:“plugins scanned: 0”}
{“level”:30,“time”:1601972984610,“type”:“renderer”,“name”:“project”,“msg”:“plugins loaded: 0”}
{“level”:30,“time”:1601972985062,“type”:“browser”,“name”:“main”,“msg”:“no updates available”}
{“level”:30,“time”:1601972985323,“type”:“renderer”,“name”:“project”,“mode”:“w+”,“msg”:“open db /Users/robilliard/Library/Application Support/Tropy/ontology.db”}
{“level”:30,“time”:1601972985326,“type”:“renderer”,“name”:“project”,“msg”:“restoring recent@tropy”}
{“level”:30,“time”:1601972985327,“type”:“renderer”,“name”:“project”,“msg”:“restoring settings@tropy”}
{“level”:30,“time”:1601972985327,“type”:“renderer”,“name”:“project”,“msg”:“restoring ui@tropy”}
{“level”:30,“time”:1601972985461,“type”:“renderer”,“name”:“project”,“msg”:“Esper.instance created using webgl renderer”}
{“level”:30,“time”:1601972985469,“type”:“renderer”,“name”:“project”,“mode”:“w”,“msg”:“open db /Users/robilliard/Documents/Intoxicating Spaces.tpy”}
{“level”:30,“time”:1601972985510,“type”:“renderer”,“name”:“project”,“mode”:“w”,“msg”:“open db /Users/robilliard/Documents/Intoxicating Spaces.tpy”}
{“level”:30,“time”:1601972985510,“type”:“renderer”,“name”:“project”,“msg”:“project ready 953ms [dom:39ms win:29ms req:705ms]”}
{“level”:30,“time”:1601972985529,“type”:“renderer”,“name”:“project”,“msg”:“restoring nav@36f5d444-c233-45fe-8767-8b875e377c3f”}
{“level”:30,“time”:1601972985530,“type”:“renderer”,“name”:“project”,“msg”:“restoring notepad@36f5d444-c233-45fe-8767-8b875e377c3f”}
{“level”:30,“time”:1601972985530,“type”:“renderer”,“name”:“project”,“msg”:“restoring esper@36f5d444-c233-45fe-8767-8b875e377c3f”}
{“level”:30,“time”:1601972985530,“type”:“renderer”,“name”:“project”,“msg”:“restoring imports@36f5d444-c233-45fe-8767-8b875e377c3f”}
{“level”:30,“time”:1601972985530,“type”:“renderer”,“name”:“project”,“msg”:“restoring sidebar@36f5d444-c233-45fe-8767-8b875e377c3f”}
{“level”:30,“time”:1601972985530,“type”:“renderer”,“name”:“project”,“msg”:“restoring panel@36f5d444-c233-45fe-8767-8b875e377c3f”}
{“level”:30,“time”:1601972985553,“type”:“renderer”,“name”:“project”,“mode”:“w”,“msg”:“open db /Users/robilliard/Documents/Intoxicating Spaces.tpy”}

[inukshuk]

Thanks! Just to be sure, can you check if there are any other errors in the console except for the missing SourceMaps by scrolling all the way up?

Does the image appear if you change the zoom level or, especially if you switch to zoom-to-fit or zoom-to-fill mode?

If not, could you paste the following commands, one-by-one, into the dev-tools console prompt and tell me the results:

require('../../lib/esper').Esper.instance.app.screen
require('../../lib/esper').Esper.instance.photo.position
require('../../lib/esper').Esper.instance.photo.width

[inukshuk]

Could you also send me the original image file for testing?

[GRW]

There are other errors further up - I screenshotted the upper part of the list for you.

The image does not appear with change of zoom level or switching from zoom-to-fit etc.

I pasted the commands as per instructions and here is a screenshot of the results.

Thank you!!

Bildschirmfoto 2020-10-06 um 12.23.34|690x468

[inukshuk]

Ha, now we’re onto something at last! For some reason, the photo is assigned a negative width – that basically makes it invisible. The question is why that’s the case.

Could you also try these commands in the console (make sure that you’re still in the item view):

state.photos[state.nav.photo].width
state.photos[state.nav.photo].height
require('../../lib/esper').Esper.instance.photo.getWidth(1)
require('../../lib/esper').Esper.instance.photo.getHeight(1)

Could you also send me the original image file? Just to make sure there isn’t something about the file that throws off the viewer.

[GRW]

@inukshuk

require(‘…/…/lib/esper’).Esper.instance.photo.getHeight(1)

Apologies for the delay in responding - I did not get an email of your message for some reason, and only just checked the thread now. Odd. Attached a screenshot of the console with those commands. I am unable to upload the image. It gets to c. 70% upload status and then reverts back to 0%, and keeps doing so until I cancel the upload. Is there another way I can get it to you? Or screenshot file information?

Thanks!

[inukshuk]

Strange. You can also send me the file at sylvester.keil@gmail.com – the internal dimensions of the image in the image viewer look fine. Also, just to re-confirm, at least some other images show up fine in the image viewer, yes? This, plus the fact that the upload for the file stalls makes me wonder if there is an issue with the file after all so it would definitely be worthwhile for me to take a look at it.

[GRW]

Fab - I have just sent the file to your email.

[inukshuk]

Great, thanks!

I can reproduce the issue using this file – so it’s definitely something about this file and nothing to do with file permissions. I’ll try to debug this further and let you know when I know more.

[inukshuk]

We have not figured out what exactly is wrong with the file, but it seems to be caused by the embedded color profile. Here are some initial observations:

• The image is very large for its size; this is because there is a lot of noise in the image (scanned at a high resolution) so you could save a lot of disk space by compressing the files a little bit. For example, if you convert the file with a JPEG quality level between 90% and 95% the file size is down to 3-5MB instead of almost 20MB.
• This might suggest that there is an issue with loading the original into GPU textures because of their size, but that’s not it. Tropy handles even larger textures just fine. What seems to be causing the issue is the embedded color profile: if I strip that from the file it shows up just fine.

So, for a quick solution you could remove the color profiles from the images. To save disk space you could also consider compressing the images at a slightly lower quality.

cc @flachware

Update: if we embed your color profile into other images, those images will not show up in the image viewer anymore. On the other hand, using other color profiles works fine. So there has to be something about this specific color profile that makes the images disappear.

[GRW]

OK - thanks for that! Now, not being so very IT savvy, what are the colour profiles and how do I remove them? I see in the file info dialogue box under “Weitere Informationen/further information” “Farbprofil: CamHRIS_GBAW.icc”. Is that what I have to get rid of? And what does that do to my image?

[GRW]

Right - short update: I googled it and used the remove app in scripts and it has worked for one image. Hurrah! I will now try same for other images and see how that goes.

Thank you for the speedy and wonderful support! That really makes my day …

[flachware]

@GRW as you have already found the Remove app in Scripts/ColorSync, you may use the Match app which is in the same directory as the Remove app. The remove app simply removes any color profile and thus colors will look a bit different afterwards. The Match app converts an image to a different color space (I suggest the sRGB Profile), which you can choose in a second step. This way the colors will be more consistent, I’d like to recommend this approach.

Both apps handle images only one by one, if you have a lot of images with exotic color profiles you might want to use a command line tool, we can guide you through the process.

Update: you can drag and drop multiple images on the Match app to convert them all at once.

Since you asked, a color profile is a set of data that is embedded in most images nowadays, it is part of the so-called color management workflow that tries to keep colors consistent between input and output devices and different color spaces (e.g. digital camera and printer).