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

JimsterCoder · September 9, 2023, 8:39pm

Please explain what it means ‘deactivate this’.
Do I comment it out? What?

Thanks
James

p.wimmer · September 11, 2023, 10:13am

localStorage.LANGUAGE = language.key;

so you should deactivate this.

NiallDarwin · September 11, 2023, 7:28pm

Thank you Paul. I think we are having a language barrier. Please try a different way of explaining. Do you mean comment it out? Set it to 0 or maybe false? Delete it?
I’m sure it’s obvious but we are missing the point

JimsterCoder · September 14, 2023, 3:50am

I changed default to Language.EN in langauge.ts

I commented out this line in websocket.ts (above).

Now when I go to localhost:4200 and login as admin, the language is German but when I go to change it, it says it’s English.

What have I missed, please?

stefan.feilmeier · September 14, 2023, 7:40am

Hi @JimsterCoder,

I tested this myself locally and yes - there is unfortunately a mixture of “trying to be smart” and different places with currently hard-coded “default to German” language/locale settings.

In UI there is a default setting for the language:

This is primarly used, when there is no other source to get the actual language from, i.e. from
I suggest you change the default UI language here: https://github.com/OpenEMS/openems/blob/develop/ui/src/app/shared/type/language.ts#L36

In Edge there is a default, hard-coded language per User, which is applied here:

https://github.com/OpenEMS/openems/blob/develop/io.openems.edge.core/src/io/openems/edge/core/user/UserServiceImpl.java#L40-L53
I suggest you change the default Edge language here: https://github.com/OpenEMS/openems/blob/develop/io.openems.common/src/io/openems/common/session/Language.java#L19

In Backend there is a default, hard-coded language in the DummyMetadata provider here:

https://github.com/OpenEMS/openems/blob/develop/io.openems.backend.metadata.dummy/src/io/openems/backend/metadata/dummy/MetadataDummy.java#L73
I suggest you change it there as well, in case you are using this provider.
FYI: in our productive systems, the language is provided by the Odoo Metadata provider, so for our cloud users this works properly.

Regards,
Stefan