[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?