Change default language for UI

victor · September 27, 2022, 12:32pm

Hi!

Can anyone please help me to figure out how I can change the default language for OpenEMS UI? I have tried to change the language of the admin user during local testing on my PC, but it seems to be reset (set back to german) on the next run.

I am running the UI connected to an edge instance.

venu-sagar · November 7, 2022, 8:08am

Hi,

You can change the default language in the Language.ts file( openems/language.ts at develop · OpenEMS/openems · GitHub ).

You can see a static field which is DEFAULT = Language.DE ( openems/language.ts at develop · OpenEMS/openems · GitHub );

You can change it to the language you want to. The same default language is being applied in app.module.ts ( openems/app.module.ts at develop · OpenEMS/openems · GitHub )

Thanks,
Sagar

francibonito · January 7, 2023, 12:41pm

Hi to all!

I’m approaching to OpenEMS for personal interest.
It is very usefull and I want to go in deep with this platform.
Thanks to this thread I was able to change language from DE to EN.
Now I’m thinking to add italian language module. Is it possible?
Which way to do this? If anyone explain how to, I’m ready to implement it and give my contribute to the community with a new language module.

Thank you all in advance,
Francesco

p.wimmer · January 9, 2023, 9:35am

Hi,
i guess it is all loaded from the json file

so if you add there it.json it should work (as far as i know)

best regards

Paul

francibonito · January 9, 2023, 2:25pm

Hello thank you @p.wimmer for support. I’m contributing with a new language (italian) to the platform thanks to your advice.
I followed the steps above of @venu-sagar but I was unable to change the language.
I set as DEFAULT Language.EN but web I connect to localhost it show me german language again…is there a step by step guide to do that? and also to cusomize the graphic and logo of the appliance for my coop?

Thank you in advance,
Francesco

p.wimmer · January 10, 2023, 6:24pm

Hello,

the user has also a language and by default this language will be used.

github.com

OpenEMS/openems/blob/develop/ui/src/app/shared/service/websocket.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { CookieService } from 'ngx-cookie-service';
import { delay, retryWhen } from 'rxjs/operators';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import { environment } from "src/environments";
import { Edge } from '../edge/edge';
import { JsonrpcMessage, JsonrpcNotification, JsonrpcRequest, JsonrpcResponse, JsonrpcResponseError, JsonrpcResponseSuccess } from '../jsonrpc/base';
import { CurrentDataNotification } from '../jsonrpc/notification/currentDataNotification';
import { EdgeConfigNotification } from '../jsonrpc/notification/edgeConfigNotification';
import { EdgeRpcNotification } from '../jsonrpc/notification/edgeRpcNotification';
import { SystemLogNotification } from '../jsonrpc/notification/systemLogNotification';
import { AuthenticateWithPasswordRequest } from '../jsonrpc/request/authenticateWithPasswordRequest';
import { AuthenticateWithTokenRequest } from '../jsonrpc/request/authenticateWithTokenRequest';
import { EdgeRpcRequest } from '../jsonrpc/request/edgeRpcRequest';
import { LogoutRequest } from '../jsonrpc/request/logoutRequest';
import { RegisterUserRequest } from '../jsonrpc/request/registerUserRequest';
import { AuthenticateResponse } from '../jsonrpc/response/authenticateResponse';
import { Language } from '../type/language';

This file has been truncated. show original

localStorage.LANGUAGE = language.key;

so you should deactivate this.

No there are no stepbystep guides, because this project is tooo huge for so many stepToStep guides.

I don’t know what you mean by customize “graphicc”?! you mean the circle? sure. feel free if you can do this. the logo is quite easy. just exchange it in themes folder, or use the “theming” itself.
best regards
Paul

stefan.feilmeier · January 12, 2023, 4:10pm

Hi Francesco,

to add a new language, you would have to do the following:

Add the language to language.ts openems/language.ts at develop · OpenEMS/openems · GitHub
- Imports on top:
  import de from 'src/assets/i18n/it.json';
- Add language tag:
  public static readonly IT: Language = new Language("Italian", "it", it);
- List of ALL language tags:
  public static readonly ALL = [Language.DE, Language.EN, Language.CZ, Language.NL, Language.ES, Language.FR, Language.IT];
- Add to getByBrowserLang():
  case "it": return Language.IT;
Add your translation file in src/assets/i18n/it.json; start by copying one of the existing files

Internally we currently use the i18n-ally extension for visual studio code to keep our translations in sync: GitHub - lokalise/i18n-ally: 🌍 All in one i18n extension for VS Code

Regards,
Stefan