From: Russ Handorf <rhandorf@handorf.org>
Date: Tue, 28 Feb 2023 17:57:50 +0000 (-0500)
Subject: dot graph map
X-Git-Url: https://handorf.org/code/?a=commitdiff_plain;h=4beb97fc6fc2d9b38fa06ee874a21160884e83eb;p=kismet-logviewer.git

dot graph map
---

diff --git a/logviewer/dbview/__pycache__/views.cpython-38.pyc b/logviewer/dbview/__pycache__/views.cpython-38.pyc
index 7e183cb..714a6c4 100644
Binary files a/logviewer/dbview/__pycache__/views.cpython-38.pyc and b/logviewer/dbview/__pycache__/views.cpython-38.pyc differ
diff --git a/logviewer/dbview/views.py b/logviewer/dbview/views.py
index d91b507..161ef6a 100644
--- a/logviewer/dbview/views.py
+++ b/logviewer/dbview/views.py
@@ -309,6 +309,22 @@ def index(request):
         return HttpResponse(dev_string, content_type='text/json')
     elif request.path == "/eventbus/events.ws":
         return HttpResponse("[]", content_type='text/json')
+    elif request.path == "/phy/DOT/map_data.json":
+        node_list = ""
+        link_list = ""
+        dev_list = list(load_db("select cast(device as text) from devices where phyname = 'IEEE802.11' and cast(device as text) like '%dot11.device.client_map%'"))
+        for device in dev_list:
+            (dev,) = device
+            dev_json = json.loads(dev)
+            newdev = {}
+            node_list = node_list + "{ \"id\": \""+dev_json["kismet.device.base.macaddr"]+"\", \"label\": \""+dev_json["kismet.device.base.macaddr"]+"\", \"level\": 1},"
+            for device in dev_json['dot11.device']['dot11.device.client_map']:
+                node_list = node_list + "{ \"id\": \""+device+"\", \"label\": \""+device+"\", \"level\": 2},"
+                link_list = link_list + "{ \"target\": \""+device+"\", \"source\": \""+dev_json["kismet.device.base.macaddr"]+"\" , \"strength\": 0.7 },"
+        node_list = node_list[:-1]
+        link_list = link_list[:-1]
+        thang="{ \"nodes\": [" +node_list+"], \"links\": [" +link_list+"] }"
+        return HttpResponse(thang, content_type='text/json')
     elif request.path == "/phy/RUSS/map_data.json":
         min_long = 361.0
         max_long = 0.0
diff --git a/logviewer/dotmap/__init__.py b/logviewer/dotmap/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/logviewer/dotmap/__pycache__/__init__.cpython-38.pyc b/logviewer/dotmap/__pycache__/__init__.cpython-38.pyc
new file mode 100644
index 0000000..605e22a
Binary files /dev/null and b/logviewer/dotmap/__pycache__/__init__.cpython-38.pyc differ
diff --git a/logviewer/dotmap/__pycache__/urls.cpython-38.pyc b/logviewer/dotmap/__pycache__/urls.cpython-38.pyc
new file mode 100644
index 0000000..fbce56c
Binary files /dev/null and b/logviewer/dotmap/__pycache__/urls.cpython-38.pyc differ
diff --git a/logviewer/dotmap/__pycache__/views.cpython-38.pyc b/logviewer/dotmap/__pycache__/views.cpython-38.pyc
new file mode 100644
index 0000000..87ecb61
Binary files /dev/null and b/logviewer/dotmap/__pycache__/views.cpython-38.pyc differ
diff --git a/logviewer/dotmap/admin.py b/logviewer/dotmap/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/logviewer/dotmap/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/logviewer/dotmap/apps.py b/logviewer/dotmap/apps.py
new file mode 100644
index 0000000..673bc46
--- /dev/null
+++ b/logviewer/dotmap/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class DotmapConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'dotmap'
diff --git a/logviewer/dotmap/migrations/__init__.py b/logviewer/dotmap/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/logviewer/dotmap/models.py b/logviewer/dotmap/models.py
new file mode 100644
index 0000000..71a8362
--- /dev/null
+++ b/logviewer/dotmap/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/logviewer/dotmap/tests.py b/logviewer/dotmap/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/logviewer/dotmap/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/logviewer/dotmap/urls.py b/logviewer/dotmap/urls.py
new file mode 100644
index 0000000..4c9189f
--- /dev/null
+++ b/logviewer/dotmap/urls.py
@@ -0,0 +1,8 @@
+from django.urls import path
+
+from . import views
+
+urlpatterns = [
+    path('', views.index, name='index'),
+]
+
diff --git a/logviewer/dotmap/views.py b/logviewer/dotmap/views.py
new file mode 100644
index 0000000..33c4107
--- /dev/null
+++ b/logviewer/dotmap/views.py
@@ -0,0 +1,15 @@
+from django.shortcuts import render
+from django.http import HttpResponse, HttpRequest
+import os
+
+def index(request):
+    #print("===")
+    #print(request)
+    #print("====")
+    if request.method == 'POST':
+        for key, value in request.POST.items():
+            print(key,value)
+
+    load_file = open('static/'+request.path, mode='rb')
+    if request.path == "/dot_map_panel.html":
+        return HttpResponse(load_file, content_type='text/html')
diff --git a/logviewer/logviewer/__pycache__/urls.cpython-38.pyc b/logviewer/logviewer/__pycache__/urls.cpython-38.pyc
index 693196d..6300a7d 100644
Binary files a/logviewer/logviewer/__pycache__/urls.cpython-38.pyc and b/logviewer/logviewer/__pycache__/urls.cpython-38.pyc differ
diff --git a/logviewer/logviewer/urls.py b/logviewer/logviewer/urls.py
index aee7816..0317a34 100644
--- a/logviewer/logviewer/urls.py
+++ b/logviewer/logviewer/urls.py
@@ -37,6 +37,7 @@ urlpatterns = [
     path('css/images/<str:loadfile>', include('kiscontent.urls')),
     path('adsb_map_panel.html', include('adsbmap.urls')),
     path('russ_map_panel.html', include('russmap.urls')),
+    path('dot_map_panel.html', include('dotmap.urls')),
     path('system/status.json', include('dbview.urls')),
     path('alerts/wrapped/last-time/0/alerts.json', include('dbview.urls')),
     path('messagebus/last-time/0/messages.json', include('dbview.urls')),
@@ -56,6 +57,7 @@ urlpatterns = [
     path('devices/views/phy-IEEE802.11/devices.json', include('dbview.urls')),
     path('phy/ADSB/map_data.json', include('dbview.urls')),
     path('phy/RUSS/map_data.json', include('dbview.urls')),
+    path('phy/DOT/map_data.json', include('dbview.urls')),
     path('devices/by-key/<str:devicename>/device.json', include('devices.urls')),
     path('devices/multikey/as-object/devices.json', include('dbview.urls')),
     path('datasource/by-uuid/<str:devicename>/source.json', include('devices.urls')),
diff --git a/logviewer/static/dot_map_panel.html b/logviewer/static/dot_map_panel.html
new file mode 100644
index 0000000..bd8eb9f
--- /dev/null
+++ b/logviewer/static/dot_map_panel.html
@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>dot map</title>
+
+    <script src="js/jquery-3.1.0.min.js"></script>
+    <script src="js/chart.umd.js"></script>
+    <script src="js/js.storage.min.js"></script>
+    <script src="js/kismet.ui.theme.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
+    <link rel="stylesheet" href="css/leaflet.css" />
+    <link rel="stylesheet" type="text/css" href="css/jquery.jspanel.min.css" />
+    <link rel="stylesheet" type="text/css" href="css/Control.Loading.css" />
+
+    <script src="js/leaflet.js"></script>
+    <script src="js/Leaflet.MultiOptionsPolyline.min.js"></script>
+    <script src="js/Control.Loading.js"></script>
+    <script src="js/chroma.min.js"></script>
+
+    <script src="js/js.storage.min.js"></script>
+    <script src="js/kismet.utils.js"></script>
+    <script src="js/kismet.units.js"></script>
+
+    <script src="js/datatables.min.js"></script>
+    <script src="js/dataTables.scrollResize.js"></script>
+
+    <script src="https://d3js.org/d3.v4.min.js"></script>
+
+    <style>
+
+    </style>
+</head>
+<body>
+    <div id="warning" class="warning">
+        <p><b>Warning!</b>
+        <p>To display the Russ map, your browser will connect to the Leaflet and Open Street Map servers to fetch the map tiles.  This requires you have a functional Internet connection, and will reveal something about your location (the bounding region where planes have been seen.)
+        <p><input id="dontwarn" type="checkbox">Don't warn me again</input>
+        <p><button id="continue">Continue</button>
+    </div>
+    <div id="map"><svg style="width: 100%; height: 600px;"></svg></div>
+
+    <script>
+
+function getNeighbors(node) {
+  return links.reduce(function (neighbors, link) {
+      if (link.target.id === node.id) {
+        neighbors.push(link.source.id)
+      } else if (link.source.id === node.id) {
+        neighbors.push(link.target.id)
+      }
+      return neighbors
+    },
+    [node.id]
+  )
+}
+
+function isNeighborLink(node, link) {
+  return link.target.id === node.id || link.source.id === node.id
+}
+
+
+function getNodeColor(node, neighbors) {
+  if (Array.isArray(neighbors) && neighbors.indexOf(node.id) > -1) {
+    return node.level === 1 ? 'blue' : 'green'
+  }
+
+  return node.level === 1 ? 'red' : 'gray'
+}
+
+function getLinkColor(node, link) {
+  return isNeighborLink(node, link) ? 'green' : '#E5E5E5'
+}
+
+function getTextColor(node, neighbors) {
+  return Array.isArray(neighbors) && neighbors.indexOf(node.id) > -1 ? 'green' : 'white'
+}
+
+function selectNode(selectedNode) {
+  var neighbors = getNeighbors(selectedNode)
+
+  // we modify the styles to highlight selected nodes
+  nodeElements.attr('fill', function (node) { return getNodeColor(node, neighbors) })
+  textElements.attr('fill', function (node) { return getTextColor(node, neighbors) })
+  linkElements.attr('stroke', function (link) { return getLinkColor(selectedNode, link) })
+}
+
+        var window_visible = true;
+/*
+        // Visibility detection from https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
+        // Set the name of the hidden property and the change event for visibility
+        var hidden, visibilityChange; 
+        if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
+            hidden = "hidden";
+            visibilityChange = "visibilitychange";
+        } else if (typeof document.msHidden !== "undefined") {
+            hidden = "msHidden";
+            visibilityChange = "msvisibilitychange";
+        } else if (typeof document.webkitHidden !== "undefined") {
+            hidden = "webkitHidden";
+            visibilityChange = "webkitvisibilitychange";
+        }
+
+        function handleVisibilityChange() {
+            if (document[hidden]) {
+                window_visible = false;
+            } else {
+                window_visible = true;
+            }
+        }
+
+        // Warn if the browser doesn't support addEventListener or the Page Visibility API
+        if (typeof document.addEventListener === "undefined" || hidden === undefined) {
+            ; // Do nothing
+        } else {
+            // Handle page visibility change   
+            document.addEventListener(visibilityChange, handleVisibilityChange, false);
+        }
+*/
+        var urlparam = new URL(window.location.href);
+        var param_url = urlparam.searchParams.get('parent_url') + "/";
+        var param_prefix = urlparam.searchParams.get('local_uri_prefix', "");
+        var KISMET_PROXY_PREFIX = urlparam.searchParams.get('KISMET_PROXY_PREFIX', "");
+
+        if (param_prefix == 0)
+            param_prefix=""
+
+        var local_uri_prefix = param_url + param_prefix;
+        if (typeof(KISMET_URI_PREFIX) !== 'undefined')
+            local_uri_prefix = KISMET_URI_PREFIX;
+
+        var map_configured = false;
+
+        var markers = {};
+
+        var tid = -1;
+
+        var map = null;
+
+        function map_cb(d) {
+            data = kismet.sanitizeObject(d);
+	    
+            map_configured = true;
+	    var nodes = d['nodes']
+            var links = d['links']
+    
+            var width = window.innerWidth
+            var height = window.innerHeight
+
+            var svg = d3.select('svg')
+		.append("g")
+            svg.attr('width', width).attr('height', height)
+              .call(d3.zoom().on("zoom", function () {
+                    svg.attr("transform", d3.event.transform)
+               }))
+              //.append("g")
+
+            // simulation setup with all forces
+            var linkForce = d3
+              .forceLink()
+              .id(function (link) { return link.id })
+              .strength(function (link) { return link.strength })
+
+            var simulation = d3
+              .forceSimulation()
+              //.force('link', linkForce)
+              .force('charge', d3.forceManyBody().strength(-10))
+              .force('center', d3.forceCenter(width / 2, height / 2))
+              .force('link', linkForce)
+
+            var dragDrop = d3.drag().on('start', function (node) {
+              node.fx = node.x
+              node.fy = node.y
+            }).on('drag', function (node) {
+              simulation.alphaTarget(0.7).restart()
+              node.fx = d3.event.x
+              node.fy = d3.event.y
+            }).on('end', function (node) {
+              if (!d3.event.active) {
+                simulation.alphaTarget(0)
+              }
+              node.fx = null
+              node.fy = null
+            })
+
+            var linkElements = svg.append("g")
+              .attr("class", "links")
+              .selectAll("line")
+              .data(links)
+              .enter().append("line")
+                .attr("stroke-width", 1)
+                      .attr("stroke", "rgba(255, 255, 255, 5.0)")
+
+            var nodeElements = svg.append("g")
+              .attr("class", "nodes")
+              .selectAll("circle")
+              .data(nodes)
+              .enter().append("circle")
+                .attr("r", 10)
+                .attr("fill", getNodeColor)
+                .call(dragDrop)
+                .on('click', selectNode)
+
+            var textElements = svg.append("g")
+              .attr("class", "texts")
+              .selectAll("text")
+              .data(nodes)
+              .enter().append("text")
+                .text(function (node) { return  node.label })
+                      .attr("font-size", 15)
+                      .attr("dx", 15)
+                .attr("dy", 4)
+
+            simulation.nodes(nodes).on('tick', () => {
+              nodeElements
+                .attr('cx', function (node) { return node.x })
+                .attr('cy', function (node) { return node.y })
+              textElements
+                .attr('x', function (node) { return node.x })
+                .attr('y', function (node) { return node.y })
+              linkElements
+                .attr('x1', function (link) { return link.source.x })
+                .attr('y1', function (link) { return link.source.y })
+                .attr('x2', function (link) { return link.target.x })
+                .attr('y2', function (link) { return link.target.y })
+            })
+
+            simulation.force("link").links(links)
+        }
+
+        var load_maps = kismet.getStorage('kismet.russ.maps_ok', false);
+
+        function poll_map() {
+            if (window_visible && !$('#map').is(':hidden') && load_maps) {
+                $.get(local_uri_prefix + KISMET_PROXY_PREFIX + "phy/DOT/map_data.json")
+                    .done(function(d) {
+			console.log("sending to function");
+                        map_cb(d);
+                    });
+                    //.always(function(d) {
+                    //    tid = setTimeout(function() { poll_map(); }, 2000);
+                    //});
+            } else {
+                tid = setTimeout(function() { poll_map(); }, 2000);
+            }
+        }
+
+        // Set a global timeout
+        $.ajaxSetup({
+            timeout:5000,
+            xhrFields: {
+                withCredentials: true
+            }
+        });
+
+        if (load_maps)
+            $('#warning').hide();
+
+        $('#continue').on('click', function() {
+            if ($('#dontwarn').is(":checked"))
+                kismet.putStorage('kismet.russ.maps_ok', true);
+            $('#warning').hide();
+            load_maps = true;
+        });
+
+        poll_map();
+
+    </script>
+</body>
+</html>
diff --git a/logviewer/static/dynamic.js b/logviewer/static/dynamic.js
index 8c386ea..1edfd01 100644
--- a/logviewer/static/dynamic.js
+++ b/logviewer/static/dynamic.js
@@ -11,6 +11,7 @@ var kismet_ui_rtl433;
 var kismet_ui_uav;
 var kismet_ui_zwave;
 var kismet_ui_russmap;
+var kismet_ui_dotmap;
 async function load_dynamics() {
 kismet_ui_adsb = await import(`${local_uri_prefix}js/kismet.ui.adsb.js`);
 kismet_ui_bluetooth = await import(`${local_uri_prefix}js/kismet.ui.bluetooth.js`);
@@ -22,4 +23,5 @@ kismet_ui_rtl433 = await import(`${local_uri_prefix}js/kismet.ui.rtl433.js`);
 kismet_ui_uav = await import(`${local_uri_prefix}js/kismet.ui.uav.js`);
 kismet_ui_zwave = await import(`${local_uri_prefix}js/kismet.ui.zwave.js`);
 kismet_ui_russmap = await import(`${local_uri_prefix}js/kismet.ui.russmap.js`);
+kismet_ui_dotmap = await import(`${local_uri_prefix}js/kismet.ui.dotmap.js`);
 }
diff --git a/logviewer/static/js/kismet.ui.dotmap.js b/logviewer/static/js/kismet.ui.dotmap.js
new file mode 100644
index 0000000..82ec5f8
--- /dev/null
+++ b/logviewer/static/js/kismet.ui.dotmap.js
@@ -0,0 +1,30 @@
+
+"use strict";
+
+var local_uri_prefix = ""; 
+if (typeof(KISMET_URI_PREFIX) !== 'undefined')
+    local_uri_prefix = KISMET_URI_PREFIX;
+
+kismet_ui_tabpane.AddTab({
+    id: 'dotmap',
+    tabTitle: 'Relationship Map',
+    expandable: false,
+    createCallback: function(div) {
+        var url = new URL(parent.document.URL);
+        url.searchParams.append('parent_url', url.origin)
+        url.searchParams.append('local_uri_prefix', local_uri_prefix);
+        url.searchParams.append('KISMET_PROXY_PREFIX', KISMET_PROXY_PREFIX);
+        url.pathname = `${local_uri_prefix}${KISMET_PROXY_PREFIX}dot_map_panel.html`;
+
+        div.append(
+            $('<iframe>', {
+                width: '100%',
+                height: '100%',
+                src: url.href,
+            })
+        );
+    },
+    priority: -100,
+
+}, 'center');
+