Would you write a small front-end for hub.meshtastic.org?

Development
1

Hi ya’ll,

My queue is super full (as is most of the other current devs I think), so I thought I’d put this request out there. If you are a javascript/typescript/flutter/angular/dart/react/whatever-you-prefer sort of web frontend dev and want to help out/make a cool new open-source component that you would ‘own’, here’s my proposal:

So the mqtt (and soon the riot.im bridge) stuff has a small server component that uses the MQTT packets from devices that have opted to call in. This means we could do a cool live “map view”, also we could show some live stats on # of nodes connected etc…

I suck a such front-ends (and my queue is full). But if anyone else wanted to make this front end (must be client side javascript when finally built - because our server is currently dumb), I could easily make the following available:

  • A few REST endpoints that you could http GET to get JSON blobs of interesting server stats, recent public nodes we’ve heard from etc…
  • A websocket stream of JSON if you wanted a live stream of public text messages and node position messages.
  • Hosting of your built javascript

No pressure, but I bet it would be a lot of fun. You don’t need to be an expert but at least be a kinda serious about trying to make this go (so I don’t bother making endpoints that aren’t used)

3 Likes
2

Do we have an existing preferred map service api and /or js map component library to use under the hood?
To be clear, is the scope here to produce a js component that will eventually be consumed by hub.meshtastic or to produce the hub.meshtastic web app itself with said component as a starting point?

I would love to at least help with this effort. I love the idea of a live websocket stream of node packets and that should scale really nicely as the userbase grows. I think some crude mockups / wireframes would go a long way in giving this project a good direction.

1 Like
3

Leaflet allows to write code in provider agnostic way and switch map providers later.

1 Like
4

Looks very neat, and it seems to have a lot of usage and support. If the end goal is a reusable component for primary usage in the future hub.meshtastic web app, maybe we could use something like this under the hood to create an extensible / customizable web-component?

5

I think mostly the later: provide the dynamic frontend people see when they visit the ‘world summary view’ at hub.meshtastic.

6

I can write it, all map work I do with mapbox.js let me know if anyone has any objections https://docs.mapbox.com/mapbox.js/

I’m happy to scaffold an app with the following tech stack:

Snowpack,
Typescript,
React,
TailwindCSS,
Mapbox

2 Likes
7

@geeksville if you can find some example screenshots from other apps of the kind of layouts/features you’d like, I can start working

1 Like
8

That sounds great. I’ll do that in the next few days.

Btw - As a quick test I added a livedata based geoJSON endpoint:

http://hub.meshtastic.org/v1/geoJSON/nodes

Pasting that JSON into https://geojson.io/ gave me:

image
image1126×936 122 KB

It only has a few nodes right now because I just wiped the server and it forgot what it learned before. I assume in a few hours it should have more.

2 Likes
9

ok - more nodes running now. Thanks to you alpha testers who are providing this test data (it makes developing the server goo much easier)

image
image1148×691 116 KB

1 Like
10

A post was split to a new topic: Android app overrides “fixed position” nodes

11

GoTenna mesh actually has a map interface to display some based information about nodes:
https://imeshyou.gotennamesh.com/
I think we can do better than that and show more details about the nodes.

@geeksville, I know we include the node’s hardware now in the packets which will be cool to show, but one other thing that occurred to me this map that would be neat to see… If we can tell if a node is a dedicated relay / repeater somehow. The only way that occurs to me is if its is_router and has a fixed position, but that may be involving too many assumptions.

@sachaw, when you get that scaffolded out and pushed up, I’d love to contribute where you think you can plug me in.

2 Likes
12

I made some very simple POC: https://meshchatic.ert.pl/
GitHub - meehow/meshchatic: Meshtastic chat client

4 Likes
13

Omg. That’s so cool! Is it okay of I add a link to your site to the (currently bare) hub.meshtastic.org?

14

I’m about to push out one that’s a little more feature complete than this, but I’m happy to combine efforts

3 Likes
15

Sure, you can add a link. I’m going to change/improve “this and that” if people like it.

16

PM’d you on slack if your online about combining efforts.

17

This is excellent and great to see all those sites.

18

Also if any of ya’ll want to ‘self serve’ by adding new endpoints to the backend, here’s an example (the endpoint that serves up the geoJSON):

I can add build instructions soon but:

  1. It should build an run on virtually any OS if you do:
git clone --recurse-submodules https://github.com/meshtastic/meshtastic-backend.git
cd meshtastic-backend
./gradlew bootRun

It will then be serving on port 8080 (and talking mqtt to the mqtt broker)

If you prefer IDEs (I do), it is setup to work with the Intellij IDE community edition.

19

oops the instructions I gave above for building/running the backend locally were slightly wrong. I just added continuous-integration on github to test these new instructions: