Update: node autoplacer improvements and log window visibility enhanc…

…ement. (#54) * [visualize] reformat imports * [simulation][web] Improved node autoplacer behavior; log window visibility fixes.
EskoDijk · Sep 24, 2024 · d8f4711 · d8f4711
1 parent 20b84ae
commit d8f4711
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 28 deletions.
diff --git a/simulation/node_config.go b/simulation/node_config.go
@@ -120,7 +120,7 @@ func NewNodeAutoPlacer() *NodeAutoPlacer {
 	return &NodeAutoPlacer{
 		Xref:            100,
 		Yref:            100,
-		Xmax:            1500,
+		Xmax:            1450,
 		X:               100,
 		Y:               100,
 		NodeDeltaCoarse: 100,

diff --git a/simulation/simulation.go b/simulation/simulation.go
@@ -288,6 +288,7 @@ func (s *Simulation) MoveNodeTo(nodeid NodeId, x, y int) {
 		return
 	}
 	s.d.SetNodePos(nodeid, x, y)
+	s.nodePlacer.UpdateReference(x, y)
 }
 
 func (s *Simulation) DeleteNode(nodeid NodeId) error {

diff --git a/visualize/grpc/grpcVisualizer.go b/visualize/grpc/grpcVisualizer.go
@@ -1,4 +1,4 @@
-// Copyright (c) 2020-2022, The OTNS Authors.
+// Copyright (c) 2020-2023, The OTNS Authors.
 // All rights reserved.
 //
 // Redistribution and use in source and binary forms, with or without
@@ -32,14 +32,11 @@ import (
 	"time"
 
 	"github.com/openthread/ot-ns/energy"
-	"github.com/openthread/ot-ns/visualize/grpc/replay"
-
-	"github.com/simonlingoogle/go-simplelogger"
-
-	pb "github.com/openthread/ot-ns/visualize/grpc/pb"
-
 	. "github.com/openthread/ot-ns/types"
 	"github.com/openthread/ot-ns/visualize"
+	pb "github.com/openthread/ot-ns/visualize/grpc/pb"
+	"github.com/openthread/ot-ns/visualize/grpc/replay"
+	"github.com/simonlingoogle/go-simplelogger"
 )
 
 type grpcVisualizer struct {

diff --git a/web/site/bindata.go b/web/site/bindata.go
diff --git a/web/site/js/vis/ActionBar.js b/web/site/js/vis/ActionBar.js
@@ -273,7 +273,6 @@ export default class ActionBar extends VObject {
     }
 
     onDraggingDone() {
-        // just above the ActionBar's new position is where new nodes will be auto-placed.
-        this.vis.ctrlSetNewNodePosition(this.position.x, this.position.y - NODE_SPACING_ABOVE_ACTIONBAR_PX);
+        //
     }
 }
diff --git a/web/site/js/vis/LogWindow.js b/web/site/js/vis/LogWindow.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2020, The OTNS Authors.
+// Copyright (c) 2020-2023, The OTNS Authors.
 // All rights reserved.
 //
 // Redistribution and use in source and binary forms, with or without
@@ -27,13 +27,16 @@
 import * as PIXI from "pixi.js-legacy";
 import VObject from "./VObject";
 import {Scrollbox} from 'pixi-scrollbox'
+import {
+    LOG_WINDOW_FONT_FAMILY, LOG_WINDOW_FONT_SIZE, LOG_WINDOW_FONT_COLOR
+} from "./consts";
 
 
 const LOG_TEXT_STYLE = {
-    fill: "#0052ff",
-    fontFamily: "Verdana",
-    fontSize: 11,
-    fontStyle: "italic",
+    fill: LOG_WINDOW_FONT_COLOR,
+    fontFamily: LOG_WINDOW_FONT_FAMILY,
+    fontSize: LOG_WINDOW_FONT_SIZE,
+    fontStyle: "normal",
     fontWeight: "normal"
 };
 
@@ -70,7 +73,7 @@ export default class LogWindow extends VObject {
         this.loglist = [];
     }
 
-    addLog(text, color = "#0052ff") {
+    addLog(text, color = LOG_WINDOW_FONT_COLOR) {
         if (this.loglist.length === LOG_WINDOW_MAX_SIZE) {
             let rm = this.loglist.shift();
             this.logContainer.removeChild(rm)

diff --git a/web/site/js/vis/PixiVisualizer.js b/web/site/js/vis/PixiVisualizer.js
@@ -28,8 +28,9 @@ import * as PIXI from "pixi.js-legacy";
 import VObject from "./VObject";
 import ActionBar from "./ActionBar";
 import {Text} from "./wrapper";
-import {FRAME_CONTROL_MASK_FRAME_TYPE, FRAME_TYPE_ACK, MAX_SPEED, PAUSE_SPEED, NODE_AUTOSPACING_PX,
-    NODE_AUTOSPACING_FINE_PX} from "./consts";
+import {
+    FRAME_CONTROL_MASK_FRAME_TYPE, FRAME_TYPE_ACK, LOG_WINDOW_FONT_COLOR, MAX_SPEED, PAUSE_SPEED
+} from "./consts";
 import Node from "./Node"
 import {AckMessage, BroadcastMessage, UnicastMessage} from "./message";
 import LogWindow, {LOG_WINDOW_WIDTH} from "./LogWindow";
@@ -258,7 +259,7 @@ export default class PixiVisualizer extends VObject {
         return count
     }
 
-    log(text, color = '#0052ff') {
+    log(text, color = LOG_WINDOW_FONT_COLOR) {
         if (this.logWindow) {
             this.logWindow.addLog(text, color)
         }
@@ -470,6 +471,7 @@ export default class PixiVisualizer extends VObject {
         }
     }
 
+    // Set the position (x,y) for the next new node to be placed.
     ctrlSetNewNodePosition(x, y) {
         x = Math.round(x);
         y = Math.round(y);
@@ -679,11 +681,8 @@ export default class PixiVisualizer extends VObject {
     }
 
     randomColor() {
-        const letters = '0123456789ABCDEF';
-        let color = '#';
-        for (let i = 0; i < 6; i++) {
-            color += letters[Math.floor(Math.random() * 16)];
-        }
+        let hue = Math.floor(Math.random() * 360);
+        let color = `hsl(${hue}deg, 92%, 23%)`;
         return color;
     }
 

diff --git a/web/site/js/vis/consts.js b/web/site/js/vis/consts.js
@@ -38,6 +38,6 @@ export const FRAME_TYPE_ACK = 2;
 export const COLOR_ACK_MESSAGE = 0xaee571;
 export const BUTTON_LABEL_FONT_FAMILY = 'verdana, helvetica, sans-serif';
 export const NODE_LABEL_FONT_FAMILY = 'helvetica, arial, monospace, sans-serif';
-
-// size constants
-export const NODE_SPACING_ABOVE_ACTIONBAR_PX = 80;
+export const LOG_WINDOW_FONT_FAMILY = 'verdana, helvetica, sans-serif';
+export const LOG_WINDOW_FONT_SIZE = 11.5
+export const LOG_WINDOW_FONT_COLOR = "Blue"