1. ホーム
  2. sunatomo's CAFE
  3. webui-plus開発/サポート（webui-plus development/support)

  • webui-plus開発/サポート（webui-plus development/support)

    @sunatomo さん

    ご返事ありがとうございます。
    普段使わないFirefoxで試してみたらスクロールバーありました！
    SMPDはしばらくFirefox使ってみます。

    •

  • @sunatomo
    I am also missing the scroll bar but in both Firefox and Chrome and I am missing it in both single and twin views. I haven't used the WebUI for the past couple of months so I don't know when I lost the scroll bars.
    Is there a setting that I need to adjust?

    RaspPi4b x 2 / IanCanada Stack powered by LiFEPo4 & Ultracaps /
    Bisek Output Transformers

    •

  • @Castle

    Is there a setting that I need to adjust?

    No.
    I'd changed CSS settings for unification of screen specifications with Chrome (webkit complient) and Firefox,
    but scrollbar has been disappeard.

    I've maiking fix with this issue, but Apple's latest environment can't show the scrollbar.
    In My development policy, I has been provide the same appearance in all environments, but if you think it is better to restore the scroll bar display in most environments, please give me a suggestion.

    一応日本語訳（と補足説明）を載せておきます。
    Firefox と他の環境間での外観統一化のための CSS 調整した際にスクロールバーを非表示にしていました。
    ご指摘を受けて CSS の再調整と調査を行いましたが、最新の IOS IpadOS 製品では「スクロールバーを表示出来ないこと」が判明しています。
    （現状調べた限りでは追加ライブラリ実装が必要。特定製品向けサポートのためにライブラリ追加は正直言うと気が引けています。）
    消極的解決策として現状の「スクロールバーなし」を考えていましたが、
    復活させたいというご意見が高いようでしたら、修正版をリリースします。

    •

  • 2024-02-12版の webui-plus アップデートについて

    リリースノートはArch Linux AoEからご覧ください。

    ちなみに例のスレッド分離版と通常版の双方をsmpdでコンパイルして動作させた結果としては、
    どちらもCPU使用量はほぼ0%（psでの値）
    定常状態のカウンター値のミリ秒単位でのゆらぎはあまり相違がないという結果になっています。
    （AoE側の環境がPi3、smpdがPi4ということが影響しているのか？）

    •

  • @sunatomo さん

    お久しぶりです。
    2024-02-12版の webui-plusアップデートありがとうございます。
    以前にお話ししましたツインビューのスクロールバーですが、Chromeでも表示されるようになりました。快適です(^^♪

    •

  • @hiroget9 さま
    お久しぶりです。

    スクロールバーの件ですが、実は Android 版 Chrome だけTitle などが記載される部分の表示が左にズレるというスタイルの問題について気づいたので修正します。

    あとは、気まぐれですが、現在（元からですが）の丸みを帯びたスクロールバーからFirefoxと外観を統一した「細身の四角いタイプ」に変更する可能性はあります。
    ↑
    「今のままが見やすいので改変しないで」という要望が多ければそこは弄りません。

    •

  • 2024-02-25版の webui-plus アップデートについて
    リリースノートは Arch Linux AoEからご覧ください。

    •

  • @sunatomo さん
    raspi4(front)-raspi4(back)の smpd aoe(2)で聴いています。
    長いこと使ってなかったノートパソコンにx86_64 Arch LinuxイメージをインストールしてAoEのフロント化に挑戦中ですが、プレイヤーにraspi4のｓｍｐｄで馴染んだympdを使えたらと考えています。git ympdからのコンパイルも中々の状態で苦戦しています。
    そこで誠に身勝手なお願いですが、sunatomoさんのサポート対象にx86_64 Arch Linuxも加えて頂けたら有難いです。
    ご検討のほど宜しくお願い致します。

    •

  • @おやじん さん
    実は昨日 @パパリウス さんともちょうど ympd (Webui) のソースコード提供について話していた最中でした。
    当方で動作環境が構築できない状況では正式サポートはできませんが、ソースコードの提供は可能ですので、各自でコンパイルして実装いただくことは可能です。
    取り急ぎ、私のPC上での環境をアーカイブ化しますので少々お待ちください。

    ちなみに ympd のビルドには通常のC開発環境プラス cmake が必要になります。
    （CSS と Javascirpt を改変する場合は、node.js が必要です）

    こちらのご覧の他の環境で Webui （ympd）を使用したい方へもソースコードは提供いたしますのでご連絡くださいませ。

    •

  • @sunatomoさん
    有難うございます。ympd.zip ダウンロードいたしました。苦労した方ができた時の喜びが大きいでしょうからじっくり取り組んでみます。途中でいろいろお尋ねすこともあると思いますが、その折は御指導方よろしくお願いします。又、インストールまで漕ぎ着け稼働しました時は改めてご報告いたします。先ずはお礼まで。

    •

  • ソースコードからビルドする際の手順について

    とりあえずは @おやじん さんしかご用命はありませんが、まとめて記録を残しておきます。

    1. CMakeLists.txt の編集
      cmake のコンパイルのための設定をする必要があります。
    set(CMAKE_C_FLAGS "-std=gnu99 -Wall -mcpu=cortex-a72 -march=armv8-a+crc -mtune=cortex-a72 -fuse-ld=gold -fno-stack-protector -fno-stack-clash-protection -ffunction-sections -fdata-sections -fno-math-errno -fomit-frame-pointer")

    85行目にコンパイルのオプションが記載されています。

    -mcpu=cortex-a72
-march=armv8-a+crc
-mtune=cortex-a72

    が、RaspberryPi4のための専用チューニングオプションとなりますので、まずはここの記述をまるっと消してみてください。

    2)コンパイル方法
    make.sh というシェルスクリプトで対応します。

    ./make.sh release

    を実行してみて、正常にコンパイルが通るか確認してみてください。
    コンパイルが通って実行ファイルが生成されると、build/ympd.release.out というファイルが生成されます。
    これが、 ympd の実行ファイルとなります。

    なお、この make.sh には以下の引数があります。
    init
    Bootstrap や jquery などの共通ライブラリをコンパイラを通して一つのライブラリ（Javascript・CSS）ファイルにまとめる。
    （通常は使用しなくて良いです。）

    minify
    ympd向けのライブラリ（Javascript・CSS）をコンパイラを通してサイズを縮小化する。
    ＋ HTMLファイル他を tar.gzで 圧縮してファイルサイズを縮小させる。
    （Javascript・CSSをご自分で開発する場合のみ、実行します。）

    debug
    デバッグ用にビルドを作成する。
    これで生成した ympd は /var/lib/mpd/music 配下に ympd の HTML, CSS, Javascript ファイルを置くことでブラウザによるデバッグが容易となる。
    （注意！これを行った場合、minify でコンパイルした結果が当然消去されますので、とりあえずビルドする場合は実行しないこと。）

    release
    通常リリース用のビルドを作成する。

    • , 最後に編集した時間sunatomo

  • @sunatyomoさん　おはようございます。
    ご教示ありがとうございます。CMakelists.txtにarchを使いましてクロスコンパイル用ではと思いまして76行と８５行をコメントアウトしてcmakeしたところbuildにMakefileができ、makeまでたどり着きまして、make installでympd.1のfailなしのエラーが出てダミーfailを当て取り合えずインストールまでしたところでした。ympdはwebuiエラーでまだ使えない状況です。再度cmakeから挑戦です。

    •

  • gcc での CPU アーキテクチャー毎でのコンパイル時最適化オプションについて

    自分でビルドする際、ある程度はチューニングしたいと思うところではありますが、
    各アーキテクチャー毎の設定を探すのが面倒くさい場合のための資料として記載します。

    1. コンパイラに任せてしまう場合
      -march=native と記載すれば、自動的に gcc が現在のCPUに合わせて設定してくれる模様です。
      ちなみにこちらには上記の設定を行った場合は実際にどのように解析されるのかを視覚的に確認可能なシェルスクリプトも公開されています。
      ArchLinuxAoE 開発機の RaspberryPi3で実行した場合、-march=armv8-a+crc だけでした。

    2. RaspberryPi の場合の実例は？
      こちら に資料がありました。
      全部指定すると、浮動小数点計算やNEON (SIMD拡張命令)まで最適化できる模様ですが、
      arch64環境では-mfloat-abi=hard -mfpu=neon-fp-armv8 -mneon-for-64bits
      の3つは有効にならず、
      unrecognized command-line option と警告されていしまいました。
      （なお、man gcc をみてもこれらのオプションは arm 向けと書いてありました）

    •

  • @sunatomo さん
    　まずはインストールまでできました。ympdデイレクトリでbuiildを削除して、ご教示頂いた./make.sh release と./release_install.shでインストールできました。早速systemctl start ympdで起動を試みましたが「Error occured when reading webui config file: No such file or directory」が表示されスタートできません。webui.cfg.org をコピーしてあげればと思いますが、どこに置けばよろしいのでしょうか。見当違いかもしれませんがよろしくお願いします。

    •

  • @sunatomoさん
    /etcにwebui.cgfを置いたところ素敵なお姉さんが表示され、やっと音楽を聴くところまでたどり着きました。貴重な情報を提供いただき本当にありがとうございました。
    気になることがありますので教えていただきたいのですが。マシンをリブートしたところsshの画面でympdコマンドを打つとRunning as unit: run-r0b87e48d71c54e9283fb18ad21d49fd4.service; invocation ID: 6108b3342d548ea9abe1470daeec51
    connection is nothing. stop ympd.　が延々表示されympdが起動しないのですが。

    • , 最後に編集した時間おやじん

  • @おやじん さん
    実際のログのすべてを見ていないので推察になりますが、
    webui の ympd は smpd 向けに開発された mpd と unix socket (/run/mpd/socket) で接続するように設定されています。
    smpd や ArchLinuxAoE で使用している /lib/systemd/system/ympd.service をこちらに掲載します。

    [Unit]
Description=ympd server daemon
Requires=network.target local-fs.target
After=mpd.service

[Service]
Type=simple
ExecStartPre=/usr/bin/ympd-plus.sh
ExecStart=/usr/bin/ympd -h /run/mpd/socket --webport 80 -i 200 --documentroot /var/lib/mpd/music
#ExecStart=/usr/bin/ympd -h /run/mpd/socket --webport "ssl://443:/var/lib/mpd/music/ssl.pem" -i 200 --documentroot /var/lib/mpd/music

User=root
#CPUSchedulingPolicy=other
#CPUAffinity=3

[Install]
WantedBy=multi-user.target

    ExecStart の -h オプションを消してみてください。
    この場合、デフォルトの 127.0.0.1 6600 ポートで接続するはずです。
    通常コマンドラインで動作させる場合は

    /usr/bin/ympd --webport 80 -i 200 --documentroot /var/lib/mpd/music

    になりますね。

    また、smpd や ArchLinuxAoE の場合は ympd.socket で接続ポートの制御を行います。
    （http 80ポートのアクセスがあった場合は自動的に、ympd.serviceを起動する）

    [Socket]
ListenStream=80
#ListenStream=443
KeepAlive=true
PassCredentials=true

[Install]
WantedBy=sockets.target
    • , 最後に編集した時間sunatomo

  • @sunatomo さん
    　こんばんは。最初に帰ってエラーに注意しながらやり直しましたところ、リブートしても正常に立ち上がるようになりました。次はwebui-plusの設定です。しばらくは音楽に浸って心を静めてから始めたいと思います。用を得ない問い合わせにご教示いただき本当にありがとうございました。

    •

  • @おやじん さん
    無事、解決したようで一安心です。
    あとはプラグイン類の複写になりますね、

    なお、@おやじん さん以外にも webui をコンパイルして使用したいニーズがありましたらご連絡ください。

    •

  • smpd 環境下以外で dashboard プラグインの表を動作させるには

    提供したソースコードを元にコンパイル環境下での ympd で dashfboard プラグインでの表を表示させるには /usr/local/bin/ に util-dashboard.sh を配置し、これの出力例をお使いの環境下で正しく返すように修正する必要があります。

    #!/bin/bash
# Copyright © 2020 symphonic-mpd Research and Development Club

output=/var/lib/mpd/music/RAM/.dashboard.json

# Under-Voltage / Over-Temperature
throttled=`cat /sys/devices/platform/soc/soc\:firmware/get_throttled`
throttled=${throttled:0:1}
case "$throttled" in
    "1" | "3" | "5" | "7" )
      alert="⚡ Under Voltage"
      ;;
esac
case "$throttled" in
    "2" | "3" | "6" | "7" )
      if [ ! "$alert" = "" ];then alert="${alert}<br>";fi
      alert="${alert}&#x1f321; Over Temperature"
      ;;
esac

# Disc Usage
used_root=` df -h | grep "/dev/root" | awk '{ print $5 }' | sed -e '$s/.$//' `
if [ $used_root -gt 90 ];then
  if [ ! "$alert" = "" ];then alert="${alert}<br>";fi
  alert="${alert}&#x26a0; SD Card Usage ${used_root}%"
fi

# Process cut-down
#process_cut=`cat /etc/environment | sed -n "s/^[ \t]*PROCESS_CUT[ \t]*[=]*[ \t]*//p" | head -n1 | sed -e "s/\"//g"`
#if [ ! "$process_cut" = "default" ];then
#  if [ ! "$alert" = "" ];then alert="${alert}<br>";fi
#  alert="${alert}&#x2699; Process cut-down mode : ${process_cut}"
#fi

echo "{" > $output

# Current Environment (Arch Linux or smpd)
if [ "`uname -a | awk '{print $2}'`" = "archlinux64" ];then
  CURRENT_ENV="archlinux64"
else
  CURRENT_ENV=""
fi
echo "\"Env\":\"${CURRENT_ENV}\"," >> $output

# IP Address
echo \"IP Address\":\"$(ip -f inet -o addr show eth0|awk '{print $4}')${uv}\", >> $output

# Model
RPI_MODEL=`echo $(cat /proc/cpuinfo|grep Model|cut -d':' -f2)`
echo \"Model\":\"$RPI_MODEL\", >> $output

# Device
if [ "`systemctl is-active sound.target`" = "active" ];then
    echo \"Device\":\"$(cat /proc/asound/card0/pcm0p/sub0/info|grep "id: "|cut -d':' -f2)\", >> $output
#    aplay -l |grep "device 0:"|sed -e 's/^.*device 0: /\"Device\":\"/' -e 's/ \[.*\].*$/\",/' >> $output
    MODE=""
    if [ `journalctl -u pipe|grep "MASTER MODE"|wc -l` -gt 0 ];then MODE="DAC Master";fi
    if [ `journalctl -u pipe|grep "SLAVE MODE" |wc -l` -gt 0 ];then MODE="DAC Slave";fi
    if [ ! "${MODE}" = "" ];then
        echo \"Codec Clock\":\"$MODE\", >> $output
    fi
    dmesg|grep clk-bcm2835:pcm|tail -n 1|sed -e 's/^.*clk-bcm2835:pcm/\"BCLK\":\"/g' -e 's/$/\",/g' >> $output

else
    echo \"Device\":\"no soundcards found...\", >> $output
fi

# audio output format
if [ "`cat /proc/asound/card0/pcm0p/sub0/hw_params`" != "no setup" ]; then
    PARAMS=/proc/asound/card0/pcm0p/sub0/hw_params
    FORMAT="`cat $PARAMS|grep "^format:"|cut -d' ' -f2`"
    FORMAT="$FORMAT `cat $PARAMS|grep "^rate:"|cut -d' ' -f2`"
    echo \"Format\":\"$FORMAT\", >> $output
fi

# Gravity
#GRAVITY=`cat /proc/xenomai/clock/coreclk |head -n 1`
#echo \"Timer Calibration\":\"${GRAVITY#gravity: }\", >> $output

# arm_freq / core_freq
#arm_freq=`cat /sys/devices/platform/soc/soc\:firmware/arm_freq`
arm_freq=`/opt/vc/bin/vcgencmd measure_clock arm`
#core_freq=`cat /sys/devices/platform/soc/soc\:firmware/core_freq`
core_freq=`/opt/vc/bin/vcgencmd measure_clock core`
#echo -e "\"arm_freq\":${arm_freq}000," >> $output
#echo -e "\"core_freq\":${core_freq}000," >> $output
echo -e "\"arm_freq\":${arm_freq#frequency(48)=}," >> $output
echo -e "\"core_freq\":${core_freq#frequency(1)=}," >> $output

# Core Volts
VCORE=`/opt/vc/bin/vcgencmd measure_volts`
VCORE=${VCORE#volt=}
OVOLT=`/opt/vc/bin/vcgencmd get_config over_voltage`
if [ `expr ${VCORE%V} "<" 0.8525` -eq 1 ];then
  if [ ! "$alert" = "" ];then alert="${alert}<br>";fi
  alert="${alert}&#x1f50b; Core voltage low, please set over_voltage."
fi
echo \"Core Voltage\":\"${VCORE} \(${OVOLT}\)\", >> $output

# Temperature
MTEMP=`cat /sys/class/thermal/thermal_zone0/temp`
MTEMP=`echo "scale=1;$MTEMP/1000" | bc`
echo  "\"Temperature\":\"${MTEMP}'C\"," >> $output

# Alert
echo \"Alert\":\"${alert}\" >> $output

echo "}" >> $output

    RaspberryPi 系列以外ではおそらくIPアドレスや温度表示くらいしか対応できないはずですが、
    こちらのように /var/lib/mpd/music/RAM/.dashboard.json を返すようにすれば正常動作するはずです。

    • , 最後に編集した時間sunatomo

  • ympd-plus.sh について

    ympd.service を掲載した投稿を見て気づいた方もおられるかもしれませんが、
    [Service]項目の
    ExecStartPre=/usr/bin/ympd-plus.sh
    と記載がある通り、systemd で ympdを動作させる前に ympd-plus.sh を実行しています。
    当該シェルスクリプトでは grid 表示向けのアイコンファイルの複写と、webui.cfg を/etc/ に複写する動作になっています。

    #!/bin/bash
# Copyright © 2020 symphonic-mpd Research and Development Club
#ympd-plus.sh
M_HOME=/var/lib/mpd/music

declare -a aver=("" "1" "2" "3" "4" "5" "6" "7" "8" "9")
for e in ${aver[@]}; do

  # copy NAS.jpg to NAS directory
  if [ `mount |grep $M_HOME/NAS${e} |grep -c cifs` -gt 0 ]; then
    if [ ! -e $M_HOME/NAS${e}/folder.jpg ]; then
      mount $M_HOME/NAS${e} -o remount,rw
      cp $M_HOME/NAS.jpg $M_HOME/NAS${e}/folder.jpg
      cp $M_HOME/NAS.jpg $M_HOME/NAS${e}/Folder.jpg
      cp $M_HOME/NAS.jpg $M_HOME/NAS${e}/cover.jpg
      sync
      mount $M_HOME/NAS${e} -o remount,ro
    fi
  fi
done

# copy RADIO.jpg to RADIO directory
if [ ! -e $M_HOME/RADIO/folder.jpg ]; then
  cp $M_HOME/RADIO.jpg $M_HOME/RADIO/folder.jpg
  ln -s $M_HOME/RADIO/folder.jpg $M_HOME/RADIO/Folder.jpg
  ln -s $M_HOME/RADIO/folder.jpg $M_HOME/RADIO/cover.jpg
fi

#copy RAM.jpg to RAM directory
if [ ! -e $M_HOME/RAM/folder.jpg ]; then
  cp $M_HOME/RAM.jpg $M_HOME/RAM/folder.jpg
  ln -s $M_HOME/RAM/folder.jpg $M_HOME/RAM/Folder.jpg
  ln -s $M_HOME/RAM/folder.jpg $M_HOME/RAM/cover.jpg
fi

#copy webui.cfg to /etc
if [ ! -e /etc/webui.cfg ]; then
  if [ -e /opt/plugins/04-webui/webui.cfg ]; then
    mv /opt/plugins/04-webui/webui.cfg /etc
  else
    cp /etc/webui.cfg.org /etc/webui.cfg
  fi
fi

#add the assets directory
if [ ! -d /var/lib/mpd/music/assets ]; then
  mkdir /var/lib/mpd/music/assets
fi

#make symbolic link to added plugin
PLGIN_DE=/opt/plugins/detach
PLGIN_AT=/opt/plugins/attach
declare -a array=("04-webui" "05-stats" "06-no_image" "15-lastfm" "82-aoe")

for i in "${array[@]}"
do
  if [ ! -e ${PLGIN_AT}/${i} ] && [ ! -e ${PLGIN_DE}/${i} ]; then
    cd ${PLGIN_DE}
    ln -s ../${i} ${i}
  fi
done

#add Scrobble config to /etc/webui.cfg
if [ ! "$(cat /etc/webui.cfg | grep "Scrobble" )" ]; then
  echo -e "\n#last.fm Scrobble flg\nScrobble=0\n\n#last.fm api session-key\nlstSession=\n" >> /etc/webui.cfg
fi

#add inner cover config to /etc/webui.cfg
if [ ! "$(cat /etc/webui.cfg | grep "innerFlg" )" ]; then
  echo -e "\n#inner cover use flg\ninnerFlg=1\n" >> /etc/webui.cfg
fi
    • , 最後に編集した時間sunatomo
投稿するのにログインして下さい