hiromasa.another :o)

have a lot of interests.

WSL2 上の VS Code で Paste Image 拡張を使う

投稿日時: 2023 年 7 月 2 日投稿者: ひろましゃ

WSL2 と VS Code WSL Remote 拡張で Linux 上の Markdown や Asciidoc を編集している場合に、Paste Image 拡張や Asciidoc 拡張のクリップボード経由での画像挿入を有効にする方法です。

ワークアラウンドではありますが、WSL2 側 Paste Image 拡張のファイルを次のように置き換えます。（Asciidoc 拡張も同ファイル res/linux.sh があります）

~/.vscode-server/extensions/mushan.vscode-paste-image-1.0.4/res/linux.sh

#!/bin/sh
# change current directory
cd `dirname $0`
# set dist path
DISTPATH=//wsl.localhost/Ubuntu-22.04 # <1>
# call Windows PowerShell
powershell.exe -ExecutionPolicy Bypass -File pc.ps1 ${DISTPATH}$1

<1> 行はお使いの WSL2 Linux ディストリビューションのパスを設定してください。

$ pwd
/home/hiromasa
$ powershell.exe -Command "pwd"
Path
----
Microsoft.PowerShell.Core\FileSystem::\\wsl.localhost\Ubuntu-22.04\home\hiromasa

WSL2 から powershell.exe を呼び出せることを利用して、linux.sh から Windows 版の Paste Image の pc.ps1 を呼び出し Windows 側のクリップボードから画像を取得し、画像出力先を WSL2 側のパスになるような処理をしています。（VS Code のセキュリティーポリシー外の世界で動作しますので、動作をご理解の上設定してください）

なお、拡張のアップデート時にはファイルが上書きされると思いますので再パッチしてください。

Sixel グラフィックス対応ターミナル

投稿日時: 2023 年 6 月 13 日投稿者: ひろましゃ

返信

Sixel グラフィックスは、キャラクターベースのターミナルエミュレータを拡張し、特別なエスケープシーケンスを送信することでビットマップグラフィックを表示する技術です。

この記事は、2023-06 に VS Code 内蔵ターミナルエミュレータが Sixel グラフィックスを実験的にサポートしたので試してみたのと、他の自分が使っているターミナルについても対応状況を調べてみたメモです。

Sixel グラフィックスに対応したターミナルは、curl した画像やジェネレータコマンドで生成した画像をそのままの流れで確認できたりするので便利です。

VS Code

VS Code 設定:（~~expertimertal から stable に昇格した時は設定不要になるはずです~~。2023-07 リリースの 1.80 で昇格したので以下の設定は不要になりました）

{ "terminal.integrated.experimentalImageSupport": true }

ImageMagick の convert コマンドで出力を sixel:- とすると標準出力に sixel 形式が出力されターミナルにグラフィックが表示されます。

convert コマンドを試行錯誤している中で、画像出力がすぐに動作確認できて便利の図。（良さそうになったらファイル出力する）

# 画像サイズ取得
$ identify KlaudiaIcon.jpg 
KlaudiaIcon.jpg JPEG 300x300 300x300+0+0 8-bit sRGB 49208B 0.000u 0:00.000
# 丸抜きマスク画像生成
$ convert -size 300x300 xc:black -fill white -draw "circle 148 148 148 0" -alpha copy mask-300px.png
# マスクと画像でアルファ合成 
$ convert KlaudiaIcon.jpg mask-300px.png -compose copy-opacity -composite sixel:-
# ワンライナー and 透過色の出力色指定
$ convert KlaudiaIcon.jpg \( -size 300x300 xc:none -fill white -draw "circle 148 148 148 0" -alpha copy \) -compose copy-opacity -composite -background "#1e1e1e" -alpha remove sixel:-
# 普通に透過色
convert pidgin-ryza.png \( -size 162x162 xc:none -fill white -draw "circle 80 80 80 0" -alpha copy \) -compose copy-opacity -composite pidgi
n-ryza-circle.png
# SVG を大きさ指定で入力
$ convert -size 1000x1000 input.svg sixel:-

なお .svg 表示などのレンダリングで使われる、convert コマンドから見えるフォント名は以下のようにすると得ることができます。

$ convert -list font | grep -e Font | egrep 'JP$'
  Font: Noto-Sans-CJK-JP
  Font: Noto-Sans-Mono-CJK-JP
  Font: Noto-Serif-CJK-JP
# フォントがある .svg を出力する例
$ convert -font 'Noto-Sans-CJK-JP' math-sample1.svg sixel:-
# 任意サイズのダミー画像をつくる例
$ convert -size 320x200 -background "#95a5a6" -fill "#2c3e50" -font 'Noto-Sans-CJK-JP' -pointsize 36 -gravity center label:"320x200" sixel:-

sensors コマンドで CPU の温度を表示してそれっぽく表示するメモ。

$ CPU_TEMP1=$(sensors -j 2>/dev/null \
    | jq '.["thinkpad-isa-0000"]["CPU"].temp1_input') \
    && convert -size 200x20 \
    xc:green \
    -draw "fill red rectangle 0,0,${CPU_TEMP1},20" \
    -gravity center \
    -annotate 0 ${CPU_TEMP1} \
    sixel:-

Alacritty

Alaclitty は2023-06 現在まだ Sexel に対応していませんが、マスターブランチにマージ可能なプルリクが存在します。

Support for graphics in the terminal #4763

This patch adds support for graphics in the terminal. Graphics can be sent as Sixel images.

以下、対応ソースが入っているブランチをビルドして Alacritty + Zellij(Sixel 対応済み) で動作させてみた様子です。（Zellij を通すと clearコマンドなどが正常に機能しないパターンがあるかも。継続確認。Alacritty のみだと綺麗に動作しています）

$ montage *.jpg -tile 4x3 -geometry 240x240 sixel:-

ちなみに ffmpeg-sixel もうまく動作しました。（VS Code のターミナルだと動画の表示位置が左上固定になってしまいますが、Alacritty はカーソル位置の下で再生できました）

https://github.com/Albert-S-Briscoe/FFmpeg-SIXEL

FFmpeg fork for outputting full resolution video to your terminal

$ ffmpeg -i test.mp4 -f sixel -pix_fmt rgb24 -s 800x450 - -f alsa -ac 2 pulse -loglevel quiet

Windows Terminal

Windows Terminal はサポートリクエストがあがっています。ソースコードを grep すると sixel という文字列がいくつか見えるので対応するのかな？（未確認）

Feature Request: sixel graphics support #448

Would like to see Sixel support in the Terminal, this is the standard used to show graphics in the console.

継続ウォッチしていきます。

記事中の画像はライザのアトリエ3 “Social Icons and Wallpapers” で配布されているものを使わせていただきました。（先日、ライザ1-3 まで通しでクリアしてすごく良かった…！）

https://www.koeitecmoeurope.com/ryza3/social.html

To celebrate the release of “Atelier Ryza 3: Alchemist of the End & the Secret Key” , we have prepared some social icons and phone wallpapers for you to enjoy!

ファイルツリー表記をテキストで記述する

投稿日時: 2023 年 6 月 12 日投稿者: ひろましゃ

返信

技術文書などでファイルとディレクトリ・フォルダ構造を図解したい場合に、テキストを使った定義から .svg や .png を生成する方法メモです。

出力例:

いくつか方法があると思いますが、Docker – PlaantUML Server と VS Code – PlantUML 拡張を使うとお手軽にいけると思います。

Docker で PlantUML Server を起動。8080 ポートが何かとかぶっている場合は変更のこと。（9090:8080 等。ホスト側: コンテナ側にて、ホスト側を設定します）

docker run -d --rm -p 8080:8080 plantuml/plantuml-server:jetty
# もしくは podman
podman run -d --rm -p 8080:8080 plantuml/plantuml-server:jetty

VS Code に PlantUML 拡張を導入。

https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

Rich PlantUML support for Visual Studio Code.

VS Code .vscode/settings.json などで以下を設定。Docker で起動した PlantUML Server とポートを合わせます。

    "plantuml.server": "http://localhost:8080"

VS Code で test.puml など *.puml 拡張子でファイルを新規作成し PlantUML Salt 記法でファイル、ディレクトリツリーをテキストで定義。なお、<&folder> などのアイコン定義名は open-iconic のものが使えます。

@startsalt diag-sequence-sample2
{
{T
 + <&folder> wp-admin
 + <&folder> wp-content
 ++ <&folder> themes
 +++ <&folder> my-theme   | 新規作成
 ++++ <&file> style.css   | 新規作成
 ++++ <&file> index.php   | 新規作成
 ++ <&folder> uploads
 + <&folder> wp-includes
 + <&file> .htaccess      | 自動作成
 + <&file> index.php
}
}
@endsalt

VS Code でカーソルを @startsalt と @endsalt の間に合わせ、 [F1] 押下後、PlantUML: Preview Current Diagram を選択。

プレビューしながらいい感じになったら、[F1] から PlantUML: Export Current Diagram で .svg や .png を選択してファイルエクスポート。なお、.png のサイズはプレビューしているのと同じ大きさになるようです。

以上です。

PlantUML は Salt 以外にもテキスト定義でいろいろ描けますので、準備しておくと何かと便利ではないかと思います。

AsciiMath の例:

@startmath math-sample1
f(t)=(a_0)/2 + sum_(n=1)^ooa_ncos((npit)/L)+sum_(n=1)^oo b_n\ sin((npit)/L)
@endmath

Docker コマンド

Windows で docker コンテナを扱う場合は WSL2 上の podman を使うと便利だと思います。

WSL2 への podman の導入:

# podman 導入
$ sudo apt update
$ sudo apt install podman
# レジストリ登録
$ echo "unqualified-search-registries = ['docker.io']" | sudo tee -a /etc/containers/registries.conf

podman を使った PlantUML Server の起動停止例:

# 起動
$ podman -d --name plantuml_server --rm -p 8080:8080 plantuml/plantuml-server:jetty
# 終了
$ podman stop plantuml_server
$ podman ps -a
# --rm 指定で PlantUML Server を起動しているので終了と同時に破棄される