Create Iframe or Equivalent as a Discreet Item. #1203
Comments
|
As a possible alternative, if we could attach an HTTP-Request action to an icon on a template, we could use the REST API to trigger next slide, previous slide, etc. @vassbo, which is easier? iframe or allowing an action trigger from a template? The only ones available right now are Time until show and Time until hide. Here is what I was able to do, that didn't work. If it did, it would have almost been what @Alterios wanted.
For end users looking for something like this hybrid screen, I think the end user experience would best be served with another Connection in settings. Perhaps called "PresenterControlShow" and use port 5514. *@vassbo, if you would like me to create a custom html5/js page to see if those buttons work and/or use a working Bitfocus Companion combo I can do that. However, I don't think they would work either in creating a hybrid output/control screen. |
|
I worked up a quick page that should do what @Alterios wants. I used the connections OutputShow and ControlShow for the iframes in a "wrapper" page. The page uses a bit of JavaScript to retrieve a GET variable and change the IP address for the iframe src. I tested it and it works on Safari and Chrome/Edge. EDIT: I forgot to add that while I made the design responsive, the ControlShow from FreeShow is not completely responsive and doesn't "shrink" proportionally to really small screens which is not a bad thing. A current workaround is to adjust by changing the vh units on lines 8, 9, and 10. @Alterios, to use the file now, you will need to download the html file to the computer running FreeShow. If you don't have a webserver running on that computer, you will need to add one. I think you can use Simple Web Server. I've not tried it, but it looks like it would be easy to configure. Download and install. Run the server, change the folder path to where you put the page from me, and check the box to make the server Available on local network. Here is a link to the file. https://1drv.ms/u/s!AhhltP5EhB8ujpYjTb7qw0iwASeXLQ?e=NFUFg4 Here is the code. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom FreeShow Control</title>
<style>
body {margin:0px; padding:0px; }
.wrapper {display: grid; grid-template-rows: 50vh 50vh; } /*adjust the vh units to fit your device.*/
.OutputShow {width:100vw; height:50vh;} /*adjust the vh units to fit your device.*/
.ControlShow {width:100vw; height:50vh;} /*adjust the vh units to fit your device.*/
</style>
</head>
<body>
<div class="wrapper">
<div class="OutputShow" id="OutputShow">
<h1>Directions</h1>
<p>Please put the IP address, of the machine running FreeShow as a GET variable with the name IP. This device and the machine running FreeShow must be on the same network. For example, if the IP address of the FreeShow machine is 192.168.1.48 you would add ?IP=192.168.1.48 to the end of the url in the address bar and then click go/enter.
<br><br>
You can find the IP address of the FreeShow machine in Settings->Connections. This page assumes the default port numbers. If you changed the port numbers, please edit lines 36 and 37, save the document as an html file, and reload the page in your browser.
</p>
</div>
<div class="ControlShow" id="ControlShow">
Please verify you followed the directions above.
</div>
</div>
</body>
</html>
<script>
//Adapted from https://www.sitepoint.com/get-url-parameters-with-javascript/
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
if (urlParams.has('IP') ) {
const IP = urlParams.get('IP');
document.getElementById("OutputShow").innerHTML='<iframe src="http://'+IP+':5513/" class="OutputShow"></iframe>'; //Output Show page
document.getElementById("ControlShow").innerHTML='<iframe src="http://'+IP+':5512/" class="ControlShow"></iframe>'; //Control Show page
}
else { document.getElementById("ControlShow").innerHTML='<h1>Please follow the directions to add the IP address of the machine running FreeShow.</h1>'; }
</script> |
vassbo
added
question
|
@Alterios RemoteShow should have most of the features you mentioned! But the interface might be too much for the speaker? This is the look on a tablet: |
|
I just tried RemoteShow on my iPhone. @Alterios I think your paster could use it.
@vassbo That is one slick interface. I had no idea you designed it to change formats.
|
Describe the feature
Create an iframe or equivalent item as an element under the "Items" tab that can be added to slides, overlays, stage displays , or templates
Additional context
The creation of an iframe or iframe like element that can be placed like other items would allow web based content to be displayed on the screen or output stream.
The specific idea behind this request is to allow the addition of a small window in a stage display layout to interact with the control show stream. A speaker can have a tablet that allows him to see slides, notes, and advance slides when speaking all from one view. Currently, it takes two devices or two open browser windows to mimic the PowerPoint presentator view. The issue with the current use of two browser windows is that there is a high likelihood of accidentally tapping or clicking on the wrong place and covering or closing one of them resulting in issues while the speaker is on stage.
The addition of this not only allows for speaker control and view slides on one device, it can be used to create slide features such as picture-in-picture for items like websites related to the topic in either the stage view for them to see, or on the primary display as a visual aid embedded in the show.
The text was updated successfully, but these errors were encountered: