search

sunfish-shogi / electron-shogi

PC で動く高機能な将棋の GUI「ShogiHome」の開発リポジトリ
https://sunfish-shogi.github.io/electron-shogi/
MIT License
120 stars 18 forks source link

ユーザーの駒画像を使用する機能 #430

Closed sunfish-shogi closed 1 year ago

sunfish-shogi commented 1 year ago

概要

ユーザーが用意した駒画像を使用する機能を作る。

検討事項

一般に入手可能な駒画像はどのようなものがあるのか

6 段組み 1 枚

4 段組み 1 枚

1 枚ずつ

指定された画像をどのように処理するのか

フロント側は Canvas 無しでは、一つひとつの駒を Crop できないと思われる。 Node.js 側でバラバラの画像にして、ファイルに保存しておく必要がありそう。

https://www.npmjs.com/package/sharp

Quisette commented 1 year ago

I am current dealing with this problem, and one-piece-per-image is used in my current implementation, which inherits the original pieces graph.

About other formats of pieces file (4 or 6 in a row), maybe a separate repository to store the tools is needed to deal with the cropping problem.

BTW, I'm currently doing a frontend and image resource redesign of しんえれ外部駒 as well, and each single image of shogi pieces is cropped successfully, yet removing the background in batch is needed.

sunfish-shogi commented 1 year ago

I am current dealing with this problem, and one-piece-per-image is used in my current implementation, which inherits the original pieces graph.

Major PC Shogi apps (ex. Kifu for windows, MyBona, ShogiGUI) support only non-seperated image. I have slightly concern about diffrent way with other apps, because Electron Shogi is not famous so far.

And using sperated images, those file names are restricted by ElectronShogi. If user want to use images of any creators who don't know ElectronShogi, they must crop or rename the files.

About other formats of pieces file (4 or 6 in a row), maybe a separate repository to store the tools is needed to deal with the cropping problem.

I considered to crop the image and save to app data directory by ElectronShogi's main process (Node.js) when user selects directory at first time.

Quisette commented 1 year ago

Major PC Shogi apps (ex. Kifu for windows, MyBona, ShogiGUI) support only non-seperated image. I have slightly concern about diffrent way with other apps, because Electron Shogi is not famous so far.

However, 81 Dojo's pieces are separated, and Lishogi's Pieces are separated as well.

For individual users who want to create their own Shogi piece images, maybe the single-image format is simpler compared to combination of multiple images, since the precise image combining tool (e.g. inkscape, GIMP or Python scripts) is needed to combine the all the individual images.

I considered to crop the image and save to app data directory by ElectronShogi's main process (Node.js) when user selects directory at first time.

There are too many piece image formats for PC Shogi Apps, and image formats for an app is not always completely accepted for another app. Plus, the pixels for the image varies for all piece images. With the uniform standard of pixels, some piece images would be forced to scale the image pixels down. Maybe we can detect the width and height pixels automatically, and check if it is dividable and crop.

sunfish-shogi commented 1 year ago

However, 81 Dojo's pieces are separated, and Lishogi's Pieces are separated as well.

They are only online web service and do not provides custom image upload feature.

Currently, Shogi GUI is by far the most popular PC shogi app, and many its usage videos and web pages created. Probably, MyBona style(4-rows) which is inherited by ShogiGUI is mainstream for a while.

And single-image style has advantage which user should not understand file name rule. It is important for people who do not understand how to use file explorer and file dialog well.

Quisette commented 1 year ago

Currently, Shogi GUI is by far the most popular PC shogi app, and many its usage videos and web pages created. Probably, MyBona style(4-rows) which is inherited by ShogiGUI is mainstream for a while.

I totally agree with you. Before I found this repository, I have always been using ShogiGUI to do post-game analysis, writing documents and much more things.

And single-image style has advantage which user should not understand file name rule. It is important for people who do not understand how to use file explorer and file dialog well.

Considering the problem user may find it complex for the image directory, I think single-image ShogiGUI style is OK for us to parse if you want to keep the image file neat. But I am not sure whether the parsing process will take too long to wait.

I considered to crop the image and save to app data directory by ElectronShogi's main process (Node.js) when user selects directory at first time.

Looks like that when user chooses the new directory, the cropped image in the appdata directory will be overrided by new ones.

sunfish-shogi commented 1 year ago

Looks like that when user chooses the new directory, the cropped image in the appdata directory will be overrided by new ones.

For example, we can use hash value of source file path or hash value of source file data.

Quisette commented 1 year ago

For example, we can use hash value of source file path or hash value of source file data.

Should the program remember all the history(used) pieces? In this way, the appsettings file should remember all the directory user has selected.

sunfish-shogi commented 1 year ago

Should the program remember all the history(used) pieces? In this way, the appsettings file should remember all the directory user has selected.

  1. app_setting.json has only current source image path (ex. /home/my_account/pictures/ryoko.png).
  2. ElectronShogi calculates hash value from source image when needed, for example using sha256.
  3. ElectronShogi saves cropped images in the directory which includes above hash value in the path, if not exists.

If user selects an image which has selected in the past again, the cropped images already exists in target directory because hash function always generate same value for same input.

If required, ElectronShogi can clean old files by timestamp, but I don't think necessary.

Quisette commented 1 year ago

The ShogiGUI-style image cropping function using sharp package is done, and the new PR for this will be up later this month. What I am thinking is that should we remain the directory uploading function ( for those who want to upload a directory) or just leave with single image option.

sunfish-shogi commented 1 year ago

What I am thinking is that should we remain the directory uploading function ( for those who want to upload a directory) or just leave with single image option.

I think app setting should be simple. So it is better to provide only single image option.

Quisette commented 1 year ago

What I left now unsolved is the destination file path cannot be directly calculated solely and being wrote to app settings. The function of image cropping, storing to hashed directory is OK for now.
If you are willing to solve this little problem, I'll make a PR to allow you to inspect and modify my code. Thanks in advance!

sunfish-shogi commented 1 year ago

What I left now unsolved is the destination file path cannot be directly calculated solely and being wrote to app settings. The function of image cropping, storing to hashed directory is OK for now. If you are willing to solve this little problem, I'll make a PR to allow you to inspect and modify my code. Thanks in advance!

Currently, #492 seems to have no cropping implementation. Does above your message mean you have any unpushed new changes in your local workspace?

Quisette commented 1 year ago

Currently, https://github.com/sunfish-shogi/electron-shogi/pull/492 seems to have no cropping implementation. Does above your message mean you have any unpushed new changes in your local workspace?

The PR above is my current work of cropping implementation.