diff --git a/.gitignore b/.gitignore
index 7a95067..17a8b6f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
venv/
__pycache__
-.env
\ No newline at end of file
+.env
+.vscode
+node_modules
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 0ceb6db..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "python.formatting.provider": "black"
-}
diff --git a/readme.md b/readme.md
index 96f0ebd..a866ee0 100644
--- a/readme.md
+++ b/readme.md
@@ -37,3 +37,11 @@ Prototype of the spaghetti cables interface
- first experiments with tone.js and the dynamic sequences
- polishing the notation for the sequences
+- setting up the websocket mess with nginx and the soupboat
+
+### TODO:
+
+- setting up the client --- server relation
+- comment the code and comment the process
+- synth controls
+- play around
diff --git a/requirements.txt b/requirements.txt
index f12a61d..36db8bb 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -9,7 +9,6 @@ Flask-SocketIO==5.1.1
greenlet==1.1.2
itsdangerous==2.1.2
Jinja2==3.1.1
-Mako==1.2.0
MarkupSafe==2.1.1
mypy-extensions==0.4.3
pathspec==0.9.0
diff --git a/skimmer/__init__.py b/skimmer/__init__.py
index ce1a0fe..ad1519a 100644
--- a/skimmer/__init__.py
+++ b/skimmer/__init__.py
@@ -3,7 +3,7 @@ from flask import Flask, send_from_directory
from flask_socketio import SocketIO
from . import prefix
-socketio = SocketIO()
+socketio = SocketIO(path=os.path.join(os.environ.get("URL_PREFIX", ""), "socket.io"))
def create_app(test_config=None):
@@ -38,10 +38,14 @@ def create_app(test_config=None):
app.register_blueprint(bowl.bp)
+ from . import handle
+
+ app.register_blueprint(handle.bp)
+
app.wsgi_app = prefix.PrefixMiddleware(
app.wsgi_app, prefix=os.environ.get("URL_PREFIX", "")
)
- socketio.init_app(app)
+ socketio.init_app(app, cors_allowed_origins="*")
return app
diff --git a/skimmer/bowl.py b/skimmer/bowl.py
index 1c11678..feaf1ca 100644
--- a/skimmer/bowl.py
+++ b/skimmer/bowl.py
@@ -1,6 +1,4 @@
-from flask import Blueprint
-from mako.template import Template
-
+from flask import Blueprint, render_template, request
from . import events
bp = Blueprint("bowl", __name__)
@@ -8,9 +6,7 @@ bp = Blueprint("bowl", __name__)
@bp.route("/")
def bowl():
- return Template(filename="skimmer/templates/bowl.html").render()
-
-
-@bp.route("/test/")
-def test():
- return Template(filename="skimmer/templates/bowl.html").render()
+ handle = request.values.get('handle','')
+ if handle != '':
+ return render_template('handle.html')
+ return render_template("bowl.html")
diff --git a/skimmer/events.py b/skimmer/events.py
index ac0b9dd..2b79bf8 100644
--- a/skimmer/events.py
+++ b/skimmer/events.py
@@ -1,10 +1,25 @@
from flask import session
from flask_socketio import emit
+
from . import socketio
+handle = ''
+
+
+@socketio.on("connect bowl")
+def add_bowl(id):
+ print(f'Client connected! ID: {id}')
+ emit("add bowl", id, to=handle)
+
+@socketio.on("disconnect bowl")
+def add_bowl(id):
+ print(f'Client disconnected! ID: {id}')
+ emit("remove bowl", id, to=handle)
+
+
+@socketio.on("handle")
+def add_bowl(id):
+ handle = id
+ print('Handle is connected!')
-@socketio.on("my event")
-def test(message):
- print(message)
- emit("message", {"msg": "eheh"})
diff --git a/skimmer/handle.py b/skimmer/handle.py
new file mode 100644
index 0000000..81e86fa
--- /dev/null
+++ b/skimmer/handle.py
@@ -0,0 +1,9 @@
+from flask import Blueprint, render_template
+from . import events
+
+bp = Blueprint("handle", __name__)
+
+
+@bp.route("/handle/")
+def handle():
+ return render_template("handle.html")
diff --git a/skimmer/static/js/bowl.js b/skimmer/static/js/bowl.js
new file mode 100644
index 0000000..31fae26
--- /dev/null
+++ b/skimmer/static/js/bowl.js
@@ -0,0 +1,14 @@
+// NOT ELEGANT SOLUTION FOR LOCAL DEV
+let path = document.URL.startsWith("http://127.0.0.1") ? "" : "/soupboat/skimmer/socket.io";
+
+let socket = io({
+ path: path,
+});
+
+socket.on("connect", function () {
+ socket.emit("connect bowl", { id: socket.id });
+});
+
+socket.on("disconnect", function () {
+ socket.emit("disconnect bowl", { id: socket.it });
+});
diff --git a/skimmer/static/js/handle.js b/skimmer/static/js/handle.js
new file mode 100644
index 0000000..88dbac2
--- /dev/null
+++ b/skimmer/static/js/handle.js
@@ -0,0 +1,27 @@
+// NOT ELEGANT SOLUTION FOR LOCAL DEV
+let path = document.URL.startsWith("http://127.0.0.1") ? "" : "/soupboat/skimmer/socket.io";
+
+let socket = io("http://127.0.0.1:5000", {
+ path: path,
+});
+
+socket.on("connect", function () {
+ socket.emit("handle", { id: socket.id });
+});
+
+socket.on("add bowl", (data) => addBowl(data.id));
+socket.on("remove bowl", (data) => removeBowl(data.id));
+
+const container = document.getElementById("container");
+
+function addBowl(id) {
+ let bowl = document.createElement("div");
+ bowl.classList.add("bowl");
+ bowl.innerHTML = id;
+ bowl.dataset.bowl = id;
+ container.appendChild(bowl);
+}
+
+function removeBowl(id) {
+ container.querySelector(`[data-bowl=${id}]`).remove();
+}
diff --git a/skimmer/templates/bowl.html b/skimmer/templates/bowl.html
index 4944f1f..63006b1 100644
--- a/skimmer/templates/bowl.html
+++ b/skimmer/templates/bowl.html
@@ -11,14 +11,9 @@
integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA=="
crossorigin="anonymous"
>
-
+
- Hello Bonjur
+ Bowl