8
1 Generating CSS-BOY Screens Mary Ann Antonioli Detector Support Group July 4, 2020

Generating CSS-BOY Screens...CSS widget is needed CSS widget examples include text update, text input, LED, button –Add appropriate widget to CSS screen –Create CSS process variable

  • Upload
    others

  • View
    21

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Generating CSS-BOY Screens...CSS widget is needed CSS widget examples include text update, text input, LED, button –Add appropriate widget to CSS screen –Create CSS process variable

1

Generating CSS-BOY Screens

Mary Ann AntonioliDetector Support Group

July 4, 2020

Page 2: Generating CSS-BOY Screens...CSS widget is needed CSS widget examples include text update, text input, LED, button –Add appropriate widget to CSS screen –Create CSS process variable

27/15/2020

Contents

Detector Support Group

• Motivation

• Human Machine Interface (HMI) screen example

• Control System Studio - Best OPI Yet (CSS-BOY) screen generation process

• CSS-BOY screen example

• Conclusion

Page 4: Generating CSS-BOY Screens...CSS widget is needed CSS widget examples include text update, text input, LED, button –Add appropriate widget to CSS screen –Create CSS process variable

47/15/2020

HMI Screen Example

Detector Support Group

• HMI screen to be generated into CSS-BOY screen

Page 5: Generating CSS-BOY Screens...CSS widget is needed CSS widget examples include text update, text input, LED, button –Add appropriate widget to CSS screen –Create CSS process variable

57/15/2020

CSS-BOY Screen Creation Process

Detector Support Group

• Add any needed background image – Add image to CSS file folder– Using an image widget, add image to screen

• For a single widget, process is as follows– Check HMI graphic object’s code to determine what type of

CSS widget is needed CSS widget examples include text update, text input, LED, button

– Add appropriate widget to CSS screen– Create CSS process variable (PV) name

Identify HMI tag name associated with graphic object Use tag name as a base for PV name and make appropriate additions

to tag to create new CSS PV name Add PV to spreadsheet

Page 6: Generating CSS-BOY Screens...CSS widget is needed CSS widget examples include text update, text input, LED, button –Add appropriate widget to CSS screen –Create CSS process variable

67/15/2020

CSS-BOY Screen Creation Process, contd.

Detector Support Group

– Add appropriate code to CSS widget PV name rule – changes behavior of widget, such as color or blinking,

depending on PV value action – executed process, such as opening another screen script – for more complex process that cannot be executed in a rule

• Complete all widgets– CSS-BOY screen may not be identical to HMI screen because

there are available widgets that are not available as graphic objects HMI rectangle may become CSS LED

• Lay out and format widgets

• Test screen using testing software TOPIC

• ABRACADABRA!

Page 7: Generating CSS-BOY Screens...CSS widget is needed CSS widget examples include text update, text input, LED, button –Add appropriate widget to CSS screen –Create CSS process variable

77/15/2020

Voilà! CSS-BOY screen

Detector Support Group

Page 8: Generating CSS-BOY Screens...CSS widget is needed CSS widget examples include text update, text input, LED, button –Add appropriate widget to CSS screen –Create CSS process variable

87/15/2020

Conclusion

Detector Support Group

CSS-BOY screens are being created based on HMI screens, for both Hall A and Hall C