webopi js not CSS for web Klemen Vodopivec

webopi. js (not) CSS for web Klemen Vodopivec SNS, ORNL September 22, 2016 ORNL is managed by UT-Battelle for the US Department of Energy

Goals • Reuse. opi&. bob files generated by CSS • Or just use CSS instead of some HTML design tool • Convert to HTML 5 • Wide client support – Web browser – Mobile devices 2 webopi. js – (not) CSS for web

Target use cases • Access from anywhere • Users with limited or no remote access • No CSS installed – Conference rooms – Mobile devices • Live status pages – SNS accelerator operating status images generated every 60 s 3 webopi. js – (not) CSS for web

Similar projects • Web. OPI – Doesn’t scale, or does it? • Web. PDA – Web. Socket infrastructure in place – Requires HTML editing • Generalised widget properties for BOY 2/web. PODS – Google document, further progress (DLS)? • Web. PODS – Mainly Web. Socket server with client side usage example 4 webopi. js – (not) CSS for web

Selecting the right tool • Started as Java. Script proof of concept • Moved to server generated HTML with PHP – Input files change rarely, generate output on change – Use of templates for widgets – PHP? • Requires support in web server • Yet another language • Outdated • Back to Java. Script – JS can do templates as well – Can even do cached templates 5 webopi. js – (not) CSS for web

High level architecture 6 webopi. js – (not) CSS for web

OPI => HTML • Load generic index. html first, followed by embedded webopi. js • webopi. js: – $. get(opi_path_from_URI) – $. each(widget, function() { • $. get(widget_tmpl) • widget_html = replace_vars_n_macros() • $(body). html += widget_html –} 7 webopi. js – (not) CSS for web

OPI => HTML – templates • One template per widget type • Placeholders for every widget property ( {{property}} ) – Replaced at runtime with property value from OPI – Some need conversion – Others used as is • Using handlebars template engine – Supports blocks (list, each, if, etc. ) – Customizable through helpers • Template files can be precompiled and stored on server – Converted to Java. Script functions – Significant performance improvement on client side 8 webopi. js – (not) CSS for web

PV update details • Update message has PV name (ca: //my_number) • Use j. Query selectors to find all widgets linked to PV name – $('[data-pv="' + msg. pv_name + '"]'). each(function() {} ); • Invoke widget-type-specific callback to update the value 9 webopi. js – (not) CSS for web

Web. Socket communication • Custom WS server but, – want to use Web. PODS • Already supports CSS protocols (loc: //, pva: //, ca: //, etc. ) • Has potential for wide use • Supports rate limiting • Client uses j. Query API • Update all available fields, including – – Units Alarm Timestamp Precision 10 webopi. js – (not) CSS for web

Status • Modular infrastructure • Web. Socket communication – Read only – Real time updates • Alarms • CSS-like templates – For all supported widgets – Templates can be changed/themed 11 webopi. js – (not) CSS for web

Status – supported widgets • 14. 28% of all widgets – – – – Text. Update Text. Input Label LED Group. Container Action. Button Bool. Button 12 webopi. js – (not) CSS for web

Things to do • Too much to list 13 webopi. js – (not) CSS for web

Things to do • Too much to list, but let’s try – Verify browser support – Arc widget – Boolean Symbol Monitor widget – Remaining widgets – Polyline widget – Multistate Symbol Monitor widget – Rules – Polygon widget – Menu Button widget – Scripts – Rectangle widget – Spinner widget – Write support – Rounded rectangle widget – Scaled Slider widget – Switch to Web. PODS – Ellipse widget – Knob widget – Make output nice – Image widget – Scrollbar widget – Match CSS output – Image boolean indicator widget – Thumb Wheel widget – Test on mobile devices – Meter widget – Boolean Switch widget – Authentication – Progress Bar widget – Boolean Button widget – Test performance – Gauge widget – Image Boolean Button widget – Databrowser files – Thermometer widget – Check Box widget – PVTable files – Tank widget – Radio Box widget – Node. js – XY Graphs widget – Choice Button widget – BOB files – Intensity Graph widget – Combo widget – Byte Monitor widget – +11 more – Vtable Display widget – and Kunal wants to add more!? 14 webopi. js – (not) CSS for web

Demo 15 webopi. js – (not) CSS for web

Thanks 16 webopi. js – (not) CSS for web