Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

node-red-node-ui-listでwidgetにリスト表記を追加　その２：画像をローカルのものに

node.js

実際のところ

ローカルファイルはWEB鯖経由で配信し、それを受け取る様式にします。

画像の配信（http.serverをつかって）

画像の入ったディレクトリで

$ python3 -m http.server 8000

node-red側

手前でJSONを以下のように吐き出します

[
    {
        "title": "ONE",
        "description": "YOU ARE THE DUCK",
        "icon": "http://foobar.local:8000/1.jpg"
    },
    {
        "title": "TWO",
        "description": "YOU ARE THE DUCK",
        "icon": "http://foobar.local:8000/2.jpg"
    },
    {
        "title": "THREE",
        "description": "YOU ARE THE DUCK",
        "icon": "http://foobar.local:8000/3.jpg"
    }
]

これをui-listでうけて

参考もと

node-red-node-ui-iframe (node) - Node-RED
http.server --- HTTP サーバ — Python 3.11.2 ドキュメント

node-red-node-ui-listでwidgetにリスト表記を追加

node.js

実際のところ

データはJSONで出す

[{"title":"<b>Apple</b>","description":"This is description of <font color=\"red\"><b>Apple</b></b>.","icon":"https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Red_Apple.jpg/500px-Red_Apple.jpg"},{"title":"<b>Banana</b>","description":"This is description of <font color=\"yellow\"><b>Banana</b></font>(no picture).","icon":null},{"title":"<b>Orange</b>","description":"This is description of <font color=\"orange\"><b>Orange</b></font>.","icon":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Ambersweet_oranges.jpg/440px-Ambersweet_oranges.jpg"},{"title":"<b>Watermelon</b>","description":"This is description of <font color=\"green\"><b>Watermelon</b></font>.","icon":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Vampire_watermelon.jpg/440px-Vampire_watermelon.jpg"}]

テーブル表記なら

flows.nodered.org

参考もと

node-red-node-ui-list (node) - Node-RED

Imagemagickでサムネイルの隙間を黒埋めする

実際のところ

base.pngから切り取って100x100の正方形に成形し不足は黒で埋めてresult.pngとして出力するには

convert -define png:100x100 base.png -crop 75x74+100+120 -thumbnail '100x100>' -gravity center -background black -extent 100x100 result

YOLO形式学習

labelIMGで出力YOLOv3形式のテキストから画像を切り抜く - Bye Bye Moore
の場合だと

for i in `cat 002.txt | awk -f sample.awk` ; do eval "convert -define png:100x100 002.png -crop $i -thumbnail '100x100>' -gravity center -background black -extent 100x100 - | feh -" ; done

とやると、こんな感じに

ちょっと拡張

imgid=004; count=1; for i in `cat $imgid.txt | awk -f sample.awk` ; do eval "convert -define png:100x100 $imgid.png -crop $i -thumbnail '100x100>' -gravity center -background black -extent 100x100 $count.jpg" ; let count++  ; done

参考もと

Thumbnails -- ImageMagick Examples

labelIMGで出力YOLOv3形式のテキストから画像を切り抜く

labelIMGで生成するYOLO v3用のtxtファイルの様式 - Bye Bye Moore
で判明した様式を使い、判定対象の部分を切り抜くスクリプトを書いてみました

実際のところ


こんな感じで学習させた画像と、その結果のtxtがあったとします

今回はbashとawkで作ってみることにしました。

awk

BEGIN {
  image_width = 352
  image_height = 288
  lines = ""
  while (getline) {
    area_width = int(image_width*$4)
    area_height=int(image_height*$5)
    print area_width"x"area_height"+"int(image_width*$2 - area_width/2)"+"int(image_height*$3 - area_height/2)
  }
  exit
}

これを実行するとfehでescするたび切り抜き部分が出てきます

 $ for i in `cat 002.txt | awk -f sample.awk` ; do eval "convert 002.png -crop $i - | feh -" ; done