diff --git a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
index fdbef0b50c..269f355fce 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
+++ b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
@@ -119,11 +119,19 @@ async def gantt(request):
return web.Response(text=html_content, content_type="text/html")
+async def drawings(request):
+ with open("templates/drawings.html", "r") as f:
+ template = f.read()
+ html_content = pystache.render(template, {"port": sio_port})
+ return web.Response(text=html_content, content_type="text/html")
+
+
async def open_web_browser(app):
webbrowser.open(f"http://127.0.0.1:{sio_port}/")
app.router.add_get("/", index)
+app.router.add_get("/drawings", drawings)
app.router.add_get("/gantt", gantt)
app.router.add_static("/jsgantt/", path="../gantt", name="jsgantt")
app.router.add_static("/static/", path="./static", name="static")
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
new file mode 100644
index 0000000000..3798c42875
--- /dev/null
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
@@ -0,0 +1,186 @@
+:root {
+ --font-family: Arial, sans-serif;
+ --base-font-size: 16px;
+ --margin-tiny: 0.125rem;
+ --margin-small: 0.625rem;
+ --margin-medium: 1.25rem;
+ --margin-large: 2.5rem;
+ --padding-tiny: 0.125rem;
+ --padding-small: 0.625rem;
+ --padding-medium: 1rem;
+ --font-size-large: 1.2rem;
+ --logo-height: 2.5rem;
+ --nav-height: 2.5rem;
+}
+
+:root.dark {
+ color-scheme: dark;
+ --bg-color: #252525;
+ --text-color: #e0e0e0;
+ --nav-bg-color: #121212;
+ --nav-border-color: #25682a;
+ --nav-link-color: #fff;
+ --nav-link-hover-color: #3fb449;
+ --warning-color: #FFDB8F;
+ --table-border-color: #464444;
+}
+
+:root.light {
+ color-scheme: light;
+ --bg-color: #ffffff;
+ --text-color: #000000;
+ --nav-bg-color: #f8f8f8;
+ --nav-border-color: #cccccc;
+ --nav-link-color: #000000;
+ --nav-link-hover-color: #38a63d;
+ --warning-color: #FF4500;
+ --table-border-color: #222;
+}
+
+html {
+ font-size: var(--base-font-size);
+}
+
+body {
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ margin: 0;
+ font-family: var(--font-family);
+}
+
+#container {
+ margin-top: var(--margin-medium);
+ margin-left: var(--margin-small);
+ margin-right: var(--margin-small);
+ margin-bottom: var(--margin-medium);
+}
+
+h3 {
+ margin-top: 0;
+}
+
+nav {
+ background-color: var(--nav-bg-color);
+ height: var(--nav-height);
+ padding: var(--padding-medium) 0;
+ display: flex;
+ align-items: center;
+ position: relative;
+ border-bottom: 2px solid var(--nav-border-color);
+}
+
+nav .logo {
+ margin-left: var(--margin-large);
+ height: var(--logo-height);
+}
+
+nav ul {
+ list-style-type: none;
+ margin: 0;
+ margin-left: 0.0625rem;
+ display: flex;
+ flex-grow: 1;
+ justify-content: center;
+}
+
+nav ul li {
+ margin-right: 3.125rem;
+}
+
+nav ul li a {
+ text-decoration: none;
+ color: var(--nav-link-color);
+ font-size: var(--font-size-large);
+}
+
+nav ul li a:hover,
+nav ul li a.active {
+ color: var(--nav-link-hover-color);
+}
+
+.warning {
+ color: var(--warning-color);
+ margin-bottom: var(--margin-small);
+ padding: var(--padding-tiny);
+ display: none;
+}
+
+#toggle-theme {
+ border: none;
+ background: none;
+ cursor: pointer;
+ font-size: var(--font-size-large);
+ margin-right: var(--margin-medium);
+}
+
+#toggle-theme:focus {
+ outline: none;
+}
+
+#client-list {
+ position: absolute;
+ top: calc(0 + var(--nav-height));
+ overflow-y: auto;
+ overflow: hidden;
+ transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
+ border: 1px solid var(--table-border-color);
+ background-color: var(--nav-bg-color);
+ z-index: 1;
+ opacity: 0;
+ visibility: hidden;
+ width: auto;
+}
+
+#client-list.show {
+ opacity: 1;
+ visibility: visible;
+}
+
+#connected-list-div {
+ display: inline-block;
+}
+
+.client {
+ padding: var(--margin-small);
+ border-bottom: 1px solid var(--table-border-color);
+ cursor: pointer;
+}
+
+.client-details {
+ max-height: 0;
+ overflow: hidden;
+ padding-left: var(--padding-small);
+ transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s ease-out;
+ background-color: var(--nav-bg-color);
+ margin-top: var(--margin-tiny);
+ opacity: 0;
+}
+
+.client-details.show {
+ max-height: none;
+ padding: var(--padding-small);
+ opacity: 1;
+}
+
+.client-detail {
+ border-bottom: 1px solid var(--table-border-color);
+ padding: var(--padding-small);
+}
+
+#show-connected-button {
+ width: auto;
+ background-color: var(--bg-color);
+ border: none;
+ font-size: var(--base-font-size);
+}
+
+#show-connected-button:hover,
+.scroll-button:hover {
+ cursor: pointer;
+}
+
+.scroll-button {
+ font-size: var(--base-font-size);
+ margin-left: var(--margin-tiny);
+ margin-top: var(--margin-small);
+}
\ No newline at end of file
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
new file mode 100644
index 0000000000..ae254501a2
--- /dev/null
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
@@ -0,0 +1,28 @@
+// keeps track of blenders connected in form of
+// {shown:bool, filename:string, headers:array}
+const connectedClients = {};
+let socket;
+
+// Document ready function
+$(document).ready(function () {
+ var systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches
+ ? "light"
+ : "dark";
+ var theme = localStorage.getItem("theme") || systemTheme;
+ setTheme(theme);
+
+ connectSocket();
+});
+
+// Function to connect to Socket.IO server
+function connectSocket() {
+ const url = "ws://localhost:" + SOCKET_PORT + "/web";
+ socket = io(url);
+ console.log("socket: ", socket);
+
+ // Register socket event handlers
+ // socket.on("blender_connect", handleBlenderConnect);
+ // socket.on("blender_disconnect", handleBlenderDisconnect);
+ // socket.on("csv_data", handleCsvData);
+ // socket.on("default_data", handleDefaultData);
+}
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
new file mode 100644
index 0000000000..159e2a95fd
--- /dev/null
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+ Web Client
+
+
+
+
+
+
+
+
+
+
+
+
+