m-tmatma commented 5 years ago

コマンドアイコンの編集を簡略化できないか検討する

https://github.com/sakura-editor/sakura/pull/680 で不足しているコマンドアイコンが対応されたが複数のアイコンが一つのビットマップで管理されており編集するのが大変だ。

これを複数の細かいビットマップに分けて管理してなにかツールを一発実行することにより、リソースコンパイラに渡せる形でくっつけることができないか検討する。

beru commented 5 years ago

現状の複数のアイコンを１つのビットマップで管理する方法は利点もあるとは思いますが欠点もありますね。個人的には画像毎に別々の画像ファイルに分けるようにしたいです。ICOファイルだと色々なサイズやビット数のアイコン画像を１つのファイルに詰め込めるので高DPI対応の観点ではそっちの方が良いなぁと思います。

あとVista以降からアイコンの最大サイズは 256 x 256 なのでみんなが愛してやまない検索アイコンの目を血走らせた表現も出来ますし、GIF画像とか使えば瞬きさせる事も出来るのではないかと…。だれも反対する人はいないと思います。

berryzplus commented 5 years ago

画像操作関連のバッチを組みたい、の意図と理解しました。それなら ImageMagick という有名な古代兵器があります・・・

imageMagick は blog 文化の黎明期に流行った perl で画像を扱えるライブラリです。手軽にやれる方法というとこれが一番に思い浮かびますが、色々と問題はあるみたいｗ https://qiita.com/yoya/items/2076c1f5137d4041e3aa

言語的には、開発者の端末に普通に入るであろう言語ならばなんでも良いと思っています。画像を結合してファイルに書くだけならWICで出来るので、ps1で頑張るのも一つの手法だと思います。

beru さんの話も「いいねぇ～」なんですが、数段階飛ばしにハードル上がった感じです。アニメーションはGIFが多いですが、最近はAPNGってのもあるそうです。

m-tmatma commented 5 years ago

たとえば resource/mytool.bmp というファイルがありますが、

resource/mytool/ というフォルダの下に以下のように個別のファイルを置いて

resource/mytool/000-abc.bmp resource/mytool/001-def.bmp resource/mytool/002-ghi.bmp resource/mytool/003-jkl.bmp ...

その上でアルファベット順に画像を連結するスクリプトを python で作成できたらいいな～と思っています。ファイル名の先頭の数字がインデックスに対応させます。数値だけでは意味がわかりにくいのでその後ろに意味がわかる名前をくっつけるイメージです。

画像の連結自体は OpenCV というものを使えば簡単にできそうに思います。 (簡単に実現できれば他のライブラリでも構いません) https://note.nkmk.me/python-opencv-hconcat-vconcat-np-tile/

berryzplus commented 5 years ago

画像の連結自体は OpenCV というものを使えば簡単にできそうに思います。 (簡単に実現できれば他のライブラリでも構いません) https://note.nkmk.me/python-opencv-hconcat-vconcat-np-tile/

ああ、めっちゃ簡単そうｗそのまま実装できそうなので、これで試してよさそうに思います。 OpenCVも結構有名なライブラリの一つだったと思います。確か顔認証に使われる・・・うん、やっぱり最近流行りのビッグデータ寄りのライブラリですね。

その上でアルファベット順に画像を連結するスクリプトを python で作成できたらいいな～と思っています。

mytoolのビットマップ内のどの位置に何のアイコンが格納されるかはここの配列で定義されています。

https://github.com/sakura-editor/sakura/blob/f6566a024397be8314cc59567eb7903d66a04d27/sakura_core/uiparts/CMenuDrawer.cpp#L126-L129

1 + 2 + 3 + ... + 32 + ダミー 33 + 33 + ... + 64 + ダミー

という感じに連結してやればバラで定義したものを連結できそうです。

考えないといけないのは未定義領域をどう扱うか？というネタですが、そこは純粋に「どう実装するか？」だけなのかも知れません。

m-tmatma commented 5 years ago

分割も簡単にできそう https://qiita.com/kino15/items/56c0fffce4c14a875199

m-tmatma commented 5 years ago

ちょっとやってみた。 → いけたみたいに見えるが 4bit のビットマップにならない → 4bit の bmp は作れないみたい https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1279043552

import cv2

def main():

    img = cv2.imread("./mytool.bmp")
    height, width, channels = img.shape

    filesTotals = []
    index = 1
    for yIndex in range(height // 16):
        filesLine = []

        for xIndex in range(width // 16):
            yStart = yIndex     * 16
            yEnd   = (yIndex+1) * 16
            xStart = xIndex     * 16
            xEnd   = (xIndex+1) * 16

            fileName = "./out-" + str(index) + ".bmp"
            clp = img[yStart:yEnd, xStart:xEnd]
            cv2.imwrite(fileName, clp)

            filesLine.append(fileName)
            index = index + 1

        filesTotals.append(filesLine)

    imgsTotals = []
    for filesLine in filesTotals:
        imgs = []

        for fileName in filesLine:
            img = cv2.imread(fileName)
            imgs.append(img)

        imgsHorz = cv2.hconcat(imgs)
        imgsTotals.append(imgsHorz)

    outName = "./mytool2.bmp"
    imgsTotal = cv2.vconcat(imgsTotals)
    cv2.imwrite(outName, imgsTotal)

if __name__ == "__main__":
    main()

m-tmatma commented 5 years ago

→ いけたみたいに見えるが 4bit のビットマップにならない

作った bmp をペイントで開いて 16色のビットマップで保存したら元ファイルと完全一致した。

m-tmatma commented 5 years ago

分割も連結も簡単だが、16色にするのは難しそう

berryzplus commented 5 years ago

最後の一手にこういうものを使うとか。 https://www.vector.co.jp/soft/win95/art/se064790.html

beru commented 5 years ago

まぁ別に 8bit で容量が倍になって無駄遣いになっても良いんじゃないかと思います。

個人的には仕様を変えてアイコン画像を連結せずに個別にICOファイルで扱うようにした方が良いと思います。アイコン画像をどうしても差し替えたい人は自分で Resource Hacker とか使って何とかするだろうし。

berryzplus commented 5 years ago

このMISTを使って8bit⇒4bit変換のフィルタを書けばいい、という話ではなく？ https://github.com/mist-team/mist

m-tmatma commented 5 years ago

↑ c++ みたいなので面倒だなと思ったので、なんとか python でやれないかなと考えてます。コンパイルするのなら多分 .net で標準の関数でやれるのかなと思います。

beru commented 5 years ago

BMP画像の分割や連結はライブラリやコマンド使えば楽に出来ると思いますが自前で書く事も出来るので方法自体は何とでもなるとは思います。

画像が結合されているとそんなに編集がしにくいかというと、具体的に何が問題で編集がしにくいのか書かれてないので理解していませんが、今までそれでやってきたんだし今のままでも良いんじゃないかなぁと個人的には思います。

まぁ分ける方針にするならそれで良いとも思いますが、それならどうせ仕様を変えて結合した画像にしないで個々にICOファイルにしませんか？色々なサイズやビット数のアイコンを自然な形で持てますし。

m-tmatma commented 5 years ago

↑ ツールバーって ico ファイルのまま使えるのでしょうか？

beru commented 5 years ago

↑ ツールバーって ico ファイルのまま使えるのでしょうか？

普通のWin32アプリって全部アイコン画像はICOファイルだったような記憶が…。

イメージリストを使う場合 ImageList_AddIcon マクロでイメージリストにアイコンのハンドルを追加出来るようです。

http://wisdom.sakura.ne.jp/system/winapi/common/common14.html に流れが書かれてました。

１枚の画像に詰めない方式にするなら現状のサクラエディタの実装は独自にやってるので色々と変える必要があると思います。具体的には CImageListMgr は使わなくするかその実装を結構大幅に変えます。昔のWindowsだとイメージリストの扱いに難が有ったみたいですが、最近のならさすがに枯れてきているんじゃないかなぁと思います。仮に問題が有った場合でもICONリソースからビットマップは取れるので自前で描画するAPI呼び出して解決はみんな問題なく出来ます。

今みたいに1枚の画像に詰める方式だとグリッドに並んでいるので一覧性は良いとは思いますが、アイコンのサイズやビット数が異なるものも（高DPI対応などの理由で）リソースに含めたいとなった時に何か別の工夫が必要になりますね。ネーミングルール決めて別のファイルで持ってリソースに入れるとか。

まぁでもソースコードを色々変えるのはちょっと大変なので、まずは画像を分割してファイル管理したい、リソースに組み込む為に連結した画像を作るのは自動化したい、をまずやるのは全然良いと思います。むしろステップ踏んでそうした方が良いかもしれないですね。

beru commented 5 years ago

ところで @m-tmatma さんってアイコン画像の編集にどんなソフト使ってますか？

自分は paint.net っていうソフト使ってます。 Photoshop に比べると機能は貧弱で使い勝手もそこまで良くないですが無料の割には結構機能が揃っていると思います。例えばレイヤー機能は、複数のアイコンが１つの画像ファイルに並べて詰められているサクラエディタのアイコン画像を編集するのに有用だと思います。

まぁ人によっては mspaint でも大作を作り上げられるので、どんな道具を使うにしろ意思次第だとは思いますが自分は出来るだけ楽したいです…。

m-tmatma commented 5 years ago

アイコン画像の編集にどんなソフト使ってますか？

アイコンの編集はほとんどしたことないです。強いて言えば visual studio です。

beru commented 5 years ago

アイコンの編集はほとんどしたことないです。強いて言えば visual studio です。

Visual Studio に bmp ファイルを放り込むとエディタが表示されますが、思ったより高機能ですね。 ico ファイルだと古い編集画面が表示されました。辛い。。これならまだ mspaint の方がマシかも…。

berryzplus commented 5 years ago

win10の3D paintってmspaintなんですかね。 creator updateというのが入った影響かどうか知りませんが、昔と比較にならん感じのOfficeっぽいのが付いてますよね、今。

berryzplus commented 5 years ago

pythonからCOMコンポーネントを扱う手段もあるようです。 https://github.com/mhammond/pywin32

COM使ってよいならWIC使えばいいです。 8bit⇒4bit変換なら #683 の WIC 導入対応の流用で 3/4 くらいはいけそうなｗ

beru commented 5 years ago

win10の3D paintってmspaintなんですかね。 creator updateというのが入った影響かどうか知りませんが、昔と比較にならん感じのOfficeっぽいのが付いてますよね、今。

ペイント 3D の実行ファイル名は PaintStudio.View.exe でした。使ってみたんですが個人的にはいまいちだなと思います…。 Metasequoia というソフトの方が良いと思います。

beru commented 5 years ago

pythonからCOMコンポーネントを扱う手段もあるようです。 https://github.com/mhammond/pywin32

COM使ってよいならWIC使えばいいです。 8bit⇒4bit変換なら #683 の WIC 導入対応の流用で 3/4 くらいはいけそうなｗ

https://docs.microsoft.com/en-us/windows/desktop/wic/-wic-codec-native-pixel-formats#indexed-and-grayscale-color-models ここの説明見るとグレースケール扱いになっちゃいそうで心配です。

For monochrome (grayscale) formats, WIC supports 1, 2, 4, 8, 16, and 32 bits per pixel. For bit depths of 1, 8, 16, and 32, the color data is stored in a single channel. For bit depths of 2 or 4, pixels are indexes into a grayscale palette.

Python で画像扱う場合は Pillow っていうライブラリが有名みたいですけど、8bit から 4bit への削減をするだけならライブラリに頼らずに Python で自前で処理を書いても良い気もします。

画像の分割や結合とかビット数削減とかは単純な処理なのでそれ自体はあんまり問題では無いと思います。ただ個別に分かれてないと本当にアイコンの編集しづらいですか？

berryzplus commented 5 years ago

IWICFormatConverter::Initialize の引数に GUID_WICPixelFormat4bppIndexed を指定したらいけたはず。ただ、パレット作る部分を自前実装しないといかんのでそのあたりがめんどくさいかも。

KageShiron commented 5 years ago

.NETなら4bit Bitmapに画像を書き込む→Saveで4bit保存ができたはずなので、やり方によってはPowerShellでやってみてもいいかもしれませんね。

画像編集は、ここの画像だけVisual Studio Image Libraryから取って来たやつと入れ替えようみたいなことだと個別の方がファイル入れ替えで済むので俄然楽になりそうです。

m-tmatma commented 5 years ago

.NETなら4bit Bitmapに画像を書き込む→Saveで4bit保存ができたはずなので、やり方によってはPowerShellでやってみてもいいかもしれませんね。

powershell 使うなら、powershell だけで完結したいですね。 python と powershell を併用するのは避けたい。

beru commented 5 years ago

画像編集は、ここの画像だけVisual Studio Image Libraryから取って来たやつと入れ替えようみたいなことだと個別の方がファイル入れ替えで済むので俄然楽になりそうです。

分かれていた方が入れ替えは楽かもしれないですね。ただしインデックスカラー画像にはパレットの概念があるので、後で結合する際に何も考えずに処理すると問題が出ます。

beru commented 5 years ago

プログラム側の改変が要りますけど分割したものを結合はせずに、個別に ico ファイルにしてリソースに埋め込む通常のやり方が良いと思うんですよね。その方が変な制約が無くて楽です。

そうする場合は my_icons.bmp 等を sakura.exe と同じフォルダに入れたらそれが使われるという機能は削除せざるを得ないと思いますが、差し替えたい人は実行ファイルに埋め込まれたリソースをいじるのではないかと…。

arigayas commented 5 years ago

そうする場合は my_icons.bmp 等を sakura.exe と同じフォルダに入れたらそれが使われるという機能は削除せざるを得ないと思いますが、差し替えたい人は実行ファイルに埋め込まれたリソースをいじるのではないかと…。

http://sakura.qp.land.to/?Customize/Icons サクラエディタのWikiに置いてあるアイコンを使って気軽に変更出来ると思うのでファイルを置けばアイコンが変わる機能は残しておいた方が良いと思います。

berryzplus commented 5 years ago

ここで話してよいのかな？

新機能提案

取得順	取得元	説明
1	my_icons.bmp	この名前のファイルを設定フォルダ(iniのあるフォルダ)かexeのあるフォルダに置いておくと、アイコン画像として使われます。
2	mytool.bmp(埋込リソース)	my_icons.bmpが見つからなかった場合に使われます。
3	myiconXXX.ico	NEW この名前のファイルを設定フォルダ(iniのあるフォルダ)かexeのあるフォルダに置いておくと、XXXで指定したアイコン番号を置き換えます。

この仕組みの利点は、変更したいアイコン番号を把握していれば、任意のアイコンを好きなように書き換えできるようになることです。

課題

アイコン番号を直接指定する仕組みの都合上、ユーザに対して機能とアイコン番号の対応付けを分かりやすく公開する必要があります。現状では、ぼくが個人的に「このコードのここの番号がですね・・・」みたいに説明してるのみで、分かりやすいドキュメントがあるとは言えない状態だと思っています。

というかそもそも、アイコン番号を指定して置き換える仕様はユーザビリティ的にどうなんだ？とも思いますので、機能とアイコン番号を対応付けるうまい方法の模索が必要かもしれません。

発展形の模索

任意のアイコン番号を置き換える仕組みができたら、対応画像フォーマットを拡張する道が開けると思います。たとえば、「Windows Imaging Comonentが対応するものなら何でもアリ」にして、 PNG形式のアイコンを読み込ませる、とかも可能になります。

問題は、課題をどう解くか・・・。

beru commented 5 years ago

http://sakura.qp.land.to/?Customize/Icons サクラエディタのWikiに置いてあるアイコンを使って気軽に変更出来ると思うのでファイルを置けばアイコンが変わる機能は残しておいた方が良いと思います。

その機能って重要ですか？そもそも使ってます？自分は使っていませんが…。

KageShiron commented 5 years ago

私はXPぐらいのアイコンが好きで差し替えてるので、何らかの差し替えられる方法はあった方がいいかなーと思います。

というかそもそも、アイコン番号を指定して置き換える仕様はユーザビリティ的にどうなんだ？とも思いますので、機能とアイコン番号を対応付けるうまい方法の模索が必要かもしれません。

結局、対応表をヘルプに用意して番号.icoというファイル名を置いてもらうのが無難な気がします。

beru commented 5 years ago

ファイルによるアイコン差し替えですが、実行ファイルと同じディレクトリに置くというのは UAC による確認が出たりするのでフォルダ指定出来ると良いかなと思いました。マルチユーザーの場合は %appdata%/sakura をデフォルトにするとか。

beru commented 5 years ago

HLP000010.html に書かれていましたが、MIKさんが専用アプリを作られてました。 http://sakura.qp.land.to/?Customize%2FToolIconMaker

berryzplus commented 5 years ago

HLP000010.html に書かれていましたが、MIKさんが専用アプリを作られてました。 http://sakura.qp.land.to/?Customize%2FToolIconMaker

もう一昨年の話になりますが、MIKさんとはgoogle groupですれ違ったことがあります。まだ興味を持って見てくれてるのかな・・・（見ててくれたらいいな

ToolIconMakerについては、クレジットが「サクラエディタ・プロジェクト」で、著作権表記のところに「FreeWare」とあるのでプロジェクトとして流用するなら問題はなさそうです。元ライセンス表記はないけど二次著作物としてzlib/pngを明記すればよいはず。

テキトーな場所にブランチ切ってメンテしていく感じにしたらいいのかなと思いました。ソースが vb 6.0 っぽいので、まずは .NET化したいなぁ。

それにしても、プロダクト名が「サクラエディタのツールアイコン作って。」ってファンキーだな・・・。

jakenjarvis commented 5 years ago

具体的には何も考えてませんが、以下のような夢を見ました。

原本データは、SVG形式のドローデータで保持し、Pythonでごにょごにょする。使ったことないけど、svgwrite、Qt(PySide)あたりが使えそう？出来上がったSVG形式のデータからうまいことBMPを出力して、m-tmatmaさんが出したOpenCVでガッチャンコなんて・・・どうでしょう？これなら、サイズ違いの画像を綺麗に作れるかもしれません。

※まあ、アイコン普通に作るより、画像生成の仕組みをプログラムするだけもっとめんどくさいっていう。

Photoshopやillustratorのように使えるOSSなら、GIMPやInkscapeあたりが真っ先に思いつきますネ。

beru commented 5 years ago

なんだか随分具体的な夢ですね…。

2017 年 4 月に配布された Windows 10 Creators Update で Direct2D が SVG 画像のレンダリングをサポートしたみたいです。 https://docs.microsoft.com/en-us/windows/desktop/direct2d/svg-support

SVGをBMP等のラスター形式の画像に変換すると容量が増えるので、SVGデータをリソースにそのまま含めてしまうのが良いのではないかと思います。

なお古いOS向けには今まで通り16x16 ピクセルの16色のアイコンを使いつづければ良いのではないかと。

jakenjarvis commented 5 years ago

あ。普通にそれでよかったですね（笑）実際、Androidアプリなんかはその方向です。

m-tmatma commented 4 years ago

たとえば resource/mytool.bmp というファイルがありますが、

resource/mytool/ というフォルダの下に以下のように個別のファイルを置いて

resource/mytool/000-abc.bmp resource/mytool/001-def.bmp resource/mytool/002-ghi.bmp resource/mytool/003-jkl.bmp ...

その上でアルファベット順に画像を連結するスクリプトを python で作成できたらいいな～と思っています。ファイル名の先頭の数字がインデックスに対応させます。数値だけでは意味がわかりにくいのでその後ろに意味がわかる名前をくっつけるイメージです。

1130 で C# ですが、ツールを実装してみました。

分割も連結も簡単だが、16色にするのは難しそう

Bitmap.Clone メソッドを使って実現できたので C# で書いてみました。

m-tmatma commented 4 years ago

sakura-editor / sakura

コマンドアイコンの編集を簡略化できないか検討する #733

新機能提案

課題

発展形の模索

1130 で C# ですが、ツールを実装してみました。

1130 をマージしました。