Introducing WebCG Framework

#1
Hello to the CasparCG community. I would like to introduce you a framework i was working on lately.
Image
Image
WebCG is an open source (free to use and modify) framework capable of generating dynamic HTML templates for CasparCG. It provide all functionalities to add your own code: CSS, HTML, PHP and Javascript. It allows the user to control dynamically specific elements in the HTML template by passing them values while the graphics are On-Air.

Also, PHP and Javascript code can get executed allowing the implementation of elements like: live news scroller from XML feed, local weather, etc. The current download comes with the following examples: HD Color Bars with tone, Logo, Animation Example, Lower third, News scroller, News ticker and Time feed.

The Rundown page provides ease of access to various functionalities as seen on the image above. A command-log provides visual representation of the actual commands send to CasparCG server.

WebCG was designed to be efficient and fast. From the config.php file you can edit the channel resolution (default HD 1920×1080), database settings, CaspasrCG server parameters, etc.

WebCG Website (with download URL): https://github.com/BroadcastVision/webCG

Please let me know your thoughts and comments.

I have few things i want to implement in the future like playing multiple layers at once and grouping of layers.
Last edited by AVID_Eng on 21 Mar 2018, 12:59, edited 7 times in total.

Re: Introducing WebCG Framework

#3
It looks like a very nice product. Congratulations on the release.

The choice for php is interesting to me, one disadvantage I see is that many other clients don't require you to run a full webserver and database. What was your motivation to choose for this?
CasparCG enthusiast and broadcast geek

Re: Introducing WebCG Framework

#4
balte wrote:It looks like a very nice product. Congratulations on the release.

The choice for php is interesting to me, one disadvantage I see is that many other clients don't require you to run a full webserver and database. What was your motivation to choose for this?
Thanks balte

The web server is necessary for the framework because it need to save the values somewhere (MySQL) and PHP is also necessary because you can execute code in your HTML templates. For example you can embed a PHP script that will get the latest news from an XML feed, etc.

Running a web server is not so bad. I choose this setup because HTML templates allows you to produce in an easy way various graphics something I did not see in other clients. I mean you add your HTML+CCS+PHP+Javascript and you can produce nice HTML templates.

Re: Introducing WebCG Framework

#5
Right, I understand why a web and database server are necessary when you use PHP as a programming language but then what was your motivation to choose PHP?

In my opinion for a local CasparCG client, all of what you said can easily be done without a web server. (note: I see a webserver as a huge dependency needed to run a program) A database could be file based, HTML templates can execute javascript which is all you need, and template generation can be done in basically any programming language.

Don't get me wrong, I have no critique of the execution or idea, but as someone who uses web technologies (javascript) to write CasparCG Clients I am interested in your ideas and how you made your choices.
CasparCG enthusiast and broadcast geek

Re: Introducing WebCG Framework

#6
Sure a file database would be faster than MySQL but it get more complicated. I guess i am more comfortable with MySQL for the development of this project. Also, with MySQL its very easy to store and access data in various text encodings.

I am not getting you wrong! A web server is a huge dependency and increase the risk involved of something going wrong. But so far i did not have any issues.

Re: Introducing WebCG Framework

#11
Hi AVID_Eng

I did i a try and is ver nice!
I could use with the lamp server on the same machine as CasparCG but with differente adresses, it just shows me "CasparCG [casparcgserver-ip:5250] is offline: Permission denied"
What can I do to overcome this ?

thanks in advance

Re: Introducing WebCG Framework

#15
Did you start CasparCG Server? Start it and then reload the Rundown page. It should be OK.

Is CasparCG server accessible from: 127.0.0.1:5250

Make sure you define the correct IP:Port from logic/config.php file.
Yes, It's definetly running and accessible from another client, like "complice" said.
The IP in logic/config.php is correctly defined as well.


Thanks again

Re: Introducing WebCG Framework

#16
Did you managed to make it work? Check your web-server if it start correctly. Both Apache and php are required.

Try the latest version v1.3 (check my signature) as i have fix some minor issues.

If you still have issue please contact me via Private Message to assist you.

Re: Introducing WebCG Framework

#17
Hi
Did you managed to make it work? Check your web-server if it start correctly. Both Apache and php are required.
It's working perfectly (apache,php ans so forth), as long as CasparCG Server is running on the same server as WebCG. If I change to a different CasparCg Server other than Localhost, It down not connet at all.
Try the latest version v1.3 (check my signature) as i have fix some minor issues
I have tried the version but I have the very same problem. I 'll contact you privately

Thanks

Re: Introducing WebCG Framework

#18
Thank deedos for the observation you made.

I find out that you need to make a change in Apache to make it work. Check the detailed answer on this topic in stackoverflow: http://stackoverflow.com/questions/2400 ... wamp-sites

In summary you will need to edit:
\wamp\bin\apache\apache{version}\conf\extra\httpd-vhosts.conf

and change the line where it says:

Code: Select all

Require local
to:

Code: Select all

Require all granted
Restart WAMP after the changes.

Also, make sure you are accessing WebCG from the IP of your machine.
I mean don't access it from http://127.0.0.1/webcg. You should access it from http://ip_address/webcg

Re: Introducing WebCG Framework

#19
Dear friend, i am trying your webcg client. It seems very usefull and very simple to explain. We have a caspar server running well, 2 channels outputs and 2 channels inputs. Server 2.07 Stable release with client 2.0. 8. I can also control the server using telnet in windows and using bash in linux. Following your instructions wampp was installed as a first step. It seems run ok with mysql and apache. There are a lot of suggestions about the c libraries that wamp needs in order to run without problems. Really i dont know i could get the exact version they suggest for each library.. but now i have running apache and i see the mysql administrator page. Also the configuration of the new database that webcg requires was imported well. I can get the webcg main page in localhost and can explore the runtime and the pages, newscg, twiitter, lower third etc. My problem is, the caspar server disconnect the webcg client a few milliseconds after the connection is accepted. The webcg page shows the server exist, the ip addres and port, ( this info is correct) . But the caspar server status windows information out is
2018-03-02 15:02:27.156 [3404] ACCEPTED CONNECTION FROM 127.0.0.1 2
2018-03-02 15:02:27.163 [3404] CLIENT 127.0.0.1 WAS DISCONNECTED
When i reload the web page i get the same message. Again and again.
Then i can not execute any command over the caspar using webcg. If i start the caspar client, or a telnet command the server execute the command very well. I am thinking to reinstall all the libraries and wampp again but before that ... if you have any suggestion... anyway .. thank you very much.. i like webcg.. excelent work..

Re: Introducing WebCG Framework

#20
macbab wrote:
02 Mar 2018, 19:27
Dear friend, i am trying your webcg client. It seems very usefull and very simple to explain. We have a caspar server running well, 2 channels outputs and 2 channels inputs. Server 2.07 Stable release with client 2.0. 8. I can also control the server using telnet in windows and using bash in linux. Following your instructions wampp was installed as a first step. It seems run ok with mysql and apache. There are a lot of suggestions about the c libraries that wamp needs in order to run without problems. Really i dont know i could get the exact version they suggest for each library.. but now i have running apache and i see the mysql administrator page. Also the configuration of the new database that webcg requires was imported well. I can get the webcg main page in localhost and can explore the runtime and the pages, newscg, twiitter, lower third etc. My problem is, the caspar server disconnect the webcg client a few milliseconds after the connection is accepted. The webcg page shows the server exist, the ip addres and port, ( this info is correct) . But the caspar server status windows information out is
2018-03-02 15:02:27.156 [3404] ACCEPTED CONNECTION FROM 127.0.0.1 2
2018-03-02 15:02:27.163 [3404] CLIENT 127.0.0.1 WAS DISCONNECTED
When i reload the web page i get the same message. Again and again.
Then i can not execute any command over the caspar using webcg. If i start the caspar client, or a telnet command the server execute the command very well. I am thinking to reinstall all the libraries and wampp again but before that ... if you have any suggestion... anyway .. thank you very much.. i like webcg.. excelent work..
Hi all,
Same problems for me...
My solution is:

- Disable IpV6 on the webCG server network interface ( Tutorial here )

- Disable IpV6 on the web server (Apache in my case cause i use wamp on windows for the tests). Find on stackoverflow :
If you are trying to run localhost, this answer will fix your problem. Just few changes on

-Open apache2/httpd.conf
-search all "listen" words ex:
Listen 80

Change with:
Listen 127.0.0.1:80
then restart your apache
Normally, if you reload the page, the templates now run correctly.

The reason:

Code: Select all

		$(document).ready(function() {
			$(".command").click(function(){

				// Get command.
				var command = $(this).data('command');
				
				// Update command textfield for preview.
				$('#executed-command').attr('value', command);
				
				// Send command to Command Handler for execution.
				$.ajax({			
					url: 'http://<?php echo $_SERVER["SERVER_ADDR"];?>/<?php echo $folder_main_path; ?>/logic/CommandHandler.php',
					type: 'POST',
					data: {casparcg_command: command}
				});

			});
		});
We can see in the command "<? Php echo $ _SERVER [" SERVER_ADDR "];?>"
By default, my web server returned :: 1 (aka Localhost in IPV6),but Ajax does not seem to like that. Disabling the ipV6 allows to return "127.0.01", so ajax arrives to send his command.



I hope this will help you !

Thank you for this awesome work AVID_Eng

Re: Introducing WebCG Framework

#21
macbab wrote:
02 Mar 2018, 19:27
My problem is, the caspar server disconnect the webcg client a few milliseconds after the connection is accepted. The webcg page shows the server exist, the ip addres and port, ( this info is correct) . But the caspar server status windows information out is
2018-03-02 15:02:27.156 [3404] ACCEPTED CONNECTION FROM 127.0.0.1 2
2018-03-02 15:02:27.163 [3404] CLIENT 127.0.0.1 WAS DISCONNECTED
When i reload the web page i get the same message. Again and again.
Then i can not execute any command over the caspar using webcg. If i start the caspar client, or a telnet command the server execute the command very well. I am thinking to reinstall all the libraries and wampp again but before that ... if you have any suggestion... anyway .. thank you very much.. i like webcg.. excelent work..
Hello,
This is normal. Am using a php connection script to connect to CasparCG, execute the command and then close the connection. PHP can not keep the connection open.

Just let you know that i have released v1.8 which fix some issues and improves the GUI.
https://github.com/BroadcastVision/webCG