Re: [Cs-studio-users] Webopi issue with Text Update widget rule

[Kasemir, K. <kas...@or...>]

Hi:

>I’m prototyping a simple CS-Studio Boy OPI and I would like the OPI be accessible via webopi, but I’m experiencing webopi strange behaviour. 
> ..works fine in the BOY screen, but in the webopi the text is not always displayed
That's how it is, sorry.
Performance wise, the webopi is simply not a feasible approach.
When CS-Studio runs as a desktop application, it can directly draw on your screen.
The webopi uses the same CS-Studio Boy code, but replaces the SWT graphics library with the RAP library.
RAP basically runs a web server, and now sends javascript to the web client. The web client asks for updates, the web server sends drawing commands as text to a web client, web client interprets the commands, performs the drawing, and then asks for more commands.

That was at the time a really neat trick, because for little effort (just replace a library) we can see *.opi displays on the web.
But the performance it terrible. Drawing on the screen turns into text similar to what's copied below to be exchanged between web server and client, which is then slowly handled by javascript.
We still use it for a few very simple displays, just label and textupdate, but the update rates are poor.
We additionally reduce the update rate via
org.csstudio.opibuilder/opi_gui_refresh_cycle=10000

For remote access we mostly switched to  remote desktop tools like Thinlic, which gives you a remote desktop in a web browser.
So we're running the normal CSS on a linux computer, and then view that via Thinlic, because the webopi approach simply doesn't work.

Another approach for the web opi would be what Klemen presented at the 2016 EPICS meeting at SNS, see "webopi -CSS for the web" on https://conference.sns.gov/event/11/contributions .
That approach also uses existing *.opi files, but javascript creates plain HTML objects and the reads data via web sockets.
So only the value updates of PVs are transferred over the net, not the drawing commands.
At this time, however, that project is just a demonstration of the idea, we had no time to pursue it further.

-Kay

----------------------

{
"meta": {
"requestCounter": 16
},
"operations": [ [ "set", "w13", {
"bounds": [ 4, 4, 1912, 332 ]
} ], [ "set", "w42", {
"bounds": [ 0, 0, 1912, 332 ]
} ], [ "set", "w44", {
"bounds": [ 1, 1, 1910, 330 ]
} ], [ "set", "w47", {
"bounds": [ 0, 0, 1910, 330 ]
} ], [ "set", "w9", {
"bounds": [ 0, 0, 1910, 330 ]
} ], [ "set", "w48", {
"bounds": [ 0, 314, 1894, 16 ]
} ], [ "set", "w49", {
"bounds": [ 1894, 0, 16, 314 ],
"pageIncrement": 235,
"thumb": 314
} ], [ "set", "w50", {
"bounds": [ 0, 0, 1894, 314 ]
} ], [ "call", "gc51", "init", {
"strokeStyle": [ 74, 74, 74, 255 ],
"width": 1894,
"fillStyle": [ 255, 255, 255, 255 ],
"height": 314,
"font": [ [ "Verdana", "Lucida Sans", "Arial", "Helvetica", "sans-serif" ], 14, false, false ]
} ], [ "call", "gc51", "draw", {
"operations": [ [ "beginPath" ], [ "rect", 0.0, 0.0, 1894.0, 314.0 ], [ "fill" ], [ "strokeStyle", [ 0, 0, 0, 255 ] ], [ "strokeText", "IPTS:", false, true, true, 0.0, 5.0 ], [ "strokeText", "Run:", false, true, true, 0.0, 35.0 ], [ "lineWidth", 1 ], [ "beginPath" ], [ "rect", 90.5, 30.5, 76.0, 24.0 ], [ "stroke" ], [ "fillStyle", [ 255, 0, 255, 255 ] ], [ "beginPath" ], [ "rect", 91.0, 31.0, 75.0, 21.0 ], [ "fill" ], [ "strokeStyle", [ 255, 255, 255, 255 ] ], [ "lineWidth", 1 ], [ "strokeText", "Disconnected", false, false, false, 94.0, 32.0 ], [ "strokeStyle", [ 0, 0, 0, 255 ] ], [ "lineWidth", 1 ], [ "fillStyle", [ 255, 255, 255, 255 ] ], [ "beginPath" ], [ "rect", 90.5, 60.5, 150.0, 24.0 ], [ "stroke" ], [ "fillStyle", [ 255, 0, 255, 255 ] ], [ "beginPath" ], [ "rect", 91.0, 61.0, 149.0, 21.0 ], [ "fill" ], [ "strokeStyle", [ 255, 255, 255, 255 ] ], [ "lineWidth", 1 ], [ "strokeText", "Disconnected", false, false, false, 94.0, 62.0 ], [ "strokeStyle", [ 0, 0, 0, 255 ] ], [ "lineWidth", 1 ], [ "fillStyle", [ 255, 255, 255, 255 ] ], [ "beginPath" ], [ "rect", 250.5, 60.5, 136.0, 24.0 ], [ "stroke" ], [ "fillStyle", [ 255, 0, 255, 255 ] ], [ "beginPath" ], [ "rect", 251.0, 61.0, 135.0, 21.0 ], [ "fill" ], [ "strokeStyle", [ 255, 255, 255, 255 ] ], [ "lineWidth", 1 ], [ "strokeText", "Disconnected", false, false, false, 254.0, 62.0 ], [ "strokeStyle", [ 0, 0, 0, 255 ] ], [ "fillStyle", [ 255, 255, 255, 255 ] ], [ "strokeText", "BM1, 2:", false, true, true, -1.0, 95.0 ], [ "lineWidth", 1 ], [ "beginPath" ], [ "rect", 90.5, 90.5, 150.0, 24.0 ], [ "stroke" ], [ "fillStyle", [ 255, 0, 255, 255 ] ], [ "beginPath" ], [ "rect", 91.0, 91.0, 149.0, 21.0 ], [ "fill" ], [ "strokeStyle", [ 255, 255, 255, 255 ] ], [ "lineWidth", 1 ], [ "strokeText", "Disconnected", false, false, false, 94.0, 92.0 ], [ "strokeStyle", [ 0, 0, 0, 255 ] ], [ "fillStyle", [ 255, 255, 255, 255 ] ], [ "strokeText", "Detectors:", false, true, true, -1.0, 65.0 ], [ "fillStyle", [ 150, 150, 150, 255 ] ], [ "beginPath" ], [ "ellipse", 101.0, 132.0, 12.0, 12.0, 0.0, 0.0, -6.2832, true ], [ "lineTo", 101.0, 132.0 ], [ "fill" ], [ "fillStyle", [ 60, 100, 60, 255 ] ], [ "beginPath" ], [ "ellipse", 101.0, 132.0, 10.0, 10.0, 0.0, 0.0, -6.2832, true ], [ "lineTo", 101.0, 132.0 ], [ "fill" ], [ "fillStyle", [ 255, 255, 255, 255 ] ], [ "strokeText", "Shutter:", false, true, true, -1.0, 125.0 ], [ "fillStyle", [ 150, 150, 150, 255 ] ], [ "beginPath" ], [ "ellipse", 382.0, 162.0, 12.0, 12.0, 0.0, 0.0, -6.2832, true ], [ "lineTo", 382.0, 162.0 ], [ "fill" ], [ "fillStyle", [ 60, 100, 60, 255 ] ], [ "beginPath" ], [ "ellipse", 382.0, 162.0, 10.0, 10.0, 0.0, 0.0, -6.2832, true ], [ "lineTo", 382.0, 162.0 ], [ "fill" ], [ "fillStyle", [ 255, 255, 255, 255 ] ], [ "strokeText", "Progress:", false, true, true, 0.0, 155.0 ], [ "fillStyle", [ 200, 200, 200, 255 ] ], [ "beginPath" ], [ "rect", 93.0, 152.0, 272.0, 21.0 ], [ "fill" ], [ "fillStyle", [ 0, 0, 255, 255 ] ], [ "beginPath" ], [ "rect", 93.0, 152.0, 272.0, 21.0 ], [ "fill" ], [ "fillStyle", [ 255, 255, 255, 255 ] ], [ "strokeText", "Finish:", false, true, true, 0.0, 185.0 ], [ "fillStyle", [ 150, 150, 150, 255 ] ], [ "beginPath" ], [ "ellipse", 102.0, 222.0, 12.0, 12.0, 0.0, 0.0, -6.2832, true ], [ "lineTo", 102.0, 222.0 ], [ "fill" ], [ "fillStyle", [ 255, 0, 0, 255 ] ], [ "beginPath" ], [ "ellipse", 102.0, 222.0, 10.0, 10.0, 0.0, 0.0, -6.2832, true ], [ "lineTo", 102.0, 222.0 ], [ "fill" ], [ "fillStyle", [ 255, 255, 255, 255 ] ], [ "strokeText", "Equipment:", false, true, true, 0.0, 215.0 ], [ "strokeText", "secs", false, true, true, 370.0, 35.0 ] ]
} ], [ "set", "w46", {
"bounds": [ 0, 0, 1912, 332 ]
} ], [ "set", "w80", {
"bounds": [ 1, 1, 1910, 330 ]
} ], [ "set", "w14", {
"bounds": [ 12, 338, 106, 22 ]
} ], [ "set", "w15", {
"bounds": [ 2, 338, 10, 22 ]
} ] ]
}