Merge pull request #8 from madeofstown/net-graph

Fix the Network Graph button

.gitignore

@@ -3,3 +3,5 @@ __pycache__/*
 meshview/__pycache__/*
 packets.db
 /table_details.py
+config.ini
+screenshots/*

README.md

@@ -1,5 +1,5 @@
 # Meshview
-
+![node](screenshots/nodeinfo.png)
 This project watches a MQTT topic for meshtastic messages, imports them to a
 database and has a web UI to view them.
 
@@ -31,14 +31,40 @@ You also need to install `graphviz`:
 ``` bash
 sudo apt-get install graphviz
 ```
-Edit `config.ini` to change the MQTT server, username, password, and topic(s) as necessary. 
+Copy `sample.config.ini` to `config.ini`:
+``` bash
+cp sample.config.ini config.ini
+```
+ Edit `config.ini` and change the MQTT server, and Web server settings as necsessary.
+ ```bash
+ nano config.ini
+ ``` 
+```ini
+[server]
+bind = *
+port = 8081
+tls_cert = 
+acme_challenge = 
 
-You may also change the web server port from the ***default 8081***.
-https://github.com/pablorevilla-meshtastic/meshview/blob/20bc89a21feb23b0dde51e10e21638c11f4e4443/config.ini#L1-L15
+[mqtt]
+server = mqtt.bayme.sh
+topics = ["msh/US/bayarea/#", "msh/US/CA/mrymesh/#"]
+port = 1883
+username = meshdev
+password = large4cats
+
+[database]
+connection_string = sqlite+aiosqlite:///packets.db
+```
 
 ## Running Meshview
 
 ``` bash
 ./env/bin/python main.py
 ```
-Now you can hit http://localhost:8081/
+Now you can hit http://localhost:8081/ ***(if you did not change the web server port )***
+
+You can specify the path to your `config.ini` file with the run command argument `--config`
+``` bash
+./env/bin/python main.py --config /path/to/config.ini
+```

main.py

@@ -57,7 +57,7 @@ def load_config(file_path):
 
 if __name__ == '__main__':
     parser = argparse.ArgumentParser("meshview")
-    parser.add_argument("--config", help="Path to the configuration file.", default='config.ini')
+    parser.add_argument("--config", help="Path to the configuration file.", default="config.ini")
     args = parser.parse_args()
 
     config = load_config(args.config)

meshview/store.py

@@ -308,6 +308,9 @@ async def get_mqtt_neighbors(since):
 # get_mqtt_neighbors_longfast
 #
 # p.r.
+# TODO # combine the duplicated funtions back to the original 3 by letting them take a second variable to specify channel name. 
+# The default value for channel (none) should cause these functioins to operate the same as they did before they were channel specific.
+# This change will make adding new channel specific graphs much easier in the future.
 #
 # Get Traceroute for LongFast only
 async def get_traceroutes_longfast(since):

meshview/templates/chat.html

@@ -5,15 +5,16 @@
     min-width:10em;
 }
 .chat-packet:nth-of-type(odd){
-    background-color: #3a3a3a; /* Lighter than #2a2a2a */
+    background-color: #272b2f; /* Lighter than #2a2a2a */
 }
 .chat-packet {
-    border-bottom: 1px solid #555;
+    border: 1px solid #474b4e;
     padding: 8px;
+    margin-bottom: 4px;
     border-radius: 8px; /* Adjust the value to make the corners more or less rounded */
 }
 .chat-packet:nth-of-type(even){
-    background-color: #333333; /* Slightly lighter than the previous #181818 */
+    background-color: #212529; /* Slightly lighter than the previous #181818 */
 }
 
 {% endblock %}

meshview/templates/chat_packet.html

@@ -1,6 +1,6 @@
 <div class="row chat-packet">
-    <span class="col-2 timestamp">{{packet.import_time.strftime('%-I:%M:%S %p - %d-%m-%Y')}} </span>
-    <span class="col-1 timestamp"><a href="/packet/{{packet.id}}">✉️</a> {{packet.from_node.channel}}</span>
-    <span class="col-2 username"><a href="/packet_list/{{packet.from_node_id}}">{{packet.from_node.long_name or (packet.from_node_id | node_id_to_hex) }}</a></span>
-    <span class="col-6 message">{{packet.payload}}</span>
+    <span class="col-1 timestamp" style="font-size: smaller;"><a href="/packet/{{packet.id}}">✉️</a> {{packet.from_node.channel}}<div>{{packet.import_time.strftime('%-I:%M:%S %p - %d-%m-%Y')}}</div></span>
+    <!-- <span class="col-1 timestamp"></span> -->
+    <span class="col-4 username" style="text-align: center;"><a href="/packet_list/{{packet.from_node_id}}">{{packet.from_node.long_name or (packet.from_node_id | node_id_to_hex) }}</a></span>
+    <span class="col message" style="text-align: right;">{{packet.payload}}</span>
 </div>

meshview/templates/node.html

@@ -16,6 +16,7 @@
     div.tab-pane > dl {
         display: inline-block;
        }
+
 {% endblock %}
 
 {% block body %}
@@ -33,17 +34,27 @@
             <div class="col mb-3">
                 <div class="card" id="node_info">
                     {% if node %}
-                    <div class="card-header">
-                        {{node.long_name}} ({{node.node_id|node_id_to_hex}})
+                    <div class="card-header" id="node_color">
+                    <strong style="margin-right: 1em ; margin-left: 1em; font-size: x-large;">{{node.short_name}}</strong>
+                    <p style="margin-bottom: 0px; font-size: large; font-weight: bold;">{{node.long_name}}</p>
                     </div>
                     <div class="card-body">
                         <dl >
-                            <dt>ShortName</dt>
-                            <dd>{{node.short_name}}</dd>
+                            {% if trace %}
+                            <dd id="map"></dd>
+                            {% endif %}
+                            <dt>NodeID</dt>
+                            <dd>{{node.node_id|node_id_to_hex}}</dd>
+                            <dt>Channel</dt>
+                            <dd>{{node.channel}}</dd>
                             <dt>HW Model</dt>
                             <dd>{{node.hw_model}}</dd>
                             <dt>Role</dt>
                             <dd>{{node.role}}</dd>
+                            {% if node.firmware %}
+                            <dt>Firmware</dt>
+                            <dd>{{node.firmware}}</dd>
+                            {% endif %}
                         </dl>
                         {% include "node_graphs.html" %}
                     </div>
@@ -54,14 +65,11 @@
                     {% endif %}
                 </div>
             </div>
-            <div class="col mb-3">
-                <div id="map"></div>
-            </div>
         </div>
 
         <div class="row">
             <div class="col">
-<!--            {% include "buttons.html" %}-->
+           {% include "buttons.html" %}
             </div>
         </div>
 
@@ -69,9 +77,36 @@
             <div class="col">
             {% include 'packet_list.html' %}
             </div>
-            <!-- <div class="col sticky-top" id="packet_details"></div> -->
+            
+        </div>
     </div>
 </div>
+<script>
+    var node_color = document.getElementById('node_color');
+    var node_id = '{{node.node_id | node_id_to_hex}}';
+    var color = node_id.slice(-6);
+    var bg_color = "#"+color;
+    node_color.style.background = bg_color;
+    var hex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(bg_color);
+    var text_color = [
+        parseInt(hex[1], 16),
+        parseInt(hex[2], 16),
+        parseInt(hex[3], 16),
+    ];
+
+    const brightness = Math.round(((parseInt(text_color[0]) * 299) +
+                      (parseInt(text_color[1]) * 587) +
+                      (parseInt(text_color[2]) * 114)) / 1000);
+    
+    if (brightness > 125) {
+        var textColor = '#212529'
+        node_color.style.color = textColor
+    }
+     /*                  const textColor = (brightness > 125) ? '#212529' : 'white';
+    node_color.style.color = textColor */
+
+
+</script>
 
 {% if trace %}
 <script>

meshview/templates/node_graphs.html

@@ -21,7 +21,7 @@
 <div class="tab-content">
       <div class="tab-pane fade show active" id="overview" role="tabpanel">
           <dl>
-               <dt>Power</dt>
+               <dt>Battery</dt>
                <dd>{{ graph("power") }}</dd>
           </dl>
           <dl>
@@ -30,7 +30,7 @@
           </dl>
       </div>
       <div class="tab-pane fade" id="neighbors" role="tabpanel">
-        <a role="button" class="btn btn-primary mb-3" href="/graph/network?root={{node_id}}&depth=2">Network Graph</a>
+        <a role="button" class="btn btn-primary mb-3" href="/graph/{{node.channel.lower()}}?root={{node_id}}&depth=2">Network Graph</a>
         <a style="display: block;" href="/graph/neighbors2/{{node_id}}"><img src="/graph/neighbors/{{node_id}}" height="200em" width="200em"/></a>
       </div>
       <div class="tab-pane fade" id="weather" role="tabpanel">
@@ -60,7 +60,10 @@
           </dl>
       </div>
       <div class="tab-pane fade" id="power" role="tabpanel">
-          {{ graph("power_metrics") }}
+          <dl>
+               <dt>Power Metrics</dt>
+               <dd>{{ graph("power_metrics") }}</dd>
+          </dl>
       </div>
 </div>
 

meshview/web.py

@@ -1289,7 +1289,7 @@ async def graph_network_longfast(request):
                 shape='box',
                 color=color,
                 fontsize="10", width="0", height="0",
-                href=f"/graph/network?root={node_id}&depth={depth-1}",
+                href=f"/graph/longfast?root={node_id}&depth={depth-1}",
             ))
 
         # Adjust edge visualization