Agenda
Agenda2012年2月8日 (水)初心者向けCSS講習会@KEK
Takashi Nakamoto – takashi.nakamoto@cosylab.com

2

講習会の概要 参加者自身のPCにCSSをインストールし、実際に使ってみる
まだ一度もCSSを使ったことない方が主な対象者
 EPICSはある程度知っている前提
 EPICS IOCがすでに制御ネットワーク上にある前提 アシスタント: 三菱SC 中村 卓也 氏
 ルール
ついていけなくなった場合には、遠慮なく手を挙げてください。アシスタントがヘルプします。
 手を挙げている方が多くなれば、一旦中断します。早く進んでいる方は、周りの方のサポートをお願いします。
 途中、質問や疑問点があれば遠慮なく声を発してください。
 参加者名簿に書いたときの番号は覚えておいてください。


3

時間割
 10:00 – 10:30 「CSSとは」 ※トークのみ
 10:30 – 12:00 「CSSを起動してみる」
 12:30 – 13:30 昼休憩
 13:30 – 14:30 「CSS BOYを使ってみる」
 14:30 – 15:00 「CSSの画面構成」
 15:00 – 15:10 小休止
 15:10 – 16:00 「BOYの様々なウィジェット」
 16:00 – 16:30 質疑応答

4

謝辞
 この講習会では、ORNL/SNSのDr. Kay Kasemirの資料を一部使わせていただいております。
http://www-linac.kek.jp/cont/epics/css/CSS_Talk.ppt
http://www-linac.kek.jp/cont/epics/css/KEK_CSS_Intro.pptx

 いくつかの画像については、CSSのオンライン
ヘルプのものを使用しています。

初心者向けCSS 講習会@KEK

CSSとは

6

トークの前に
 話を聞きながらCSSをダウンロードしてください
http://www-linac.kek.jp/cont/css/
 zipファイルを展開するところまで


7

CSSとは
 エンドユーザーにとってオペレータ・実験者・制御システムインテグレー
ター向けの統合されたユーザーインターフェース
 EPICSの各種ツール（Probe、Strip Chart、etc.）を置き換える
CSS: A Collaboration
 Began in 2006 between
DESY and SNS

 Joined by CLS, APS, BNL,
, Diamond, …, KEK/J-PARC?
: https://sourceforge.net/apps/trac/cs-studio/wiki– Wiki, Mailing lists, code repository Growing presence at EPICS meetings

 Benefits from Eclipse community– EclipseCon 2011: Way over 500 participants from~30 countries
8

Managed by UT-Battelle
for the Department of Energy

CSS: A Control System Architecture– Portable programming environment with very
good development tools– Basic bundling: Java Archive Files (JARs)Rich Client Platform (RCP)– Extensible bundling: Plug-Ins, Extension points,
Registry– Framework for GUI with menus, windows, subpanels, online help, preferences, …

9Managed by UT-Battelle
for the Department of Energy

CSS: A Software Toolkit
 It’s BIG– Repository: ~ 1.500.000 lines of Java Code

 Structured– 70 ‘core’ plugins, about 300 total– About 40% of code is comments and formatting You pick what you need
– SNS uses ~300.000 (20%)
Perl cloc tool on July 2011 cs-studio3.0 repo and SNS source snapshot, excluding zip files
10 Managed by UT-Battelle
for the Department of Energy

CSS: A Software Toolkit
 Library Plug-Ins– Life data access, Historic Data Access, Control system data types(PV, Sample, …), Logbook , EMail, Authentication, Authorization,…
– Pluggable
 Historic Data: XML-RPC, RDB, …
 Authentication: Kerberos, LDAP, …

 Application Plug-Ins– Strip-Chart: Data Browser– OPI: SDS, BOY– Alarms: NAMS, BEAST– Archive: DESY Archive, BEAUTY– Utilities: Probe, Clock , PV Tree

, Psychiatrist

List of plugins: http://cs-studio.sourceforge.net/plugins.html
11 Managed by UT-Battelle
for the Department of Energy

12

KEK版CSS CSSは研究機関ごとに構成が異なります

OPI

BOY

SDS

BOY

BOY

アラーム

BEAST

NAMS

BEAST

-

時系列データ
表示

Data Browser?

?

Data Browser

その他

PV Util
Rack Util
PV Fields Viewer

NameSpace
ChannelFinder
Browser-

BOY – Best OPI, Yet
Operator Interface Editor

Similar to EDM, MEDM, SDS, DM2K, but possibly better
13 Managed by UT-Battelle
for the Department of Energy

Runtime14

Data Browser
 PVの現在の値をモニタ
 アーカイブデータの表示

Channl Archiver、RDB Channel Archiver、kblog

15

その他
Probe

PV Table

EPICS PV Tree

Send PV name to other CSS tools
Use common CSS Process Variable context menu tosend PV name to other CSS tools

16 Managed by UT-Battelle
for the Department of Energy

Flexible Layout
 Panels can be closed,
reopened, repositioned
 Multiple Perspectives– Name, Save, Restore Multiple document
instances share same
configuration panels

17 Managed by UT-Battelle
for the Department of Energy

18

逆に混乱する場合も…
 画面構成が自由に変えられる反面…


初心者にありがちな声 「元々の画面がどっかいってしまった！」 「なんか画面がぐちゃぐちゃになって訳分からん。」

仕組みを理解すればなんてことはありません 午後にこれに関する練習・トラブルシューティングをしてみます

初心者向けCSS 講習会@KEK

CSSを起動してみる

20

参考文献
 KEKのWebサイト上に関連ドキュメント・スラ
イド一覧
http://www-linac.kek.jp/cont/epics/css/
 インストール手順書
http://www-linac.kek.jp/cont/epics/css/install_css_kek_public.pdf

21

演習 1-1: Javaのインストール
 JRE バージョン 6が必要
 Javaのバージョンの確認方法
Windows 7 の場合
 コントロールパネル → Java → Java → 表示

Linuxの場合
 $ java –version
 gcjのものはだめです

Mac OS Xの場合
 Finder で
アプリケーション →ユーティリティー →Java Preferences

22

演習 1-1: Javaのインストール
 Javaのインストール方法
Windowsの場合
 http://java.com/ja/
よりダウンロードしてインストール
 32bitか64bitかLinuxの場合
 http://java.com/ja/
よりダウンロードしてインストール
 もしくは、各ディストリビューションが用意したJREをインストール
 32bitか64bitか

Mac OS Xの場合
 http://support.apple.com/kb/TS3489?viewlocale=ja_JPを参考にソフトウェアアップデートから Java SE 6 をインス
トール

23

CSSの起動スクリプト
 各加速器向けに起動スクリプトが用意されています
EPICS_ADDR_LISTの設定
 Data Browser のためのアーカイバの設定
 ※現在のところLinac、(Super)KEKB向け以外にはダミーの値が設定されます 今日はどれでも

css.exeでもよいです24

演習 1-2: CSSの起動 初回起動時のWelcome画面


右上の Workbench をクリック

25

演習 1-3: Probeでモニタ
 CSS → Diagnostics Tools → Probe を選択
 PV Name欄にPV名を入力

大きさを自分で調整26

ProbeでPVの値がとれない場合
 PVの名前は間違っていませんか？

 addr_listの設定はOKですか？
CSSのメニューより、Edit → Preferences → CSSCore → EPICSより
 何に設定するのかは、
制御ネットワークの管理者に聞くこと27

演習 1-4: Probeで書き換え PV Name欄にPV名を入力


各自の番号に基づいたPV名を入力してください Adjustにチェックを入れる
 New Value欄に値を入れて Enter キーを押下28

演習 1-5: ヘルプ
 CSSの使い方に関しては、Web上のドキュメン
トは非常に少ない

http:///cs-studio.sourceforge.net/docbook/ CSS → Help → Help Content

29

演習 1-6: バージョンの確認
 KEK版CSSか？


Welcome画面 で確認（ Help → Welcome）

 バージョンの確認Help → About → Installation Details ( → Installed
Software)で確認

初心者向けCSS 講習会@KEK

CSS BOYを使ってみる

31

BOYでできること
 CSS自体も高機能だが、その1機能であるBOYもかなり高機能
基本的なOPI編集機能
 Macro Action Rule Script etc.
 まず、どんなことができるのかを概観してみましょう。

Simple Things are Easy
1. Drag a widget, e.g. Knob, from palette to editor
2. Enter the PV name in Properties view
3. Click the “Run” button to execute!

What you will get







PV value as text and via knob position
PV severity reflected in border color
PV name and value shown in tool-tip
PV‟s display limits set the knob‟s default range
Indicate „disconnected‟ state via a pink border
Widget will be greyed-out if read-only

32 Managed by UT-Battelle
for the Department of Energy

Editing Features
Add Widgets– Drag & Drop from Palette– Copy/paste, Ctrl+Drag existing widgets to duplicate– Snap to grid, guideline, other widgets– Align, distribute

Select multiple widgets to– Edit common properties– Adjust size or move around
33 Managed by UT-Battelle
for the Department of Energy

Screen Navigation
 Idea: Minimize number of open screens.
 Similar to Web Browser links:– Default: Related displays replace the current display.

– Optional open in „tabs‟ or new window– Allow previous/next navigation over display history

34 Managed by UT-Battelle
for the Department of Energy

Displays in „Tabs‟

Rules, Scripts
Rules create dynamic displays– Easy: PV → Widget Property

Scripts can to “anything”– Read PVs,change widget properties,
open dialog, …
– JavaScript or Python (Jython)

35 Managed by UT-Battelle
for the Department of Energy

SNS Examples

36 Managed by UT-Battelle
for the Department of Energy

SNS Examples
 Top-level displays createdby operators

Tim Southern, Nick Luciano
37 Managed by UT-Battelle
for the Department of Energy

SNS “Steering” Tool

Try to get spot
into the green,at least intoorangeTim Southern, Nick Luciano
38 Managed by UT-Battelle
for the Department of Energy

39

BOYの便利な機能
できること

Few

難易度

Easy

 基本的な編集機能
 Macro Action Rule

A lot

Hard

 Script40

まずは使ってみる
 サンプルで遊んでみる

OPIの実行の仕方

 基本的な使い方
プロジェクトの作成
 OPIファイルの新規作成
 OPI Editorを使って画面編集 ウィジェットの配置 プロパティの変更
 PVの設定
OPI Runtimeで実行41

演習2-1: OPI Editorパースペクティブ

 CSSのメニューより
Windows → Open Perspective → Other →OPI Editor
を選択

ビューの確認42

演習2-2: サンプルのインストール
 CSSのメニューより
CSS → Display → Install OPI Examples
を選択

43

演習2-3: OPIの実行
 今のウィンドウの別タブで開く
NavigatorビューでOPIファイルを右クリック
 Open With → OPI Runtimeを選択 最初はダブルクリックでもOK

44

演習2-4: 別ウィンドウで開く
 別のウィンドウで開く
NavigatorビューでOPIファイルを右クリック
 Open With → OPI Editorを選択
 右上の
をクリック


 フルスクリーンモードの切り替え F11
 コンパクトモードの切り替え F8

45

演習2-5: プロジェクトの作成
 プロジェクト


ただのディレクトリと思ってください 演習用のプロジェクトを作成
CSSのメニューよりFile→ New → General →Projectを選択
 Use default locationのところに実際には作られます

46

演習2-6: OPIファイルの作成
 OPIファイルを新規作成
Navigatorビューにて、プロジェクトを右クリック
 New → OPI Fileを選択
 OPI Editorで作成したOPIファイルが開かれる
47

演習2-7: Rectangleの配置
 Rectangleを画面内に配置
PaletteよりRectangleをドラッグ＆ドロップ
 大きさや位置を変えてみてください Rectangleの色を変更
PropertiesビューにてBackground Colorの右側をクリック
 Choose Colorダイアログで色を選択48

演習2-8: 複数ウィジェットの配置
 Rectangleを2つ追加


動かしてみると、他のRectangleの左端、右端、上端、下端、中央に合わせて青い線が出るのを確認

 複数ウィジェットの配置をそろえる
Ctrl + クリックまたはD&Dで囲って複数選択
 このボタン類を試してみてください Primary Selection
Ctrl + クリックで最後に選んだもの
 そのウィジェットが基準

49

演習2-9: Text Updateの使用
 Text Update
EPICSのPVの値を表示するためのウィジェット
 表示させたいPVをプロパティの PV Nameに設定
 このOPIを実行初心者向けCSS 講習会@KEK

CSSの画面構成

51

用語
 出てくる用語
パースペクティブ
 ビュー
 エディタ Eclipseと同じ用語
Eclipseに関連してインターネット上に用語解説しているページがたくさんあります Eclipseを使ったことのある人に聞くのも

52

いざというときのために
 CSSは画面構成が自由に変えられる反面…


初心者にありがちな声 「元々の画面がどっかいってしまった！」 「なんか画面がぐちゃぐちゃになって訳分からん。」

仕組みを理解すればなんてことはありません パースペクティブ、ビュー、エディタといった概念を理解しましょう。
 具体的にどう元の状態に戻せるのか確認しましょ
う。


53

画面構成

ビュー

エディタ
ビュー

ビュー

ビュー

54

演習 3-1: ビューの移動 ビューの移動
タブをウィンドウ内でD&Dしてみてください 同じ領域にあるビューはタブで切り替え55

演習 3-2: ビューの再表示 Navigatorビューを消す
 ビューを開く
Windows → Show View → Navigatorを選択 最後に元に戻してください56

演習 3-3: 高速ビュー
 高速ビュー
一時的に表示させたいビュー 高速ビューへの仕方 ビューのタブを右クリック → Fast View
 ウィンドウ左下を右クリック → (ビュー名)

高速ビューの表示
 ウィンドウ左下のNavigatorビューのアイコン



元に戻すには Navigatorビューのアイコンを右クリック → Fast View
 表示されているビューのタブを右クリック → Fast View

57

演習 3-4: ビューの切り離し
 ビューのみを独立したウィンドウにビューの移動時にウィンドウ外に持っていく ビューのタブを右クリック → Detached 元に戻すには

ビューのタブを右クリック → Detached58

演習 3-5: エディタ領域の分割
 エディタエディタはエディタ領域にしか表示できません エディタ領域内での分割が可能です エディタの分割
右下のようにしてみてください その後、元に戻して
ください


59

パースペクティブ パースペクティブ

ある特定の作業用に用意されたビュー、エディタの構成・配置のこと

 パースペクティブの例
CSS OPI Editor
 OPI Runtime
 Data Browser
 etc.


60

演習 3-6: パースペクティブの切替 パースペクティブの切替
Windows → Open Perspective → Other → OPI
Runtime Windows → Open Perspective → Other → Data
Browser 一度使ったことのあるパースペクティブ61

演習 3-7: パースペクティブの保存
 パースペクティブの状態の保存
何もしなくても保存されます ビューを適当な大きさに変えた後、別のパースペク
ティブに移り、また元のパースペクティブに戻る ビューを適当な大きさに変えた後、CSSを再起動(File → Restart CSS)

初心者向けCSS 講習会@KEK

BOYの様々なウィジェット

63

BOYで何ができるか ここまでに使ったウィジェット


Text Update これから使ってみるウィジェットText Update Scaled Widgets
 Thermometer Scaled Slider

Boolean Widgets
 LED Boolean Switch

Action Button
 XY Graph Data Browser64

PV関連のウィジェット
 PVの値を監視・制御するのに用いる
 代表例


Text Update

 PV関連のウィジェットに共通するプロパティ
PV Name Border Alarm Sensitive ForeColor Alarm Sensitive BackColor Alarm Sensitive PV関連のウィジェットに共通する機能

右クリックすると
 Show PV Info Process Variableメニュー

65

実習 4-1: アラーム
 実習 4-n のために exercise4.opi というファイルを新規作成
 アラームに対してどう反応するのかを確認
PV NameプロパティにPV名を入力
 Alarm Sensitiveが yes になっていることを確認 BackColor Alarm Sensitiveを yes ForeColor Alarm Sensitive を yes ウィジェットを右クリックしてShow PV Info Process Variable → Probe

66

Scaled Widgets
 主に数値の監視・制御に用いる

監視

Thermometer

Tank

Progress Bar

Gauge

Meter



制御

Scaled Slider

Knob

67

Scaled Widgetsに共通のプロパティ
 Minimum, Maximum
 HIHI, HI, LO, LOLO

Show, Level, Color Limits from PV Ticks関連
 Scale Format
Value Label Format




例)

実際の値

書式

表示

1234

#.00

1234.00

12.3456

#.##

12.35

1234

0.###E0

1.234E3

書式の詳細:
http://download.oracle.com/javase/1.5.0/docs/api/java/text/
DecimalFormat.html

68

演習 4-2: Thermometer Thermometerを配置
PV NameにPV名を入力: $(user): cathodeTempM
 Limits from PVが yes になっていることを確認
 UnitをFahrenheitに設定
 自分で各種 Limits を設定
Limits from PVを no に 下記を好みに設定
 Maximum, Minimum
 Level HIHI, Level HI, Level Lo, Level LOLO
 Show HIHI, Show HI, Show Lo, Show LOLO 全部非表示にしたいときには Show Markers を no に Scale Formatを設定

69

演習 4-3: Scaled Slider Scaled Sliderを配置
PV NameにPV名を入力
 実際に値を変更できることを確認
 同じPVを Thermometer で監視70

Boolean Widgets
 真偽値の監視・制御に用いる


監視
LED



制御
Boolean Button

Boolean Switch

Image Boolean Button

71

演習 4-4: LED
 LEDを配置
PV NameにPV名を入力 : $(user):gunOnC
 Data Typeは Bit のまま PVが列挙型である場合には Enum にするとよい

Bitは -1 のまま
 特定の bit のみを監視するのであれば、0以上の値を設定
 -1である場合には、零か非零で判定される



On Color と Off Color をそれぞれ設定

 Labelを表示
Show Boolean Label を on に On Label と Off Label をそれぞれ設定

72

演習 4-5: Boolean Switch Boolean Switchを配置
PV NameにPV名を入力
 Data Typeは Bit のまま PVが列挙型である場合には Enum にするとよい

Bitは -1 のまま
 0以上である場合には、その bit が制御対象 -1である場合には、0か1か 確認ダイアログ
誤って値を変えてしまうことを防ぐため
 Show Confirm Dialog を yes に Confirm Message を任意の文字列に
73

Action Button ボタンをクリックすることによって…
OPIファイルを開く
 OPIファイルをビューで開く
 PVに書き込む
 コマンドを実行する
 JavaScriptを実行する
 Pythonを実行する
 WAVファイルを再生する
 ファイルを開く
 Webページを開く

74

演習 4-7: コマンドを実行
 ボタンを押すことでコマンドを実行
Actionボタンを配置
 Actionプロパティ
 Execute Commandを追加
 Commandにコマンドを入力
 Windowsなら notepad Mac OS Xなら open –a Safari

 Linuxなら gedit

Textプロパティを設定

75

演習 4-8: 別のOPIファイルを開く
 別のOPIファイルをActionボタンから開く
Actionボタンを新たに配置
 Actionプロパティ
 Open OPIを追加
 File Pathに別のOPIファイルを指定
 Targetは以下のうちいずれか Replace Open in new tab Open in new window

76

演習 4-9: XY Graph
 ビームの強度をプロット
Concatenate Dataを no に
 X PVに $(user):PM:distancesWF
 Y PVに $(user):PM:iTrajectoryWF XY Graphは高機能なので自分でいろいろ使ってみてください

77

演習 ex: Data Browser
 時間があれば

初心者向けCSS 講習会@KEK

最後に

79

今日のまとめ 演習したことCSSのインストールと起動 BOYの基本的な使い方
 CSSの画面構成 （パースペクティブ等）
 BOYの様々なウィジェット


80

よりCSSを使いこなすには Data Browser
 BOY
Macro、Rule、Script color.def、font.defの設定
 OPI Schemeの設定
 etc.
 ヘルプの活用Help → Help Contents

 自分でとにかく使ってみる

初心者向けCSS 講習会@KEK

質疑応答