Nothing is displayed.

[miggat]

Hello, i set up the plugin in SignalK with one test path:

I might be missing something, but when I navigate to http://openplotter-home:3000/signalk-instrument-display-plugin/ (link from SignalK > WebApps) a black page is displayed.

I see no errors on SignalK's server log, however, I see a few issues on chrome's console:

GET javascript:; net::ERR_UNKNOWN_URL_SCHEME

(index):687 Uncaught ReferenceError: yDown is not defined
    at swipe ((index):687:7)
    at HTMLDivElement.<anonymous> ((index):751:5)
    at HTMLDivElement.handle (jquery.min.js:3:13777)
    at HTMLDivElement.dispatch (jquery.min.js:3:10315)
    at q.handle (jquery.min.js:3:8342)

(index):466 Last update was NaNms ago

In between, I see several logs that look like it's working:

dayNight: day
(index):78 navState: moored
(index):97 connect()
(index):172 Loaded options:  {"style":"BandG","sources":[{"displayType":"number","key":"AWS","path":"environment.wind.speedApparent ","unit":"kn","decimals":1,"url":"openplotter-home:3000"}],"displays":[{"name":"mobile","pages":[{"layout":"1","context":"moored","sources":[{"source":1}]}]}]}
(index):632 changeCSS:  styles/BandG.css?ver=196 style
(index):177 options:  {style: 'BandG', sources: Array(1), displays: Array(1)}
(index):153 display:  "mobile"
(index):105 Options: {"style":"BandG","sources":[{"displayType":"number","key":"AWS","path":"environment.wind.speedApparent ","unit":"kn","decimals":1,"url":"openplotter-home:3000"}],"displays":[{"name":"mobile","pages":[{"layout":"1","context":"moored","sources":[{"source":1}]}]}]}
(index):236 Units: {"environment.wind.speedApparent":"m/s"}
(index):244 subscriptionMessage: {"context":"vessels.self","subscribe":[{"path":"environment.mode"},{"path":"environment.displayMode"},{"path":"navigation.state"},{"path":"environment.wind.speedApparent"}]}
(index):114 Skipping welcome message: {"name":"signalk-server","version":"1.46.3","self":"vessels.urn:mrn:imo:mmsi:224372630","roles":["master","main"],"timestamp":"2023-03-07T14:11:19.505Z"}

Additionally, I find this weird:

I thinks is quite likely that i have misunderstood or misconfigured something, but I've tried several things and i can't manage to make it work.

Any advise?

[htool]

The stylesheets are placeholders. They get filled in later by the config.
Try to change the source to '0'.
Do you see the menu at the start with the displayname options?

[miggat]

I changed the source to 0, restarted SignalK (and even restarted the RPi just in case), but I still see only an empty black page. This is the full log in chrome's console:

openplotter-home/:12          GET javascript:; net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
openplotter-home/:13          GET javascript:; net::ERR_UNKNOWN_URL_SCHEME
?display=mobile&page=1:67 dayNight: day
?display=mobile&page=1:78 navState: moored
?display=mobile&page=1:97 connect()
?display=mobile&page=1:172 Loaded options:  {"style":"BandG","sources":[{"displayType":"number","key":"AWS","path":"environment.wind.speedApparent ","unit":"kn","decimals":1}],"displays":[{"name":"mobile","pages":[{"layout":"1","context":"moored","sources":[{"source":0}]}]}]}
?display=mobile&page=1:632 changeCSS:  styles/BandG.css?ver=161 style
?display=mobile&page=1:177 options:  {style: 'BandG', sources: Array(1), displays: Array(1)}
?display=mobile&page=1:198 Set currentDisplayNr to 0 (mobile)
?display=mobile&page=1:205 page:  0
?display=mobile&page=1:632 changeCSS:  layouts/1.css?ver=890 layout
?display=mobile&page=1:105 Options: {"style":"BandG","sources":[{"displayType":"number","key":"AWS","path":"environment.wind.speedApparent ","unit":"kn","decimals":1}],"displays":[{"name":"mobile","pages":[{"layout":"1","context":"moored","sources":[{"source":0}]}]}]}
?display=mobile&page=1:236 Units: {"environment.wind.speedApparent":"m/s"}
?display=mobile&page=1:244 subscriptionMessage: {"context":"vessels.self","subscribe":[{"path":"environment.mode"},{"path":"environment.displayMode"},{"path":"navigation.state"},{"path":"environment.wind.speedApparent"}]}
?display=mobile&page=1:114 Skipping welcome message: {"name":"signalk-server","version":"1.46.3","self":"vessels.urn:mrn:imo:mmsi:224372630","roles":["master","main"],"timestamp":"2023-03-07T20:16:41.157Z"}
?display=mobile&page=1:637 numberOfBoxes:   1
?display=mobile&page=1:643 Drawing 1 boxes
2?display=mobile&page=1:687 Uncaught ReferenceError: yDown is not defined
    at swipe (?display=mobile&page=1:687:7)
    at HTMLDivElement.<anonymous> (?display=mobile&page=1:751:5)
    at HTMLDivElement.handle (jquery.min.js:3:13777)
    at HTMLDivElement.dispatch (jquery.min.js:3:10315)
    at q.handle (jquery.min.js:3:8342)
swipe @ ?display=mobile&page=1:687
(anonymous) @ ?display=mobile&page=1:751
handle @ jquery.min.js:3
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3
?display=mobile&page=1:466 Last update was 9931ms ago
2?display=mobile&page=1:687 Uncaught ReferenceError: yDown is not defined
    at swipe (?display=mobile&page=1:687:7)
    at HTMLDivElement.<anonymous> (?display=mobile&page=1:751:5)
    at HTMLDivElement.handle (jquery.min.js:3:13777)
    at HTMLDivElement.dispatch (jquery.min.js:3:10315)
    at q.handle (jquery.min.js:3:8342)
swipe @ ?display=mobile&page=1:687
(anonymous) @ ?display=mobile&page=1:751
handle @ jquery.min.js:3
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3
?display=mobile&page=1:463 Data timeout (10000ms) reached. Restarting websocket.
?display=mobile&page=1:123 WebSocket closed

Then I get the reconnection message every 10 seconds:

Data timeout (10000ms) reached. Restarting websocket

---

So I tried with Firefox, and the result is that I can see the path name and the unit, but no values at all. And also the same " yDown is not defined" error when I move the pointer around the page.

By looking at the nerwork tab, I can tell that the socket connection is opened and closed after receiveing a couple messages:

Let me know if there's any other info I can share to help diagnose

[htool]

It's strange and doesn't seem to be a problem on the browser side. I've used it on iphone, ipad, linux chrome and raspberry pi chrome and they all work.

Do other SignalK plugins work that utilize websockets?

[miggat]

Yes, I also use KIP (https://github.com/mxtommy/Kip) which is basically the same idea and works without problems.
Even more, I can connect to websocket using postman with no issues either (i removed the ?subscribe=none in the screenshot to show the mesages):

[htool]

As it's working here, it's difficult to debug.
Can you add
console.log('handleData' + data)
right after
function handleData (data) { ?

[htool]

(or console.log(data))

[miggat]

This is what i get

And after this, a bunch of

32?display=mobile&page=1:463 Data timeout (10000ms) reached. Restarting websocket.

[htool]

I don't see the speed come in. That would explain why it's not showing. But I don't know why it's not coming in...

[miggat]

No problem, I will investigate tomorrow and let you know

[miggat]

Found it, on line 98:

ws = new WebSocket((window.location.protocol === 'https:' ? 'wss' : 'ws') + "://" + window.location.host + "/signalk/v1/stream?subscribe=none");

With subscribe=none, no messages are received. If I remove it, everything works as expected.

[htool]

That basically asks for all updates. The source definition in the plugin config states which paths to subscribe to.
This means you probably have a typo/blank space in the path in the config.
Check the path in the Data Browser in SignalK and copy from there. Ensure no blank spaces are in the path.

[miggat]

I already copied the path from the Data Browser, and according to the fetched options and subscriptionMessage, it seems to be correct:

Loaded options:  {"style":"BandG","sources":[{"displayType":"number","key":"AWS","path":"environment.wind.speedApparent","unit":"kn","decimals":1}],"displays":[{"name":"mobile","pages":[{"layout":"1","context":"moored","sources":[{"source":0}]}]}]}

Units: {"environment.wind.speedApparent":"m/s"}

subscriptionMessage: {"context":"vessels.self","subscribe":[{"path":"environment.mode"},{"path":"environment.displayMode"},{"path":"navigation.state"},{"path":"environment.wind.speedApparent"}]}

However, the handleData function is only called for environment.mode and navigation.state.

Edit:
Even more, I can see the WS message sent to the server:

[htool]

The console.log debug statement however didn't show any speedApparent messages. Why are they not coming in?
Can you add some other sources of active data?

[miggat]

I added navigation.speedOverGround, and it works perfectly

[miggat]

OMG, i'm sorry i made you lost this amount of time. The problem was all the time in my configuration of "SignalK Delta Simulator" plugin, which contained a blank space after the AWS path.

Fixed that and everything works as expected:

Thanks for your patience!

[htool]

No worries - happy others are using it :)