Before coding I tried to generate the code via ChatGPT. I tried about 1,5 hours by defining and improving the prompt based on the code generated by ChatGPT after every try. At the end, I didn't get the perfect code, but the basic functionality ist about 90% written by chatgpt. This file is just for archive purposes as I find it interesting.
Please write me an OBS websocket tester with the newest obs-websocket-js package.
- Just use tabs for indentation in the code, not whitespaces (important). ONLY TABS!!!
- The whole code should be inside a single html file
- I want fields for the connection information and "Connect" Button: 1x Adress (host + port (default port is 4455)) and 1x password (optional) so I can stay connected to OBS for the whole time. If the user don't put anything inside the address field, just use the default "localhost:4455" as url.
- For OBS connection: The "ws://" before the websocket url should be filled inside the connect function and not the address field, so the user doesn't need to put it manually.
- The connections to OBS should be handled by the obs-websocket-js package. This is the latest cdn url: https://cdn.jsdelivr.net/npm/[email protected]/dist/obs-ws.min.js
- I need a place where i can see the answer coming from obs, so I can see what's going on.
- I need a dropdown for choosing the right request type. All the choices for this dropdown should be read from a file hosted on github: https://raw.githubusercontent.com/obsproject/obs-websocket/master/docs/generated/protocol.json
The JSON includes a "requests" object containing an array with all the possible calls.
These are the important fields inside the json file for automatic parsing:
{
"events": [
{
"description": "event description",
"eventType": "EventName",
"eventSubscription": "Config",
"category": "config",
"dataFields": [
{
"valueName": "sceneCollectionName",
"valueType": "String",
"valueDescription": "Name of the current scene collection"
}
]
}
...
],
"requests": [
{
"description": "Description of requestType",
"requestType": "ActualRequestTypeName",
"category": "config",
"requestFields": [
{
"valueName": "value name",
"valueType": "String",
"valueDescription": "value description",
"valueRestrictions": null,
"valueOptional": false,
"valueOptionalBehavior": null
},
...
],
"responseFields": [
{
"valueName": "value name",
"valueType": "Any",
"valueDescription": "value description"
}
]
},
...
]
}
- After calling the json, i need it to be automatically parsed and fill the requestType dropdown with all "requestType"s, grouped by "category" (optgroup).
The actual call method for obs looks like this:
(method) myObsObject.call(requestType: requestType name chosen from dropdown, requestData?: json object, build from all the field names and values for the specific requesttype): Promise<any>
- Later, when the user choses a requestType from the dropdown, I want the "description" to be shown right below the dropdown, so th euser knows what he's using.
- I need the required input fields (requestFields) automatic to appear, so the user knows whats possible to enter and what values he can put inside the input.
-- Like This maybe: Inputfieldname: <input>
-- Placeholder should be: valueType + valueRestrictions (if not null)
- On connection to OBS you can also pass eventSubscriptions.
// Example
await obs.connect('ws://' + addressValue, undefined, {
eventSubscriptions: EventSubscription.All
});
I want two fields for that:
1. Checkbox if the user wants to subscribe to something
2. if checkbox is active: show the dropdown with all the eventSubscriptions.
- As show in the json code above, we also get all eventSubscription types inside the file from github. Please parse all events from the "events" array, grouped by "eventSubscription" (optgroup) and put them inside the dropdown. This field will be optional (only needed if the checkbox is active), so only subscribe to something, if the user actually chosed an eventSubscription. The dropdown should have a default value if the checkbox is active: EventSubscription.All. The code would like the js example above.
Please remember: only use this code if the user actually chose one of the subsciptions. If the checkbox is not active, don't put the "eventSubscriptions" stuff at all on connect to OBS. ANd don't place divs and headline inside the optgroup.
- Whatever the user choses here should be placed inside the obs connect function like the code example above. "eventSubscription" is the important field for what the user actually wants to subscribe to.
- The then filled param fields should be send to OBS with a send button.
- Please separate the main forms visibly from each other.