# Creating dashboard with multi language support + camera?

**URL:** <https://discourse.nodered.org/t/creating-dashboard-with-multi-language-support-camera/93809>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [9 December 2024 16:02 UTC](https://discourse.nodered.org/t/creating-dashboard-with-multi-language-support-camera/93809 "2024-12-09T16:02:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![PratikVlegel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pratikvlegel/32/96138_2.png) [@PratikVlegel](https://discourse.nodered.org/u/PratikVlegel)\
**Post date:** [9 December 2024 16:02 UTC](https://discourse.nodered.org/t/creating-dashboard-with-multi-language-support-camera/93809/1 "2024-12-09T16:02:45Z")

</div>

Hello all!

I'm making a machine wizard, and I'd like to be able to switch the language of the wizard into 1 of 4 options, english, german, french dutch. Is this possible? Any suggestions? I'm quite new to this so excuse me if this has been asked a lot.

On a small side note, if swapping languages is possible, would it also be possible ot integrate my phones camera into the dashboard? The dashboard will be mainly running on phones/tabblets, and I'd like to take pictures to insert into the wizard (like from faulty machines).  
Any help is much appreciated.

Kind regards, Pratik Gurung

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [10 December 2024 08:44 UTC](https://discourse.nodered.org/t/creating-dashboard-with-multi-language-support-camera/93809/2 "2024-12-10T08:44:30Z")

</div>

> [@PratikVlegel](#):
>
> I'd like to be able to switch the language of

An example of many possibilities how to achieve multi language dashboard. Quite of work to make one, specially if there's a lot of text content. But doable.

Side note - I haven't tried all the widgets so there's no guarantee that all bits and pieces allow such approach.

```auto
[{"id":"8c0c4f5b39418508","type":"ui-text","z":"a5b9f027282f32b3","group":"5898950bd97524e2","order":3,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":930,"y":280,"wires":[]},{"id":"d8659836df555d35","type":"change","z":"a5b9f027282f32b3","name":"","rules":[{"t":"set","p":"keys","pt":"msg","to":"[\"textLabel\",\"yes\",\"no\"]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":280,"wires":[["1151a5c80adc8fa3"]]},{"id":"1151a5c80adc8fa3","type":"link call","z":"a5b9f027282f32b3","name":"","links":["dc8465da62984149"],"linkType":"static","timeout":"30","x":560,"y":280,"wires":[["9e50d3e22f164ab6"]]},{"id":"dc8465da62984149","type":"link in","z":"a5b9f027282f32b3","name":"get-translations","links":[],"x":545,"y":120,"wires":[["a94f6a63f923c765"]]},{"id":"a94f6a63f923c765","type":"function","z":"a5b9f027282f32b3","name":"translate","func":"const language = global.get(\"language\") ?? \"en\"\nconst translations = global.get(\"translations\")[language]\nconst translated = {}\nmsg.keys.forEach(function(k) {\n translated[k] = translations[k] \n});\nmsg.translations = translated\ndelete msg.keys\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"const translations = {\n \n}\n\ncontext.set(\"translations\", translations)","finalize":"","libs":[],"x":660,"y":120,"wires":[["4316811f512657d7"]]},{"id":"3f4e6cf917ae0e71","type":"function","z":"a5b9f027282f32b3","name":"translations","func":"const translations = {\n \"en\":{\n \"textLabel\":\"Text Node Label\",\n \"yes\":\"Yes\",\n \"no\":\"No\",\n \"greenSliderLabel\":\"Green Slider\",\n \"blueSliderLabel\":\"Blue Slider\"\n },\n \"et\":{\n \"textLabel\": \"Teksti Sõlme Pealkiri\",\n \"yes\": \"Jaa\",\n \"no\": \"Ei\",\n \"greenSliderLabel\": \"Roheline Liugur\",\n \"blueSliderLabel\": \"Sinine Slider\"\n }\n}\nglobal.set(\"translations\", translations);\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":330,"y":100,"wires":[[]]},{"id":"71681f6488cfb9e7","type":"inject","z":"a5b9f027282f32b3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":100,"wires":[["3f4e6cf917ae0e71"]]},{"id":"62e0784c7e911870","type":"inject","z":"a5b9f027282f32b3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":170,"y":260,"wires":[["d8659836df555d35"]]},{"id":"02990584ec5c0a7b","type":"change","z":"a5b9f027282f32b3","name":"","rules":[{"t":"set","p":"language","pt":"global","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":200,"wires":[["3d0f6abf36a48fc7"]]},{"id":"4316811f512657d7","type":"link out","z":"a5b9f027282f32b3","name":"translated","mode":"return","links":[],"x":775,"y":120,"wires":[]},{"id":"daee52e7a2557988","type":"inject","z":"a5b9f027282f32b3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":170,"y":300,"wires":[["d8659836df555d35"]]},{"id":"9e50d3e22f164ab6","type":"function","z":"a5b9f027282f32b3","name":"convert","func":"msg.ui_update = {\n \"label\": msg.translations.textLabel\n}\nmsg.payload = msg.payload == true ? msg.translations.yes : msg.translations.no\ndelete msg.translations\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":280,"wires":[["8c0c4f5b39418508"]]},{"id":"40854ba824351cbb","type":"ui-slider","z":"a5b9f027282f32b3","group":"5898950bd97524e2","name":"green slider","label":"slider","tooltip":"","order":1,"width":0,"height":0,"passthru":false,"outs":"all","topic":"topic","topicType":"msg","thumbLabel":"true","showTicks":"false","min":0,"max":10,"step":1,"className":"","iconPrepend":"","iconAppend":"","color":"green","colorTrack":"green","colorThumb":"green","x":950,"y":360,"wires":[[]]},{"id":"daeec4da4f1930e9","type":"ui-event","z":"a5b9f027282f32b3","ui":"29792df7d7b05e2e","name":"","x":170,"y":160,"wires":[["1888ef3d01b34367"]]},{"id":"bb62ae8041230ee9","type":"change","z":"a5b9f027282f32b3","name":"","rules":[{"t":"set","p":"keys","pt":"msg","to":"[\"greenSliderLabel\"]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":360,"wires":[["11da38722b867783"]]},{"id":"11da38722b867783","type":"link call","z":"a5b9f027282f32b3","name":"","links":["dc8465da62984149"],"linkType":"static","timeout":"30","x":560,"y":360,"wires":[["bb0ef359076e0ea2"]]},{"id":"bb0ef359076e0ea2","type":"function","z":"a5b9f027282f32b3","name":"convert","func":"msg.ui_update = {\n \"label\": msg.translations.greenSliderLabel\n}\n\ndelete msg.translations\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":360,"wires":[["40854ba824351cbb"]]},{"id":"77d59665c189e445","type":"ui-slider","z":"a5b9f027282f32b3","group":"5898950bd97524e2","name":"blue slider","label":"slider","tooltip":"","order":2,"width":0,"height":0,"passthru":false,"outs":"all","topic":"topic","topicType":"msg","thumbLabel":"true","showTicks":"false","min":0,"max":10,"step":1,"className":"","iconPrepend":"","iconAppend":"","color":"blue","colorTrack":"blue","colorThumb":"blue","x":950,"y":400,"wires":[[]]},{"id":"f45bb5538c399362","type":"change","z":"a5b9f027282f32b3","name":"","rules":[{"t":"set","p":"keys","pt":"msg","to":"[\"blueSliderLabel\"]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":400,"wires":[["7652d9901d06d699"]]},{"id":"7652d9901d06d699","type":"link call","z":"a5b9f027282f32b3","name":"","links":["dc8465da62984149"],"linkType":"static","timeout":"30","x":560,"y":400,"wires":[["a6701e6de8707288"]]},{"id":"a6701e6de8707288","type":"function","z":"a5b9f027282f32b3","name":"convert","func":"msg.ui_update = {\n \"label\": msg.translations.blueSliderLabel\n}\n\ndelete msg.translations\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":400,"wires":[["77d59665c189e445"]]},{"id":"633a3757ebfa2784","type":"ui-template","z":"a5b9f027282f32b3","group":"","page":"","ui":"29792df7d7b05e2e","name":"language selector","order":0,"width":0,"height":0,"head":"","format":"<template>\n <Teleport v-if=\"mounted\" to=\"#app-bar-actions\">\n <v-btn-toggle v-model=\"lang\" color=\"deep-purple-accent-3\" rounded=\"0\" group>\n <v-btn value=\"en\" @click=\"sendSelected()\">\n EN\n </v-btn>\n \n <v-btn value=\"et\" @click=\"sendSelected()\">\n ET\n </v-btn>\n </v-btn-toggle>\n </Teleport>\n</template>\n\n<script>\n export default {\n data() { \n return {\n lang:\"en\",\n mounted:false\n }\n },\n watch: {\n msg:function(){\n if(this.msg?.payload){ \n this.lang = this.msg.payload\n }\n }\n },\n computed: {\n \n \n },\n methods: {\n sendSelected:function(){\n this.send({payload:this.lang})\n }\n },\n mounted() {\n this.mounted=true\n \n },\n unmounted() {\n this.mounted=false\n }\n }\n</script>\n<style>\n \n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"widget:ui","className":"","x":190,"y":200,"wires":[["02990584ec5c0a7b"]]},{"id":"6292bfe897385f0a","type":"link in","z":"a5b9f027282f32b3","name":"dashboard-update","links":["3d0f6abf36a48fc7","1888ef3d01b34367"],"x":195,"y":400,"wires":[["d8659836df555d35","bb62ae8041230ee9","f45bb5538c399362"]]},{"id":"3d0f6abf36a48fc7","type":"link out","z":"a5b9f027282f32b3","name":"language-selected","mode":"link","links":["6292bfe897385f0a"],"x":535,"y":200,"wires":[]},{"id":"1888ef3d01b34367","type":"link out","z":"a5b9f027282f32b3","name":"dashboard-events","mode":"link","links":["6292bfe897385f0a"],"x":255,"y":160,"wires":[]},{"id":"5898950bd97524e2","type":"ui-group","name":"Group","page":"38cec68f083871ad","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"29792df7d7b05e2e","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":[],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"38cec68f083871ad","type":"ui-page","name":"Multi Language","ui":"29792df7d7b05e2e","path":"/page6","icon":"home","layout":"grid","theme":"813ec6b2ff1699c4","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"813ec6b2ff1699c4","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<div class="post-metadata">

**Author:** ![PratikVlegel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pratikvlegel/32/96138_2.png) [@PratikVlegel](https://discourse.nodered.org/u/PratikVlegel)\
**Post date:** [10 December 2024 10:06 UTC](https://discourse.nodered.org/t/creating-dashboard-with-multi-language-support-camera/93809/3 "2024-12-10T10:06:36Z")

</div>

alright thank oyu very much for your help!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [9 January 2025 10:07 UTC](https://discourse.nodered.org/t/creating-dashboard-with-multi-language-support-camera/93809/4 "2025-01-09T10:07:28Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.