Struggling to understand repo and use it for widget development

[skewty]

@vvlladd28 suggested I checkout this repo over at https://github.com/thingsboard/thingsboard-ui-types/issues/5. Thanks for taking the time to reply and make this suggestion.

I am struggling to understand this repo and get it functional for widget development on my dev PC. For me, it is not intuitive or easy to figure things out and get up and running. Perhaps I have misunderstood the purpose of this repo or am closer to getting everything working than I think.

I always struggle with issue reports like this because I always get the tone wrong and come across as really ungrateful and whiney. That is very much not my intent. I hope the detail provided below is seen as constructive criticism and in good taste. I genuinely want to work with this platform, help improve it and use it for work at various sites and make you guys some money in licensing (and us some money too for our scope of work). The plan would be to eventually integrate nurse call, access control, RTLS, BAS and other cloud platforms into the product and use the widgets as a "Single Pane of Glass" GUI along with the Rule Engine for custom logic and integration. Some of these I already have code for and could bring in quickly.

My expectations (perhaps wrong or too much) were:

1. clone the repo
2. see package.json and tsconfig.json in the root
3. do npm install or yarn install
4. look in examples folder and see various widgets.
5. configure some proxy settings to point to my dev thingsboard server
6. see scripts in package.json for start to run a local dev web server
7. try out some of the examples and see them on my browser

Widget example source code expectations (perhaps wrong or too much) were:

1. see imports of ThingsBoard interfaces, typedefs and classes at the top.
   • WidgetContext
   • IDynamicWidgetComponent
   • WidgetConfig
   • Datasource
   • RpcApi
   • IWidgetSubscription
2. see that the example subclasses some ThingsBoard Widget class.
3. have "IntelliSense" in WebStorm / VSCode (because TypeScript).
   • ctx is massive and having it type hinted as WidgetContext would go along way towards understanding how to use it.

Widget examples would have code for doing things like:

• use the RPC API
• subscribe to some values
• use the action API
• use datasources

(Likely many of the bundled widgets would suffice as examples if they were trimmed down a bit. Most examples don't need to look fancy or have fancy resizing operations, for example)

To fast forward to the very end, the example component code is literally just:

@Component({...})
export class ExampleComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

Where is ctx for example? So the example wasn't any help and certainly didn't come close to my expectations.

I took some time to look around the repo some more to see if I could make more sense of things.

I found widgets/builders/static-serve/index.ts which somewhat sounds like it might be a debugging server. But it is in the widgets folder and is some sort of builder (based on the folder name) but I didn't really see any "building" code in the short amount of time I spent looking at it. The folder naming alone is very confusing. The config is confusing too. Apparently it's just a string. But there is an StaticServeConfig interface showing what looks like it might hold some JSON. Everything is too abstract and I don't see any comments or JSON schema to help me out.

I found widgets/patches/ng-packagr+12.2.7.patch. What is this doing in the widgets folder? This isn't mentioned anywhere in the README. What do I do with it? It looks important.

I looked at custom-alarms-table-widget.component.ts and the selector is throwing a linting error (WebStorm) because it doesn't begin with "ts" (as specified in angular.json). I see some VSCode ignores in .gitignore so perhaps VSCode can be configured with more add-ons to pick stuff like that up. Also lines 691 and 692 show spelling mistakes on "aknowledge" instead of "acknowledge" (missing c after the first a). These are whatever mistakes.. just thought I'd mention them.

Learning from a 1000 line component class with massive blocks of commented out code is probably a really bad idea so I moved on.

I have no idea what the files in src/app/widgets/components/map are for. I checked usage of a few random exports and my WebStorm IDE didn't show any usage in the example widgets so I moved on. But maybe that is due to some missing typing (over use of any). No big deal.

The README in the root talks about a .jar file but I don't really see any Java code and the Widget exports I did from the UI myself created JSON files so I don't know what they are for / all about.

Wouldn't it make more sense to have a way to generate those JSON files of type interface WidgetType from the example code instead? Is there a better way to get complex widgets into a ThingsBoard server?

I tried looking in the UI for sample RPC code. The Led indicator Control widget is basically missing it's HTML and JavaScript code in the UI. Obviously the ThingsBoard dev team is doing their widget development outside their ThingsBoard GUI. Is using the Widget UI for developing less than very simple Widgets a reasonable, maintainable idea?

I was thinking this repo is intended for developers of complex widgets that are too complex for the ThingsBoard widget development UI. If not, could we perhaps work towards that?

I can create Angular sites outside the ThingsBoard framework just fine. I can add and configure devices with attributes and relations just fine. I can write custom rule chains and augment them with other attributes just fine. I can push in data via MQTT from external source just fine. I can use the web API and Swagger UI to manipulate data and delete my garbage data. What I can't quite get going is fancy widget development. Is this a pain point of the architecture or am I simply doing something wrong and or expecting too much?

If you made it this far, big thank you for your time.

[skewty]

Command Prompt.txt

See the log here for a fresh clone and run of mvn on my PC. TL;DR web page at http://localhost:5000 just shows:

[thclark]

@skewty could you re-open this please? It's exactly what I need and definitely hasn't been solved so far (this is exactly where I'm at now, having done I guess exactly the same as you)

[skewty]

I had to install Ubuntu (TB doesn't seem to run well in any recent versions of RHEL / Centos / Fedora) to get this to work. I was unable to get it to work on Windows. Didn't try Mac.

[danisal]

I'm on MacOS, and I do have the exact same problem, Cannot GET /, either I try the URL example they provide or just the base URL. Followed the steps and nothing 😔

[skewty]

I am running TB in podman (better version of docker) to develop now and that is working for me. Perhaps you can get it working via docker on MacOS.

[danisal]

@skewty I'm trying to run it inside a docker container like you suggested, but I'm currently facing some issues inside the container. Can you share your "dockerfile" to confirm I'm doing it correctly?

[skewty]

I am just running ThingsBoard's Dockerfile / image named thingsboard/tb-postgres:3.6.0.