[gsoc22] display number of clients

[mwarning]

Meshviewer allows to display the number of clients connected as small circles. Some mods show the number of 2.4 and 5GHz clients as different colored circles.

Is there a way to add this feature without having to modify netjsongraph.js? Maybe support some hook into netjsongraph.js for doing this? Maybe this is already possible?

Here is some code: https://github.com/mwarning/MeshGraphViewer/blob/master/www/utils.js#L6

[piy3]

@mwarning @nemesifier Hi, I am Piyush currently pursuing B.Tech in Computer Science , I checked the code and its possible to have this enhancement just the thing is we need the data of which client is connected to which band (2.4 or 5Hz) below is a quick implementation: bands is array of client's band

function positionClients(ctx, p, startAngle, clients, startDistance, bands) {
  if (clients.length === 0) {
    return;
  }
  
  const radius = 10;
  const a = 2.5;
  let angle = startAngle;
  let distance = startDistance;
  let count = 0;
  
  for (let orbit = 0; orbit < clients.length; orbit++) {
    const orbitClients = Math.floor(2 * Math.PI * distance / (2 * radius));
    for (let i = 0; i < orbitClients; i++) {
      if (count >= clients.length) {
        return;
      }
      
      angle += 2 * Math.PI / orbitClients;
      const x = p.x + distance * Math.cos(angle);
      const y = p.y + distance * Math.sin(angle);
      
      **// Set color based on band**
      if (bands[count] === '2.4GHz') {
        ctx.fillStyle = 'red';    // Color for 2.4GHz clients
      } else if (bands[count] === '5GHz') {
        ctx.fillStyle = 'blue';   // Color for 5GHz clients
      } else {
        ctx.fillStyle = 'black';   // Default color in case of someother band
      }
      
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, 2 * Math.PI);
      ctx.fill();
      count++;
    }
    distance += radius * a;
  }
}

const clients = [...];  // Array of clients
const bands = ['2.4GHz', '5GHz', '2.4GHz', '5GHz', ...];  // Array of bands
positionClients(ctx, p, startAngle, clients, startDistance, bands);

Instead of seperate array of bands , we can have array of objects with clients count and corresponding band. Thankyou. I am looking forward for your reply.

[mwarning]

Fyi, this is the equivalent code for the Freifunk Meshviewer: https://github.com/freifunk/meshviewer/blob/1d27d3960e27f0f7da1d33d389bdbaeebb3e6308/lib/utils/helper.ts#L189

They use the numbers in node.clients_wifi24 and node.clients_wifi5. Maybe we should do the same here. Then the next step would be to create a merge request and get it merged. @piy3 do you like to create a merge request?

@nemesifier any imput from your side?

[NikhilPatil2005]

I'd like to enhance network visualization in NetJSONGraph by adding client connection visualization without modifying the core library. This would involve developing a plugin system or overlay that displays connected clients as small colored circles around nodes, with different colors for 2.4GHz and 5GHz clients. The solution would use existing hooks or a separate canvas layer to maintain compatibility while providing clear insights into client distribution and density. This feature would help network administrators better understand node load and client distribution at a glance.

[nemesifier]

@mwarning we're working on this in https://github.com/openwisp/netjsongraph.js/pull/411.