+- Moode Forum (https://moodeaudio.org/forum)
+-- Forum: moOde audio player (https://moodeaudio.org/forum/forumdisplay.php?fid=3)
+--- Forum: FAQ and Guides (https://moodeaudio.org/forum/forumdisplay.php?fid=9)
+--- Thread: Editing CSS? Build environment? (/showthread.php?tid=3276)
Editing CSS? Build environment? - MJR42 - 12-20-2020
Hi, I've been getting a bit into understanding the web GUI using the Chrome DevTools, with the objective to get it to work on a 5 inch 800x480 touchscreen display. I want bigger fonts and a better layout for big fingers
. The current configuration does not scale down to 800x480 without overlapping text from the various panels, and the buttons are too small to see or touch easily when the screen is physically so small.I'm figuring out that the parameters I want to mess with are in the panels.css files, but in 7.0.0 these appear to be generated by map files.
It's been a long time since I've programmed, and I'm hoping that someone would be so kind as to help me identify or even set up the build environment I'll need to be able to make changes in my system.
I'm hoping that once I get the basics identified I'll be able to rely on Google and O'Reilly for the specifics I need. Right now I don't even know what I'm looking for.If this works OK, I'd be happy to share improvements, but I'm having trouble figuring out how to get started.
RE: Editing CSS? Build environment? - grumbleweed - 12-20-2020
My suggestion would be to download the source files from http://moodeaudio.org/docs/SOURCES.html and explore the www directory to get a feel.
In the other/build directory is a document covering building the css and js files with gulp.
Good luck.
RE: Editing CSS? Build environment? - MJR42 - 12-20-2020
Thanks gw! That helps a lot. I also see a tool for building an image.
Any idea if everything need to be on a Linux environment, or will it work if I use the Windows versions of the npm and gulp tools?
(As a former Unix sysadmin, I can’t believe I’m asking this)
RE: Editing CSS? Build environment? - grumbleweed - 12-21-2020
When I try UI edits I just ssh to the pi and use nano to edit the files directly.
NPM and Gulp are Node.js, so fine on either platform.
RE: Editing CSS? Build environment? - TheOldPresbyope - 12-21-2020
If Windows it must be, you can always try the WSL, which is getting better all the time, or go whole hog and install a virtual Linux host using, say, Oracle Virtualbox.
I go the other way and run Win10 virtually---if not virtuously---on my Linux laptop. It's an 8yr old Thinkpad but the performace is more than good enough for the things I do in Windows. No more fooling around with dual-boot configurations for me.
Regards,
Kent
RE: Editing CSS? Build environment? - MJR42 - 12-21-2020
(12-21-2020, 03:00 PM)grumbleweed Wrote: When I try UI edits I just ssh to the pi and use nano to edit the files directly.
NPM and Gulp are Node.js, so fine on either platform.
The problem I think I see is that in 7.0.0, the image doesn't have a css folder with frames.css anymore. Everything is contained in map files, so I think that means I'd need to have something that can at least create a replacement file that I could insert by transferring the file.
Correct me if I'm wrong?
RE: Editing CSS? Build environment? - bitlab - 12-22-2020
In the git repo dir other/build is a manual for how to use gulp for several scenarios.
You can even do the frontend development on your windows machine and start a local web server with gulp, backend calls are then directed to the pi (al least if everyhthing is setup correctly ...).
Or you can do it local on the pi.
Under Windows I recomment to use mobaxterm in combination with Visual Code for either local development or using the pi as remote target.
You can then edit the files directly on the Pi without the need of uploading.
If you think that using gulp is a bridge to far (I recomment the usage of it), you can work arround it by:
Code:
git clone https://github.com/moode-player/moode.git
sudo mv /var/www /var/www.org
sudo cp ~/moode/www /var/www
moodeutl -rIt that case you can just edit the files in /var/www. No minifications or other gulp stuff is applied.
And btw the map files doesn contain any editable source. Those are just generated files by gulp to make the minifies css and js readable again. Little bit like symbol files for c/c++. When no developer toolbar is active those aren´t even loaded by the browser.
RE: Editing CSS? Build environment? - Tim Curtis - 12-22-2020
I would suggest using --depth 1 to pull down just the latest commit. It will save a ton of space
Code:
git clone --depth 1 https://github.com/moode-player/moode.gitRE: Editing CSS? Build environment? - MJR42 - 12-23-2020
Thanks, folks!
I've done a little exploring and I think that this is the kind of thing I was looking for. If not, it's going to take me a while to figure that out, so there's that...
This is starting to look like fun. Have a great Solstice/Christmas/Hanukkah/Kwanzaa/* break!