GUI -- Modified loading of background to occur asynchronously, after attempting …
…to load Geo data from JSON file. - falls back to static map if fails to load JSON. Change-Id: I03ec8a73e86f7fe19e99241b176ae2a8ee99b1fd
Showing
1 changed file
with
68 additions
and
17 deletions
... | @@ -1348,8 +1348,6 @@ | ... | @@ -1348,8 +1348,6 @@ |
1348 | function preload(view, ctx, flags) { | 1348 | function preload(view, ctx, flags) { |
1349 | var w = view.width(), | 1349 | var w = view.width(), |
1350 | h = view.height(), | 1350 | h = view.height(), |
1351 | - idBg = view.uid('bg'), | ||
1352 | - showBg = config.options.showBackground ? 'visible' : 'hidden', | ||
1353 | fcfg = config.force, | 1351 | fcfg = config.force, |
1354 | fpad = fcfg.pad, | 1352 | fpad = fcfg.pad, |
1355 | forceDim = [w - 2*fpad, h - 2*fpad]; | 1353 | forceDim = [w - 2*fpad, h - 2*fpad]; |
... | @@ -1364,20 +1362,9 @@ | ... | @@ -1364,20 +1362,9 @@ |
1364 | // add blue glow filter to svg layer | 1362 | // add blue glow filter to svg layer |
1365 | d3u.appendGlow(svg); | 1363 | d3u.appendGlow(svg); |
1366 | 1364 | ||
1367 | - // load the background image | ||
1368 | - bgImg = svg.append('svg:image') | ||
1369 | - .attr({ | ||
1370 | - id: idBg, | ||
1371 | - width: w, | ||
1372 | - height: h, | ||
1373 | - 'xlink:href': config.backgroundUrl | ||
1374 | - }) | ||
1375 | - .style({ | ||
1376 | - visibility: showBg | ||
1377 | - }); | ||
1378 | - | ||
1379 | // group for the topology | 1365 | // group for the topology |
1380 | topoG = svg.append('g') | 1366 | topoG = svg.append('g') |
1367 | + .attr('id', 'topo-G') | ||
1381 | .attr('transform', fcfg.translate()); | 1368 | .attr('transform', fcfg.translate()); |
1382 | 1369 | ||
1383 | // subgroups for links and nodes | 1370 | // subgroups for links and nodes |
... | @@ -1460,14 +1447,78 @@ | ... | @@ -1460,14 +1447,78 @@ |
1460 | view.setRadio(btnSet); | 1447 | view.setRadio(btnSet); |
1461 | view.setKeys(keyDispatch); | 1448 | view.setKeys(keyDispatch); |
1462 | 1449 | ||
1463 | - if (config.useLiveData) { | 1450 | + // Load map data asynchronously; complete startup after that.. |
1464 | - webSock.connect(); | 1451 | + loadGeoJsonData(); |
1452 | + } | ||
1453 | + | ||
1454 | + // TODO: move these to config/state portion of script | ||
1455 | + var geoJsonUrl = 'geoUsa.json', // TODO: Paul | ||
1456 | + geoJson; | ||
1457 | + | ||
1458 | + function loadGeoJsonData() { | ||
1459 | + d3.json(geoJsonUrl, function (err, data) { | ||
1460 | + if (err) { | ||
1461 | + // fall back to USA map background | ||
1462 | + loadStaticMap(); | ||
1463 | + } else { | ||
1464 | + geoJson = data; | ||
1465 | + loadGeoMap(); | ||
1466 | + } | ||
1467 | + | ||
1468 | + // finally, connect to the server... | ||
1469 | + if (config.useLiveData) { | ||
1470 | + webSock.connect(); | ||
1471 | + } | ||
1472 | + }); | ||
1473 | + } | ||
1474 | + | ||
1475 | + function showBg() { | ||
1476 | + return config.options.showBackground ? 'visible' : 'hidden'; | ||
1477 | + } | ||
1478 | + | ||
1479 | + function loadStaticMap() { | ||
1480 | + fnTrace('loadStaticMap', config.backgroundUrl); | ||
1481 | + var w = network.view.width(), | ||
1482 | + h = network.view.height(); | ||
1483 | + | ||
1484 | + // load the background image | ||
1485 | + bgImg = svg.insert('svg:image', '#topo-G') | ||
1486 | + .attr({ | ||
1487 | + id: 'topo-bg', | ||
1488 | + width: w, | ||
1489 | + height: h, | ||
1490 | + 'xlink:href': config.backgroundUrl | ||
1491 | + }) | ||
1492 | + .style({ | ||
1493 | + visibility: showBg() | ||
1494 | + }); | ||
1495 | + } | ||
1496 | + | ||
1497 | + function loadGeoMap() { | ||
1498 | + fnTrace('loadGeoMap', geoJsonUrl); | ||
1499 | + var w = network.view.width(), | ||
1500 | + h = network.view.height(); | ||
1501 | + | ||
1502 | + // TODO: load map layer from GeoJSON stored in 'geoJson' var... | ||
1503 | + // bgImg = svg.insert('<svg-element-type>', '#topo-G') ... | ||
1504 | + | ||
1505 | + // TODO: Paul | ||
1506 | + } | ||
1507 | + | ||
1508 | + function resizeBg(view) { | ||
1509 | + if (geoJson) { | ||
1510 | + // TODO : resize GeoJSON map | ||
1511 | + | ||
1512 | + // TODO: Paul | ||
1513 | + | ||
1514 | + } else if (bgImg) { | ||
1515 | + setSize(bgImg, view); | ||
1465 | } | 1516 | } |
1466 | } | 1517 | } |
1467 | 1518 | ||
1468 | function resize(view, ctx, flags) { | 1519 | function resize(view, ctx, flags) { |
1469 | setSize(svg, view); | 1520 | setSize(svg, view); |
1470 | - setSize(bgImg, view); | 1521 | + resizeBg(view); |
1471 | 1522 | ||
1472 | // TODO: hook to recompute layout, perhaps? work with zoom/pan code | 1523 | // TODO: hook to recompute layout, perhaps? work with zoom/pan code |
1473 | // adjust force layout size | 1524 | // adjust force layout size | ... | ... |
-
Please register or login to post a comment