Help With CSS Changes and Gulp

[Nutul]

Thank you in advance for any help you can provide.

I have a 1600x480 screen and I am trying to modify the CSS to have a more useful display. I am running a pi 3b with Mood 8.1.2 64bit on a fresh install. The only setting changes were to set wifi settings, turn on the local display, and turn on SSH. 

I am trying to follow the directions at: https://github.com/moode-player/docs/blo...-end-stuff

As I understand it, Gulp will minify the CSS files (and other files), so any changes need to be run through a build/deploy sequence through Gulp to make this happen.

I am logging into the pi via Putty pi/moodeaudio and performing the following commands:

Code:

~ $ cd ~
~ $ sudo apt-get update
~ $ sudo apt-get -y install npm
~ $ git clone https://github.com/moode-player/moode.git
~ $ cd moode
~/moode $ npm ci
~/moode $ node_modules/.bin/gulp watch --build

Note that "npm ci" gives the following error when running:

npm WARN deprecated uuid@2.0.3: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

After this is complete (all seems fine, except as noted above), I can navigate to localhost:3000 and I get the output in my browser in the attachment. I'm not sure what I am supposed to see here, but this doesn't look helpful. I can also go to localhost:3001, but that appears to be a bunch of settings that are similarly unhelpful for something like changing CSS.

I am then using Notepad+++ with the SSH pulgin to navigate to home/pi/moode/www/css to locate the files cloned from the repository. If I edit a file like "moode.css" hit save (overwriting the files in the same directory), I can see serial updates in Putty. It looks like Gulp 'saw' the saved change and is rebuilding the mini-fied files.

This is where I am stuck, a restart of the pi doesn't show the new CSS changes. The files at home/pi/moode/www/css still show my changes, but no update on the display (local or via localhost).

I have also tried the directions at 2.1:

Code:

~ $ cd ~
~ $ sudo apt-get update
~ $ sudo apt-get -y install npm
~ $ git clone https://github.com/moode-player/moode.git
~ $ cd moode
~/moode $ npm ci
~/moode $ node_modules/.bin/gulp build
~/moode $ node_modules/.bin/gulp deploy --test
~/moode $ sudo mv /var/www /var/www.org
~/moode $ sudo node_modules/.bin/gulp deploy
~/moode $ moodeutl -r

Note that after following the instructions in 2.2, I believe I can start with running "npm ci" and skip the earlier steps. If I do this, the UI on the local screen shows "401 Unauthorized" until I also run:

Code:

~moode $ node\_modules/.bin/gulp build
~moode $ sudo node\_modules/.bin/gulp deploy --force
~moode $ moodeutl -r

The pi will then show the UI, but it will not be any of the files I edited at home/pi/moode/www/css.

I am not familiar with having the dev-env on the final PI. Moreover I wasn't successful having Gulp to deploy on my remote PI, so I adopted an traditional, manual deploy process:

1. install the development environment on my  Linux laptop
2. grab the sources from the GIT repository
3. make my changes locally (almost everywhere)
4. run build and deploy commands
5. manually copy the files on the running PI (I use an automatic script, which you can see below)
6. hit F5 on my browser to see the changes in effect.

Code:

#!/bin/bash

# this script must be called on the moode device, as it will get the files from a remote development machine and install them locally

function main()
{
   ### update the PHP engine
   sudo scp <you>@<your_machine>:/var/www/inc/playerlib.php /var/www/inc/

   ### update JS code and maps
   sudo scp <you>@<your_machine>:/var/www/js/* /var/www/js/
   sudo scp -r <you>@<your_machine>:/var/www/maps/js/* /var/www/maps/js/
}

main "$@";

you just need to replace <you>@<your_machine> with the actuall thing; the source and destination paths are the same on (well, almost) every machine.
Also, you may want to add other folders to be updated, such as /var/www/css or the like...

Cheers, Al.