{"id":17151435,"url":"https://github.com/djipco/webwelder","last_synced_at":"2025-04-13T12:05:40.415Z","repository":{"id":51482492,"uuid":"365048334","full_name":"djipco/webwelder","owner":"djipco","description":"WebWelder is a TouchDesigner component (.tox) facilitating 2-way communication with a web page using the WebSocket protocol.","archived":false,"fork":false,"pushed_at":"2021-12-03T14:40:17.000Z","size":206,"stargazers_count":23,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-05T17:24:47.041Z","etag":null,"topics":["json","touchdesigner","websocket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/djipco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-06T22:06:46.000Z","updated_at":"2024-11-26T10:29:11.000Z","dependencies_parsed_at":"2022-08-21T23:40:45.592Z","dependency_job_id":null,"html_url":"https://github.com/djipco/webwelder","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djipco%2Fwebwelder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djipco%2Fwebwelder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djipco%2Fwebwelder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djipco%2Fwebwelder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/djipco","download_url":"https://codeload.github.com/djipco/webwelder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240072105,"owners_count":19743528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["json","touchdesigner","websocket"],"created_at":"2024-10-14T21:38:01.902Z","updated_at":"2025-02-23T10:32:06.938Z","avatar_url":"https://github.com/djipco.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebWelder 1.0.0-alpha.3\n \nWebWelder is a TouchDesigner component (.tox) allowing 2-way communication with a web page via \nWebSocket messaging. It is **still in alpha** but works relatively well. \n\n## Trying Out the Demo Files\n\nDemo files can be found in the `www` folder. These will help you get started. The `www` folder is \nmeant to be hosted by TouchDesigner, which doubles as both a regular web server and a WebSocket \nserver. Obviously, you can modify the files in this folder and/or add new ones.\n\nBy default, the demo page will send clicks and touch/mouse positions to TouchDesigner. To try the\ndemo page:\n\n1. Drop the WebWelder component (`WebWelder.tox`) in your project.\n2. Put the `www` folder besides the `.toe` file which is using WebWelder.\n3. Point your browser to `http://localhost:9980` and click \"Connect!\".\n4. Click and move around to send data to TouchDesigner.\n\nIf you want to test the demo page from a device different than the one running TouchDesigner (such\nas a mobile device), you will need to point your mobile browser to the IP address of the machine \nwhere TouchDesigner is running.\n\n## Using it in JavaScript\n\nAs you can see in the demo `Interface.js` file, you can connect to TouchDesigner from JavaScript\nby simply opening a WebSocket connection and sending some JSON data through it:\n\n```javascript\nconst socket = new WebSocket(\"ws://localhost:9980\");\n\nsocket.addEventListener(\"open\", () =\u003e {\n console.log(\"Connection established!\");\n const message = {data: \"Test\"};\n socket.send(JSON.stringify(message));\n});\n```\nObviously, if you are trying to connect from a device different from the one where TouchDesigner\nis running, you will need to use your machine's IP address and not `localhost`.\n\nTo receive a message sent from TouchDesigner, just add a listener for the `message` event:\n\n```javascript\nsocket.addEventListener(\"message\", e =\u003e {\n const message = JSON.parse(e.data);\n console.log(message);\n});\n```\n\n## Using it in TouchDesigner\n\n### Receiving data\n\nThe WebWelder COMP operator makes the received data available in both JSON (output 1) and Table \n(output 2) format. It also reports the number of currently connected client through output 0. \nYou can check out `Example.xx.toe` for usage examples. \n\n### Sending data\n\nTo send data from TouchDesigner to the clients, you can specify an `Outbound DAT` in the COMP's \nparameters. This Table DAT must have a column named \"client\" whose content is the client's ID \n(e.g. `192.168.1.10:65432`). Whenever a row in this table changes, all the data in the row will \nbe sent to the corresponding client (in JSON format).\n\nTo send data to all connected client, you can update all rows in the specified `Outbound DAT` \ntable or you can use the Python API (see below).\n\n## Python API\n\n### Members\n\n* `InboundTableDat` : a Table DAT containing all clients and current properties\n* `InboundJsonDat` : a JSON DAT containing all clients and current properties\n\n### Methods\n\n* `Send(client, message)` : sends a message to a single client\n  * `client` : the client id to send to (e.g. `127.0.0.1:12345`)\n  *  `message` : a dictionary (will be parsed to JSON)\n* `SendAll(message)` sends a message to all connected clients\n  *  `message` : a dictionary (will be parsed to JSON)\n* `Disconnect(client)` disconnects the specified client\n  * `client` : the client id to disconnect (e.g. `127.0.0.1:12345`)\n* `DisconnectAll()` disconnects all clients\n\nSo, for example, if you wish to manually send data to all connected clients from Python, you can \nuse this:\n\n```python\nmessage = {\"test\": 456}\nop('WebWelder').SendAll(message)\n```\n\n## SSL/TLS\n\nThe library also works under the secured **https://** and **wss://** protocols. You just need to \nspecify the appropriate key and certificate files (in the component's parameters).\n\nThis is necessary with some web APIs such as the interfaces made available by the \n[Sensor API](https://developer.mozilla.org/en-US/docs/Web/API/Sensor_APIs) family \n([AbsoluteOrientationSensor](https://developer.mozilla.org/en-US/docs/Web/API/AbsoluteOrientationSensor),\n[AmbientLightSensor](https://developer.mozilla.org/en-US/docs/Web/API/AmbientLightSensor),\n[Gyroscope](https://developer.mozilla.org/en-US/docs/Web/API/Gyroscope), etc.).\n\n\n## Debugging \u0026 Caveats\n\n* The [JSON DAT](https://docs.derivative.ca/JSON_DAT) appeared with version 2021.1000 of TouchDesigner. \nEarlier versions will not be able to use the JSON output.\n\n* If the \"Stop Playing when Minimized\" option is activated in the preferences, WebWelder will stop \nworking when the TouchDesigner window is minimized.\n\n* If the connection between client and server goes through a firewall, TCP port 9980 will need to be \nopen. You can also try to change the port to 80 which is often allowed by default to let web traffic \npass through.\n\n## Citing this Software in Research\n\nIf you use this software for research or academic purposes, please cite the project in your \nreferences (or wherever appropriate). Here's an example of how to cite it \n([APA Style](https://apastyle.apa.org/)):\n\n\u003eCôté, J. P. (2021). WebWelder v1.0.0-alpha.3 [Computer Software]. Retrieved from \nhttps://github.com/djipco/webwelder\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjipco%2Fwebwelder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdjipco%2Fwebwelder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjipco%2Fwebwelder/lists"}