Custom UI for a WebThing not working as expected

WebThings
1

I am building a WebThing using the Framework. I also developed my custom UI using React. I tried to specify the custom UI in the Thing, but the Gateway doesn’t show the link as expected according to this doc.

This is how I set the UI HRef:

class ThermostatThing extends Thing {
  constructor() {
    super('Thermostat', 'Thermostat', 'Thermostat Thing');

    this.setUiHref('/index.html');

    // ...
  }
}

This is how I start the server to be able to serve the index.html:

const thermostatThing = new ThermostatThing();
const server = new WebThingServer(new SingleThing(thermostatThing), 8888);
server.app.use(express.static('public'));
// ...

And this is the relevant links part for the JSON generated:

"links": [
    {
      "rel": "alternate",
      "mediaType": "text/html",
      "href": "/index.html"
    }
  ]

Any clue why is it not working ?

2

One issue is probably that the gateway is essentially proxying your web thing and giving it a new Thing Description with a URL under the gateway’s domain, and that relative URL is being resolved against the gateway’s domain. Try adding the full URL in the link rather than a relative URL. This is arguably a bug in the gateway we should fix.

If no link icon is appearing at all, then I’m not sure what’s wrong.

3

@benfrancis you are right, specifying the full url solves the problem.

Guessing the base url from a WebThing server can be quite difficult depending on how it is deployed, should I open an issue in Github to request the Gateway to resolve the custom UI relative links according to the Thing base url ?

4

Yes, that would be helpful thank you. Relative to the original thing URL (as opposed to the new one the gateway gives it).