vMix Forums
»
General
»
GT
»
Change Titles using HTTP WEB API
Rank: Newbie
Groups: Registered
Joined: 10/22/2023(UTC) Posts: 9 Location: Longford Thanks: 1 times
|
I am not to sure if I am getting this correct. But am I correct in saying you can change a title using a HTTP WEB API link I see the example on vmix help site http://127.0.0.1:8088/API/?Function=SetText&Input=877bb3e7-58bd-46a1-85ce-0d673aec6bf5&SelectedName=Headline&Value=Hello But I am not to sure what is what in that in that link. If i have a title number 5 with a name of test and a text area called text area with a value of test text. How would I use a link like above to change the test text to something else. Thanks
|
|
|
|
Rank: Advanced Member
Groups: Registered
Joined: 12/27/2012(UTC) Posts: 5,220 Location: Belgium Thanks: 291 times Was thanked: 953 time(s) in 788 post(s)
|
Originally Posted by: aidendoyle I am not to sure if I am getting this correct. But am I correct in saying you can change a title using a HTTP WEB API link I see the example on vmix help site http://127.0.0.1:8088/API/?Function=SetText&Input=877bb3e7-58bd-46a1-85ce-0d673aec6bf5&SelectedName=Headline&Value=Hello But I am not to sure what is what in that in that link. If i have a title number 5 with a name of test and a text area called text area with a value of test text. How would I use a link like above to change the test text to something else. Thanks Input refers to the name , index number or Key number of a specific input SelectedName to the name of the text field (or SelectedIndex) to the index number of it) Value is what you want to write in the textfield of the specific title Check setting a SetText in shortcuts to see options or refer to the helpfiles in your case it would be http://127.0.0.1:8088/API/?Function=SetText&Input=5&SelectedName=Text Area&Value=Test text or http://127.0.0.1:8088/API/?Function=SetText&Input=test&SelectedName=Text Area&Value=Test text
|
|
|
|
Rank: Newbie
Groups: Registered
Joined: 10/22/2023(UTC) Posts: 9 Location: Longford Thanks: 1 times
|
That worked a treat, thanks so much. Is there a way of retrieving the value to show on a html page. So if i wanted to see what the the value of the input was that it gets displayed on a page.
just so no confusion.
here is my api output
<vmix> <version>26.0.0.44</version> <edition>HD</edition> <inputs> <input key="1bb755d3-d623-4304-b8b7-388c045710f4" number="1" type="GT" title="lower" shortTitle="lower" state="Running" position="0" duration="0" loop="False" selectedIndex="0"> lower <text index="0" name="Message.Text">test</text> </input> <input key="d928aee1-ac9d-4f2d-9db3-0be9580dfe87" number="2" type="Video" title="_58_Should_We_Legalize_All_Drugs.mp4" shortTitle="_58_Should_We_Legalize_All_Drugs.mp4" state="Paused" position="1280" duration="3652638" loop="False" muted="False" volume="100" balance="0" solo="False" audiobusses="M" meterF1="0" meterF2="0" gainDb="0">_58_Should_We_Legalize_All_Drugs.mp4</input> </inputs> <overlays> <overlay number="1"/> <overlay number="2">1</overlay> <overlay number="3"/> <overlay number="4"/> <overlay number="5"/> <overlay number="6"/> <overlay number="7"/> <overlay number="8"/> </overlays> <preview>1</preview> <active>2</active> <fadeToBlack>False</fadeToBlack> <transitions> <transition number="1" effect="Fade" duration="500"/> <transition number="2" effect="Merge" duration="1000"/> <transition number="3" effect="Wipe" duration="1000"/> <transition number="4" effect="CubeZoom" duration="1000"/> </transitions> <recording>False</recording> <external>False</external> <streaming>False</streaming> <playList>False</playList> <multiCorder>False</multiCorder> <fullscreen>False</fullscreen> <audio> <master volume="100" muted="False" meterF1="0" meterF2="0" headphonesVolume="100"/> <busA volume="100" muted="False" meterF1="0" meterF2="0"/> <busB volume="100" muted="False" meterF1="0" meterF2="0"/> <busC volume="100" muted="False" meterF1="0" meterF2="0"/> <busD volume="100" muted="False" meterF1="0" meterF2="0"/> </audio> <dynamic> <input1/> <input2/> <input3/> <input4/> <value1/> <value2/> <value3/> <value4/> </dynamic> </vmix>
on line 7 <text index="0" name="Message.Text">test</text> How would I retreve the value via the api and show on a html page
|
|
|
|
Rank: Advanced Member
Groups: Registered
Joined: 12/27/2012(UTC) Posts: 5,220 Location: Belgium Thanks: 291 times Was thanked: 953 time(s) in 788 post(s)
|
Originally Posted by: aidendoyle That worked a treat, thanks so much. Is there a way of retrieving the value to show on a html page. So if i wanted to see what the the value of the input was that it gets displayed on a page.
on line 7 <text index="0" name="Message.Text">test</text> How would I retreve the value via the api and show on a html page You can retrieve the info using a script Have a look at the "scripting for dummies"post , plenty of examples there. How to show this info on a html page is not part of this forum Btw might be better to show API XML example with a more suited input content!
|
|
|
|
Rank: Newbie
Groups: Registered
Joined: 10/22/2023(UTC) Posts: 9 Location: Longford Thanks: 1 times
|
its all good i figured it out if any one is interested here is the code
<script> // Variables to store the previous and current API values for each input let previousApiValue1 = ""; let currentApiValue1 = ""; let previousApiValue2 = ""; let currentApiValue2 = ""; let previousApiValue3 = ""; let currentApiValue3 = ""; let previousApiValue4 = ""; let currentApiValue4 = "";
// Function to retrieve and display the data function fetchData() { // Define the API URL const apiUrl = "http://00.00.00.0:8088/API/";
// Define the desired shortTitles for each input const shortTitle1 = "Caller 1"; // Replace with the desired shortTitle for input 1 const shortTitle2 = "Caller 2"; // Replace with the desired shortTitle for input 2 const shortTitle3 = "Caller 3"; // Replace with the desired shortTitle for input 3 const shortTitle4 = "Caller 4"; // Replace with the desired shortTitle for input 4
// Fetch the XML data from the API fetch(apiUrl) .then(response => response.text()) .then(data => { // Parse the XML data const parser = new DOMParser(); const xmlDoc = parser.parseFromString(data, "text/xml");
// Extract the desired value based on shortTitle for input 1 const inputElement1 = xmlDoc.querySelector(`input[shortTitle="${shortTitle1}"]`); if (inputElement1) { const textElement1 = inputElement1.querySelector('text[name="Message"]'); if (textElement1) { currentApiValue1 = textElement1.textContent;
// Update the input field for input 1 if the API value has changed if (currentApiValue1 !== previousApiValue1) { const textInput1 = document.getElementById("textInput1"); textInput1.value = currentApiValue1; previousApiValue1 = currentApiValue1; } } }
// Extract the desired value based on shortTitle for input 2 const inputElement2 = xmlDoc.querySelector(`input[shortTitle="${shortTitle2}"]`); if (inputElement2) { const textElement2 = inputElement2.querySelector('text[name="Message"]'); if (textElement2) { currentApiValue2 = textElement2.textContent;
// Update the input field for input 2 if the API value has changed if (currentApiValue2 !== previousApiValue2) { const textInput2 = document.getElementById("textInput2"); textInput2.value = currentApiValue2; previousApiValue2 = currentApiValue2; } } } // Extract the desired value based on shortTitle for input 3 const inputElement3 = xmlDoc.querySelector(`input[shortTitle="${shortTitle3}"]`); if (inputElement3) { const textElement3 = inputElement3.querySelector('text[name="Message"]'); if (textElement3) { currentApiValue3 = textElement3.textContent;
// Update the input field for input 3 if the API value has changed if (currentApiValue3 !== previousApiValue3) { const textInput3 = document.getElementById("textInput3"); textInput3.value = currentApiValue3; previousApiValue3 = currentApiValue3; } } } // Extract the desired value based on shortTitle for input 4 const inputElement4 = xmlDoc.querySelector(`input[shortTitle="${shortTitle4}"]`); if (inputElement4) { const textElement4 = inputElement4.querySelector('text[name="Message"]'); if (textElement4) { currentApiValue4 = textElement4.textContent;
// Update the input field for input 4 if the API value has changed if (currentApiValue4 !== previousApiValue4) { const textInput4 = document.getElementById("textInput4"); textInput4.value = currentApiValue4; previousApiValue4 = currentApiValue4; } } } }) .catch(error => { console.error("Error fetching data:", error); }); }
// Call the fetchData function initially fetchData();
// Set up an interval to call fetchData every 1 second (1000 milliseconds) setInterval(fetchData, 1000);
// Add input event listeners to detect user input for each input const textInput1 = document.getElementById("textInput1"); textInput1.addEventListener("input", function () { const userInputValue = textInput1.value;
// Update the current API value for input 1 to reflect the user's input currentApiValue1 = userInputValue; });
const textInput2 = document.getElementById("textInput2"); textInput2.addEventListener("input", function () { const userInputValue = textInput2.value;
// Update the current API value for input 2 to reflect the user's input currentApiValue2 = userInputValue; }); // Add input event listeners to detect user input for each input const textInput3 = document.getElementById("textInput3"); textInput3.addEventListener("input", function () { const userInputValue = textInput3.value;
// Update the current API value for input 3 to reflect the user's input currentApiValue3 = userInputValue; }); // Add input event listeners to detect user input for each input const textInput4 = document.getElementById("textInput4"); textInput4.addEventListener("input", function () { const userInputValue = textInput4.value;
// Update the current API value for input 3 to reflect the user's input currentApiValue4 = userInputValue; }); </script>
|
|
|
|
Rank: Newbie
Groups: Registered
Joined: 10/22/2023(UTC) Posts: 9 Location: Longford Thanks: 1 times
|
I have setup a form using html and javascript that can send and show api data. But this is only possible if I set allow access to api without login is checked in the web controller settings. Obviously this is a bad thing to keep on as anyone can access the api. How do I go about setting up a login page where i can enter the credentials to access.
|
|
|
|
Rank: Newbie
Groups: Registered
Joined: 11/28/2023(UTC) Posts: 9 Location: Abudabi Thanks: 1 times
|
Originally Posted by: aidendoyle I have setup a form using html and javascript that can send and show api data. But this is only possible if I set allow access to api without login is checked in the web controller settings. Obviously this is a bad thing to keep on as anyone can access the api. How do I go about setting up a login page where i can enter the credentials to access. recently i used this text for api then got errors tnx Character | URL encoded representation | |---|---| | ESC | %3Cesc%3E | | Enter | %0A | | Backspace | %08 | | Tab | %09 | | Space | %20 | | " | %22 | | ' | %27 | | | %5C | | / | %2F | | : | %3A | | ; | %3B | | ? | %3F | | @ | %40 | | = | %3D | | + | %2B | | - | %2D | | _ | %5F | | . | %2E | | < | %3C | | > | %3E | You can use this table to URL encode any other ESC characters that you need to use in your Vmix web API requests. i also used these table for encoding url but no results & malfunctioned again
|
|
|
|
Rank: Advanced Member
Groups: Registered
Joined: 12/27/2012(UTC) Posts: 5,220 Location: Belgium Thanks: 291 times Was thanked: 953 time(s) in 788 post(s)
|
Originally Posted by: najafysmm DO you realize many cant even read/understand what is on the screenshots ?
|
|
|
|
vMix Forums
»
General
»
GT
»
Change Titles using HTTP WEB API
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.
Important Information:
The vMix Forums uses cookies. By continuing to browse this site, you are agreeing to our use of cookies.
More Details
Close