Instruct through network

[ogmkp]

Is your feature request related to a problem? Please describe. Unless I am mistaken, it is not possible to control lower thirds through networking, control panel and viewing page have to be in the same CEF environment.

Describe the solution you'd like Reaching the control panel on an IP address via http and source browser also uses the viewer on the same principle, hosted like nodecg or nginx-php solution.

Is it possible? Thank you.

[noeal-dac]

Hi! It's very interesting. This would open up a lot of possibilities. I'll think about it. Thank you for your contribution! ^^

[Cypris2010]

An much simpler solution would be to access the location where you store the text inserted through the controlpanel. Where are the values stored?

[istvanmate]

Currently I am hosting all the files on an application web server (because CORS restriction). I customized browser-source and control-panel a little and included a custom .js in control-panel, which accesses the api of the application (hence the need to host the files there) and updates the input fields and controls of control-panel and calls the refresh/update function showing the necessary result on browser-source. I can share code if needed.

[Cypris2010]

Currently I am hosting all the files on an application web server (because CORS restriction). I customized browser-source and control-panel a little and included a custom .js in control-panel, which accesses the api of the application (hence the need to host the files there) and updates the input fields and controls of control-panel and calls the refresh/update function showing the necessary result on browser-source. I can share code if needed.

That would be great. Why do you not fork the project?

[istvanmate]

We are using OpenLP as lyrics projection in a church. It has a basic built-in web server, which in the new version supports websockets. Accessing it's api required me to host the lowerthird files on the server, at least until i can set the Access-Control-Allow-Origin header to *.

I do not see the need here to fork the project (yet), as my code is far too custom for my needs, not sure if anyone else would profit from it. Or people fork projects every time for any small custom once-in-a-lifetime-used change? I'm quite new to this git thing...

Anyway, we required multi line lowerthirds so after some testing I found out, that modes with vertical animations have problems when enabling multiple lines on them, so I enabled it only on lt 3 and 4:

style-source.css (basically uncomment the lines):

.logo {align-self: start;}
.style-1 > .graph-1 { align-self: start;}
.alt.style-1.left > .text-content {margin-right: 1em;} 
.alt.style-1.right > .text-content {margin-left: 1em;}

#lower-third-3 > div.text-content > div:first-child,
#lower-third-3 > div.text-content > div:nth-child(2),
#lower-third-4 > div.text-content > div:first-child,
#lower-third-4 > div.text-content > div:nth-child(2) {height: auto!important;}
#lower-third-3 > div.text-content > div:first-child div,
#lower-third-3 > div.text-content > div:nth-child(2) div,
#lower-third-4 > div.text-content > div:first-child div,
#lower-third-4 > div.text-content > div:nth-child(2) div {line-height: 1.2em;}

Also remove display: inline-flex; from .text-content > div:first-child div otherwise small html tags like will separate text into columns

.text-content > div:first-child div {
/*    display: inline-flex;*/
}

Then I added the following lines to browser-source.html, this makes me able to control the appearance with injected code in the text, will example it later:

alt_3_name_openlp = alt_3_name
document.getElementById("alt-3-name").style.cssText = ""
stylesString = alt_3_name_openlp.match(/{.*?}/)
if (stylesString) {
    alt_3_name_openlp = alt_3_name_openlp.replace(stylesString[0], "")
    document.getElementById("alt-3-name").style.cssText = stylesString[0].slice(1,-1)
}
document.getElementById("alt-3-name").parentNode.style.cssText = ""
stylesString = alt_3_name_openlp.match(/%.*?%/)
if (stylesString) {
    alt_3_name_openlp = alt_3_name_openlp.replace(stylesString[0], "")
    document.getElementById("alt-3-name").parentNode.style.cssText = stylesString[0].slice(1,-1)
}
alt_3_info_openlp = alt_3_info
document.getElementById("alt-3-info").style.cssText = ""
stylesString = alt_3_info_openlp.match(/{.*?}/)
if (stylesString) {
    alt_3_info_openlp = alt_3_info_openlp.replace(stylesString[0], "")
    document.getElementById("alt-3-info").style.cssText = stylesString[0].slice(1,-1)
}
document.getElementById("alt-3-info").parentNode.style.cssText = ""
stylesString = alt_3_info_openlp.match(/%.*?%/)
if (stylesString) {
    alt_3_info_openlp = alt_3_info_openlp.replace(stylesString[0], "")
    document.getElementById("alt-3-info").parentNode.style.cssText = stylesString[0].slice(1,-1)
}
if (alt_3_info == " ") {document.getElementById("alt-3-info").parentNode.style.display = "none"} else {document.getElementById("alt-3-info").parentNode.style.display = "block"} //hide element if its content is " "

Then I included openlp.js in control-panel.html, in which the relevant code is:

$('#alt-3-name')[0].value = "" //disables LT3
$('#alt-3-info')[0].value = ""
$('#alt-4-name')[0].value =`${OpenLP.currentSlides[OpenLP.currentSlide]["html"].replace(/(<div class='dia'.*?>|<\/div>)/g,"")}{font-variant:small-caps;text-shadow:1px 1px .2em rgba(0,0,0,0.75);}` //OpenLP.currentSlides[OpenLP.currentSlide]["html"] is the text content I want in the lowerthird, replace strips unnecessary formatting, then css code between "{" "}" is injected to apply to the input element
$('#alt-4-info')[0].value = " " //hides info element
$('#alt-4-align-left').prop('checked', true)

or

$('#alt-3-name')[0].value = ""
$('#alt-3-info')[0].value = ""
$('#alt-4-name')[0].value = `${OpenLP.currentSlides[OpenLP.currentSlide]["html"].replace(/(<div class='dia'.*?>|<\/div>)/g,"")}{text-shadow:1px 1px .2em rgba(0,0,0,0.75);font-size:1.5em;padding-bottom:.2em;text-align:justify}`
$('#alt-4-info')[0].value = `${OpenLP.currentItemTitle}{text-shadow:1px 1px .2em rgba(0,0,0,0.75);padding-bottom:.2em;}%text-align:right;%` //OpenLP.currentItemTitle contains string to be shown in info field, css code between "{" "}" is injected to apply to the input element and code between "%" "%" is injected to be applied to the parent of the input element
$('#alt-4-align-right').prop('checked', true)

Then

refreshData()

is called to push the changes.

Works like a charm.

Just figured out how to format code in commenting, also created a branch here: https://github.com/istvanmate/Animated-Lower-Thirds/tree/integrating-openlp

[ogmkp]

This project seems to be dead, so I'm closing this issue.