README.md
1# Web User Interface
2
3The `netsim` web user interface tool is used to interactively control the simulated network.
4
5## Getting Started
6
7To launch the web UI, you can either launch from command line interface or directly access [localhost:7681](http://localhost:7681)
8
9```sh
10netsim gui
11```
12
13## Moving Devices in 2D plane
14
15<br><img src="assets/moving_2d.gif" alt="Moving 2D GIF" width="500" /><br>
161. Click on the device you wish to move.
172. Drag and drop the device to your desired location.
183. See the **Position** updates on the **Device Info** panel on the right.
19
20## Changing Device Orientation
21
22<br><img src="assets/orientation.gif" alt="Orientation GIF" width="500" /><br>
231. Click on the device you wish to change orientation.
242. On the **Device Info** panel, change the **Orientation** by moving around the range inputs.
253. See the orientation updates on the device sprite.
26
27## Toggling Radio State
28
29<br><img src="assets/radio_state.gif" alt="Radio State GIF" width="500" /><br>
301. Click on the device you wish to change radio state.
312. On the **Device Info** panel, toggle a chip under **Radio States**
32
33## Changing Backgrounds
34
35<br><img src="assets/change_background.gif" alt="Change Background GIF" width="500" /><br>
361. On the left top, Click **Change Backgrounds** button.
37
38## Toggling View to Orthographic View
39
40<br><img src="assets/orthographic_view.gif" alt="Orthographic View GIF" width="500" /><br>
411. On the left top, click **Toggle View** button.
42
43## Moving Devices in 3d space
44
45We do not provide interactive control feature for 3d space yet.
46But the information panel allows you to edit positions.
47
48<br><img src="assets/moving_3d.gif" alt="Moving 3D GIF" width="500" /><br>
491. Click on the device you wish to move.
502. On the **Device Info** panel, click **Edit**.
513. Change **Z** value in **Position** to shift heights.
524. Click **Save**
53
54## Changing to Packet Trace View
55
56<br><img src="assets/packet_trace_view.gif" alt="Packet Trace View GIF" width="500" /><br>
571. On the navigation bar on top, click **Packet Trace**.
58
59## Toggling Packet Capture and Downloading pcap
60
61<br><img src="assets/packet_capture.gif" alt="Packet Capture GIF" width="500" /><br>
621. On the navigation bar on top, click **Packet Trace**.
632. Toggle **Capture ON/OFF** to turn capture on.
643. Toggle **Capture ON/OFF** to turn capture off.
654. Click **Download**.
665. Open the downloaded file with pcap viewer (preferably [Wireshark](https://www.wireshark.org)).
67
68
69
70
