Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[TASK] Different colors on map and forcegraph for clients

Browse Source
This commit is contained in:
Geno 2017-10-29 01:38:43 +02:00 committed by Xaver Maierhofer
parent b3ef2460b3
commit 10ab1ead2c
No known key found for this signature in database
GPG Key ID: 7FDCE23FD2EC9FE8
10 changed files with 93 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
lib/about.js
View File

@ -4,7 +4,18 @@ define(function () {
return function () {
this.render = function render(d) {
d.innerHTML = _.t('sidebar.aboutInfo') +
'<h4>' + _.t('node.nodes') + '</h4>' +
'<p class="legend">' +
'<span class="legend-new"><span class="symbol"></span> ' + _.t('sidebar.nodeNew') + '</span>' +
'<span class="legend-online"><span class="symbol"></span> ' + _.t('sidebar.nodeOnline') + '</span>' +
'<span class="legend-offline"><span class="symbol"></span> ' + _.t('sidebar.nodeOffline') + '</span>' +
'</p>' +
'<h4>' + _.t('node.clients') + '</h4>' +
'<p class="legend">' +
'<span class="legend-24ghz"><span class="symbol"></span> 2.4 Ghz</span>' +
'<span class="legend-5ghz"><span class="symbol"></span> 5 Ghz</span>' +
'<span class="legend-others"><span class="symbol"></span> ' + _.t('others') + '</span>' +
'</p>' +
'<h3>AGPL 3</h3>' +
'<p>Copyright (C) Milan Pässler</p>' +

2
lib/forcegraph/draw.js
View File

@ -21,8 +21,8 @@ define(['helper'], function (helper) {
function drawDetailNode(d) {
if (transform.k > 1) {
ctx.beginPath();
helper.positionClients(ctx, d, Math.PI, d.o.clients, 15);
ctx.fillStyle = clientColor;
helper.positionClients(ctx, d, Math.PI, d.o, 15);
ctx.fill();
ctx.beginPath();
var name = d.o.node_id;

36
lib/infobox/node.js
View File

@ -74,21 +74,27 @@ define(['sorttable', 'snabbdom', 'd3-interpolate', 'moment', 'helper'],
V.h('br'),
V.h('i', { props: { className: 'ion-people', title: _.t('node.clients') } })
]),
V.h('span', [
d.clients_wifi24,
V.h('br'),
'2,4 Ghz'
]),
V.h('span', [
d.clients_wifi5,
V.h('br'),
'5 Ghz'
]),
V.h('span', [
d.clients_other,
V.h('br'),
_.t('other')
])
V.h('span',
{ props: { className: 'legend-24ghz'}},
[
d.clients_wifi24,
V.h('br'),
V.h('span', { props: { className: 'symbol', title: '2,4 Ghz'}})
]),
V.h('span',
{ props: { className: 'legend-5ghz'}},
[
d.clients_wifi5,
V.h('br'),
V.h('span', { props: { className: 'symbol', title: '5 Ghz'}})
]),
V.h('span',
{ props: { className: 'legend-others'}},
[
d.clients_other,
V.h('br'),
V.h('span', { props: { className: 'symbol', title: _.t('others')}})
])
];
return V.h('td', { props: { className: 'clients' } }, clients);

5
lib/legend.js
View File

@ -32,15 +32,12 @@ define(['helper'], function (helper) {
var p = document.createElement('p');
p.classList.add('legend');
p.innerHTML = '<span class="legend-new"><span class="symbol"></span> ' + _.t('sidebar.nodeNew') + '</span>' +
'<span class="legend-online"><span class="symbol"></span> ' + _.t('sidebar.nodeOnline') + '</span>' +
'<span class="legend-offline"><span class="symbol"></span> ' + _.t('sidebar.nodeOffline') + '</span>';
el.appendChild(p);
p.appendChild(document.createElement('br'));
p.appendChild(stats);
p.appendChild(document.createElement('br'));
p.appendChild(timestamp);
el.appendChild(p);
};
return self;

2
lib/map.js
View File

@ -151,7 +151,7 @@ define(['map/clientlayer', 'map/labellayer', 'map/button', 'leaflet'],
if (highlight !== undefined) {
if (highlight.type === 'node' && nodeDict[highlight.o.node_id]) {
m = nodeDict[highlight.o.node_id];
m.setStyle({ color: 'orange', weight: 20, fillOpacity: 1, opacity: 0.7, className: 'stroke-first' });
m.setStyle({ color: '#ad2358', weight: 8, fillOpacity: 1, opacity: 0.4, className: 'stroke-first' });
} else if (highlight.type === 'link' && linkDict[highlight.o.id]) {
m = linkDict[highlight.o.id];
m.setStyle({ weight: 4, opacity: 1, dashArray: '5, 10' });

10
lib/map/clientlayer.js
View File

@ -45,20 +45,20 @@ define(['leaflet', 'rbush', 'helper'],
return tile;
}
var startDistance = 12;
var startDistance = 10;
ctx.beginPath();
nodes.forEach(function (d) {
var p = map.project([d.node.location.latitude, d.node.location.longitude]);
p.x -= s.x;
p.y -= s.y;
helper.positionClients(ctx, p, d.startAngle, d.node.clients, startDistance);
ctx.beginPath();
ctx.fillStyle = 'rgba(220, 0, 103, 0.7)';
helper.positionClients(ctx, p, d.startAngle, d.node, startDistance);
ctx.fill();
});
ctx.fillStyle = 'rgba(220, 0, 103, 0.7)';
ctx.fill();
return tile;
}

20
lib/utils/helper.js
View File

@ -153,20 +153,32 @@ define({
return { minX: br.lat, minY: tl.lng, maxX: tl.lat, maxY: br.lng };
},
positionClients: function positionClients(ctx, p, startAngle, clients, startDistance) {
if (clients === 0) {
positionClients: function positionClients(ctx, p, startAngle, node, startDistance) {
if (node.clients === 0) {
return;
}
var radius = 3;
var a = 1.2;
var mode = 0;
for (var orbit = 0, i = 0; i < clients; orbit++) {
for (var orbit = 0, i = 0; i < node.clients; orbit++) {
var distance = startDistance + orbit * 2 * radius * a;
var n = Math.floor((Math.PI * distance) / (a * radius));
var delta = clients - i;
var delta = node.clients - i;
for (var j = 0; j < Math.min(delta, n); i++, j++) {
if (mode !== 1 && i >= (node.clients_wifi24 + node.clients_wifi5)) {
mode = 1;
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgba(10, 156, 146, 0.7)';
} else if (mode === 0 && i >= node.clients_wifi24) {
mode = 2;
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgba(227, 166, 25, 0.7)';
}
var angle = 2 * Math.PI / n * j;
var x = p.x + distance * Math.cos(angle + startAngle);
var y = p.y + distance * Math.sin(angle + startAngle);

8
locale/en.json
View File

@ -45,9 +45,9 @@
"clients": "with %{smart_count} client |||| with %{smart_count} clients",
"gateway": "on %{smart_count} gateway |||| on %{smart_count} gateways",
"lastUpdate": "Last update",
"nodeNew": "Node is new",
"nodeOnline": "Node is online",
"nodeOffline": "Node is offline",
"nodeNew": "new",
"nodeOnline": "online",
"nodeOffline": "offline",
"aboutInfo": "<h2>About Meshviewer</h2> <p>You can zoom in with double-click and zoom out with shift+double-click</p>",
"actual": "Current",
"stats": "Statistics",
@ -87,7 +87,7 @@
"yes": "yes",
"no": "no",
"unknown": "unknown",
"others": "others",
"others": "other",
"none": "none",
"remove": "remove",
"close": "close"

37
scss/modules/_legend.scss
View File

@ -17,15 +17,21 @@ header {
}
.legend {
.symbol {
border-radius: 50%;
display: inline-block;
height: 1em;
vertical-align: -5%;
width: 1em;
span {
&:not(:first-child) {
margin-left: 1em;
}
}
}
.symbol {
border-radius: 50%;
display: inline-block;
height: 1em;
vertical-align: -5%;
width: 1em;
}
// Dot looks compared to thin font a bit darker - lighten it 10%
.legend-new {
.symbol {
@ -45,7 +51,20 @@ header {
}
}
.legend-online,
.legend-offline {
margin-left: 1em;
.legend-24ghz {
.symbol {
background-color: $color-24ghz;
}
}
.legend-5ghz {
.symbol {
background-color: $color-5ghz;
}
}
.legend-others {
.symbol {
background-color: $color-others;
}
}

4
scss/modules/_variables.scss
View File

@ -11,6 +11,10 @@ $color-online: #1566a9 !default;
$color-offline: #cf3e2a !default;
$color-unseen: #d89100 !default;
$color-24ghz: $color-primary !default;
$color-5ghz: #e3a619 !default;
$color-others: #0a9c92 !default;
$color-map-background: #f8f4f0 !default;
$font-family: Assistant, sans-serif !default;