kanigawa (鐘川)

Electron based desktop application for setting geotags for images

This project runs inside Electron standalone application, with React.js based frontend application, that was bootstrapped with Create React App version 3, with TypeScript.

The map is made with Leaflet and data is handled via Redux Zero.

It will also be available as a web site at paazmaya.github.io/kanigawa because it can. However the geotagging functionality is limited to a single image at a time.

Why, there is Picasa from Google, right?

I got so fed up with its bugs and lack of support for changes in the Google Maps API, so decided to go and solve the problem while also making myself to learn about Electron and NW.js.

Surely there are other tools trying to achieve this functionality but they usually lack something that I deem valuable.

Since the beginning of this project, Picasa has already ceased to exists.

Background for the project name

As I have done now for few of my recent projects, the names are trying to give a tribute to ancient masters of Japanese martial arts. For example maezato, sakugawa, and shigehachi.

In the case of kanigawa, the name stands for a teacher who was known in the Ryukyu archipelago (of which Okinawa is the biggest island) and had influence on the martial arts known as karate and ryukyu kobujutsu today.

Getting started

Clone or download this repository and run the following command to start the application:

npm install
npm run build
npm run electron:start

Please note that the minimum supported version of Node.js is 14.15.0, which is the active Long Term Support (LTS) version.

Later it should be possible to install this application globally and start it wherever it is common in the given platform:

[sudo] npm install --global kanigawa

Please note that exiv2 is used for image meta data handling and because it is a native library, the Node.js bindings for it required some platform dependant libraries installed. Pick the suitable command for your environment:

brew install pkg-config exiv2 # Mac
sudo apt-get install libexiv2 libexiv2-dev # Debian/Ubuntu

...or download for Windows.

The file called package.json lists the 3rd party libraries and tools, of which the property dependencies are the ones needed for the frontend React application and the property devDependencies are those needed for Electron based standalone application.

It is also possible to run the too,l without Electron, just for testing purposes, by running these two commands in separate terminals:

node websocket-server-for-testing-in-browser.js
npm start

Scripts available via Create React App boilerplate

The React based frontend application has been initialised with Create React App which provided the following commands:

npm start: Runs the app in the development mode, available at http://localhost:3000
npm test: Run Jest based unit tests
npm run build: Creates production bundle to the build folder
npm run eject: One way exit operation to see what is underneath Create React App generated boilerplate
npm run deploy: Deploy frontend to GitHub Pages at paazmaya.github.io/kanigawa

You can learn more in the Create React App documentation.

Scripts available via Electron Forge boilerplate

The Electron standalone application container has been initialised with Electron Forge and it has provided this project with the following commands:

npm run electron:start
npm run electron:package
npm run electron:make
npm run electron:publish

Before the above commands are useful, the React based frontend application should be build with the npm run build command.

Electron accepts some command line options to be passed on Chrome, which can be seen with chrome --js-flags="--help" command.

Deployed to GitHub Pages

There is a special gh-pages branch which is updated via CI and then made available as paazmaya.github.io/kanigawa.

The generated site only supports fresh browsers and cannot be operated with such legacy browsers, such as Internet Explorer.

The frontend of the site relies on the use of WebSockets for communication with the backend.

Features or actually a ROADMAP since nothing is implemented yet

Open a directory on the grid view
Drag image to a location on a map
Existing geotagged images in the current grid will be shown as thumbnail markers on the map
Image can be dragged on top of a thumbnail on the map, which places it at the same location
Image thumbnails on map can be shown as dimmed, while the location reuse is not available, as it is sometimes desired behaviour to avoid nearby mistakes
Clicking on thumbnail on a map, selects the image from the grid, but why?
Sort by file attributes and most common metadata properties
Service Worker should do the scanning of the image files and thumbnail creation
In order to keep React app able to run in a normal browser, communication via WebSockets, https://caniuse.com/#feat=websockets
Publish to GitHub https://www.electronforge.io/config/publishers/github
Automatic updates with https://github.com/electron/update-electron-app

Map default centre location and zoom level

Map default centre is determined by the most used location for geotag
Used locations are stored locally, but with only three digits, hence the accuracy is not too discriminating
That inaccuracy will help approximate the location heat map and over time give much more pleasant user experience

Leap Motion

Should I mention that once a proper interaction model is found, it needs to work with Leap Motion?

Voice command locations

Choose images
Use voice command to specify saved location, such as "home" or "clear"
Profit.

Version history

Changes happening across different versions and upcoming changes are tracked in the CHANGELOG.md file.

License

Licensed under the MIT license.

Contributions are licensed via Developer Certificate of Origin.

paazmaya/kanigawa