Hello! Hope you're all doing well!
I'm having a very annoying time with Google Translate on our clients. Summarizing our issue, all our projects are in Brazilian Portuguese, but even when defining the locale of the project to pt-BR the Google Translate popup shows up.
Here they mention using some parameters on the HTML tags for a webpage, but as we can't control Perspective's <head> content, that won't be possible.
Here are a few examples of how Google Translate breaks stuff in our projects:
In this image, all the names should be Res. (as in Reservatório/Water Tank).
In this image, ETA eu should be ETA I, or ETA 1 written using an uppercase i.
My suggestion would be that if you're using these on dedicated computers for operations that you use the Perspective Workstation app instead of your browser. If these are just client computers, then suggest another browser, or see if there's a way to disable Google translate on individual domains.
While that would fix the issue at hand, that shouldn't be seen as a proper solution that problem.
I'll send this issue to the support as a QoL improvement for the platform. Hopefully we can kill tickets coming due to this.
From a purely stylistic point of view (meaning nothing to do with the actual text that's being translated), you could also improve your component a little bit in the following ways (if you so choose):
- Add the CSS ellipsis feature to your Tank component so that if you have a longer title, it gets truncated. So,
"Resposta ETA I"turns into"Resposta..."and then for added benefit, you can turn the tooltip on for the Label component and display the full label text on hover. OR you can also just make the Tank component/card larger to fit text. I like the ellipsis approach as it future-proofs your design (even if you make the component bigger, you might still get a tank that exceeds the tank size). Here is some code to get you started with that:
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden
- You can force the Valve component to always cast the Label to upper-case using
text-transform: uppercase. That way, even if you get the wrong text in there, at least you'll get all-capped wrong text
4 Likes
Not quite true...
Note the disclaimers about this technique in my post below.
2 Likes
I'll send this our designers here. At least we won't have overflows breaking the visuals. Thanks!
Okay, okay... There is a way hehehe.
Writing a simple <meta name="google" content="notranslate"> to the injectables\head_bottom.txt shouldn't break anything, but I don't really like that idea... Perhaps there is another way that could be implemented.
Correct me if I'm wrong, but Perspective is based on React/Next, yes?
React, yes. As far as I know we don't use NextJS.
I see. It should be possible then to write a Perspective module that uses hooks or other solutions to manipulate the DOM in a manner that would apply the fixes mentioned in the post I linked on the OP. I'll see to it whenever I'm done with my current assignment here.
From a security standpoint, is there any worry that code could be injected by some threat actor into these files without the owner/end-user knowing about it? Or is the general assumption that if they get direct file access to the server, all bets are off anyway since the OS has been compromised?
Edit: I guess really at that point any file on the OS could be modified, even in other parts of the Ignition configuration.
Exactly that. If you can write to those files, the game's already over - you could just as easily write to the jar files that make up Ignition itself and transparently overwrite the application to do something malicious.