Signal K•8mo ago

Signalk Icon on B&G Zeus

There is a Signalk icon that shows on our B&G Zeus screen but it's just a white page when I open it. Is it supposed to do something? There is also a Victron page and it shows all our Cerbo info.

43 Replies

Scott Bender•8mo ago

It’s supposed to show the sk admin ui

ray_sabadoOP•8mo ago

Maybe I'm not letting it sit there long enough. Weird, on my Zeus 3S, I only get a blank white page.

HansT•6mo ago

That can be due to security settings which would require the virtual keyboard. The html5 environment is quite picky from my experience. You can have other tiles there as well if you want. See https://github.com/htool/signalk-mfd-plugin

Andrea Maci•6mo ago

hi, I also noticed this thing since I use signalk in Venus Large in the Cerbo GX and I connected the Cerbo via ethernet to the Zeus 3S. It is convenient to see the Cerbo information (both electrical and tanks) in the chartplotter. It would be fantastic if through the SK app that appears on the Zeus you could activate an App installed on SK!! I tried to ask Victron support about this icon that appeared in the apps visible in the Zeus, but as soon as they understood that I was talking about SignalK they sent me here with the usual sentence "Signalk is not a software managed by Victron". Do you think it is plausible to think that Victron could solve the issue?

Teppo Kurki•6mo ago

no, this is 100% on the SK side the mechanism is works so that - SK server advertises "here's an address for a webapp, use this icon for it" - MFD shows the button - user presses the button => MFD tries to open the webpage the webpage is the SK Admin view, and for some reason it does not we'd first need to figure out why it does not and then fix the issue, provided it is fixable with a reasonable amount of work ..or we could add a bit of configuration so that SK server would advertise another (or several) webapps like instrumentpanel or KIP and the authors of these might need to figure out if and how the webapp works on each different MFD which is a bit hard if you don't happen to have MFDs in your home lab

Teppo Kurki•6mo ago

here's a tidbit related to debuggin MFD webapps https://github.com/victronenergy/venus-html5-app?tab=readme-ov-file#34-simulatingdebugging-mfd-ui-locally

GitHub

GitHub - victronenergy/venus-html5-app: HTML5 App including Javascr...

HTML5 App including Javascript library that communicates with Venus OS over MQTT websockets - victronenergy/venus-html5-app

Teppo Kurki•6mo ago

so doable, but definitely not something Victron would invest their developer time in

Andrea Maci•6mo ago

I would gladly help with testing, but unfortunately I can't program

UncleBulgaria•6mo ago

I have also noticed this on my Zeus 2. How is signalk advertising itself? Is it over the N2k? Or is it over the IP network?

Teppo Kurki•6mo ago

Greg•3mo ago

Im also interested in trying to get SK working on Simrad MFD. What can we do to help SK developers fix this?

Teppo Kurki•3mo ago

@HansT any advice here? Apart from combining a capable developer with a physical device to test with? And even then, what is a practical workflow / how do you figure out what is failing? Or i could get a Zeus and tackle this myself, that might also cover the sister Navico brands

HansT•2mo ago

Yes, that embedded web browser is very limited. It's Qt stuff as far as I remember and one thing I didn't get working myself was the virtual keyboard. And input/search box can trip a warning making it not render the page. So for starters instead of the main page, we could advertise the webapps page (without the left menu). That would also remove the need for what I've been doing with the multiple IPs tied to an interface approach to allow multiple webapps to run from 1 Pi. So updating the url in ./src/interfaces/mfd_webapp.ts (and potentially a parameter to hide the left menu)

Teppo Kurki•2mo ago

If admin ui does not load then webapps page won’t probably either I guess one way forward is a separate simple webapps page and advertise that Could be a plugin, as easier to iterate

Hoeken•2mo ago

@HansT have you found a good way to debug apps on the mfd? I've got my own apps for digital switching and my watermaker board and they are working fine. i'm using html5, websockets, lots of JS, etc. Some of the heavier stuff it does not like (graphing libraries) but you can do quite a bit. Unfortunately debugging it is mostly trial and error since I don't know what browser they are running under the hood and getting errors can be complicated. @Teppo Kurki moving the navico mfd stuff to its own plugin would be great. there's not much call for the main server UI on a chart plotter, but having access to all the web based plugins would be very nice. I'm finding that the web plugins + Tailscale on the Pi make for an excellent setup where you can access the same UI for your boat wherever you have an internet connection through the same url every time. Adding that same UI to the chart plotters would be right in line with that. One useful thing on the javascript side is detecting if the browser is a navico mfd based on the query string that the mfd loads the url with. its in the format of: http://x.x.x.x/url?mfd_name={name}&mfd_model_detail={detail}&lang=en&mode={day|night}&brand={brand} Here's my code:

function isNavicoMFD() {
  if (getQueryVariable("mfd_name") !== null)
    return true;

  return false;
}

function getQueryVariable(name) {
  const query = window.location.search.substring(1);
  const vars = query.split("&");
  for (let i = 0; i < vars.length; i++) {
    const pair = vars[i].split("=");
    if (decodeURIComponent(pair[0]) === name) {
      return decodeURIComponent(pair[1] || "");
    }
  }
  return null; // Return null if the variable is not found
}

function isNavicoMFD() {
  if (getQueryVariable("mfd_name") !== null)
    return true;

  return false;
}

function getQueryVariable(name) {
  const query = window.location.search.substring(1);
  const vars = query.split("&");
  for (let i = 0; i < vars.length; i++) {
    const pair = vars[i].split("=");
    if (decodeURIComponent(pair[0]) === name) {
      return decodeURIComponent(pair[1] || "");
    }
  }
  return null; // Return null if the variable is not found
}

On a related note, your app can access that mode query parameter to automatically adjust light/dark mode which is a big win.

Teppo Kurki•2mo ago

@Hoeken we can always either remove the server mfd integration or disable it by default & use one or more plugins plugins are also easier to iterate, as they can be independently published & updated once we are happy with the functionality and it seems valuable enough we include it by default in server installs

Hoeken•2mo ago

@Teppo Kurki yep, agreed completely. is there a meta api that can be used to get a list of the available web apps?

Teppo Kurki•2mo ago

/skServer/webapps

Hoeken•2mo ago

Lovely. I just wrote a little test script to publish multiple apps from the same ip address and it seems to work. I'll take a look at the plugin by @HansT and see if I can modify it. It would be great to have each plugin show up as its own app. @Teppo Kurki @HansT I just forked Hans' plugin and made a proof of concept. Github is here: https://github.com/hoeken/signalk-mfd-plugin/ I eliminated the need for configuring extra IP addresses... it works just fine sending multiple messages with the info for each webapp. I also changed the config to a whitelist / blacklist where you just enter a comma separated list of plugins. It uses that /skServer/webapps api to load a list of the plugins and pull in the icon and name. I was able to determine http/https from app.config.settings.ssl, but I didn't dig deep enough to determine how to get the server port. for now its hardcoded to 80. I should probably change that to 80/443 based on that ssl flag. @Teppo Kurki any suggestions on how to get the port the server is running on from within a plugin? Unfortunately the crappy browser doesn't really load any of the plugins very well. I was really hoping to be able to use my anchor alarm plugin from the MFD. I guess I need to do some debug and see what is causing that. Hopefully not the map library itself... Seeing as how the actual SignalK app on B&G MFDs is broken, it would probably be good to disable that or add a configuration option to enable it. Especially now that we know we can show individual apps.

Scott Bender•2mo ago

settings vars here https://github.com/SignalK/signalk-server/blob/master/src/config/config.ts

GitHub

signalk-server/src/config/config.ts at master · SignalK/signalk-ser...

An implementation of a Signal K central server for boats. - SignalK/signalk-server

Hoeken•2mo ago

Thanks @Scott Bender That really helps I'm making a call to rest api like this:

fetch(`${protocol}://localhost:${port}/skServer/webapps`)

fetch(`${protocol}://localhost:${port}/skServer/webapps`)

should I use app.config.getExternalHostname() or keep it as localhost?

Scott Bender•2mo ago

I can’t remember if you need to use sslport

Hoeken•2mo ago

it will default to 443 with https, but who knows if someone will change that port on their own install

Scott Bender•2mo ago

Keep it localist

Hoeken•2mo ago

done

Scott Bender•2mo ago

the config.setting.sslport

Hoeken•2mo ago

I'm using getExternalPort() for that and it looks like it gives the right port based on ssl

export function getExternalPort(app: WithConfig) {
  if (Number(process.env?.EXTERNALPORT) > 0) {
    return Number(process.env?.EXTERNALPORT)
  }
  if (app.config.settings.proxy_port) {
    return app.config.settings.proxy_port
  }
  return app.config.settings.ssl ? getSslPort(app) : getHttpPort(app)
}

export function getExternalPort(app: WithConfig) {
  if (Number(process.env?.EXTERNALPORT) > 0) {
    return Number(process.env?.EXTERNALPORT)
  }
  if (app.config.settings.proxy_port) {
    return app.config.settings.proxy_port
  }
  return app.config.settings.ssl ? getSslPort(app) : getHttpPort(app)
}

Scott Bender•2mo ago

I don’t think you should use that It could be different if there is a proxy involved And could possibly only be accessed from the outside?

Hoeken•2mo ago

This is the plugin calling the rest api because I'm not sure how to access the meta info about plugins otherwise.

Scott Bender•2mo ago

Right, so you do not want to be using the proxy if there is one

Hoeken•2mo ago

ahhhh okay i see what u mean

Scott Bender•2mo ago

And it could be a different port than what’s listening on local host

Hoeken•2mo ago

Is this better?

    if (app.config.settings.ssl) {
      protocol = 'https';
      port = app.config.getSslPort();
    } else {
      protocol = 'http';
      port = app.config.getHttpPort();      
    }

    if (app.config.settings.ssl) {
      protocol = 'https';
      port = app.config.getSslPort();
    } else {
      protocol = 'http';
      port = app.config.getHttpPort();      
    }

Scott Bender•2mo ago

Yep

Hoeken•2mo ago

uh oh, i'm back to my original problem... the getSslPort() and getHttpPort() functions arent available in the app.config object that is passed into a plugin. There is also no app.config.settings.port or app.config.settings.sslport

Scott Bender•2mo ago

hmm. I thought it was the same object. Not in front of a computer so can’t easily looking into it now. I get can back to you tomorrow. Or Teppo will chime in…

Teppo Kurki•2mo ago

it is not, it is a proxy and only handpicked stuff is available. but we can easily add more, as needed. @Hoeken have a look at (messy) plugins.ts or I can help, if you can list what you need are we talking about 1. getting a list of webapps from the plugin code 2. getting server's external addresses, ports and protocol from the plugin code 3. both

Hoeken•2mo ago

@Teppo Kurki mostly its #2 - I'm getting the plugin data from /skServer/webapps, but in order to do that in a generic way, I need the port and protocol to build that url for the request. if there was a way to get that internally, that would be great. For the publish information, I need the plugin name, display name, icon, and protocol/port. I'm not familiar with a proxy setup, but I think you want either the http or ssl port for this and not the proxy port? I just use the IP address of the signalk interface as in the existing code. If you guys are willing to make changes to the server side, I would think that adding webapp information to the app.getFeatures() call would be the best route. Probably adding a appIcon and/or webappEnabled flag would be enough information for my plugin. Then also exposing the

app.config.getSslPort();

app.config.getSslPort();

and

app.config.getHttpPort();

app.config.getHttpPort();

in the config object passed to a plugin would give me all the data needed. As it is now, its working just fine with the API, but I'm not sure what will happen with the edge case of someone using a proxy or how widespread that even is. This should all be over the local subnet so I would think a proxy isn't really wanted.

Teppo Kurki•2mo ago

I'll see about adding all this to the plugins' Server API note that a Pi may well have multiple network interfaces, like even the basic case of both wired and wifi (with maybe Pi as an access point)

Teppo Kurki•2mo ago

https://github.com/SignalK/signalk-server/blob/master/src/interfaces/mfd_webapp.ts#L75-L81

GitHub

signalk-server/src/interfaces/mfd_webapp.ts at master · SignalK/sig...

An implementation of a Signal K central server for boats. - SignalK/signalk-server

Hoeken•2mo ago

@Teppo Kurki yep i pretty much copied the code from that mfd server code where it gets a list of interfaces from the os and iterates on each of them to do the udp broadcast.

AdrianP•2mo ago

app.getFeatures() returns a list of plugins and APIs available on the server. WebApps should appear in plugins

Hoeken•2mo ago

@AdrianP yes it does, but it doesnt give the path to the icon which is needed in this application

Gaming

Programming

Signalk Icon on B&G Zeus

Did you find this page helpful?