Merge pull request #929 from rern/UPDATE

Update

install.sh

@@ -8,7 +8,7 @@ alias=r1
 dir=/srv/http/shareddata
 if [[ -e $dir ]]; then
 	chown -h http:http $dir/*/
-	chown -h mpd:audio $dir $dir/{mpd,playlist} $dir/mpd/mpd.db $dir/playlists/*
+	chown -h mpd:audio $dir $dir/{mpd,playlist} $dir/mpd/mpd.db $dir/playlists/* 2> /dev/null
 fi
 
 # 20220428

srv/http/assets/js/passive.js

@@ -33,7 +33,7 @@ $( window ).on( 'resize', () => { // portrait / landscape
 // active / inactive window /////////
 var active = 1;
 connect = () => {
-	if ( !active ) {
+	if ( !active && !G.poweroff ) {
 		active = 1;
 		pushstream.connect();
 	}
@@ -383,6 +383,14 @@ function psNotify( data ) {
 	if ( data.title === 'Power' ) {
 		switchPage( 'playback' );
 		loader();
+		if ( data.text === 'Off ...' ) {
+			$( '#loader' ).css( 'background', '#000000' );
+			setTimeout( function() {
+				$( '#loader .logo' ).css( 'animation', 'none' );
+			}, 10000 );
+			pushstream.disconnect();
+			G.poweroff = 1;
+		}
 	} else if ( data.text === 'Change track ...' ) { // audiocd
 		clearIntervalAll();
 	} else if ( data.title === 'Latest' ) {

srv/http/assets/js/settings.js

@@ -158,10 +158,9 @@ function showContent() {
 // active / inactive window /////////
 var active = 1;
 connect = () => {
-	if ( !active ) {
+	if ( !active && !G.poweroff ) {
 		active = 1;
 		pushstream.connect();
-		$( '#scanning-bt, #scanning-wifi' ).addClass( 'blink' );
 	}
 }
 disconnect = () => {
@@ -245,7 +244,17 @@ function psNotify( data ) {
 
 	G.bannerhold = data.hold || 0;
 	banner( data.title, data.text, data.icon, data.delay );
-	if ( data.title === 'power' ) loader();
+	if ( data.title === 'Power' ) {
+		if ( data.text === 'Off ...' ) {
+			$( '#loader' ).css( 'background', '#000000' );
+			setTimeout( function() {
+				$( '#loader .logo' ).css( 'animation', 'none' );
+			}, 10000 );
+			pushstream.disconnect();
+			G.poweroff = 1;
+		}
+		loader();
+	}
 }
 function psPlayer( data ) {
 	var player_id = {

srv/http/settings/camillagui/build/camillagui.css

@@ -30,7 +30,7 @@ textarea,
 .files div:not([class]) .button-with-text,
 .files input[type=text],
 .quick-config-switch .button,
-#camilladsp pre,
+#status pre,
 #fileconfig {
 	font-family: Inconsolata;
 }
@@ -58,12 +58,15 @@ textarea,
 	--phase-color: hsl( 0 40% 55% );
 	--red: #bb2828;
 }
+html,
+body  {
+	background: #000000;
+}
 body {
 	padding-top: 40px;
 	font-family: Lato;
 	font-size: 16px;
 	color: var( --cw );
-	background: #000000;
 }
 #root {
 	max-width: 700px;
@@ -143,6 +146,9 @@ body {
 	text-align: left;
 	color: var( --cg60 );
 }
+.hide {
+	display: none;
+}
 /* common --------------------------------------------------------------------- */
 /* main container */
 .configapp {
@@ -323,13 +329,13 @@ input[type=range]:disabled::-moz-range-thumb {
 }
 #button-mute,
 #button-dim {
-	border-right: 1px solid var( --cga );
 	margin-right: 0 !important;
 	border-radius: 3px 0 0 3px;
 	background: radial-gradient( 225% 90% at 100% 0%, hsla(0,0%,100%,.3) 50%, hsla(0,0%,100%,0) 55% );
 	background: -webkit-radial-gradient( 100% 0%, 225% 90%,   hsla(0,0%,100%,.3) 50%, hsla(0,0%,100%,0) 55% );
 }
 #button-dim {
+	border-left: 1px solid var( --cga );
 	border-radius: 0 3px 3px 0;
 	background: radial-gradient( 300% 90% at 0% 0%, hsla(0,0%,100%,.3) 50%, hsla(0,0%,100%,0) 55% );
 	background: -webkit-radial-gradient( 0% 0%, 300% 90%,   hsla(0,0%,100%,.3) 50%, hsla(0,0%,100%,0) 55% );
@@ -389,12 +395,12 @@ input[type=range]:disabled::-moz-range-thumb {
 .rc-progress-line {
 	position: absolute;
 	right: 0;
-	width: 237px;
+	width: 238px;
 }
 .rc-progress-line:last-child {
 	margin-top: 10px;
 }
-#camilladsp pre {
+#status pre {
 	margin: 0px 0;
 	padding: 5px;
 	background: var( --cga );
@@ -404,13 +410,6 @@ input[type=range]:disabled::-moz-range-thumb {
 	line-height: 27px;
 	background: var( --cga );
 }
-#applyauto {
-	color: var( --cg60 );
-}
-#applyauto input {
-	float: left;
-	margin: -3px 6px 0 0 !important;
-}
 /* Fetch and Apply button */
 #config .two-column-grid {
 	display: block;
@@ -434,9 +433,6 @@ input[type=range]:disabled::-moz-range-thumb {
 	top: -31px;
 	right: -4px;
 }
-.versions {
-	display: none;
-}
 /* Panels ----------------------------------------------------------------- */
 .configtabs {
 	display: block;
@@ -697,7 +693,6 @@ textarea:focus-visible {
 }
 .head i,
 #divhelp i,
-#log,
 #logo,
 input[type=range] {
 	cursor: pointer;

srv/http/settings/camillagui/build/camillagui.js

@@ -8,22 +8,20 @@ fetch( '/api/status' )
 `;
 } );
 
-if ( [ 'localhost', '127.0.0.1' ].includes( location.hostname ) ) {
-	document.getElementById( 'help' ).remove();
-	document.getElementById( 'divhelp' ).remove();
-}
-document.getElementById( 'help' ).onclick = () => {
-	var divhelp = document.getElementById( 'divhelp' );
-	divhelp.style.display = divhelp.style.display === 'none' ? 'block' : 'none';
-}
-document.getElementById( 'close' ).onclick = () => {
-	var hostname = location.hostname;
-	var http = new XMLHttpRequest();
-	http.open( 'POST', 'http://' + hostname + '/cmd.php', true );
-	http.setRequestHeader( 'Content-type', 'application/x-www-form-urlencoded' );
-	http.send( 'cmd=bash&bash=systemctl%20stop%20camillagui' );
-	location.href = 'http://' + hostname;
-}
+if ( [ 'localhost', '127.0.0.1' ].includes( location.hostname ) ) document.getElementById( 'help' ).classList.add( 'hide' );
+
+document.body.addEventListener( 'click', function( e ) {
+	if ( e.target.id === 'close' ) {
+		var hostname = location.hostname;
+		var http = new XMLHttpRequest();
+		http.open( 'POST', 'http://' + hostname + '/cmd.php', true );
+		http.setRequestHeader( 'Content-type', 'application/x-www-form-urlencoded' );
+		http.send( 'cmd=bash&bash=systemctl%20stop%20camillagui' );
+		location.href = 'http://' + hostname;
+	} else if ( e.target.id === 'help' || e.target.id === 'eqhelp' ) {
+		document.getElementById( 'div'+ e.target.id ).classList.toggle( 'hide' );
+	}
+});
 
 cacheBusting = () => {
 	setTimeout( () => {
@@ -41,7 +39,7 @@ cacheBusting = () => {
 			script.src = script.attributes.src.textContent + hash;
 		} );
 		setTimeout( () => {
-			document.getElementById( 'root' ).style.display = '';
+			document.body.classList.toggle( 'hide' );
 		}, 300 );
 	}, 300 );
 }

srv/http/settings/camillagui/build/css-variables.css

@@ -0,0 +1,117 @@
+/* Dark skin. */
+.css-variables {
+
+    /*
+      Styling is only supported using the following CSS variables.
+      They will be maintained in a backwards-compatible manner as good as possible.
+      It is technically possible to add any valid CSS to this file,
+      but there are no guarantees with respect to backwards-compatibility.
+
+      Variable types:
+      - variables ending with -color: any valid CSS color
+      - variables ending with -border: any value valid for the CSS border shorthand property (e.g. 1px solid red)
+      - border-radius: any positive CSS length/percentage
+      - variables ending with -opacity: any positive CSS float value (e.g. 0.5)
+    */
+
+    /* General */
+    --background-color: #202020;
+    --text-color: #ddd;
+    --error-text-color: #dc4646;
+    --error-field-background-color: var(--error-text-color);
+    --success-text-color: #46c846;
+    --neutral-text-color: #bbb;
+    --border-radius: 5px;
+
+    /* Buttons */
+    --button-icon-color: var(--text-color);
+    --button-add-icon-color: var(--success-text-color);
+    --button-remove-icon-color: var(--error-text-color);
+    --button-text-color: var(--text-color);
+    --button-background-color: #333;
+    --button-border: 2px solid rgb(70, 70, 70);
+    --hovered-button-background-color: #444;
+    --hovered-button-border: 2px solid #bbb;
+    --active-button-background-color: #555;
+    --active-button-border: 2px solid #ddd;
+    --disabled-button-opacity: 0.4;
+    --disabled-button-background-color: var(--button-background-color);
+    --disabled-button-border: var(--button-border);
+    --highlighted-button-background-color: #242;
+    --highlighted-button-border: 2px solid #4b4;
+
+    /* Boxes */
+    --box-border-width: 2px;
+    --box-border-color: rgb(70, 70, 70);
+    --box-border: var(--box-border-width) solid var(--box-border-color);
+
+    /* Inputs */
+    --input-border: 2px solid rgba(70, 70, 70, 0.5);
+    --focused-input-border: 2px solid var(--success-text-color);
+
+    /* Filter plot */
+    --axes-color: #555;
+    --gain-color: #4646f0;
+    --phase-color: var(--error-text-color);
+    --impulse-color: var(--success-text-color);
+
+    /* Pipeline plot */
+    --arrow-color: var(--axes-color);
+    --frame-background-color: #333;
+    --block-background-color: rgb(200, 200, 200);
+    --block-text-color: rgb(16, 10, 90);
+}
+
+/*
+    Bright skin (black/white)
+    Rename to .css-variables to enable
+*/
+.css-variables-disabled {
+
+    /* General */
+    --background-color: white;
+    --text-color: black;
+    --error-text-color: #f00;
+    --error-field-background-color: var(--error-text-color);
+    --success-text-color: #0c0;
+    --neutral-text-color: #bbb;
+    --border-radius: 5px;
+
+    /* Buttons */
+    --button-icon-color: var(--text-color);
+    --button-add-icon-color: var(--success-text-color);
+    --button-remove-icon-color: var(--error-text-color);
+    --button-text-color: var(--text-color);
+    --button-background-color: #f3f3f3;
+    --button-border: 1px inset #9090B0;
+    --hovered-button-background-color: #ddd;
+    --hovered-button-border: var(--button-border);
+    --active-button-background-color: #aaa;
+    --active-button-border: var(--button-border);
+    --disabled-button-opacity: 1.0;
+    --disabled-button-background-color: #aaa;
+    --disabled-button-border: var(--button-border);
+    --highlighted-button-background-color: #cfc;
+    --highlighted-button-border: var(--button-border);
+
+    /* Boxes */
+    --box-border-width: 1px;
+    --box-border-color: #9090B0;
+    --box-border: var(--box-border-width) solid var(--box-border-color);
+
+    /* Inputs */
+    --input-border: 1px solid #9090B0;
+    --focused-input-border: 2px solid #9292f6;
+
+    /* Filter plot */
+    --axes-color: #555;
+    --gain-color: rgba(0,0,220,1);
+    --phase-color: rgba(0,220,0,1);
+    --impulse-color: rgba(220,0,0,1);
+
+    /* Pipeline plot */
+    --arrow-color: var(--text-color);
+    --frame-background-color: rgb(180, 180, 180);
+    --block-background-color: rgb(233, 233, 233);
+    --block-text-color: rgb(16, 10, 90);
+}

srv/http/settings/camillagui/build/index.html

@@ -10,27 +10,30 @@
 	<link rel="stylesheet" href="./static/assets/css/colors.css">
 	<link rel="stylesheet" href="./camillagui.css">
 </head>
-<body class="css-variables">
+<body class="css-variables hide">
 
 <div class="head">
 	<i class="page-icon fa fa-camilladsp"></i>
 	<span>CamillaDSP</span>
 	<i id="close" class="fa fa-times"></i><i id="help" class="fa fa-help"></i>
 </div>
-<div id="divhelp" style="display: none">
+<div id="divhelp" class="hide">
 	<a id="logo" href="https://github.com/HEnquist/camilladsp" target="_blank"><img src="./camilladsp.svg"><div id="version"></div></a>
 	<a href="https://henquist.github.io/0.6.3/#introduction" target="_blank" style="color: var( --cw )">User Manual <i class="fa fa-help"></i></a>
-<br><a href="https://henquist.github.io/0.6.3/#devices" target="_blank">Devices&ensp;•&nbsp;</a>
-<br><a href="https://henquist.github.io/0.6.3/#filters" target="_blank">Filters&ensp;•&nbsp;</a>
-<br><a href="https://henquist.github.io/0.6.3/#mixers" target="_blank">Mixers&ensp;•&nbsp;</a>
-<br><a href="https://henquist.github.io/0.6.3/#pipeline" target="_blank">Pipeline&ensp;•&nbsp;</a>
-<br>Discussions: <i class="fa fa-info-circle"></i>
-<br><a href="https://www.audiosciencereview.com/forum/index.php?threads/rpi4-camilladsp-tutorial.29656" target="_blank">#1&ensp;•&nbsp;</a>
-<br><a href="https://www.diyaudio.com/community/threads/camilladsp-cross-platform-iir-and-fir-engine-for-crossovers-room-correction-etc.349818" target="_blank">#2&ensp;•&nbsp;</a>
-<br>
+	<br>
+	<a href="https://henquist.github.io/0.6.3/#devices" target="_blank">Devices&ensp;•&nbsp;</a>
+	<a href="https://henquist.github.io/0.6.3/#filters" target="_blank">Filters&ensp;•&nbsp;</a>
+	<a href="https://henquist.github.io/0.6.3/#mixers" target="_blank">Mixers&ensp;•&nbsp;</a>
+	<a href="https://henquist.github.io/0.6.3/#pipeline" target="_blank">Pipeline</a>
+	<br>
+	<br>Discussions: <i class="fa fa-info-circle"></i>
+	<br>
+	<a href="https://www.audiosciencereview.com/forum/index.php?threads/rpi4-camilladsp-tutorial.29656" target="_blank">#1&ensp;•&nbsp;</a>
+	<a href="https://www.diyaudio.com/community/threads/camilladsp-cross-platform-iir-and-fir-engine-for-crossovers-room-correction-etc.349818" target="_blank">#2</a>
+	<br>
 </div>
 
-<div id="root" style="display: none"></div>
+<div id="root"></div>
 
 <script src="./static/js/main.js"></script>
 <script src="./camillagui.js"></script>