• プラグイン機能の手引き (v0.9.3~)

    リピート再生とランダム再生、toggle consume modeをON/OFFするプラグインを作ってみました

    全て過去の作例からコピペしたんですけどね。
    consume modeだけは期待していた動きになってくれなかったのですが、機能はするのでヨシとします。
    と言う訳で、今日もサクッとレポートしたいと思います。


    まずpluginsディレクトリにあるuser.jsを編集します。

    nano /home/pi/plugins/user.js
    

    このファイルに、下記の内容を追加でコピペします。

    $('.dropdown-toggle').on('click', function (e) {
      if ($('#btnrepeat').hasClass("active")) {
        $('#repeat-state').text("Repeat OFF");
      } else {
        $('#repeat-state').text("Repeat ON"); 
      }
    });
    
    $('.dropdown-toggle').on('click', function (e) {
      if ($('#btnrandom').hasClass("active")) {
        $('#random-state').text("Random OFF");
      } else {
        $('#random-state').text("Random ON");
      }
    });
    
    $('.dropdown-toggle').on('click', function (e) {
      if ($('#btnconsume').hasClass("active")) {
        $('#consume-state').text("Consume OFF");
      } else {
        $('#consume-state').text("Consume ON");
      }
    });
    

    カーソルが「歯車マーク」の上に来た時に、リピート再生やランダム再生、consume modeのステイタスをチェックして、その結果をプルダウンメニューに反映させるためのスクリプトだそうです。
    (私が書いたわけじゃない)
    今回、結果としてconsumeだけはうまく動いてくれなかったんですけどね:worried:


    次にpluginsディレクトリに移動して...

    cd /home/pi/plugins
    

    サクサクッとディレクトリを3つ作っちゃいました。

    mkdir 02-repeat
    
    mkdir 03-random
    
    mkdir 04-consume
    

    チャンとディレクトリが作成されているか、チェックしましょう。

    ls -l /home/pi/plugins
    

    (情報の取得を忘れてた:sweat: )

    で、それぞれのシンボリックリンクを/home/pi/plugins/attachディレクトリに作成します。

    ln -s ../02-repeat /home/pi/plugins/attach
    
    ln -s ../03-random /home/pi/plugins/attach
    
    ln -s ../04-consume /home/pi/plugins/attach
    

    チャンとシンボリックリンクが作成されているか、チェックしておきましょう。

    ls -l /home/pi/plugins/attach
    
    lrwxrwxrwx 1 pi pi 15 Dec 29 14:36 01-soundcard -> ../01-soundcard
    lrwxrwxrwx 1 pi pi 12 Jan  5 18:10 02-repeat -> ../02-repeat
    lrwxrwxrwx 1 pi pi 12 Jan  5 18:19 03-random -> ../03-random
    lrwxrwxrwx 1 pi pi 13 Jan  5 18:20 04-consume -> ../04-consume
    lrwxrwxrwx 1 pi pi  9 Dec 26 23:48 10-mpd -> ../10-mpd
    lrwxrwxrwx 1 pi pi 20 Dec 29 14:36 11-update_library -> ../11-update_library
    lrwxrwxrwx 1 pi pi 16 Dec 29 14:37 12-save_queue -> ../12-save_queue
    lrwxrwxrwx 1 pi pi 16 Dec 29 14:37 13-add_stream -> ../13-add_stream
    lrwxrwxrwx 1 pi pi 16 Dec 29 14:38 31-disk_usage -> ../31-disk_usage
    lrwxrwxrwx 1 pi pi 13 Dec 29 14:37 40-spotify -> ../40-spotify
    lrwxrwxrwx 1 pi pi 13 Dec 29 14:40 90-plugins -> ../90-plugins
    lrwxrwxrwx 1 pi pi 13 Dec 29 14:41 91-support -> ../91-support
    lrwxrwxrwx 1 pi pi 12 Dec 29 14:41 92-reboot -> ../92-reboot
    lrwxrwxrwx 1 pi pi 14 Dec 29 14:41 93-shutdown -> ../93-shutdown
    lrwxrwxrwx 1 pi pi 31 Jan  5 00:19 94-save_backup -> /home/pi/plugins/94-save_backup
    lrwxrwxrwx 1 pi pi 19 Jan  5 00:51 95-read_mpd_data -> ../95-read_mpd_data
    lrwxrwxrwx 1 pi pi 17 Jan  5 00:30 96-read_backup -> ../96-read_backup
    

    チャンとできていますね。


    それでは、それぞれのファイルを作成していきましょう。
    前回とちょっと方法を変えてみたいと思います。
    まず、各ディレクトリに飛んじゃいます。

    cd /home/pi/plugins/02-repeat
    

    nanoでファイルを2つ作成。
    先ずは...

    nano app.json
    

    で、以下の内容をコピペして保存。

    {
            "menu": "<span id=repeat-state>Repeat</span>",
            "icon": "repeat",
            "note": "MPD Command"
    }
    

    次に...

    nano run.sh
    

    以下をコピペして保存。

    #!/bin/bash
    
    mpc repeat
    
    exit $?
    

    ここで実行権限も付与しておきましょう。

    chmod 777 run.sh
    

    同様の作業を、他2つのディレクトリで行います。
    ココからはチョット手抜きでいきますよ:grinning:

    cd /home/pi/plugins/03-random
    
    nano app.json
    

    以下をコピペして保存。

    {
            "menu": "<span id=random-state>Random</span>",
            "icon": "shuffle",
            "note": "MPD Command"
    }
    

    続いて...

    nano run.sh
    

    以下をコピペして保存。

    #!/bin/bash
    
    mpc random
    
    exit $?
    

    ついでに実行権限を付与。

    chmod 777 run.sh
    

    最後のディレクトリに移動。

    cd /home/pi/plugins/04-consume
    
    nano app.json
    

    以下をコピペして保存。

    {
            "menu": "<span id=consume-state>Consume</span>",
            "icon": "fireplace",
            "note": "MPD Command"
    }
    
    nano run.sh
    

    以下をコピペして保存。

    #!/bin/bash
    
    mpc consume
    
    exit $?
    

    実行権限を付与。

    chmod 777 run.sh
    

    以上です!
    細かいところで「何でやねん」というところもありますが、そこは多目に見てちょんまげ。


    以上を行って、私のsymphonic-mpdのプルダウンメニューは、今、こうなってます。


    スクリーンショット 2020-01-05 18.58.12.png


    consumeだけ表示が“ON”のままで“OFF”を表示しません!
    consumeだけはMPDパネルからON/OFFするようにしますかね:sweat_smile:


    以上、お役に立てますでしょうか!

  • HostNameを変更してAirPlay、Spotifyのデバイス名をHostNameにするプラグインを作成中です

    初めて上に倣って書いてみました。
    同じネットワーク上でSMPDを複数台動かす場合区別しやすくするためです。(Raspberryの種類、DEC、スピーカ、設置場所等を区別)

    • プラグイン名は 50-change_hostname と取り敢えずしました。
    • HostNameは2〜10文字に制限しました。

    使い方は簡単でプラグインを選択する
    a16f4242-c12e-4c93-840f-3c963d2e033f-image.png
    スクリーンショット 2020-03-20 0.15.35.png
    入力画面にHostNameを入力する
    ecac1161-1fb8-49b5-85eb-a30b6541a8a8-image.png スクリーンショット 2020-03-20 0.12.16.png
    OKする結果の画面が出る
    d56c069d-e395-4340-ae83-05d9177b5262-image.png スクリーンショット 2020-03-20 0.13.38.png

    作成したコードは
    app.json

    {
    	"menu": "CHG HOST NAME",
    	"icon": "account_balance",
    	"note": "Change Host Name"
    }
    

    form.html

    h1 {
        color: red;
        text-align: center;
    }
    .table1 { margin:20px ; margin-left: 40px ;
        border: 1px solid gray;
      }
      .table1 th, .table1 td {
        border: 1px solid gray;
      }
    .olhit {line-height: 2.5}
    .under {background: linear-gradient(transparent 70%, #ff99ab 70%);}
    .del {text-decoration: line-through;}
    .chuu {vertical-align: sub; }
    

    AirPlayのawk用ファイル

    /"Hostname"/ {print "        "$1, $2, "\""pname"\"""; "  $4,$5,$6,$7}
    !/"Hostname"/ {print $0}
    

    Spotifyのawk用ファイル

    /device_name =/ {print $1,$2, vv}
    !/device_name =/ {print $0} 
    

    run.shのコード

    if [ $# = 1 ]; then
    
      HNAM=$1
    #  echo ${#HNAM}
    #  su=${#HNAM}
    #echo #su
    #  sudo hostnamectl set-hostname #HNAME
        if [ ${#HNAM} -gt 1 -a ${#HNAM} -le 10  ]; then
    
         awk -v "pname=$HNAM" -f awksa /etc/shairport-sync.conf  > "tempf"
    #     sudo  mv -f tempf /etc/shairport-sync.conf
    
         awk -v "vv=$HNAM" -f awkss /etc/spotifyd.conf > "tempf"
    #     sudo mv -f tempf /etc/spotifyd.conf
    
         echo "WebUI と ssh のアドレスは  $HNAM.local  です"
    
    #     sudo reboot
         exit $?
    
         fi
      fi
    
    

    ここで、うまく行かないところをコメントアウトしています。
    hostnameを変更する部分と
    awkが実行してくれないため、コピーをさせないことです。
    awkに関して./run.shとSSHで実行すればうまくいきます。

  • @miyt 最後の行のコードが誤っていました。
    ./run.sh abcd  です 失礼しました。

  • @miyt さん

    Web UIから起動したrun.shはrootで実行されますので、sudoは不要です。

    (なお、RPi4版にはsudoはインストールしていません。)

  • @miyt さま
    ざっと拝見した限り、以下の点でそのままでは動作しませんね。

    1)form.htmlがcssしか入っていません。
     ちなみに自分でcssを調整するのはアリだと思いますが、WebUIの場合は既にBootstrap+ympdのCSSを使用しておりますのでこれを上書きするように記載しないほうが良いかもしれません。

    2)run.shの先頭行にシバン(#!/bin/sh)がありません

  • @sunatomo さま
    1)違ったコードをアップしてました。訂正します。

    <div style="padding:20px 20px 5px 20px;">
      <p>Set new HostName.</p>
    
      <label class="control-label">hostname</label><br/>
      <input type="text" class="run" /><br/>
    
      <p>after reboot, Use hostname.local for WebUI & ssh.</p>
    
    </div>
    

    2)一行目が抜けていました。

    #!/bin/bash
    if [ $# = 1 ]; then
    
      HNAM=$1
    #  echo ${#HNAM}
    #  su=${#HNAM}
    #echo #su
    #  sudo hostnamectl set-hostname #HNAME
        if [ ${#HNAM} -gt 1 -a ${#HNAM} -le 10  ]; then
    
         awk -v "pname=$HNAM" -f awksa /etc/shairport-sync.conf  > "tempf"
    #     sudo  mv -f tempf /etc/shairport-sync.conf
    
         awk -v "vv=$HNAM" -f awkss /etc/spotifyd.conf > "tempfs"
    #     sudo mv -f tempf /etc/spotifyd.conf
    
         echo "WebUI と ssh のアドレスは  $HNAM.local  です"
    
    #     sudo reboot
         exit $?
    
         fi
      fi
    
    exit 1
    

    どちらも私の不注意で余分に時間を取らせてしまい誠にすみませんでした。

  • @miyt さま
    私だったらrun.shはこうしますかね。(awkはちょっとわからないもので...)

    #!/bin/bash
    if [ $# = 1 ]; then
      HNAM=$1
      if [ ${#HNAM} -gt 1 -a ${#HNAM} -le 10  ]; then
        #update /etc/hosts
        #default 127.0.1.1       smpd
        cp /etc/hosts /etc/hosts.bak
        sed -i -e '/^127.0.1.1/c 127.0.1.1       ${HNAM}' /etc/hosts
    
        #update /etc/hostname
        #default smpd
        cp /etc/hostname /etc/hostname.bak
        echo "$HNAM" > /etc/hostname
    
        #update /etc/spotifid.conf
        #default device_name = symphonic-mpd(Pi4)
        systemctl stop spotifyd.service
        cp /etc/spotifyd.conf /etc/spotifyd.conf.bak
        sed -i -e '/^device_name/c device_name = ${HNAM}' /etc/spotifyd.conf
        systemctl start spotifyd.service
    
        systemctl stop shairport-sync.service
        cp /etc/shairport-sync.conf /etc/shairport-sync.conf.bak
        sed -i -e '/^\tname/c\\tname = "${HNAM}"; // This means "Hostname" -- see below. This is the name the service will advertise to iTunes.' /etc/shairport-sync.conf
        systemctl start shairport-sync.service
    
        echo "hostname was changed to ${HNAM}.local . your configuration takes effect after reboot"
      fi
    fi
    

    hostsは一応ホスト名が127.0.1.1に書かれているため書換
    hostnameは今回ホスト名を書換えするため対応
    spotifyd.conf shairport-sync.confもそれぞれ当該部分を書き換えます。
    一応sedのコマンドはこれで動作することは確認しました(環境変数使わずに)。

  • @sunatomo さま
    さすがプロの手にかかるとスッキリと見やすくなるのですね。私はawk,sedなどは20年以上前にそれも単純なものしか作ってなかったので、ド素人で恥ずかしいです。-iとか/cは使った記憶はありません。
    ホスト名が展開されていないので一部修正しました。

    #!/bin/bash
    if [ $# = 1 ]; then
      HNAM=$1
      if [ ${#HNAM} -gt 1 -a ${#HNAM} -le 10  ]; then
        #update /etc/hosts
        #default 127.0.1.1       smpd
        cp /etc/hosts /etc/hosts.bak
        sed -i -e '/^127.0.1.1/c 127.0.1.1       '${HNAM}'' /etc/hosts
    
        #update /etc/hostname
        #default smpd
        cp /etc/hostname /etc/hostname.bak
        echo "$HNAM" > /etc/hostname
    
        #update /etc/spotifid.conf
        #default device_name = symphonic-mpd(Pi4)
        systemctl stop spotifyd.service
        cp /etc/spotifyd.conf /etc/spotifyd.conf.bak
        sed -i -e '/^device_name/c device_name = '${HNAM}'' /etc/spotifyd.conf
        systemctl start spotifyd.service
    
        systemctl stop shairport-sync.service
        cp /etc/shairport-sync.conf /etc/shairport-sync.conf.bak
        sed -i -e '/^\tname/c\\tname = "'${HNAM}'"; // This means "Hostname" -- see below. This is the name the service will advertise to iTunes.' /etc/shairport-sync.conf
        systemctl start shairport-sync.service
    
        echo "hostname was changed to ${HNAM}.local . your configuration takes effect after reboot"
      fi
    fi
    

    RPi4のβ版と v0.9.3~版の両方ともうまくいきました。パパリウスさまありがとうございました。
    AirPlayとSpotifyのデバイス選択画面(iPhone)はSMPD2台が現れます。

    ここでAirPlayの場合SMPDのデバイスは一つしか現れない場合が多かった。

  • @miyt さま
    プロではないです:grin: 今回のsedも日常的には使っていないので裏でググって調べました。
    (確か、行毎書き換えるってのあったはずだと思って)
    プラグインについてはお役に立てて何よりです。あとはパパリウスさまの方で標準に取り入れられると複数機で運用している人がちょっと喜びますよね。
    (hostsとspotify・shairpot-syncそれぞれ別の名前で表示したい人は自分でなんとかしてもらいましょうか)

  • @miyt さん @sunatomo さん

    プラグインの動作、おめでとうございます。

    Web UIのプラグイン機能は応用範囲が広くおもしろいギミックだと思います。

    シェルが得意な人ならformは必要最小限の作りにしてシェルの方で全て解決したり、、、反対にWebが得意な人ならJavasciprtで全てお膳立てを整えてシェルは最小限のコマンドを叩くだけにするなど、得意な方法で実装できるのがユニークだなと思います。


    ホスト名/AirPlayデバイス名/Spotifyデバイス名の変更は、標準機能としては対応しない予定です。

    symphonic-mpdは、同一ネットワーク内で複数台を同時稼働させることを想定していないためです。