[3851] - Implement functionality of collaboration mouse along with custom and random names.

examples/README.md

@@ -408,6 +408,8 @@ Music Blocks has handy widgets for various musical concepts to create musical co
 | stocks.html | Generated from a Python script, this project is a musical representation of the price of a stock over time |
 | Morse-code-rhythms.html | Generate Morse code rhythms by typing in letters that generate rhythmic patterns |
 | typing-game.html | Catch the falling alphabets/letters before they reach ground by inputting them correctly |
+| abacus-prototype.html | Working abacus example... remix to enrich this example. |
+
 
 # Utilities
 

index.html

@@ -40,6 +40,8 @@
 
         <script src="lib/Tone.js" defer></script>
 
+        <script src="lib/midi.js" defer></script>
+
         <script src="lib/jquery.ruler.js" defer></script>
 
         <script src="lib/modernizr-2.6.2.min.js" defer></script>
@@ -48,6 +50,8 @@
 
         <script src="lib/wheelnav.js" defer></script>
 
+        <script src="lib/abc.min.js" defer></script>
+
         <script src="lib/codejar/codejar.min.js" defer></script>
 
         <script src="lib/codejar/highlight.pack.js" defer></script>
@@ -56,6 +60,8 @@
 
         <script src="./js/collaboration/collaboration.js"></script>
 
+        <script src="./js/collaboration/collabcursor.js"></script>
+
         <link rel="prefetch" type="application/l10n" href="./localization.ini"/>
 
         <script data-main="js/loader" src="lib/require.js" defer></script>
@@ -411,7 +417,7 @@
                         class="file"
                         type="file"
                         id="myOpenFile"
-                        accept=".ta, .tb, .html"
+                        accept=".ta, .tb, .html,.mid,.midi"
                         tabindex="-1"
                     />
                     <input

js/README.md

@@ -123,6 +123,12 @@ meaningful name, e.g. `setupGraphicsBlocks()`.
 4. Call that setup function in `js/basicblocks.js` from the
 `initBasicProtoBlocks()` function.
 
+5. Add artwork for the palette icon in `js/artwork.js`. There are
+several dictionaries that need to be updated as well: `PALETTECOLORS`
+and `PALETTEICONS`.
+
+6. Assign colors in `js/utils/platformstyle.js`.
+
 After the above steps are complete, move to [defining a new
 block](#how-to-define-a-new-block)
 

js/blocks/PitchBlocks.js

@@ -875,6 +875,7 @@ function setupPitchBlocks(activity) {
                 "note2"
             ]);
             this.formBlock({ outType: "noteout" });
+            this.beginnerBlock(true);
         }
     }
 
@@ -889,6 +890,7 @@ function setupPitchBlocks(activity) {
                 "note1"
             ]);
             this.formBlock({ outType: "solfegeout" });
+            this.beginnerBlock(true);
         }
     }
 
@@ -1841,6 +1843,7 @@ function setupPitchBlocks(activity) {
                 [1, ["notename", { value: "G" }], 0, 0, [0]],
                 [2, ["number", { value: 4 }], 0, 0, [0]]
             ]);
+            this.beginnerBlock(true);
         }
     }
 

js/blocks/RhythmBlockPaletteBlocks.js

@@ -164,7 +164,8 @@ function setupRhythmBlockPaletteBlocks(activity) {
                 const bpmFactor =
                     TONEBPM / tur.singer.bpm.length > 0 ? last(tur.singer.bpm) : Singer.masterBPM;
 
-                const beatValue = bpmFactor / noteBeatValue;
+                const beatValue =
+                    bpmFactor == null ? 1 : bpmFactor / noteBeatValue;
 
                 /**
                  * Plays a note in the rhythm.

js/blocks/WidgetBlocks.js

@@ -1555,7 +1555,65 @@ function setupWidgetBlocks(activity) {
             if (args.length === 1) return [args[0], 1];
         }
     }
-
+        /**
+     * Represents a block for inspecting the status of Music Blocks during execution.
+     * @extends StackClampBlock
+     */
+        class AIMusicBlocks extends StackClampBlock {
+            /**
+             * Creates a SamplerBlock instance.
+             */
+            constructor() {
+                super("aimusic");
+                this.setPalette("widgets", activity);
+                this.parameter = true;
+                this.beginnerBlock(false);
+
+                this.setHelpString([
+                    _("Upload a sample and adjust its pitch center."),
+                    "documentation",
+                    null,
+                    "aimusic"
+                ]);
+
+                //.TRANS: the speed at music is should be played.
+                this.formBlock({ name: _("aimusic"), canCollapse: true });
+                this.makeMacro((x, y) => [
+                    [0, "aimusic", x, y, [null, 1]],
+
+                    [1, "print", 0, 0, [0,2,null]],
+                    [2, ["text",{"value":"Music Generated By AI"}], 0, 0, [1]]
+                ]);
+            }
+
+            /**
+             * Handles the flow of data for the sampler block.
+             * @param {any[]} args - The arguments passed to the block.
+             * @param {object} logo - The logo object.
+             * @param {object} turtle - The turtle object.
+             * @param {object} blk - The block object.
+             * @returns {number[]} - The output values.
+             */
+            flow(args, logo, turtle, blk) {
+                if (logo.sample === null) {
+                    logo.sample = new AIWidget();
+                }
+                logo.inSample = true;
+                logo.sample = new AIWidget();
+
+                const listenerName = "_sampler_" + turtle;
+                logo.setDispatchBlock(blk, turtle, listenerName);
+
+                // eslint-disable-next-line no-unused-vars
+                const __listener = event => {
+                    logo.sample.init(activity);
+                };
+
+                logo.setTurtleListener(turtle, listenerName, __listener);
+
+                return [args[0], 1];
+            }
+        }
     // Set up blocks if this is Music Blocks environment
     if (_THIS_IS_MUSIC_BLOCKS_) {
         new EnvelopeBlock().setup(activity);
@@ -1579,6 +1637,7 @@ function setupWidgetBlocks(activity) {
         new MatrixGMajorBlock().setup(activity);
         new MatrixCMajorBlock().setup(activity);
         new MatrixBlock().setup(activity);
+        new AIMusicBlocks().setup(activity);
     }
     // Instantiate and set up the StatusBlock
     new StatusBlock().setup(activity);

js/collaboration/collabcursor.js

@@ -0,0 +1,100 @@
+/* eslint-disable no-unused-vars */
+// Copyright (c) 2024 Ajeet Pratap Singh
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the The GNU Affero General Public
+// License as published by the Free Software Foundation; either
+// version 3 of the License, or (at your option) any later version.
+//
+// You should have received a copy of the GNU Affero General Public
+// License along with this library; if not, write to the Free Software
+// Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA
+
+class Cursor {
+    constructor(activity) {
+        this.activity = activity;
+        this.cursorContainer = new Map();
+        this.nameContainer = new Map();
+    }
+
+    createCursor(id) {
+        const cursorDiv = document.createElement("div");
+        const nameDiv = document.createElement("div");
+        const name = document.createElement("h6");
+        const collaboratorName = this.nameContainer.get(id);
+        const arrowHtml = `<i class="material-icons" style="font-size: 25px; color: rgb(178, 190, 181); opacity: 0.8; margin-top: 1px;">navigation</i>`;
+
+        cursorDiv.style.cssText = `
+        display: flex;
+        justify-content: center;
+        left: 60vh;
+        bottom: 60vh;
+        position: absolute;
+        background-color: rgba(0,0,0,0);
+        padding: 5px;
+        width: 80px;
+        z-index: 1;
+        height: 60px
+        `;
+        // eslint-disable-next-line quotes
+        nameDiv.style.cssText = `
+        position: absolute;
+        background-color: rgb(178, 190, 181);
+        opacity: 0.8;
+        padding: 5px;
+        border: 1px solid #ccc;
+        border-radius: 50px;
+        width: 70px;
+        z-index: 1;
+        height: 15px;
+        display: flex;
+        justify-content: center;
+        top: 35px;
+        `;
+
+        name.textContent = collaboratorName;
+        name.style.cssText = `
+        position: absolute;
+        font-size: 12px;
+        color: black;
+        z-index: 2;
+        top: -22px;
+        `;
+
+        const arrowSign = document.createRange().createContextualFragment(arrowHtml);
+        nameDiv.appendChild(name);
+        cursorDiv.appendChild(arrowSign);
+        cursorDiv.appendChild(nameDiv);
+        document.body.appendChild(cursorDiv);
+        this.cursorContainer.set(id, cursorDiv);
+    }
+
+    removeCursor(id) {
+        const cursor = this.cursorContainer.get(id);
+        if (cursor) {
+            document.body.removeChild(cursor);
+            this.nameContainer.delete(id);
+            this.cursorContainer.delete(id);
+        }
+    }
+
+    trackCursor() {
+        if (this.activity.collaboration.hasCollaborationStarted) {
+            let counter = 0
+            const EMIT_THRESHOLD = 5;
+            const emitMouseMove = (e) => {
+                counter++;
+                if (counter >= EMIT_THRESHOLD) {
+                    const roomID = this.activity.room_id;
+                    const xScroll = this.activity.blocksContainer.x;
+                    const yScroll = this.activity.blocksContainer.y;
+                    const data = { room_id: roomID, x: e.pageX, y: e.pageY, scrollx: xScroll, scrolly: yScroll };
+                    this.activity.collaboration.socket.emit("mouse-move", data);
+                    counter = 0;
+                };
+            };
+            document.addEventListener("mousemove", emitMouseMove);
+        }
+    }
+
+}

js/collaboration/collaboration.js

@@ -27,6 +27,23 @@ class Collaboration {
         this.PORT = "http://localhost:8080/";
         this.hasCollaborationStarted = false;
         this.updatedProjectHtml = null;
+        this.randomNames = [
+            'Macrotis',
+            'Setonix',
+            'Petaurus',
+            'Marmosa',
+            'Macropus',
+            'Dasyurus',
+            'Caluromys',
+            'Acrobates',
+            'Didelphis',
+            'Philander',
+            'Lutreolina',
+            'Notoryctes',
+            'Metachirus',
+            'Dromiciops',
+            'Chaeropus'
+        ];
     }
 
     // Convert the blockList into html
@@ -44,20 +61,65 @@ class Collaboration {
     };
 
     // Make calls to the socket server
-    makeConnection = (ID) => {
+    makeConnection = (room_id, name) => {
         // connect to the local server
         const socket = io(this.PORT);
         socket.on("connect", () => {
             this.socket = socket;
             try {
                 console.log("connected to the server");
                 this.hasCollaborationStarted = true;
-                socket.emit("joinRoom", ID);
+                socket.emit("joinRoom", {room_id, name});
+                this.activity.collabCursor.trackCursor();
             } catch (error) {
                 console.log("Connection failed", error);
             }
         });
 
+        socket.on("existing-cursor", (cursorArray) => {
+            if (cursorArray.length > 1) {
+                cursorArray.forEach(({id}) => {
+                    const ID = id[0];
+                    if (ID !== this.socket.id){
+                        this.activity.collabCursor.createCursor(ID);
+                    }
+                });
+            }
+        });
+
+        socket.on("new-cursor", ({id}) => {
+            this.activity.collabCursor.createCursor(id);
+        });
+
+        socket.on("remove-cursor", (id) => {
+            this.activity.collabCursor.removeCursor(id);
+        })
+
+        socket.on("mouse-move", (data) => {
+            const { socket_id, x, y, scrollx, scrolly } = data;
+            const cursor = this.activity.collabCursor.cursorContainer.get(socket_id);
+            if (cursor) {
+                const currentScrollX = this.activity.blocksContainer.x;
+                const currentScrollY = this.activity.blocksContainer.y;
+                const adjustedX = x - (scrollx - currentScrollX);
+                const adjustedY = y - (scrolly - currentScrollY);
+                cursor.style.left = `${adjustedX}px`;
+                cursor.style.top = `${adjustedY}px`;
+            }
+        });
+
+        socket.on("add-new-name", ({id, name}) => {
+            this.activity.collabCursor.nameContainer.set(id, name);
+        })
+
+        socket.on("add-existing-names", ((namesArray) => {
+            if (namesArray.length > 1) {
+                namesArray.forEach(({id, name}) => {
+                    this.activity.collabCursor.nameContainer.set(id, name);
+                });
+            }
+        }));
+
         socket.on("connect_error", () => {
             this.attempts++;
             console.log("Failed to connect to the socket server. Retrying in few seconds...");
@@ -81,9 +143,21 @@ class Collaboration {
         });
     };
 
+    // Generate a random name for the user
+    generateRandomName = () => {
+        const randomNum = Math.floor(Math.random() * 14);
+        const prefix = this.randomNames[randomNum];
+        const suffix = Math.floor(Math.random() * 50);
+        const name = prefix + suffix;
+        return name;
+    }
+
     // Start the collaboration
-    startCollaboration = (ID) => {
-        this.makeConnection(ID);
+    startCollaboration = (ID, name) => {
+        if (!name) {
+            name = this.generateRandomName();
+        }
+        this.makeConnection(ID, name);
     };
 }