Update

install.sh

@@ -4,7 +4,7 @@ alias=r1
 
 . /srv/http/bash/settings/addons.sh
 
-# 20240517
+# 20240519
 ! grep -q cmdsh /srv/http/bash/websocket-server.py && restartws=1
 
 file=/srv/http/data/mpdconf/conf/snapserver.conf

srv/http/assets/css/hovercursor.css

@@ -33,7 +33,7 @@
 	background: var( --cga );
 }
 .menu a:hover,
-.submenu:hover,
+.submenu:not( .disabled ):hover,
 #bar-bottom i:hover,
 #button-settings:hover,
 #divlyricsartist i:hover,
@@ -61,7 +61,7 @@
 	background-color: var( --cma ) !important;
 }
 .menu a:active:hover,
-.submenu:active:hover,
+.submenu:not( .disabled ):active:hover,
 #button-lib-search:active:hover,
 #button-settings:active:hover,
 #lib-list li:active:hover,
@@ -120,7 +120,7 @@ li:not( .licover ),
 .mode,
 .rs-container,
 .savedlist,
-.submenu,
+.submenu:not( .disabled ),
 #album:not( .albumgray ),
 #artist,
 #bar-bottom,

srv/http/assets/css/main.css

@@ -294,6 +294,9 @@ i.map.disabled, .map.disabled i {
 	right: 20px;
 	font-size: 30px;
 }
+.submenu.disabled {
+	pointer-events: auto;
+}
 /* ---------------------- bar-bottom ----------------------*/
 #bar-bottom {
 	font-size: 28px;

srv/http/assets/js/function.js

@@ -170,21 +170,6 @@ function changeIP() { // for android app
 		}
 	} );
 }
-function colorIcon( el ) {
-	$( el ).html( '<canvas></canvas>' );
-	var canvas      = $( el ).find( 'canvas' )[ 0 ];
-	var ctx         = canvas.getContext( '2d' );
-	var cw          = canvas.width / 2;
-	var ch          = canvas.height / 2;
-	for( i = 0; i < 360; i += 0.25 ) {
-		var rad         = i * Math.PI / 180;
-		ctx.strokeStyle = 'hsl('+ i +', 100%, 50%)';
-		ctx.beginPath();
-		ctx.moveTo( cw, ch );
-		ctx.lineTo( cw + cw * Math.cos( rad ), ch + ch * Math.sin( rad ) );
-		ctx.stroke();
-	}
-}
 function colorSet() {
 	V.color = false;
 	$( 'body' ).css( 'overflow', 'hidden' );

srv/http/assets/js/main.js

@@ -49,17 +49,15 @@ var picaOption  = { // pica.js
 //	, quality          : 3    // 0...3 Default = 3 (Lanczos win=3)
 //	, alpha            : true // Default = false (black crop background)
 };
-// color icon
-colorIcon( '.submenu.i-color' );
 var icon_player = {
   airplay    : 'AirPlay'
 , bluetooth  : 'Bluetooth'
 , snapcast   : 'Snapcast'
 , spotify    : 'Spotify'
 , upnp       : 'UPnP'
 }
-var vumeter = '<img class="imgicon" src="'+ V.covervu +'"> ';
-var chkdisplay = {
+var vumeter     = '<img class="imgicon" src="'+ V.covervu +'"> ';
+var chkdisplay  = {
 	  library       : {
 		  album          : ico( 'album' ) +'<gr>Album</gr>'
 			, nas        : ico( 'networks' ) +'<gr>NAS</gr>'
@@ -157,7 +155,7 @@ $( 'body' ).on( 'click', function( e ) {
 	if ( I.active || V.colorpicker ) return
 
 	var $target = $( e.target );
-	if ( ! $target.is( '.bkcoverart, .bkradio, .savedlist' ) ) menuHide();
+	if ( ! $target.is( '.bkcoverart, .bkradio, .disabled, .savedlist' ) ) menuHide();
 	if ( ! V.local && $( '.pl-remove' ).length && ! $target.hasClass( 'pl-remove' ) ) $( '.pl-remove' ).remove();
 	if ( V.guide ) guideHide();
 } );
@@ -177,6 +175,20 @@ $( '#coverart' ).on( 'load', function() {
 	}
 	loaderHide();
 } ).on( 'error', coverartDefault );
+// color icon
+$( '#displaycolor' ).html( '<canvas></canvas>' );
+var canvas = $( '#displaycolor canvas' )[ 0 ];
+var ctx    = canvas.getContext( '2d' );
+var cw     = canvas.width / 2;
+var ch     = canvas.height / 2;
+for( i = 0; i < 360; i += 0.25 ) {
+	var rad         = i * Math.PI / 180;
+	ctx.strokeStyle = 'hsl('+ i +', 100%, 50%)';
+	ctx.beginPath();
+	ctx.moveTo( cw, ch );
+	ctx.lineTo( cw + cw * Math.cos( rad ), ch + ch * Math.sin( rad ) );
+	ctx.stroke();
+}
 
 // COMMON /////////////////////////////////////////////////////////////////////////////////////
 $( '#logo, #refresh' ).on( 'click', function() {
@@ -201,19 +213,21 @@ $( '#button-settings' ).on( 'click', function( e ) {
 		$( '#settings' ).addClass( 'hide' );
 	}
 } )
-$( '.settings' ).on( 'click', function() {
+$( '#settings' ).on( 'click', '.settings', function() {
 	location.href = 'settings.php?p='+ this.id;
-} );
-$( '#settings' ).on( 'click', '.submenu', function() {
+} ).on( 'click', '.submenu', function() {
+	var $this = $( this );
+	if ( $this.hasClass( 'disabled' ) ) return
+
 	switch ( this.id ) {
 		case 'dsp':
-			$( this ).hasClass( 'i-camilladsp' ) ? location.href = 'settings.php?p=camilla' : equalizer();
+			$this.hasClass( 'i-camilladsp' ) ? location.href = 'settings.php?p=camilla' : equalizer();
 			break;
 		case 'logout':
 			$.post( 'cmd.php', { cmd: 'logout' }, () => location.reload() );
 			break;
 		case 'snapclient':
-			var active = $( this ).hasClass( 'on' );
+			var active = $this.hasClass( 'on' );
 			if ( active ) {
 				$( '#stop' ).trigger( 'click' );
 			} else {
@@ -406,7 +420,11 @@ $( 'body' ).on( 'click', '#colorok', function() {
 		  icon       : 'color'
 		, title      : 'Colors'
 		, message    : 'Reset colors to default?'
-		, beforeshow : () => colorIcon( '#infoIcon' )
+		, beforeshow : () => {
+			$( '#infoIcon' ).html( '<canvas></canvas>' );
+			var ctx = $( '#infoIcon canvas' )[ 0 ].getContext( '2d' );
+			ctx.drawImage( $( '#displaycolor canvas' )[ 0 ], 0, 0 );
+		}
 		, ok         : () => {
 			bash( [ 'color', 'reset', 'CMD HSL' ] );
 			loader();
@@ -449,9 +467,6 @@ $( '#playlist, #button-playlist' ).on( 'click', function() {
 $( '#bar-top' ).on( 'click', function( e ) {
 	if ( e.target.id !== 'button-settings' ) $( '#settings' ).addClass( 'hide ' );
 } );
-$( '#settings' ).on( 'click', function() {
-	$( this ).addClass( 'hide' );
-} );
 // PLAYBACK /////////////////////////////////////////////////////////////////////////////////////
 $( '#info' ).on( 'click', function() {
 	if ( localhost ) setInfoScroll();

srv/http/assets/js/system.js

@@ -150,17 +150,29 @@ $( '.close' ).off( 'click' ).on( 'click', function() { // off close in settings.
 $( '.power' ).on( 'click', infoPower );
 $( '.img' ).on( 'click', function() {
 	var name             = $( this ).data( 'name' );
-	var gnd              = '<br><c>GND:(any black pin)</c>';
-	var vcc1             = htmlC( 'ora', 'VCC:1' );
+	var gnd              = '<br><c>GND:(any black pin)</c> &emsp; ';
+	var vcc1             = htmlC( 'ora', 'VCC', 1 );
 	var i2c              = '<br><wh>I²C:</wh>';
-	var scasdl           = htmlC( 'bll', 'SDA:3' ) +' '+ htmlC( 'bll', 'SCL:5' );
+	var scasdl           = htmlC( [ [ 'bll', 'SDA', 3 ], [ 'bll', 'SCL', 5 ] ] );
 	var txtlcdchar       = gnd
-						 + i2c + vcc1 + scasdl + htmlC( 'red', '5V:4' )
-						 + '<br><wh>GPIO:</wh> '+ htmlC( 'red', 'VCC:4' ) + htmlC( 'grn', [ 'RS:15', 'RW:18', 'E:16', 'D4-7:21-24' ] );
+						 + i2c + vcc1 + htmlC( 'red', '5V', 4 ) + scasdl
+						 + '<br><wh>GPIO:</wh> '+ htmlC( [ 
+								  [ 'red', 'VCC',   4 ]
+								, [ 'grn', 'RS',   15 ]
+								, [ 'grn', 'RW',   18 ]
+								, [ 'grn', 'E',    16 ]
+								, [ 'grn', 'D4-7', '21-24' ]
+							] );
 	var txtmpdoled       = gnd + vcc1
 						 + i2c + scasdl
-						 + '<br><wh>SPI:</wh>'+ htmlC( 'grn', [ 'CLK:23', 'MOS:19', 'RES:22', 'DC:18', 'CS:24' ] );
-	var txtrotaryencoder = gnd +' &emsp; <c>+: not use</c>';
+						 + '<br><wh>SPI:</wh>'+ htmlC( [
+								  [ 'grn', 'CLK', 23 ]
+								, [ 'grn', 'MOS', 19 ]
+								, [ 'grn', 'RES', 22 ]
+								, [ 'grn', 'DC',  18 ]
+								, [ 'grn', 'CS',  24 ]
+							] );
+	var txtrotaryencoder = gnd +'<c>+: not use</c>';
 	var title = {
 		  i2cbackpack   : [ 'Character LCD',  '',               'lcdchar' ]
 		, lcdchar       : [ 'Character LCD',  txtlcdchar ]
@@ -690,10 +702,12 @@ $( '#i2smodule, #timezone' ).on( 'select2:opening', function () { // temp css fo
 
 } ); // document ready end <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
 
-function htmlC( color, txt ) {
-	if ( typeof txt === 'string' ) txt = [ txt ];
+function htmlC( data, key, val ) {
+	if ( typeof data !== 'object' ) data = [ [ data, key, val ] ];
 	var html = '';
-	txt.forEach( t => html += ' <c class="'+ color +'">'+ t +'</c>' );
+	data.forEach( el => {
+		html += '<c>'+ el[ 1 ] +':<a class="'+ el[ 0 ] +'">'+ el[ 2 ] +'</a></c> ';
+	} );
 	return html
 }
 function i2sOptionSet() {

srv/http/bash/status.sh

@@ -340,8 +340,6 @@ elif [[ $stream ]]; then
 			stationcover=$( ls $dirwebradio/img/$urlname.* 2> /dev/null )
 			[[ $stationcover ]] && stationcover="$( sed 's|^/srv/http||; s/#/%23/g; s/?/%3F/g' <<< $stationcover )"
 		fi
-########
-		status=$( grep -E -v '^, "state"|^, "webradio"' <<< $status )
 ########
 		status+='
 , "Album"        : "'$Album'"