Can't Compile Touchscreen Frontend

I'm working through your page on customizing the server frontend. Right now I'm simply trying to change a few colors. I followed the instructions as best I could(They aren't very clearly written), but when I get to the step where I execute the command "gulp" on linux it tells me it can't find modules. Any ideas what I've done wrong?


  • Did you install all modules using "yarn install" first? If not what exactly is the error message and command you executed making problems?
  • I did run yarn install first. When I then run gulp I get "cannot find module 'gulp-sass'"
  • When I do it I get:
    (base)  littwin@Rolands-2-iMac-2  ~/Documents/Projekte/RS/RSTouchscreenNG  gulp        
    [09:01:35] Using gulpfile ~/Documents/Projekte/RS/RSTouchscreenNG/gulpfile.js
    [09:01:35] Starting 'default'...
    [09:01:35] Starting 'compilecss'...
    [09:01:36] Finished 'compilecss' after 739 ms
    [09:01:36] Starting 'copycssProd1'...
    [09:01:36] Starting 'copycssProd2'...
    [09:01:36] Finished 'copycssProd2' after 9.22 ms
    [09:01:36] Finished 'copycssProd1' after 9.92 ms
    [09:01:36] Finished 'default' after 751 ms

    But some packages contain C/C++ code and need to be compiled. So do you have the standard compiler for your OS installed. You would normally see an error running "yarn install" if compiling gulp-sass or one of the other sass components. If you check the package.json you see 

    "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.11",
    "@angular/cli": "^12.2.11",
    "@angular/compiler-cli": "~12.2.11",
    "@angular/language-service": "~12.2.11",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "del": "^3.0.0",
    "gulp": "^4.0.0",
    "gulp-clean-css": "^4.0.0",
    "gulp-sass": "^5.0.0",
    "gulp-shell": "^0.6.5",
    "ng-packagr": "^12.2.4",
    "node-sass": "^6.0.1",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.3.5"
    so gulp-sass should be in the install list. You can also check if the folder node_modules/gulp-sass exists, but when a compilation fails it might still not work.
  • edited January 8
    I just realized theres actually an error when I run yarn install. It says
    npmlog@6.0.0: The engine "node" is incompatible with this module. Expected version "^12.13.0 | ^14.15.0 || >=16". Got "10.24.0"

    Here's a screenshot of me running yarn install followed by gulp
  • As you see yarn did stop installing further due to error. So you really need to update you node version to something newer. Guess version 16 LTS would be best. You find it on
  • I still can't get it working. I updated node like you suggested and that got me past the error I was having. But now running gulp tells me it can't find node-sass. I've tried researching what to do about that and it seems like my best bet is to reinstall node-sass but that fails too. Here is the result of running gulp now.
  • Error is in gulpfile line 9:
    sass_compiler = require('node-sass');
    would be the line I guess, please verify as it is line 8 for me. I also have in package.json the line:
    "node-sass": "^6.0.1",
    which would install node-sass. So please run
    yarn install
    again after verifying it is in your package.json and watch out for errors. This might require compiling C/C++ files so could possibly fail if no compiler is installed. But messages would show so.

    Also instead of posting images just copy/paste from the console - easier to read here and no need to make images:-) Also allows to copy more then one screen of data.

  • I got it working. It turned out I was using something else called yarn from cmdtest. I removed that and found and installed the right kind of yarn. Now I was able to successfully change the colors in the touchscreen interface. I don't know much about css and the other ways this is built. Do you have a way you recommend going about changing the sizes of icons? I want to make some of the icons and status elements a bit bigger so they're easier to read from a distance.
  • Great. Changing sizes is very easy. All you need to do is go to projects/style/configs and select the config file for the resolution you use. Values are min width/height. From the names it should be easy to say which variable changes which size. 
  • Thank you for the help. The color changing and resizing is going quite well. One snag I'm having though is I can't seem to nail down where the color of the text on the temperature graph is set. I'm trying to change the background to something close to white but that makes the white text of the graph disappear.
  • Graph color is hard coded in style/blocks/_graph.scss bus as easy to change as variables - should be immediately clear which color is for which part.
Sign In or Register to comment.