{"id":1184,"date":"2022-09-03T08:16:38","date_gmt":"2022-09-03T06:16:38","guid":{"rendered":"https:\/\/www.rocworks.at\/wordpress\/?p=1184"},"modified":"2022-09-17T21:24:05","modified_gmt":"2022-09-17T19:24:05","slug":"unity3d-in-wincc-open-architecture","status":"publish","type":"post","link":"https:\/\/www.rocworks.at\/wordpress\/?p=1184","title":{"rendered":"Unity3D in WinCC Open Architecture"},"content":{"rendered":"\n<p>This article is about integrating your 3D Unity applications into WinCC Open Architecture SCADA HMI Web screens and exchanging property values. It only works with the WinCC Ultralight Web Client. Because the native Ui does not support WebGL in the WebView Widget. Update: It should also work in the native Ui, you just have to set the environment variable: QTWEBENGINE_CHROMIUM_FLAGS=&#8211;enable-gpu<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"504\" src=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-5.png\" alt=\"\" class=\"wp-image-1190\" srcset=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-5.png 940w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-5-300x161.png 300w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-5-768x412.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/a><\/figure>\n\n\n\n<p>With <a href=\"https:\/\/assetstore.unity.com\/packages\/tools\/integration\/wincc-unified-custom-web-control-223139\">this <\/a>free Unity Asset you can create a Unity application with an interface to the SCADA system in an easy way. Don&#8217;t be confused about the name of the Asset &#8220;WinCC <strong>Unified <\/strong>Custom Web Control&#8221;. This is because initially it was build to create Custom Web Controls for WinCC Unified only. But there is now also an option to create a build of your Unity application for WinCC Open Architecture.<\/p>\n\n\n\n<p>First create and build your  Unity Application as described in the documentation of the Asset. You may also watch this <a href=\"https:\/\/youtu.be\/UP-MrvF3yYc\">video<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Custom Web Control Generator\" width=\"474\" height=\"267\" src=\"https:\/\/www.youtube.com\/embed\/UP-MrvF3yYc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Just at the end execute the menu item to create a WinCC Open Architecture application, instead of WinCC Unified.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create and load the WebView<\/h2>\n\n\n\n<p>Then copy the ZIP file to your WinCC OA project into the folder &#8220;data\\html&#8221; and unzip the ZIP (for example C:\\WinCC_OA_Proj\\Test\\data\\html\\UnityCustomControl). <\/p>\n\n\n\n<p>In this tutorial our application is named &#8220;UnityCustomControl&#8221;. You have to replace this with the name of your Unity application.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image.png\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"252\" src=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image.png\" alt=\"\" class=\"wp-image-1185\" srcset=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image.png 940w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-300x80.png 300w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-768x206.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/a><\/figure>\n\n\n\n<p>Then you must insert a WebView into your screen. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"529\" src=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-1.png\" alt=\"\" class=\"wp-image-1186\" srcset=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-1.png 940w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-1-300x169.png 300w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-1-768x432.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/a><\/figure>\n\n\n\n<p>And then you must load the generated Unity application in the Initialize script of the widget.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>main()\n{\n   this.loadSnippet(\"\/data\/html\/<strong>UnityCustomControl<\/strong>\/index.html\");\n}\n<\/code><\/pre>\n\n\n\n<p>In the Property Editor at the Extended tab be sure to set the &#8220;ulcClientSideWidget&#8221; to TRUE.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-6.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-6-1024x554.png\" alt=\"\" class=\"wp-image-1192\" srcset=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-6-1024x554.png 1024w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-6-300x162.png 300w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-6-768x415.png 768w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-6-1536x830.png 1536w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-6.png 2016w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Set and receive property values<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"529\" src=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-2.png\" alt=\"\" class=\"wp-image-1187\" srcset=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-2.png 940w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-2-300x169.png 300w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-2-768x432.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/a><\/figure>\n\n\n\n<p>To send values from your WinCC Open Architecture to the Unity application you must use execJsFunction of the Webview and call the &#8220;setPropertyInUnity&#8221; function with the property and the value which you want to set. See the following example. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>UnityCustomControl.execJsFunction(\"setPropertyInUnity\", \"target_shoulder_link\", 10);<\/code><\/pre>\n\n\n\n<p>&#8220;UnityCustomControl&#8221; is the name of our Webview Widget! It&#8217;s up to you how you name it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"529\" src=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-3.png\" alt=\"\" class=\"wp-image-1188\" srcset=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-3.png 940w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-3-300x169.png 300w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-3-768x432.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/a><\/figure>\n\n\n\n<p>At the WebView there is an event &#8220;messageReceived&#8221;. There you will get all the messages which are sent from Unity to WinCC Open Architecture. See the example for the structure of the parameter. It is always a JSON document which contains the Name and the Value of the property which has been sent. <\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Receiving Property Values:\nWCCOAui2:&#91;\"messageReceived\"]&#91;mapping 3 items\nWCCOAui2:   \"uuid\" : 2\nWCCOAui2:   \"command\" : \"msgToCtrl\"\nWCCOAui2:   \"params\" : mapping 2 items\nWCCOAui2:\t   \"Name\" : \"test_property\"\nWCCOAui2:\t   \"Value\" : \"Hello World 1\"\nWCCOAui2:]<\/code><\/pre>\n\n\n\n<p>The very first message does not have any &#8220;params&#8221;, this message comes when the initialization of Unity is done.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>First Message:\nWCCOAui2:&#91;\"messageReceived\"]&#91;mapping 2 items\nWCCOAui2:   \"uuid\" : 1\nWCCOAui2:   \"command\" : \"msgToCtrl\"\nWCCOAui2:]\n\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"529\" src=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-4.png\" alt=\"\" class=\"wp-image-1189\" srcset=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-4.png 940w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-4-300x169.png 300w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-4-768x432.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Start Ultralight Web Client<\/h2>\n\n\n\n<p>Start a Control Manager with the &#8220;webclient_http.ctl&#8221; script.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-7.png\"><img loading=\"lazy\" decoding=\"async\" width=\"344\" height=\"34\" src=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-7.png\" alt=\"\" class=\"wp-image-1193\" srcset=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-7.png 344w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-7-300x30.png 300w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/a><\/figure>\n\n\n\n<p>Then you can open the application in the browser with &#8220;https:\/\/localhost\/data\/ulc\/start.html&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-8.png\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"504\" src=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-8.png\" alt=\"\" class=\"wp-image-1194\" srcset=\"https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-8.png 940w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-8-300x161.png 300w, https:\/\/www.rocworks.at\/wordpress\/wp-content\/uploads\/2022\/09\/image-8-768x412.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This article is about integrating your 3D Unity applications into WinCC Open Architecture SCADA HMI Web screens and exchanging property values. It only works with the WinCC Ultralight Web Client. Because the native Ui does not support WebGL in the WebView Widget. Update: It should also work in the native Ui, you just have to &hellip; <a href=\"https:\/\/www.rocworks.at\/wordpress\/?p=1184\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Unity3D in WinCC Open Architecture<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,47,3],"tags":[],"class_list":["post-1184","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-unity","category-wincc-oa"],"_links":{"self":[{"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1184"}],"version-history":[{"count":5,"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1184\/revisions"}],"predecessor-version":[{"id":1211,"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1184\/revisions\/1211"}],"wp:attachment":[{"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}