Can't Compile Touchscreen Frontend

Lemonzap

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?

Repetier

Did you install all modules using "yarn install" first? If not what exactly is the error message and command you executed making problems?

Lemonzap

I did run yarn install first. When I then run gulp I get "cannot find module 'gulp-sass'"

Repetier

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.

Lemonzap

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
https://imgur.com/a/MO2hWXO

Repetier

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 nodejs.org

Lemonzap

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. https://imgur.com/a/5pzNprR

Repetier

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.

Lemonzap

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.

Repetier

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. 

Lemonzap

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.

Repetier

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.

uzik

Hi.

Instead of creating a new topic, I will describe the problem here. I'm trying to compile Touchscreen according to the instructions:

https://www.repetier-server.com/customizing-printer-frontend/

uzik@uzik-virtual-machine:~/RSTouchscreenNG$ gulp
[12:39:36] Using gulpfile ~/RSTouchscreenNG/gulpfile.js
[12:39:36] Starting 'default'...
[12:39:36] Starting 'compileCss'...
[12:39:36] Finished 'compileCss' after 586 ms
[12:39:36] Starting 'copycssProd1'...
[12:39:36] Starting 'copycssProd2'...
[12:39:36] Finished 'copycssProd1' after 19 ms
[12:39:37] Finished 'copycssProd2' after 21 ms
[12:39:37] Finished 'default' after 609 ms
uzik@uzik-virtual-machine:~/RSTouchscreenNG$ 

But if I try to compile "only the touchscreen sources" (app-prod) or Compile everything (all-prod) and app-dev

Errors occur and it doesn't work

uzik@uzik-virtual-machine:~/RSTouchscreenNG$ gulp app-prod
[12:46:06] Using gulpfile ~/RSTouchscreenNG/gulpfile.js
[12:46:06] Starting 'app-prod'...
[12:46:06] Starting 'compileAppProd'...
✔ Browser application bundle generation complete.

./src/app/app-routing.module.ts:2:0-701 - Error: Module not found: Error: Can't resolve 'pages' in '/home/uzik/RSTouchscreenNG/src/app'

./src/app/app.component.ts:23:0-50 - Error: Module not found: Error: Can't resolve 'front-ui' in '/home/uzik/RSTouchscreenNG/src/app'

./src/app/app.module.ts:26:0-41 - Error: Module not found: Error: Can't resolve 'front-ui' in '/home/uzik/RSTouchscreenNG/src/app'

./src/app/app.module.ts:27:0-42 - Error: Module not found: Error: Can't resolve 'binding' in '/home/uzik/RSTouchscreenNG/src/app'

./src/app/app.module.ts:28:0-36 - Error: Module not found: Error: Can't resolve 'pages' in '/home/uzik/RSTouchscreenNG/src/app'

Error: src/app/app-routing.module.ts:32:8 - error TS2307: Cannot find module 'pages' or its corresponding type declarations.

uzik@uzik-virtual-machine:~/RSTouchscreenNG$ gulp all-prod
[12:47:45] Using gulpfile ~/RSTouchscreenNG/gulpfile.js
[12:47:45] Task never defined: all-prod - did you mean? app-prod
[12:47:45] To list available tasks, try running: gulp --tasks
uzik@uzik-virtual-machine:~/RSTouchscreenNG$ gulp app-dev
[12:48:12] Using gulpfile ~/RSTouchscreenNG/gulpfile.js
[12:48:12] Starting 'app-dev'...
[12:48:12] Starting 'compileAppDev'...
✔ Browser application bundle generation complete.

./src/app/app-routing.module.ts:2:0-701 - Error: Module not found: Error: Can't resolve 'pages' in '/home/uzik/RSTouchscreenNG/src/app'

./src/app/app.component.ts:23:0-50 - Error: Module not found: Error: Can't resolve 'front-ui' in '/home/uzik/RSTouchscreenNG/src/app'

./src/app/app.module.ts:26:0-41 - Error: Module not found: Error: Can't resolve 'front-ui' in '/home/uzik/RSTouchscreenNG/src/app'

./src/app/app.module.ts:27:0-42 - Error: Module not found: Error: Can't resolve 'binding' in '/home/uzik/RSTouchscreenNG/src/app'

./src/app/app.module.ts:28:0-36 - Error: Module not found: Error: Can't resolve 'pages' in '/home/uzik/RSTouchscreenNG/src/app'

Error: src/app/app-routing.module.ts:32:8 - error TS2307: Cannot find module 'pages' or its corresponding type declarations.

32 } from "pages";
          ~~~~~~~

Repetier

app-dev and app-prod targets are for quick recompile if you only changed the app sources. In any case you should run at first the "all" target so it creates the missing modules as well. touchscreen is a multi module solution. Hope that is all missing.

uzik

Repetier said:

app-dev and app-prod targets are for quick recompile if you only changed the app sources. In any case you should run at first the "all" target so it creates the missing modules as well. touchscreen is a multi module solution. Hope that is all missing.

THX. Its work