eHMIデモで浄水プラント操作を効率化：PLCnext Engineerショーケース
皆さんこんにちは、この夏初めてPLCnextテクノロジーで作業し、できることを共有したくなりました。より具体的には、PLCnext EngineerのeHMIテクノロジーで作業しました。私のように芸術的センスがない場合、グラフィックデザイナーなどが描いた一連の画像を使いたいと思うでしょう。それが私の出発点でした。
グラフィックデザイナーがすでに設計した多くのSVG画像が入ったフォルダを受け取りました。ご存知ない方のために：SVGはScalable Vector Graphics（スケーラブルベクターグラフィックス）です。画像のサイズが品質に影響しない特別な画像形式です。通常の画像を拡大するとピクセル化しますが、SVG画像は品質を保持します。
しかし、次の部分が厄介です。PLCnext Engineerにインポートされる画像には詳細なアニメーションを持たせられません。例えば、タンクの画像をインポートして、満タン時に輪郭の色を緑に変えるといったことはできません。HMIでアニメーションさせたい要素は、PLCnext Engineer内で描画する必要があります。
そのため妥協が必要でした。Inkscapeという無料の外部リソースを使用して、与えられた画像を操作し、望む浄水プラントシステムに仕上げました。その後、HMIでアニメーションが必要な要素を選択して削除しました。これが「詳細レイヤー」と呼ぶものです：
パイプに水が満ちるアニメーションも欲しかったので、クリップパス（切り抜きレイヤー）を作成し、詳細レイヤーの後ろに配置して、水のアニメーションに使用する背景要素を隠しました：
上記の画像をインポートし、PLCnext Engineerでアニメーション要素を作成した結果、以下のHMI画面が完成しました：
このプロジェクトは、詳細な作成手順とボーナスプロジェクトとともにGitHubで公開しています：plcnextusa/eHMI_water_plant_demo: High Graphic Water Plant Animation
産業技術