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

m-tmatma · 2018-12-29T04:03:49Z

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

#680
で不足しているコマンドアイコンが対応されたが
複数のアイコンが一つのビットマップで管理されており
編集するのが大変だ。

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

beru · 2018-12-29T04:32:12Z

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

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

berryzplus · 2018-12-29T11:02:23Z

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

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

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

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

m-tmatma · 2018-12-29T23:42:07Z

たとえば 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 · 2018-12-30T05:22:10Z

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

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

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

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

sakura/sakura_core/uiparts/CMenuDrawer.cpp

Lines 126 to 129 in f6566a0

    
           	static const int tbd[] = { 
        
           /* ファイル操作系(1段目32個: 1-32) */ 
        
           /*  1 */		F_FILENEW					/* , TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 */,	//新規作成 
        
           /*  2 */		F_FILEOPEN					/* , TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 */,	//開く

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

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

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

m-tmatma · 2018-12-30T06:22:03Z

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

m-tmatma · 2018-12-30T08:26:04Z

ちょっとやってみた。
→ いけたみたいに見えるが 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 · 2018-12-30T08:34:45Z

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

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

m-tmatma · 2018-12-30T08:57:00Z

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

berryzplus · 2018-12-30T11:20:23Z

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

beru · 2018-12-30T11:28:50Z

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

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

berryzplus · 2018-12-30T11:29:51Z

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

m-tmatma · 2018-12-30T11:36:08Z

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

beru · 2018-12-30T11:37:24Z

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

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

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

m-tmatma · 2018-12-30T11:57:34Z

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

beru · 2018-12-30T12:21:57Z

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

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

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

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

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

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

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

beru · 2018-12-30T13:02:32Z

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

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

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

m-tmatma · 2018-12-30T21:11:17Z

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

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

beru · 2018-12-30T21:38:18Z

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

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

berryzplus · 2018-12-31T00:49:53Z

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

berryzplus · 2018-12-31T00:57:34Z

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

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

beru · 2018-12-31T01:15:48Z

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

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

beru · 2018-12-31T01:37:21Z

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 · 2018-12-31T04:10:10Z

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

KageShiron · 2018-12-31T04:57:31Z

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

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

m-tmatma · 2019-01-02T22:44:42Z

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

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

beru · 2019-01-03T02:08:22Z

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

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

beru · 2019-01-03T02:12:32Z

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

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

arigayas · 2019-01-03T02:32:09Z

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

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

berryzplus · 2019-01-03T05:06:40Z

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

新機能提案

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

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

課題

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

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

発展形の模索

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

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

beru · 2019-01-03T06:32:35Z

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

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

KageShiron · 2019-01-03T06:50:05Z

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

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

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

beru · 2019-01-03T07:05:45Z

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

beru · 2019-01-12T12:29:31Z

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

berryzplus · 2019-01-13T09:02:04Z

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

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

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

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

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

jakenjarvis · 2019-01-16T07:41:52Z

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

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

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

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

beru · 2019-01-17T15:49:26Z

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

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 · 2019-01-18T09:27:49Z

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

m-tmatma · 2020-01-04T12:41:20Z

たとえば 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 · 2020-01-05T00:12:53Z

#1130 をマージしました。

beru added the enhancement ■機能追加 label Dec 29, 2018

beru mentioned this issue Jan 5, 2019

HighDPI環境でも正しくアイコンを表示できるようにする #631

Merged

m-tmatma mentioned this issue Jan 4, 2020

ツールバー用のビットマップ管理を分離、結合するツールを導入する (ただし組み込みはしない) #1130

Merged

m-tmatma mentioned this issue Apr 28, 2020

Grep機能のうち一部機能を削除しませんか？ #1248

Closed

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

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

Comments

m-tmatma commented Dec 29, 2018

beru commented Dec 29, 2018

berryzplus commented Dec 29, 2018

m-tmatma commented Dec 29, 2018

berryzplus commented Dec 30, 2018

m-tmatma commented Dec 30, 2018

m-tmatma commented Dec 30, 2018

m-tmatma commented Dec 30, 2018

m-tmatma commented Dec 30, 2018

berryzplus commented Dec 30, 2018

beru commented Dec 30, 2018

berryzplus commented Dec 30, 2018

m-tmatma commented Dec 30, 2018

beru commented Dec 30, 2018

m-tmatma commented Dec 30, 2018

beru commented Dec 30, 2018

beru commented Dec 30, 2018

m-tmatma commented Dec 30, 2018

beru commented Dec 30, 2018

berryzplus commented Dec 31, 2018

berryzplus commented Dec 31, 2018

beru commented Dec 31, 2018

beru commented Dec 31, 2018

berryzplus commented Dec 31, 2018

KageShiron commented Dec 31, 2018

m-tmatma commented Jan 2, 2019

beru commented Jan 3, 2019

beru commented Jan 3, 2019

arigayas commented Jan 3, 2019

berryzplus commented Jan 3, 2019

新機能提案

課題

発展形の模索

beru commented Jan 3, 2019 • edited Loading

KageShiron commented Jan 3, 2019 • edited Loading

beru commented Jan 3, 2019 • edited Loading

beru commented Jan 12, 2019

berryzplus commented Jan 13, 2019

jakenjarvis commented Jan 16, 2019

beru commented Jan 17, 2019

jakenjarvis commented Jan 18, 2019

m-tmatma commented Jan 4, 2020

m-tmatma commented Jan 5, 2020

beru commented Jan 3, 2019 •

edited

Loading

KageShiron commented Jan 3, 2019 •

edited

Loading

beru commented Jan 3, 2019 •

edited

Loading