React Caspar Client

General
, ,
#1

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.
    Untitled
    Untitled2110×1080 895 KB
9 Likes
#2

WOW
Super work

2 Likes
#3

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

1 Like
#4

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
#5

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

1 Like
#6

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

2 Likes
#7

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

3 Likes
#8

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
#9

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
#10

This is awesome!!!

1 Like
#11

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

1 Like
#12

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
#13

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

4 Likes
#14

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
#15

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
#16

Style Creating and Applying in RCC

2 Likes
#17

Thumbnail_Preview of canvaslist

2 Likes
#18

Shapes in RCC

1 Like
#19

Chart in RCC.

#20

Tennis and badminton in RCC

2 Likes
Privacy Policy   Terms of Service