React Caspar Client

Note:- This post have been updated. Last update 04.10.22
Online Client https://vimlesh1975.github.io/ReactCasparClient/
What is new?
1.Threejs 3D

Dear forum
I want to share an work in progress ‘React Caspar Client’. This is for learning web based technology. This works on every version of casparcg.
How to test=>

  1. We need to have already installed nodejs in PC.
  2. Download and unzip with 7z. https://bit.ly/3jRrhDL
  3. Double click on Start_both.bat file.
9 Likes

WOW
Super work

2 Likes

It’s great. I have been waiting this for a long time. finally someone made one!!

1 Like

I’ve been enjoying playing around with this client!

Have you considered putting the code up on github so others might be able to contribute?

1 Like

Great work again Vimlesh. Working good… working good.
GOD bless.

1 Like

Thanks everybody for encouraging words.
I am new to github and now code has been published at GitHub - vimlesh1975/ReactCasparClient

2 Likes

A github link to the client to test.
https://vimlesh1975.github.io/ReactCasparClient/

3 Likes

Now much improved.
Features:-

  1. Template is html based so quality is good.
  2. Web based front end and remote operation is available.
  3. Designer is inbuilt in front end.
  4. Designer has zoom(Mouse wheel) and pan(Alt+Drag) facility to design roll and scroll.
  5. Multi pages can be saved and all pages can be saved in single file.
  6. Images can be directly used without downloading.
  7. Multi instance can be opened of this application.
  8. Design can be done on normal pc. For output casparcg is required.
  9. Instant operation is possible.
  10. Multi cahnnel operation is available like preview channel and program channel.
  11. Frame animation to graphics.
  12. Export and import svg xml.
  13. Now works on every version of casparcg.
  14. Export html and use it from any other client.
  15. Demo file included in download which have all type of templates.
  16. Works on every resolution.
  17. Start_both.bat file is include in download, which will act as shortcut for starting application.
  18. Up and down timer.
  19. Sports client.
  20. Automation feature to trigger graphics from self made frontend.
  21. Animation of position size and rotation.
  22. Multibullet Scroller.
  23. Staatus feedback of elements.

Download from ReactCasparcgClient - Google Drive

2 Likes

Caspar is great. New method to work with. Virtual html template.
Surprisingly If we copy and paste bellow content to casparcg console, we get UpTimer.

play 1-115 [HTML] xyz.html
call 1-115 " var aa = document.createElement('div'); aa.style.position='absolute'; aa.innerHTML='<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\" ?> <!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"> <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"1024\" height=\"576\" viewBox=\"0 0 1024 576\" xml:space=\"preserve\"> <desc>Created with Fabric.js 4.6.0</desc> <defs> </defs> <g transform=\"matrix(1 0 0 1 66.99 544.13)\" style=\"filter: url(#SVGID_48);\" id=\"uptimer1\" > <filter id=\"SVGID_48\" y=\"-126%\" height=\"352%\" x=\"-46%\" width=\"192%\" > <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"15\"></feGaussianBlur> <feOffset dx=\"0\" dy=\"0\" result=\"oBlur\" ></feOffset> <feFlood flood-color=\"rgb(0,0,0)\" flood-opacity=\"1\"/> <feComposite in2=\"oBlur\" operator=\"in\" /> <feMerge> <feMergeNode></feMergeNode> <feMergeNode in=\"SourceGraphic\"></feMergeNode> </feMerge> </filter> <rect fill=\"#50037c\" x=\"-56.99\" y=\"-14.13\" width=\"113.98\" height=\"28.25\"></rect> <text xml:space=\"preserve\" font-family=\"Arial\" font-size=\"25\" font-style=\"normal\" font-weight=\"bold\" style=\"stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; white-space: pre;\" ><tspan x=\"-56.99\" y=\"7.85\" >00:03:102</tspan></text> </g> </svg>'; document.body.appendChild(aa); document.body.style.margin='0'; document.body.style.padding='0'; aa.style.zoom=(102400/1024)+'%'; document.body.style.overflow='hidden'; var cc=document.getElementsByTagName('tspan')[0]; cc.textContent=''; var startTime = new Date(); setInterval(function() { var diff = (new Date()).getTime() - startTime.getTime(); var date_diff = new Date(diff - 30 * 60 * 1000); var ss1 = date_diff.toLocaleString('en-US', { minute: '2-digit', second: '2-digit' }) + ':' + String(date_diff.getMilliseconds()).padStart(3, '0'); cc.textContent =ss1; }, 40); "

4 Likes

This is awesome!!!

1 Like

Excellent Work Sir… :clap:t2: :clap:t2: :blush:

1 Like

excellent work vimlesh. we are waiting a caspar cg with designer from long time .it is accomplished because of you . Great Job vimlesh

2 Likes

Encouragement from people like you is the source of energy for this development.

4 Likes

very good react-caspar-client , i try this software is very easy and i like the layers how can control and how can use and we have many many many option for control and we can put video logo , and the time we can edit change background font everything and the scroll we can put text with logo and we have more option in software i need to thanks for the leader @vimlesh1975 about the great software :tulip: :tulip:

2 Likes

Automation of RCC has been done. Open this client and enable automation. Make some pages of graphics and then we can make our own client in our choice language and fire graphics with new data.

3 Likes

Style Creating and Applying in RCC

2 Likes

Thumbnail_Preview of canvaslist

2 Likes

Shapes in RCC

1 Like

Chart in RCC.

Tennis and badminton in RCC

2 Likes
Privacy Policy   Terms of Service