picturama/picturama

Digital image organizer powered by the web

Picturama

Digital image organizer powered by the web

Download

Please visit the Picturama website.

Features

• Scan local files - Keep your privacy, don't upload your personal photos to a cloud service
• Non-Destructive - The original images won't be touched (unless you purge the trash)
• Read various photo formats: JPG, PNG, TIF, WebP, HEIC / HEIF
• Read raw formats of a whole bunch of cameras (only on Mac and Linux, see Issue #25)
• Browse photos by dates
• View photo in detail (zoomable)
• View EXIF information
• Tags
• Favorites
• Rotate photos
• Delete photos

Develop

See DEVELOP.md for details about how to build Picturama.

picturama's Issues

Improve Settings

I'd like to improve how settings are handled.

Here's what I have in mind:

• Start directly in the main view
• If there are no images: Offer "Set photos directory"
• Don't force setting a versions directory on first start. Instead let the user select it when it is needed (because a new user doesn't know what a 'versions directory' actually is - so selecting it in the correct context is better UX)
• Make settings available later
• Allow setting more than one photos directory

Please comment your ideas

Translations for other languages

Ansel contains translations for english, german and spanish (thanks to @chesucr).

Please contribute translations for other languages!

All you have to do is translating the messages file.

Drag and drop to other apps

Thanks so much for making this app. It's a pretty cool project and seems to work quite well :)
Anyway, I've been trying to find a simple photo management tool for my parents on Linux and this seems like it's a good way for them to easily scroll and see all their photos on the computer.

I was wondering if it's possible for you to add the ability to drag and drop photos to other apps (specifically the webbrowser).
Basically, it's hard for them to click "browse" and then navigate to a photo. But if they could see the photo in your app and then just drag it to the browser window for auto upload that would work so great.
Not sure if this is an easy ask based on how you've developed the app but thought I'd ask.

Thanks!

Grouping in months

This incredible piece of software is truly perfect and deserves more recognition.
Exactly what I was looking for. Great work!

Can you just add an option for grouping in months?

Explore CSS in JS

Add more sorting and filter options

Provide the user to view pictures based on filters and sorting criteria ex:

• 1. sort pictures by date-descending
• 2. sort pictures by date-descending, filter by:cameraType (list of camera obtained from exif if available)
• 3. sort pictures by date-descending, filter by:tag (list of tags added by user, if available)
• 4. sort pictures by date-descending, filter by:YearOnly (or Year-Month)

Something like 'Advanced Search for Images'. As this project grows, we can add more filters for image specific features like resolution, color, orientation and others.

Why not use ipcRenderer.invoke?

It's easier to handle ipc https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args

DateTimeOriginal ignored

Ansel appears to only read the image DateTime field and ignore DateTimeOriginal.

According to the MWG Guidelines, Exif.Image.DateTime is the "Modification date of the digital image file" while Exif.Photo.DateTimeOriginal is the "Creation date of the intellectual content (e.g. the photograph)".

Clarification on Date/Time handling can be found in section 5.3 of the guidelines:

http://www.metadataworkinggroup.org/pdf/mwg_guidance.pdf#page=37

As a side note, the "Exif.Image" and "Exif.Photo" prefixes are the vocabulary used in exiv2. Those prefixes do not appear in the exif specs nor in the MWG document.

To make a small suggestion, you can refer to the next Tropy

https://github.com/tropy/tropy
This software is more mature, you can learn from

Add keyboard shortcuts in single photo view

Hi,

having problems with my wrists, I'd like to access the controls in single photo view with keyboard. Would you accept a PR if I added some?

My suggestions:

+ / - zoom in/out
L / R rotate left/right (CCW/CW)
F toggle flag
Backspace Move to trash
I toggle info

I'm not sure about backspace though. I would choose Del, but not all keyboards have it handy, e.g. on Macbooks it's fn+Backspace. D or X also feel a bit wrong.

PS. I tried many gallery applications before finding Picturama. What impressed me was the speed. Most other applications were dead slow when browsing from one photo to another. This is important to me, since I want to use this application to go through my photos and carefully choose between the shots that I've taken in a given situation, and throw away the inferior ones. So I need to quickly browse back and forth for comparison.

Support crop and tilt

Add support to crop and tilt the photo. With "tilt" I mean free rotation around the z axis. Also import crop and tilt settings from Picasa.

This issue is part of #9.

Allow left/right arrows to navigate to different day

Hello!

I usually like to browse my photos spanning multiple days at once. Thus, having to exit the single photo view after the last photo of each day is a nuisance.

Another case is browsing a bunch of photos from a party that lasts over midnight. :)

Would you be willing to accept a PR for one of the solutions I thought could solve this:

1. Option "[X] When showing a photo, allow left/right to continute to prev/next date"
2. If we had configurable keyboard shortcuts, allow remapping left/right to "Browse to prev/next photo, spanning dates"
3. Just brutally change the behaviour without options
4. something else?

how to build web app so I can run this in browser?

thanks.

Update to electron 2.0.0

Automatic Tagging

While scanning a the photos, it often becomes tedious to tag them independently. Year wise organising helps but still photos need to have some tag.

My Suggestion, normally we all put photos in named folders, so if we can add the photo directory name as tags it will reduce the work of tagging photos manually.

Thanks

Support multiple photos in info screen

Good app, is useful to browse for more photos. but tagging seems to be having issues for me.

When multiple photos are selected, tagging them only adds the tag to the first photo only.

Support High Resolution displays when viewing photos

Hello,
I noticed that the image quality is significantly worse compared to the default system viewer. Here is an example in Mac.

Is it a known problem?

Support raw formats on windows

Reading raw camera formats is currently only supported on macOS and Linux - not on Windows.

The problem on Windows is that node-libraw doesn't compile on Windows. I forked node-libraw and tried some things but I didn't get it to work.

There is a compile error in the code of LibRaw (LibRaw is wrapped by node-libraw). Compiling LibRaw should generally be possible, since they provide downloads for Windows.

Here is the error (see full log):

c:\projects\ansel\node_modules\libraw\vendor\libraw\src\libraw_c_api.cpp(277): error C2491: 'libraw_set_demosaic': definition of dllimport function not allowed [C:\projects\ansel\node_modules\libraw\build\vendor\libraw.vcxproj]

According to Microsoft's description of error C2491, the code of LibRaw marks DLL imports the wrong way - see source code of libraw_c_api.cpp. So I wonder why the LibRaw-Team can build this on windows. I also tried to build node-libraw as static library, but this doesn't work either.

I'm a relative nowise when it comes to building C code. I don't know what else to do. So if anybody can help here - please go ahead.

Date & tag remains selected although they are not in focus

Refactor reducers

Reducers in Ansel are currently separated by actions and all working on the whole state. Further more the initial state is defined elsewhere. This makes it a little difficult to determine the shape of the state and how it is changed by actions.

Usually one reducer should only work on one part of the state tree. And one reducer should be the only source of truth of its state subtree (including the initial state).

I would like to refactor the reducers respectively. By the way I would port them to TypeScript so the state would get a defined type - which is especially useful for working with the state.

What's your opinion about this?

Refactor src folder

Ansel uses three different electron processes:

• Main process (entry point dist/browser.js)
• Renderer process of mainWindow (entry point dist/client.js)
• Renderer process of sandboxWindow (entry point dist/sandbox/entry.js)

The source code of the main process and the mainWindow's renderer process are mixed in the src folder. I'd like to separate them, so it gets clear which code is executed in which process. This would also make wrong dependencies or shared code more obvious.

My proposal for this would be:

• src/background - Code of main process (named background, because the main process is used for background executions)
• src/ui - Code of the main UI
• src/sandbox - Code of the sandbox UI
• src/common - Shared code (like util classes)

Remove Bookshelf.js & Knex.js dependencies

Switching from picture detail to grid view does not keep the scroll

Actions on several files at once

It would be nice to be able to work on several files at once, like for example giving a specific tag to several files by selecting them and adding the tag. It looks like we can't select several files simultaneously.
Also, some simple tasks such as tagging can often be done without the need to open the specific file, tagging should be possible to a file which is selected, not necessarily open
Ansel v0.37.3.

Toggle diff view is not being triggered

'yarn start' not working on win10

Hi, I wanted to build the electron app on my machine (win10 x64) and followed the instruction from DEVELOP.md. yarn executed successfully but yarn start doesn't open picturama:

D:\code\picturama>yarn
yarn install v1.22.5
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
[5/5] Building fresh packages...
$ electron-builder install-app-deps
  • electron-builder  version=22.7.0
  • loaded configuration  file=package.json ("build" field)
  • rebuilding native dependencies  [email protected] platform=win32 arch=x64
  • rebuilding native dependency  name=sqlite3 version=4.2.0
Done in 45.69s.

D:\code\picturama>yarn start
yarn run v1.22.5
$ yarn run build && yarn run start-no-build
$ npm run env NODE_ENV=development -- webpack

> [email protected] env D:\code\picturama
> SET "NODE_ENV=development" "webpack"

$ npm run env PICTURAMA_DEV_MODE=true -- electron .

> [email protected] env D:\code\picturama
> SET "PICTURAMA_DEV_MODE=true" "electron" "."

Done in 3.20s.

D:\code\picturama>

Any idea on this behaviour?

I have added the China translation !

I have added the China translation !

Originally posted by @xuerff in #24 (comment)

regression: EXIF orientation is not handled properly

What I did: I downloaded some sample images with EXIF orientation data, from https://github.com/recurser/exif-orientation-examples.

What happened: the orientation data was not read properly, resulting in distorted images in both master and detail view. All the thumbnails should look the same (apart from text). See image.

What I expected: orientation data was handled transparently, i.e. so that all images look as they look in e.g. macos Finder.

NB: The problem happens with the current master version, but not with a version from lasty October. I did a fresh clone, so it shouldn't be about e.g. outdated submodules.

Endless scrolling library

Currently the library adds all thumbnails of the current selection to the DOM. And the number of shown photos is limited to 100 - so you can't see the remaining photos if a day has more than 100 photos.

I would like to change the library as follows:

• use endless scrolling: This means that virtually all photos are shown in the library and Ansel will add/remove them to the DOM as you scroll them visible. So virtually you can scroll through a selection having 100.000 or more photos.
• Add section titles for dates.
• Change date selection in sidebar from a filter into a scroll-spy which scrolls to the selected date.

Please comment your ideas.

Support multi-select using shift-key

At the moment, the only way to select multiple files is to hold ctrl-key and keep selecting images one by one.
Enable multi-select using shift-key that behaves like any file explorer. - holding a shift-key and pressing any two images will select all images between and including those two images.

use cases:

1. select a group of files for deletion
2. select a group of files for fav

Remove Gulp in favor of npm scripts

Video support

Do you have any plan to support video browse and playback?

Import: Use directory-based scanning

Change the way how the scanner import photo into "directory-based scanning".

With "directory-based scanning" I think of the following steps:

• Scan directories: Search base directories recursively for photo files. Build an array of (dirPath, filenames) tupels.
• Delete photos of removed directories from DB
• For each directory:
  • Delete removed photos from DB
  • Add new photos to DB

Why:

• Fixes: Removed photos are not deleted from the DB
• Allows multiple input directories
• Speeds up scanning, because some DB or file operations can be executed as a bulk
• Allows more detailed progress UI and stats
• Allows globbing directories
• Reduces memory load (because there is no array with the full path of all added photos any more)

Open photo in folder doesn't work on Windows

Hello! I really like this project. I been using it a lot. But I have a problem. I cant open the photo in his folder. I select the option but nothing hapen. I did something wrong?

Support macOS

Hello,
any plan to support other Os Platforms?
I'm particularly interested in MacOs support.
What would be necessary to make this work under MacOs? Several linux packages could be installed using brew

Can not start the app - linux platform

There is an error while starting the app in linux.

Please rename test-ui/core/UITester.less to UiTester. This will resolve the problem on case sensitive systems.

One more requirement libxkbfile-dev

This is a minor one: There is one more requirement: libxkbfile-dev

GitHub Action for unit tests

I tried to set up a GitHub Action for unit tests which runs jest. But for some reason, jest runs forever without any output.

If anyone has an idea how to fix this, please let me know.

Here is the last attempt: .github/workflows/test.yml.disabled

This is what I tried as the last testing step:

- run: yarn test

- run: yarn test --runInBand

- run: yarn test -u

- run: yarn test --forceExit

- run: yarn test --detectOpenHandles --forceExit

- run: yarn test --ci --detectOpenHandles --forceExit

- uses: IgnusG/[email protected]
  if: always()
  with:
    access-token: ${{ secrets.GITHUB_TOKEN }}

- uses: mattallty/jest-github-action@v1
  env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  with:
    coverage-comment: false

Can you combine the management of Tropy?

Can you combine the management of Tropy?
(是否可以结合Tropy的管理功能？)
https://github.com/tropy/tropy
Tropy的相册和tag管理功能更合理，也更强大，何不借鉴一下呢？

Simple editing of images

As mentioned in my pull request, I'd like to contribute simple editing of images to Ansel.

Simple editing means:

• Stuff like rotating in 90° steps, cutting, saturation, brightness, ...
• Changes are non destructive (original image will be kept)
• The resulting image won't be saved to disk (unless on export), only a list of effects to apply will be stored.

In the pull request, a discussion was started about where to save the effects list (in DB or in filesystem next to the image). So I open this issue in order to give that discussion a place.

Creating thumbnail failed

OS: Windows 7
Picturama: 1.1.0
Issue Description: Every picture shows "Creating thumbnail failed"

Revive version feature

In Ansel version 0.4.1 there was a "version" feature which @m0g descibed in a comment like this:

The work flow I envisioned for Ansel was the following:

• Download RAW pictures from the DSLR's sd-card to the photos/ folder.
• Import them inside Ansel via folder scan (ctrl+r).
• Organize pictures (delete, flag, tag...)
• Right click on a picture to export it to a third party software (gimp, rawtherapee, photoshop) for post processing.
• Ansel create a copy of the file (either raw, jpg or tiff) and opens it with the third party software.
• On the third party application, once the post processing is done, export the file into the versions/ directory (without changing the name).
• Ansel will directly detect which file it is, and create a new version in the database, keeping both the original and the new version (hence the diff view).

This feature is currently disabled in master branch. Remainings of the old code are commented out and marked with the comment // TODO: Revive Legacy code of 'version' feature.

The "version" feature should be revived once the rest of the app is properly running.

Change Picturama's slogan

The slogan "Digital image organizer powered by the web" should be explained more clearly!
I already know people I have recommended this application to and they are turning away because: "... this is an online/cloud thing like Google & Co.".

Improve selection

Selecting photos should be improved:

• Support selecting photos of multiple sections
• Change UX, so selection can't get lost by (accidentally) clicking on one photo
• Allow (de)selecting photos in detail view - so the user can select photos while watching them in full size

Code formatting - how to approach?

Hi!

I'm trying to contribute something to the codebase and would like to do it in style. :)

The codebase seems to be somewhat consistent with its formatting rules, like using 4 space indents and not using semicolons. But trying to configure Prettier results in lots of changes, such as:

• converting single quotes to double quotes, or vice versa
• converting non-breaking spaces (!) to spaces (try e.g. curl -s https://raw.githubusercontent.com/picturama/picturama/master/src/app/ui/main/App.tsx|grep WillUnm|hexdump -C)
• trimming EOL spaces (not actually a Prettier feature, but an editor setting, e.g. in Vscode "files.trimTrailingWhitespace": true
• adding/removing trailing commas
• some whitespace changes involving multi-line parameter lists

This is one of the configs (.prettierrc) that I tried:

{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "printWidth": 200,
  "semi": false,
  "tabWidth": 4,
  "trailingComma": "none",
  "useTabs": false
}

Do you think we should...

1. do nothing. Will result in mixed styles from different contributors, and might make it a bit harder for people to contribute. At least I enjoy writing code that I do not need to format manually. Also, I assume many people have EOL whitespace trimming on, so that will result in noise when diffing.

2. try to find a good setup and run Prettier for the whole codebase. Will result in some extra work for current branches and PRs, but there doesn't seem to be that many of them currently. The bigger thing is that it will result in some noise in history/blame.

3. something else?

I can work on 2) if you like. I try not to advocate for any particular style. :) Instead, I'd like to find the rules that would result in a minimal diff.

Background-Scanning

Scanning for images currently blocks the UI. I would like to change this, so scanning works in the background.

My ideas:

• Scanning progress is shown at the bottom of the sidebar, making the rest of the UI usable.
• The library grid is updated every 10 seconds, so new photos appear while scanning.

Please comment your ideas.

node-libheif and libraw not supported

Windows 10.

$yarn start
...
node-libheif is not supported Error: Cannot find module 'node-libheif'
libraw is not supported Error: Cannot find module 'libraw'
...

Create thumbnails lazy

There are some issues with the current thumbnail logic:

• The thumbnail is named after the original image. This leads to wrong thumbnails shown in the UI if multiple images of different directories have the same name.
• Scanning many images takes a lot of time, because thumbnails are created during scan process.

This could be fixed if thumbnails were created lazy when used for the first time. Then the image's ID
(rather than its name) could be used for naming the thumbnail.

Add hide menubar in settings

Is there a possibility to add hide a menu bar in the settings because on windows its very ugly to see that

Thanks in advance

Integrate cloud service

I like this product a lot, and think it may be great if it can integrate one backend service, such as google photo.