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

    @sunatomo さん

    root [ ~ ]# journalctl すると

    Sep 16 16:57:39 smpd ympd-plus.sh[347]: mount: /var/lib/mpd/music/NAS1: mount p>
    Sep 16 16:57:39 smpd ympd-plus.sh[348]: cp: cannot create regular file '/var/li>
    Sep 16 16:57:39 smpd ympd-plus.sh[349]: cp: cannot create regular file '/var/li>
    Sep 16 16:57:39 smpd ympd-plus.sh[350]: cp: cannot create regular file '/var/li>
    

    こんなメッセージがNAS9まで続きます。
    うちはNAS1台です。これは問題ありませんか?

  • @Cresson さま
    あ、すいません。
    /usr/bin/ympd-plus.shの方で当該のNASマウントポイントがあった場合はfolder.jpgを複写する設定を追加したのですが、
    これの記述ミスで発生していました。
    あとでパッケージ差替版をリリースします。

    追記 21:20
    webui-plusの更新版アップしました。
    ご指摘の/usr/bin/webui-plus.shのバグ修正しています。

  • @sunatomo さん

    webui-plusの最新版を早速試しています。

    webui-plusのボタン配置について数ヶ月前から考え続けていたのですが、自分なりにアイデアがまとまりつつあります。
    plusへの反映をご一考いただけませんでしょうか。

    ①キューとブラウズの切り替えを「旧UIのトグル動作」に戻す

    ②ジャンル/アーティスト/アルバムアーティスト/コンポーザーの4つは、ブラウズ画面のNAS・RADIO・RAMの下に並べる。
    トップディレクトリの一つのような見せ方をするというアイデアです。

    ③カバーアート表示の切り替えボタンはメニューのWEB UI設定画面に移動させる。
    このとき、有効・無効はcookieに保存できるとベター。
    ※スマホをリモコンのように使う人はリスト表示を使用し、タブレットやPCではカバーアート表示を使用する傾向がありましたので、クライアントごとに設定を保存するのがよさそうです。

  • @パパリウス さま
    拝見いたしました。
    ①・②については恐らく今週末の4連休でなんとかなると思います。

    ③については元々のympdにjquery.cookieが内蔵されているため、
    対応は出来ると思いますがちょっと検討してみますね。

    という訳で、先に①・②対応版をリリース後に③対応とさせてください。

    さて、組み込みWebサーバ周りですが、Websocket(ブラウザ〜RaspberryPi間で電文伝送に使用しているプロトコル)の電文を圧縮してバイナリ伝送出来ないか考えています。
    RaspberryPi→ブラウザの場合、ディレクトリやキューの内容を最大500アイテム送っているため最大で1回につき100kB近いデータになることから、
    圧縮の効果は十分有るのではと考えています。
    今の所、ググった限りでは具体例にヒットしていないので実装には時間がかかるかもしれませんが...

  • @sunatomo さん

    ご検討ありがとうございます。

    取り組む優先度はsunatomoさんのご判断に一任いたします。
    興味のあるテーマを優先して進めてもらって、私の要望(ボタン配置の整理)は後回しにしてもらっても問題ありません。

    どうぞよろしくお願いいたします。

  • @パパリウス さま
    UI についてはユーザーに与える影響が大きいと思いますので優先度は高くなければと思っています。
    こちらの持ちネタは今の所実装の目処がまだ立っていないため、
    まずは UI の修正から入ります。

  • @sunatomo さん

    更新版インストールしました。メッセージ消えました。
    ありがとうございます。

  • UIの修正に関する状況について(9/18時点)

    一昨日 @パパリウス 様にご提示頂いた件、以下の通り進んでおります。

    ①キューとブラウズの切り替えを「旧UIのトグル動作」に戻す
     →手元のテスト版では完了しました。

    ②ジャンル/アーティスト/アルバムアーティスト/コンポーザーの4つは、ブラウズ画面のNAS・RADIO・RAMの下に並べる。
     →こちらも手元のテスト版では対応しました。
     
     今回の措置により、「ジャンル/アーティスト/アルバムアーティスト/コンポーザ」はブラウズのサブ要素という定義になりましたので、
     これらのカテゴリ遷移中にも「パンくずリスト」の最上部に「root」を表示させrootをクリックすれば最上位まで戻れるようにしています。
     また、Searchプラグインの抽出結果もブラウズ画面のサブ要素という扱いにし、「ジャンル」等と同様「パンくずリスト」の最上部「root」を表示させるようにしています。

    ※ただし、①、②についてはイベント処理の体系的な統合が完了していませんので「雨漏り建物に目張り」をした状態です。
     途中でプレビュー的に公開しますが、上記の改良作業を行う予定であることをご了承ください。

    ③カバーアート表示の切り替えボタンはメニューのWEB UI設定画面に移動させる。
     →これからの調査と対応になります。
     まずは「Consume」ボタンのように押したらキープする仕組みを揃えます。
    あと、前にも書きましたが各ブラウザのCookieに記録を残す機能が必要になります。
    (場合によってはwebuiのグリッドでの1画面あたりの最大コンテンツ表示数もCookie管理のほうが良いかも)

    という訳で予告だけしますが「順調に行けば、連休終わりにテスト版リリースできるかも」しれません。

  • @sunatomo さん

    仕事が早いですね!

    パンくずリストの挙動についてご説明ありがとうございます。
    仰る通り、最上部にrootがないと戻ってこれませんから、この対応は必須ですね。ありがとうございます。

    最大コンテンツ表示数もcookie管理がよさそうですね。
    デバイスの画面サイズに合わせて設定する項目は、全てcookie管理でよいと思います。

  • UIの修正に関する状況について(9/19時点)

    ③カバーアート表示の切り替えボタンはメニューのWEB UI設定画面に移動させる。
     →GridViewの設定に関しては各ブラウザのCookieに書き込み・読み込み対応完了。
      GridViewの設定もConsomeと同様にWebUIプラグインから切替するよう対応しました。
      ただし、ブラウズのサブ要素にした「ジャンル」などを表示中に切替した場合は表示が乱れるバグがあるため、これの対応中です。
      (従来は「ブラウズ」表示中以外は切り替えボタンは非表示だったため、問題なし)
      1画面あたりの最大コンテンツ数もCookieには保存出来るようにしましたが、
      従来のwebui.cfgへの値保存とどのように違いを作るか現在検討中です。
      (理想的なのは画面サイズを検知して表示数を自動的に制御出来る方法でしょうが、これは結構大変なので...)

    あと、使用中に以下のバグを見つけたので対応中です。
    「ジャンルなどのリストをmpdから受領して表示する際、文字列内に"/"が
    含まれると一部しか表示されないため、同一要素が複数表示されるように見えることがある」

    バグは散見されるかもしれませんが、予告通りリリース出来るように調整してみます。

  • トグル系のボタンスタイルについて
    @パパリウス さま
    ちょっと相談です。
    表記の通りConsumeやビューの切替に使用するトグル(押すとOn、もう一度押すとOff)のボタンについては、
    現行のスタイルだとちょっと挙動がわかりにくい場合があるかと思います。
    (例えば、押されて色が変わったがプラグイン下部の「OK」ボタンを押す必要があるのかなど。)

    というわけで、こちらにあるとおり、
    スイッチのスタイルを変更してみたいと思います。
    具体的には「Easy Switch Button」で良いかなと(あまりhtml・css書かなくても済みそうですし)。
    なお、このスイッチスタイルを使用した場合のJavaScriptでの状態取得方法についてはこれから要調査です。

    取り急ぎ「WebUI」プラグインのビューモード変更で試用したいと思いますが、本体側で採用する場合は「Consume」もこれに置換したいと思いますが如何でしょうか?

  • @sunatomo さん

    ぜひConsumeボタンにもスイッチ形を採用してください。
    ずっと分かりやすいUIになると思います。
    ご提案ありがとうございます。

  • トグルスイッチのサンプル+WebUIプラグイン

    webui-2020-09-21.png

    list/grid切替のトグルボタン表示まではあっさりと動いたのですが、
    初期表示状態を作るのに時間を要しました...
    webui-plusのリリース時は10-mpdのプラグインも合わせて修正したいと思います。

    あとはlist/grid切替時にブラウズ以外を表示している際の不具合を修正したらリリースします。

  • @sunatomo さん

    List⇄Gridの切り替えスイッチ、すごくいいですね!

    NETWORK設定画面のボタン(DHCP ON/OFF、6600 Port ON/OFF)などもこれに習って、スイッチ形式に置き換えていきたいと思います。

  • 2020-09-22版のwebui-plus配信について

    公式サーバのwebui-plusを更新いたしました。
    @パパリウス さまに反映の依頼を頂いたUIの修正対応版になります。
    *15:45追記: @パパリウス さまご指摘の挙動について差替版をアップしました。

    ①キューとブラウズの切替を「旧UIのトグル動作」に戻す。
    ②ジャンル/アーティスト/アルバムアーティスト/コンポーザーの4項目を
     ブラウズ画面のサブ要素として取り扱う
    ③リスト/グリッド表示の切替を「webui」プラグイン中に入れる

    上記に伴いまして、いくつか注意事項があります。

    • トグルボタンのアイコン表記について
      以前のwebui-plusでは「現在モードを示すアイコンを表示」するよう変更していましたが、
      今回からは旧来の「トグルボタンを押した際に変更されるモードをアイコン表示」するように修正しました。
      (例えば現在ブラウズモードの場合、トグルボタンはキューモードを示す 「○に+の表記」 ハンバーガーメニューに似たもの)
      ↑
      @パパリウス さまご指摘に伴い修正

    • リスト/グリッド表示の切替について
       前の投稿で画面イメージを掲載したとおり、今回からトグルボタンになります。
       また、設定については各ブラウザのCookieに保存(切替後最大365日)する仕様としました。

    宿題は以下のあたり

    • トグルスイッチの件について
      手元では「mpdプラグイン」のConsumeは直しましたが、丁度投稿記載中にパパリウスさまが言及の通り徐々に修正が必要かと思います。

    • グリッドモードでの最大表示数切替について
      パワー不足で対応しきれませんでした(Cookieに当該設定の保存までは対応しました)。
      今後は設定を各ブラウザ・デバイス毎に設定可能にします。
      (/etc/webui.cfgの設定数は既定値扱いにさせていただく予定です。)
      ↑
      併せてCookie値については「ブラウザでwebuiを呼び出しした時点で再更新される」ように調整しますね。

    • ジャンル他での絞り込みについて
      以前 @DYNA81 さまからご提案頂いた事項になります。
      やり方の草案については前にレスを書いたとおりです。
      あとはリスト内からユーザがアーティストの絞込みを行った時点で「ジャンル+アーティスト」で絞り込み検索を行った結果を表示出来るような仕組が必要になりますね。

    最後に@パパリウス さま、業務連絡です。
    当方で修正した10-mpdのform.htmlをこの投稿の添付ファイルで貼っておきます。
    この方法でトグル表示+トグル操作による値の反映も出来ますのでご利用くださいませ。
    (トグルのCSSはmpd.cssに追加済みですので、webui-plusと一緒に切替すれば反映できます)form.html.tar.gz

    後ほど修正済みソースコードはお返しします。

  • @sunatomo さん

    plus版のリリース、どうもありがとうございます。
    さっそくwebui-plusをインストールしてみました。
    想像した通りの使い勝手で、とても手に馴染みます。

    カバーアートの表示がクライアント毎に保存されていることも確認できました。
    スマホはリスト表示、タブレットはグリッド表示でそれぞれ設定保存して使ってみました。
    端末を持ち替えるときの煩わしさが一切無くなりました。
    複数の端末を使っている人には嬉しい改善になったと思います。


    ちょっと細かい部分ですが、キュー/ブラウズ切り替えボタンについて修正いただければ幸いです。

    ・キュー画面で表示されるボタンはglyphicon-plus-signアイコンです。(ブラウズ画面に切り替えてキューに追加するという意味)

    ・ブラウズ画面で表示するのがglyphicon-listアイコンです。(キュー画面に切り替えてキューのリストを表示するという意味)

    ・キュー画面からブラウズ画面に切り替わるとき、パンくずリストを避けるように再生・曲送り・曲戻しの3つのボタンが上にスライドします。(パンくずリストと同じ幅・同じスピードで一緒に上にスライド)

    ・ブラウズ画面からキュー画面に切り替わる時はパンくずリストと一緒に下にスライドします。(パンくずリストと同じ幅・同じスピードで一緒に下にスライド)

    webui-classicの動きを見ていただければと思います。

  • @パパリウス さま
    確認しました。実装に誤りがあったので修正いたします。
    (修正途中でプレビュー版提示すればよかったですね。)


    グリッドモードでの最大表示数について
    デバイス毎に最大表示数を変更するのは次の段階で対応します。
    理由は以下のとおりです(これらを解決しないとならないため)。

    • 現状の仕組ではRaspberryPi側にデバイス毎の最大表示数を管理する手段がない。
       (電文の拡張が必要)
    • 「最大表示数をプラグインで変更後、即座に取得数が変更されない」バグがある。
      (今日のリリースし直しには間に合いませんが、なるべく早くこれは修正します)
    • 今回のリリース版よりグリッド表示を初期起動時から表示出来るようにしましたが、
      最初期表示の場合カバーアートが表示されないバグがあることが判明したため。

    今更と言われるかもしれませんが、普段は使っていないipad-mini2(連れのゲーム専用機?)でwebuiを表示してみました。
    正直、グリッド表示ではかなり悲しいレスポンスですね...
    普段の動作確認ではVSCodeの入っているPCとスマホ(OnePlus6)をメインに動作を見ているのですが、
    グリッド表示でレスポンスが極端に低下した感触がなかっただけに残念な結果になりました。
    恐らく古過ぎでCPUパワーが足りないかもしれませんが、
    グリッド表示でも動作に問題ないくらいにチューニングができないかは今後も探ってみます。

  • @sunatomo さん

    精力的な開発、いつもありがとうございます。

    以前の要望をご検討頂けただけでも感謝です。
    お忙しいと思いますので、「ジャンル+アーティスト」の絞り込みは、ご無理のない範囲で扱って頂ければと思います。

  • 2020-09-24版のwebui-plus配信について

    思ったより早めに対応出来ましたので更新版を配信します。
    変更点は以下の通り。

    • webuiプラグインでのバグの修正
      申し訳ありません。プラグインでの/etc/webui.cfgへの書換が出来なくなくなっていました。
      また、本バージョンからは次項でも説明しますが「1ページ内でのグリッドモードでの最大表示数」を設定した際に即座に画面を新しい設定値で書換するようにしました。

    • Cookieへの設定保存対応
      デバイス単位で制御する必要のあるパラメータをブラウザのCookieへ保存するようようにしました。
      (最大保存日数は365日にしています。もっと長くする可能性もあり。)
      具体的には「list/grid」モードの設定フラグ、1ページ内でのグリッドモードでの最大表示数が保存されます。
      (従来/etc/webui.cfgに保存されていた「1ページ内でのグリッドモードでの最大表示数」の設定MAX_ELEMENTS_PER_PAGEは本バージョンからCookieに同値がない場合の初期値として動作し、
      webuiプラグインで今後は更新しても/etcの設定ファイルの値は変わりません。
      今後は各webブラウザのCookieに上記値が保存されているため、デバイス毎に異なる値を設定可能になります。)


    個人的な興味の探索として、ympdで採用している組み込みWebサーバであるmongooseについて以下の点を試してみようと思います。

    • テキストコンテンツのgzip圧縮完全対応
      対応パッチを当てて高速化したように見えているのですが、developper modeでコンテンツのヘッダを見てもgzip圧縮されていると書いていないため、完全対応していない可能性があります。
      恐らくympdのように実行ファイル内にコンテンツをバイナリ格納している場合はgzip圧縮済みファイルを見つけられていないのではと。

    • websocketパケットの圧縮について
      前にも書きましたが、RaspberryPi → Webブラウザ間のパケットのみ圧縮したいと思います。
      CならびにJavaScript双方で動くバイナリ圧縮処理のライブラリを探している最中です。

    • https(SSL)対応
      あまり意味ないかもしれませんが、一応やってみようかと思います。
      (個人的な自己満足レベルかもしれません)

    • http/2対応
      これについては正直ググっても情報が全く出てきませんが、ネタとしては押さえておきたいかと(恐らくmongooseでは対応していないと思われる)。


    今のところ頂いて宿題となっている機能拡張は以下のとおりでしょうか。

    • アーティストのカバーアート取得
      恐らくspotifyのAPI対応が必要そう

    • last.fmでのscrobble対応
      spotifyのAPIと同じく、トークンでの事前アクセス許可部分の開発が必要

    • カバーアートのうち、アーティスト名等特殊な対応が必要な場合、
      事前にこれを指定しておく方法
      やり方含めて要検討ですね。

    • ジャンル等のリストから楽曲を指定する際に途中で「アーティスト」を表示して絞り込みができるようにする。
      ネタ的にはほぼやり方が固まってきているので何とか出来るかもしれません。

  • @sunatomo さん

    plus版のリリースありがとうございます!
    要望事項は全て反映されておりました。たいへんお疲れ様でした。
    何日か動作を確認してからv1.0.8に正式に取り込ませていただこうと思います。
    早ければ今週末にでもv1.0.8をリリースしたいと思います。