Facility Control

Hi,

How are you today?

I'm customizing a panel, and bassicaly, I'm trying to insert a URL link from youtube to 'Browser' function, and after that, I want to control this video through play, stop and back buttonns. I've found some difficulties to sort out it. 

I clicked over a button, entered on 'ADD' option, and used visual logic to attribute the correct commands. But I don't know which is the best option for this operation. Anyone could help me, please? 

Thanks,

Hi JOÃO,

You can use the YouTube embed tag with the DashBoard browser, for example:

<browser height="526" id="embedTwo" left="57" top="47" url="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=0&amp;origin=http://example.com" width="897"/>
</abs>

This will display a video with auto play switched off and you will have access to the normal YouTube player controls e.g. play, pause and scrub. I believe this is also configurable so you can switch these controls off. 

There might be another way where you reference an external html file, again using the browser tag and the html file embeds the player. In this case you could potentially add additional html buttons to this page and control the video via standard player api calls although this wouldn't be through DashBoard button.

( see here for a reference https://developers.google.com/youtube/iframe_api_reference#Getting_Started )

I'm double checking this is possible and looking into an example to send across. I'll let you know once i have a definitive answer.

Thanks

Colin.

Hello Colin,

Thanks for spend your time with my case!

Yes, I know it's possible to insert a URL of video from youtube on dashboard, I did that. I also realized that I can control the video as I do on youtube web page. However, my idea is to control this web video with buttons customized by me. (attached photo)

Thanks for sent me a '' https://developers.google.com/youtube/iframe_api_reference#Getting_Started". It's amazing the possibilites I saw there.  But, I didn't undersatnd how Can I implement this commands in my dashboard? could be on button task or source program?

I tried to use as an example the lesson available on dashoardU (PanelBuilder304), which was an application developed to control a remote blackmagic player server. 

When I hit on 'play button', I can see the program lines, and there I found this commands:

<button buttontype="push" colspan="1" fill="both" insets="2,2,2,2" left="47" name="&lt;html&gt;&amp;#x25b6;&lt;/html&gt;" pheight="131" pwidth="209" rowspan="1" style="style:Transport;size:Biggest;" top="38" weightx="1.0" weighty="1.0">
<task tasktype="rosstalk">rosstalk.sendMessage(params.getValue(0x9, 0), parseInt(ogscript.getPrivateString('hosts', 'BlackmagicDeck1.port')), ' play: single clip: true');</task>
<task tasktype="ogparamset">params.setValue(0x5, 0, 0);</task>
<task tasktype="ogparamset">params.setValue(0x4, 0, 0);</task>
</button> 

I guess my idea seems alike it, because I want to use the play button to starts my video. But I know it isn't possible to copy this code, because I can't use the same commands.

e.g: rosstalk -> In ogScript, use the rosstalk object to communicate over the network to other devices that speak RossTalk protocol. that isn't my case.

e.g: parseInt -> Is used to send a message to a particular host/port. That isn't my case too.

I'd like to know if has any code resposible for play action? I read all the ogscript manual, but I didn't find nothing about it. 

Thanks,

Hi Joao

Using the <webget/> tag, you can make calls from your Custom Panel into the browser. If we combine this with the YouTube APIs that Colin pointed to in his previous post, I believe you can get what you're after.  Here is an example that adds a playback toggle as a parameter that will start/stop the video:

<abs contexttype="opengear" id="_top" keepalive="false">
<meta>
<params>
<param access="1" constrainttype="INT_CHOICE" name="Playback" oid="Playback" precision="0" type="INT32" value="0" widget="toggle">
<constraint key="0">Play</constraint>
<constraint key="1">Play</constraint>
</param>
</params>
</meta>
<webget height="427" id="webget-player" left="136" top="89" width="666">
<html>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;!-- 1. The &lt;iframe&gt; (and video player) will replace this &lt;div&gt; tag. --&gt;
&lt;div id="player"&gt;&lt;/div&gt;

&lt;script&gt;
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an &lt;iframe&gt; (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'LeoKlM0iBr4'
});
}

function playVideo()
{
player.playVideo();
}

function stopVideo()
{
player.stopVideo();
}

function pauseVideo()
{
player.pauseVideo();
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</html>
</webget>
<param expand="true" height="68" left="135" oid="Playback" style="style:toggleButton;" top="519" width="667">
<task tasktype="ogscript">if (this.getValue() == 1)
{
ogscript.getComponentsById('webget-player')[0].callNoWait('playVideo', null);
}
else
{
ogscript.getComponentsById('webget-player')[0].callNoWait('pauseVideo', null);
}
</task>
</param>
</abs>

Cheers

James

Hello James,

Thank you very much for your attention.

I realized in the first lines of code you sent me, there is a parameter, right? 

<param access="1" constrainttype="INT_CHOICE" name="Playback" oid="Playback" precision="0" type="INT32" value="0" widget="toggle">

Is correct to creat it in this way? 

Will it be the unique parameter of the code? 

Thanks, 

Hi James,

I'm confusing about how put the right commands......because the code you sent me is different to Colin's API reference guide.

I already created the parameters and I gave an ID to my web Browser Frame (id=webget-player). So, my first code lines are ready.

<abs contexttype="opengear" id="_top" keepalive="false" style="">
<meta>
<params>
<param access="1" constrainttype="INT_CHOICE" name="Playback" oid="Playback" precision="0" type="INT16" value="0" widget="button">
<constraint key="0">Play</constraint>
<constraint key="1">Play</constraint>
</param>
</params>
</meta>
<webget height="281" id="webget-player" left="20" top="25" width="736"/>

However, How Can I continuing my proggraming? Because following instructions of API reference guide, I realized the <iframe> tag will replace <div> tag, but in his proggraming example, you pointed me ,this:

1. The &lt;iframe&gt; (and video player) will replace this &lt;div&gt; tag. --&gt;
&lt;div id="player"&gt;&lt;/div&gt;

I didn't find &lt;iframe&gt; nor &lt;div&gt; tag. --&gt; . I 'm so sorry for many silly doubts, but I'm stuck in this point now.

Thanks,

Hi JOÃO,

if I understand you correctly the issue you are having is the encoded brackets e.g. < being replaced by  &lt; Is that correct?

If so then when you are adding any html strings in an html tag as James has in the example he posted,  you must html encode reserved html characters, for more information you can read this https://www.w3schools.com/html/html_entities.asp

My recommendation is to create a separate html file e.g. index.html and build the webget html contents in there. You can also test this in the browser. Then use an online conversion tool e.g. https://www.web2generators.com/html-based-tools/online-html-entities-encoder-and-decoder to encode this content, then you can copy and paste this into your <html> tags nested inside the <webget>

I hope this helps

Colin.

Hi Colin, 

Yes, that's right. My current problem is understand what &lt; tag mean? and how to increment this command in my code lines? 

Because, regards informations sent me from James, I'l need to use this commands after 'Webget line':

<html>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;!-- 1. The &lt;iframe&gt; (and video player) will replace this &lt;div&gt; tag. --&gt;
&lt;div id="player"&gt;&lt;/div&gt;


On other hand, yours reference guide talks about <div> and <Iframe> commands, so at this moment ,I'm a bit confused.

However, first, I'd like to know if patrameter created by me is right? I think if I start with right way, the next steps will be easier.

Finally, when you talked about created a separete html file and build the webget html contents in there....it's sounds me similar to creating a XML separate file, e.g using a notepad app, Am I right? 

Thanks,

You may find it easier to modify the content of the embedded browser by selecting the <html/> tag underneath of the <webget/> tag - this will remove the XML-escaping that makes the web page hard to read:

As you mention, you can also provide relative file path to populate the <webget/> content.

You can create whatever you want for parameters - the key was the ability to get the <webget/> component and make script calls into it. I chose a simple toggle for my parameter to show the technique  but you are able to use whatever you want.

All of this is very specific to YouTube. If you're talking to another device (such as a BlackMagic Hyperdeck), you will likely use RossTalk to send messages to it and I am not certain what it exposes as a web API.

Cheers

James

Hi James,

I know that's case is so personal, and difficultly, we'll find something like that during a normal work day. I'm sorry for insist in it, but it's mine curiosity. 

I tried to reproduce this code <!DOCTYPE html>, but some errors ocurred later. Appears me a message saying 'Comment must start with <!--

After follow the isntruction, apperas me another message, "XML structures must start and end within the same entity". Is it gonna happening because I'm not created a separete html file? 

 Using the links sent me from Colin, I already understood how HTML codes works. I realized that first we declared a documment type, but after I'm not certain about which code may I use? <Iframe> or <div id>? 

When I did a XML separet files, I opened a notepad app, and just pasted there the parametes I previously created on dashboard parameters. Now, I don't know how to do the same thing with HTML separete file, as Colin adviced me.

Thank you very much for your time.  

Hi Joao

You are editing the HTML for the webget inside of the Custom Panel's XML source directly - this will be difficult to achieve.

If you are  creating a new webget, you'll want to simply add the <html/> tag underneath of it like this:

Once you do that, you can select the <html/> tag and modify the content in the nicer editor that manages the XML encoding/decoding for you:

Cheers

James

Hello,

How can I create a new webget? I got this webget because I added this code line on "abs[id=_top,contextype=opengear]":

<webget height="281" id="webget-player" left="84" top="38" width="736"/>

Thanks,

The webget is not part of the Panel Builder toolbar as it is a more advanced control (with the ability to make scripting calls to/from it) and a browser is typically sufficient. I included it in this post as it was the only way to achieve the goal of modifying the embedded YouTube clip from parameters on the Custom Panel.

The easiest way to create a new webget is to create a browser and then, in the source tab, replace the word "browser" with "webget" before hitting "Apply".

James

In the code line : tag.src = "https://www.youtube.com/iframe_api";

Is this URL address an example? or Need I repeat it?

Thanks,

Hi James, 

Thanks for teachs me to create a webget, it's really easy. But when I did my new webget, it appeared to me as a simple file not a folder. The archive that became a folder was the HTML. Is there any problem? 

You need to modify the source to add the <html/> tag if you want to manually-code the HTML inside of your webget.

So

<browser height="427" id="webget-player" left="136" top="89" width="680"/>

becomes

<webget height="427" id="webget-player" left="136" top="89" width="680">
<html/>
</webget>

Once you hit the "apply" button, you will be able to select the "html" node in the tree.

Then entire HTML content of the example I posted is simply copied/pasted from the YouTube API reference (mentioned by Colin originally). I modified it slightly to give more control over play/pause/stop but anything related to that internal document would be YouTube specific.

James

Ok, thanks. Now it's running similar yours example.

So, after I opened the webget's tree and hitted HTML file, I pasted the code that you copied from API reference guide. But, when I clicked on 'Applay changes' button and close PanelBuilder, the changes aren't save. Idon't know what it's happening. Maybe I must include some commands on code lines, e.g attribute functions to player.playVideo, but I'm not sure.  

cheers,