0

I want to change thingsboard(iot platform)'s logo and I also need to change the style of ui.

what I did was.. i have ubundu 19.04.

  1. installed jdk and maven.
  2. cloned thingsboard code from git.
  3. build the app using: mvn clean install -Deskpits.

Error during the build proccess.

I dont what to do further to change the logo.

please help me.

Goutham D
  • 23
  • 1
  • 3

3 Answers3

2

Seems that what you are looking for is the White Labeling feature. There you can customize themes, colors, icons, logo, etc..

No need to hack into or complex builds...

However, that feature is only available in the Professional Edition, so if you want to be able to do that you should consider using the PE.

DarkCygnus
  • 7,420
  • 4
  • 36
  • 59
2

Sysadmin's workaround with using reverse-proxy (nginx):

server {
  listen 80;
  server_name thingsboard.example.com;

  # Custom favicon
  location /static/thingsboard.ico {
    root /var/www;
  }

  # Custom logo
  # Find proper filename with developer console tool (Ctrl+Shift+i)
  location /static/36f68b2b2bfda81b4a46fcd2d6f8dead.svg {
    root /var/www;
  }

  location / {
    proxy_set_header X-Forwarded-Proto http;
    proxy_set_header X-Forwarded-Host 80;
    proxy_pass http://172.16.0.1:9090;

    # WebSocket Settings
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

}

Place your files in /var/www/static directory with proper names, e.g.:

$ ls /var/www/static/*
/var/www/static/36f68b2b2bfda81b4a46fcd2d6f8dead.svg  <-- logo
/var/www/static/thingsboard.ico

In my case I used nginx, AFAIK Varnish can make this trick, too.

Hint. If you made all correctly but in your browser logo doesn't update -- open developer console again and delete it from disk cache (In my case Ctrl+F5 did not update cache.

viktorkho
  • 618
  • 6
  • 19
-1

Changing logo or changing theme in thingsboard open source edition is little challenging but possible. I have done this many times in old version 1.* and new 3.* as well.

For that you simply need your logo in svg file also update id in svg file, and keep in "thingsboard/ui-ngx/asses/logo-white.svg" and rebuild project.

you can also customize color on UI by playing with theme.scss and style.scss files.

I see demo of tool https://www.anydataflow.com/post/thingsboard-open-source-iot-platform

dinesh rajput
  • 104
  • 1
  • 6