freifunk / meshviewer Goto Github PK

Hopglass currently has features which meshviewer does not have.

• Show client count in the local mesh cloud/Anzeige der Nutzer in der lokalen Wolke #31
• Highlight nodes with an uplink in a different color (blau) #30
• Hardware-Images/Routerbilder #29
• showing Radio Channel (and Airtime) on map

To reach feature parity, we could implement these into this meshviewer, so that development does not break up into a magnitude of meshviewer projects and activly maintained repositories.

Additional context

I am trying to push the features developed by freifunkstuff upstream.
See: freifunkstuff/meshviewer-ffle#1

After #46

Unfortunately Vite doesn't support browserlist. I would recommend NOT to use the workaround from the issue, because we will then pull in another not so great maintained dependency and add more complexity to the build configuration. Build configurations always start simple and end up to be monsters by adding quirks, workarounds and other crazy stuff. We shouldn't do that (again).

Instead we should use https://vitejs.dev/config/build-options.html#build-target It defaults to modules, means:

• Firefox >= 78
• Safari >= 14
• Chrome >= 87
• Edge >= 88

If the list is good, we can just close this issue.

Expected Behavior

Overriding icon colors in local config should change the icon colors in the About tab, too.

Current Behavior

The icon colors on the About tab seem to be hardcoded.

Possible Solution

Steps to Reproduce

    "icon": {
      "base":{
        "fillOpacity":0.8,
        "opacity":0.8,
        "weight":2,
        "radius":6,
        "className":"stroke-first"
      },
      "online":{
        "fillOpacity":1,
        "opacity":1,
        "color":"#1566A9",
        "fillColor":"#998877"
      },
...

Context

Screenshots

The current code base hides any valuable information what a variable eventually does behind a mostly one character name.
The fact that there are no type hints on parameters makes development and debugging much harder than it should be.

I would propose to do a bigger "rewording" in which most (if not all) variables are renamed.
By using more useful type hints (TypeScrtipt anyone? -> #52) make the whole source code easier to understand (might be a good idea to fix #13 (Migrate away from Gulp) before it to have a clean build env).

We migrated from https://github.com/ffrgb/meshviewer here. The other project showed contact information on each node owner. That was very helpful in many cases.

I think data protection considerations do not apply here, because sharing any information is optional for each node owner.

I do understand that some communities don't want this, therefore this should be configurable via a global toggle.

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce

Context

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

Screenshots

Describe the solution you'd like

The filters on the statistics page should appear on the url, maybe with # or ? after the actual URL or parsed by the server in between slashes /
This is useful when I create a selector, then reload the page or exit the browser to return later, that all filters are gone.

Also it allows for linking to filtered maps.

Is your feature request related to a problem? Please describe.

We are in charge for the Freifunk networks of two cities. Each city has its own domain and its own public website.
We would like to run a Meshviewer instance for each of the domains, only showing the domain's nodes, using a common (global) meshviewer.json.

Describe the solution you'd like

Add a config option, e.g. "domainFilter", where one can give one or more domain names. Nodes from domains not listed get ignored.

Describe alternatives you've considered

Alternatively we would have to run several Yanic instances, or create filters for each domain that read meshviewer.json, removes all nodes not belonging to the desired domain, and feeds the result to Meshviewer.

Additional context

At the moment the map shows the number of connected clients and way they are connected. Less metadata in the map is more good - like for privacy reasons for example. Some other freifunk mesh maps do not disclose how many devices are connected atm.

Describe the solution you'd like

Deactivation of the clientnumber and connection type (2.4 GHz,5GHz and other) in the meshviewer

because less data is more good.

To reproduce:

• check out the main branch
• rm -rf node_modules
• npm i

Console output:

npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead

Both deprecation warnings depend on a upstream issue: vite-pwa/vite-plugin-pwa#452 It should be updated as soon as upstream is fixed.

Is your feature request related to a problem? Please describe.

The node graph starts centred in the upper left corner and then is moved to focus some node for example.

Describe the solution you'd like

It would be nice if it would load with all nodes roughly centred.

Expected Behavior

In v12.3.0 the config (see below) kicks in the dark mode. Black background, inverted textcolors etc.

Current Behavior

Since v12.4.0 this does not work anymore. The normal light mode css stuff is used.

Steps to Reproduce

My config looks like this:

{
    "mapLayers": [
      {
        "config": {
          "mode": "night",

1. use mode: night in one of your mapLayers
2. reload the website and switch to the given mapLayer

Context

Your Environment

• Version used: v12.4.0
• Browser Name and version: LibreWolf v120.0-1
• Operating System and version (desktop or mobile): macOS 14.2.1
• Link to your project: https://hannover.freifunk.net/friedhof/ (irrelevant, since I reverted back to v12.3.0

Screenshots

Your Environment

Firefox on Android (Android 14, Pixel 7 Pro)

Expected Behavior

opening and closing the search's (strg+f) keyboard shouldn't move the viewport

Current Behavior

I open the search, the keyboards gets opened and the viewport moves upward. This does not happen on Chrome on Android. It also doesn't happen on other web pages on Firefox on Android.

Why is this an issue? because if you click anything while the keyboard is opened then Firefox will click on the page but close the keyboard first. The touch ends up on a different position of the viewport than intended, which can be quite annoying:

Steps to Reproduce

https://youtu.be/5FwTLYSi0C0?si=ztS7p6prMag7pM7R

Does anyone have an idea why the viewport moves at all? it moves upwards with the keyboard. Is this a css setting?
I'm not sure, yet, whether this is a bug in Firefox or this page. I haven't found any other page, yet, where the view port moves like this

Is your feature request related to a problem? Please describe.

Gulp is no longer really maintained.

Describe the solution you'd like

Migrate to something actively maintained.

Describe alternatives you've considered

n/a

Additional context

n/a

I'm not sure if upstream would be interested in the deprecation notice; I assume it has already been tried to contribute it back but was declined?

edit: consider the next portion nevermind

If so, any chance we could open a feature-branch in this repo, to collaboratively work on the deprecation list without having to filter the relevant commits to cherry-pick each time we rebuild our map

I think the feature is a really worthwhile addition but maintaining it locally will becoming an utter pain. I heard @grische plans on updating their copy of the list in the next days as well.
Maybe we can focus our efforts here?

edit

I think everybody here knows feature branches; but for others:
One would open a branch which contains every commit that touches the deprecation-list and only that.
The goal would to have this branch to be able to merge into your local repo without much trouble.

Describe the solution you'd like

the right column could be consisting of link's that add the entry to the current list of filters or replace an existing filter:

Clicking the model name could be filtering by that name, the map would be filtered instantaniously.
If you then exit the node info by the x-button then you'd see the filtered node list on the tabs statistics/nodes.

Expected Behavior

Firmware-Version is sorted newest to oldest

Current Behavior

sort order: numbers come before letters when they should come afterwards
2019 is displayed before v2019 even though v2019 is classified as newer by the autoupdater (same goes for v2023.2 for example)

root@ffac-test-7360v2:~# opkg compare-versions "2019" '>>' "v2019"
root@ffac-test-7360v2:~# echo $?
1
root@ffac-test-7360v2:~# opkg compare-versions "2019" '>>' "2018"
root@ffac-test-7360v2:~# echo $?
0
root@ffac-test-7360v2:~# opkg compare-versions "2019" '>>' "2023"
root@ffac-test-7360v2:~# echo $?
1

Steps to Reproduce

open https://map.aachen.freifunk.net/ and head to the statistics tab to view the firmware version column.

Is your feature request related to a problem? Please describe.

After filtering some values in the statistics tab, a reload removes those filters.

Describe the solution you'd like

It would be cool to share a set of filters within the URL.

Describe alternatives you've considered

Some kind of button to copy a fixed "permalink" which describes the current view

Additional context

It would be nice, if the filters would also apply to the tab that displays new/offline nodes :)

i prefer the use of semantic-release.
Thats create automaticaly releases semantic-version based an conventional commits.

So every commit message must have the conventional commit standard:

• fix(component): for bugfix
• feat(component): for features
• chore(docs): for docs
• an ! in the prefix. e.g. (component)!: for breaking change (which create a new major version)

i switch that already for yanic ...

Dear Santa :-),

It would be great to be able to use a ruler on the Meshviewer to calculate distances between nodes or any potential node sites which do not have a mesh link yet. Something like what this page provides: https://map.meurisse.org/

Is your feature request related to a problem? Please describe.

Currently it's a bit cumbersome to switch back and forth between a meshviewer map and https://map.meurisse.org for instance for planning potential nodes. Especially for 60GHz links the achievable distance is often pretty strict/limited, but (sort of) well defined:
https://i.mt.lv/cdn/product_files/chart4_220326.pdf
https://i.mt.lv/cdn/product_files/ptp_210150.pdf
It would be great to be able to use a ruler directly on a meshviewer map to check the feasibility of a potential link.

Describe the solution you'd like

1. add a ruler icon next to the coordinate picker
2. once clicked allow adding lines on the map and display the total distance similar to what map.meurisse.org does
3. once clicking the ruler icon again then the drawn lines should be cleared

Describe alternatives you've considered

An alternative (or addition?) would be:

1. add a circle icon next to the coordinate picker
2. once clicked and after clicking anywhere on the map again, open a box (similar to where the coordinate picker has its options on the left side) with a field "Radius" where one can set a distance in meters
3. once the distance is set, a ring with the selected radius is drawn around the previously clicked point on the map

Yet another alternative of the alternative:

• simply add a draw circle option with a radius setting to the settings box of the current coordinate picker

Edit:

Additionally, there could also be two fields for "aperture angle" and "direction angle", to turn the circle into pizza slices. Which would be handy for sector antennas.

Is your feature request related to a problem? Please describe.

the twitter handle is @freifunk

Describe the solution you'd like

make Twitter handle adjustable via config so a community can add there own Twitter/x handle:

When clicking on a node and moving the map, the white labels stay on the screen sometimes

Expected Behavior

Label should vanish when moving the mouse away from it

Current Behavior

label stays, the error is accumulative (see picture)

Possible Solution

Steps to Reproduce

1. Open map, klick on a node (keep pressed), move mouse
2. White label stays when releasing the mouse button

Context

Your Environment

• Version used: 12.3.0
• Browser Name and version: Firefox, Brave, Chrome, Edge
• Operating System and version (desktop or mobile): Windows 11, Linux Mint XFCE (latest)
• Link to your project: https://hannover.freifunk.net/karte/

Screenshots

Describe the solution you'd like

It would be cool if the h2 (node name) at the top of the #infobox would link to mesh nodes.
We'll probably implement this ourselfs for Aachen at some point. This is just an issue so I remember the idea :)
https://map.aachen.freifunk.net/#!/de/map/0c0e76cf3a42
http://ffac--govegan.nodes.ffac.rocks/cgi-bin/status

as you can see from the example node, certain characters need to be replaced like #
Aachen replaces them by - but this could be made variable.

Aachen proposes a scheme like:
nodename.nodes.communitydomain.tld

There has not been a release since September.
It would be good to have a release which includes the latest attribution and variables renames as well as the switch to vite.

I would call it v12.4 as it is not just a small patch release.

What do you think @MyIgel ?

This would help people pulling this repo from the meshviewer-build.zip

Is your feature request related to a problem? Please describe.

image based tiling is legacy, vectors are smaller (and has no "zoom" problem)

Describe the solution you'd like

using Leaflet.VectorGrid plugin. You must initialize a VectorGrid.Protobuf with a URL template, just like in L.TileLayers. The difference is that you should define the styling for all the features.

see https://maplibre.org/martin/42-using-with-leaflet.html

Describe alternatives you've considered

switch to another library for map like:

• maplibre recommended
• deck-gl
• mapbox

Additional context

We like to migrate to https://martin.maplibre.org/ as tileserver.

After #46

To catch errors in the code and improve maintainability we should switch the codebase to TypeScript. This could be done in combination with #39 .

I can provide the setup for a file, ESLint etc. as a starting point.

The decision if an device is deprecated need major rework.
Currently, it's based on a simple list - maybe it should be extended by Regex, and needs more verification.

It would be quite cool if you could also filter the deprecation status on the map under statistics to directly display the devices that are no longer supported.

When a custom color for new, online, offline or lost is set on the map, the legend in the about config stays with the default colors.

Expected Behavior

The about dialog should show the correct used colors defined in the config.
I think, that this is also an upstream issue.

Current Behavior

Changing the node color does not change the legend color in the legend-online scss class in about.js:

https://github.com/freifunk-ffm/meshviewer/blob/10ab1ead2c1c0e57674dc1d81be4bfccdcbc6877/lib/about.js#L10

Possible Solution

Steps to Reproduce

Context

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

Screenshots

After switchong from the node graph http://localhost:8080/#!/en/graph/9cc7a67853ea back to the map view (or fast switching between them) i get a

Uncaught TypeError: u is null
    Y index-592e0aaf.js:17419
    y index-592e0aaf.js:17421
    setTimeout handler*Y index-592e0aaf.js:17420
    y index-592e0aaf.js:17421
    setTimeout handler*Y index-592e0aaf.js:17420
    y index-592e0aaf.js:17421
    setTimeout handler*Y index-592e0aaf.js:17420
    y index-592e0aaf.js:17421
    setTimeout handler*Y index-592e0aaf.js:17420
    y index-592e0aaf.js:17421
    setTimeout handler*Y index-592e0aaf.js:17420
    gotoNode index-592e0aaf.js:17594
    f index-592e0aaf.js:12766
    f index-592e0aaf.js:12765
    w index-592e0aaf.js:12800
    resolve index-592e0aaf.js:12539
    Dn index-592e0aaf.js:12433
    resolve index-592e0aaf.js:12538
    Dn index-592e0aaf.js:12433
    resolve index-592e0aaf.js:12535
    _onLocationChange index-592e0aaf.js:12732
    _listen index-592e0aaf.js:12711
    qt index-592e0aaf.js:12313
    gg index-592e0aaf.js:12814
    p1 index-592e0aaf.js:22913
    m1 index-592e0aaf.js:22961
    _1 index-592e0aaf.js:22963
    sd index-592e0aaf.js:1
    <anonymous> index-592e0aaf.js:22966

in if (clearTimeout(y), !st && u.alpha() > 0.3) { of

I = 3,
      T = 0.01;
      Ht.setTransform(f);
      function z() {
        a.width = o.offsetWidth,
        a.height = o.offsetHeight,
        Ht.setMaxArea(a.width, a.height)
      }
      function F(q) {
        f.x = q.x,
        f.y = q.y,
        f.k = q.k
      }
      function Y(q, st) {
        if (clearTimeout(y), !st && u.alpha() > 0.3) {
          y = setTimeout(function () {
            Y(q)
          }, 300);
          return
        }
        var A = q(),
        $ = A[0],
        E = A[1],
        O = A[2],
        D = {
          k: O
        };
        D.x = (a.width + e.getWidth()) / 2 - $ * O,
        D.y = a.height / 2 - E * O;
        var W = {
          x: f.x,
          y: f.y,
          k: f.k
        },
        R = Rh(W, D),
        G = po(
          function (K) {
            if (K >= b) {
              G.stop();
              return
            }
            var et = R(zy(K / b));
            F(et),
            window.requestAnimationFrame(U)
          }
        )
      }
      function X(q) {

Originally posted by @MyIgel in #46 (comment)