Custom Widget doesnt show up in Thin Client - EMSE (Vijeo XL)

[budimanc]

Hi All,

Need help regarding this case.

I have used Piechart Custom Widgets in my EMSE project, and I want to display in "Internet Explorer" by Thin Client.

but it shows up like the picture below.

 

I have add some MIME type in my IIS like *wjson that somes say it will works, but for me still failed.

Thx.

Best Regards,

Budiman

[Omaelk]

hey @TomDroll , any idea on how to help @budimanc  here? 

[TomDroll]

Hi Budimanc, so does the widget appear in a Google Chrome web browser but not in the Internet Explorer? Or does it not sure up on any browser?

If it does not show up on any browser - can you check to see if source files are located in the Project/WEB folder? Should be a folder labeled Widgets. 

something like this ProjectName\Web\Widgets

[budimanc]

Dear @TomDroll ,

Sorry for late reply.

Just been back for business duty.

Here i attach the file in my project folder.

It doesnt show up in Internet Explorer browser,

I didnt think on Chrome or any browser can use this thin client.

Waiting for your reply soon.

Thx.

Best Regards,

Budiman Chandra

[TomDroll]

Hi Budimanc - you are correct, web thin client only works with Internet Explorer web browser. What I was wondering is if the widget appears on mobile access.  this would tell us the web server is serving it correctly.   If it works with mobile access, could it be as simple as the security settings in Internet Explorer  allowing  java script?

Enable or disable Javascript in Internet Explorer 11 using these easy steps. Select the Gear in the upper-right corner of the screen or the “Tools” menu if you have the menu bar enabled, then select “Internet Options“. ... You may also opt for IE11 to “Prompt” you to allow scripts to run. Select “OK“, then “OK” again.

[budimanc]

Dear @TomDroll 

I have did what you have told me, but seems it still didn't work.

I think should be this one right?

I dont know whether this one has an issue for Piechart in thin client.

Thx

Thx.

Best Regards,

Budiman Chandra

[TomDroll]

Hi @budimanc - can you check if the widget appears in your MA client.  this will help us decide where to start troubleshooting,   If you cant, or that screen is not accessed via MA - can you browse to the folder where the widget is located from your external client?

[budimanc]

Hi @TomDroll 

Actually i have not make MA client, still figure out how to create mobile access client but still not succeeded.

I will reply soon if i have create MA client.

Thx.

Budiman

[TomDroll]

Hi budimanc, before we go further troubleshooting - did you look at this in the help file?

To configure the web server for custom widgets:

1. From the Windows Control Panel, run Administrative Tools > Internet Information Services (IIS) Manager.
2. In Internet Information Services (IIS) Manager, right-click your project's website (see below), and then on the shortcut menu, click Add Virtual Directory.
   • If your remote users are using Secure Viewer or Web Thin Client to access your project, you should have already configured Default Web Site so that its physical path (i.e., its root directory) points directly to your project folder. If this is true, right-click Default Web Site.
   • If your remote users are using Mobile Access to access your project, Default Web Site should contain a folder that was automatically created when you installed the Mobile Access Runtime software. For example, Default Web Site > EMSE81. If this is true, right-click that folder.
   The Add Virtual Directory dialog box is displayed.
3. In the Add Virtual Directory dialog box, in the Alias box, type CustomWidget.
4. In the Physical path box, type the complete file path for your project folder, or click the browse button (…) on the right in order to open a standard Windows file browser that you can use locate and select the project folder. For example:

   C:\Users\<user name>\Documents\EcoStruxure Machine SCADA Expert v8.1 Projects\<project name>

5. Under Pass-through authentication, click Connect as. The Connect As dialog box is displayed.
6. In the Connect As dialog box, under Path credentials, select Specific user, and then to the right of the box, click Set. The Set Credentials dialog box is displayed
7. In the Set Credentials dialog box, type the user name and password of a Windows user on the computer that has permission to access the project folder.

   By default, the web server only has permission to access the files in the website's own physical path. This is to ensure that visitors to the website do not have unauthorized access to the rest of the computer. Therefore, if you create a virtual directory that points to a location outside of the website's physical path, you need to give the web server permission to access that location.

8. Click OK to close the Set Credentials dialog box and return to the Connect As dialog box. The name of the Windows user is displayed in the Specific user box.
9. Click OK to close the Connect As dialog box and return to the Add Virtual Directory dialog box.
10. Click OK to close the Add Virtual Directory dialog box. The virtual directory named CustomWidget is added to your project's website.
11. Exit Internet Information Services (IIS) Manager.

The next thing to do would be to install the Custom Widget Framework on the client PC.  This is located in the install folder (C:\Program Files (x86)\Schneider Electric\EcoStruxure Machine SCADA Expert v8.1\Redist\CustomWidgetFramework) 

Install the Custom Widget Framework on a client station
If your project screens include custom widgets, you might need to install Custom Widget Framework on some client stations to enable them to properly display the widgets.

This task applies only to stations on which you have already installed either EcoStruxure Machine SCADA Expert Thin Client or EmbeddedView — in other words, stations that are using either Secure Viewer or Web Thin Client to view your project. 

Stations that are viewing your project through Mobile Access do not need to have Custom Widget Framework installed, because custom widgets are HTML5-based screen objects that can be displayed normally in the web browser.

Take a look at this 2 things and let us know.

Thanks.

[budimanc]

Hi @TomDroll 

I have done read the help and did per your instructions, the result still the same.

Hereby i attached the pics what we have done.

Need another guide from you again.

Thx a lot.

Best Regards,

Budiman

[BevanWeiss]

Are you able to attach the index.html file?

I'm not really seeing anything that would generate dynamic content from what you've posted so far.

I'm almost expecting the index.html file to simply reference the favicon.png.. without doing anything else 😉

In which case it's working exactly as designed 😄

[BevanWeiss]

I would actually like to put money on it that your index.html file is as below

 <!DOCTYPE html>
<html style="overflow: hidden;">
 <head>
 <script src="../Resources/Apis/Proxy.js"></script>
<script src="./custom_widget.js"></script>
 <title>piechart</title>
 </head>
 <body>
 <div style="width:96vw;height:95vh;background-color:white;textalign:center;vertical-align:middle;line-height:98vh;border:solid;borderwidth:thin;border-color:#e6e9eb">
 <div>
 <img src="../Resources/Images/HTML5.png"
 style="width:32px;height:32px"/>
 <p></p>
 <div style="height: 64px; top: 28px; width: 100%; position:
 absolute;">piechart</div>
 </div>
 </div>
 </body>
</html>

Which means that you got to Step 2 in this document

https://download.schneider-electric.com/files?p_enDocType=User+guide&p_File_Name=EIO0000002448.06.pd...

and did not proceed... so the following steps are...

3. Delete the default contents of <body>.

4. Insert your own HTML code into the body of the webpage.

5. Save and close index.html.

6. Use the text editor to open custom_widget.js.

7. Delete the body of the function, so that you can insert your own commands

8. Replace PropertyName with the name of the property you added to your custom widget.

9. Develop your function.

10.Save and close custom_widget.js.

Of course there are many other things you can do with these web files, but that is beyond the scope of this
documentation. More thorough descriptions and examples will be provided in future releases of this software.
In the meantime, if you need help with developing your custom widgets, please contact your EcoStruxure
Machine SCADA Expert software distributor.

So you currently have no custom code at all, hence it is displaying the out of the box generic display page.

If you want it to display something different, then you need to write some markup (HTML), and some dynamic scripting (Javascript) to have this work.

The "../Resources/Apis/Proxy.js" file likely contains a number of 'built-in' functions that you could reference to interact with the controller to enable the control system dynamic behaviour.

If you needed help with these, then it's probably best to contact either your local Schneider support office, or to engage a System Integrator that has some experience with Javascript / HTML and general programming.

[TomDroll]

Excellent point BevanWeiss - does the widget show data as you would expect on the local viewer?

[BevanWeiss]

@budimanc Did my answer help you solve your problem?  If so, please mark it as the solution to your question.

[budimanc]

@BevanWeiss 

Hi

Please give me sometime to solve this problem with the help of my IT department.

For sure will get back soon.

Thx.

[TomDroll]

Hi budimanc, just wanted to check in to see if you have any updates.

Let us know!

[budimanc]

Hi @TomDroll @BevanWeiss 

Sorry for late reply,

I try to use the default indusoft project "Custom Widget Web Browser" which supposedly the HTML Widget can be run with success on the Screen Viewer and Internet Explorer but in my computer Success only on the Screen Viewer. 

I have installed Custom Widget Framework too but still Custom Widget doesn't show up in Thin Client. 

I have screenshot the process that i have did, as attached below: 

Screen 1 = "Custom Widget Web Browser" Project Development Screen

Screen 2 = HTML widget able to show on Screen View but failed on the internet explorer version '11'

Screen 3 = I have added "Virtual Directory" inside "IndWebSvc" and "Application/Studio" MIME Type.

Screen 4 = default index.html source code 

Hope i get some solution for this case.

Thx.

Best Regards,

Budiman

[BevanWeiss]

This sounds different than your original issue

---

@budimanc wrote:

Need help regarding this case.

I have used Piechart Custom Widgets in my EMSE project...

---

So what happened to your 'Piechart Custom Widget' that you're now trying to use the 'Web Browser' Widget?

It seems that now you're having a different problem than your original issue.

[budimanc]

Hi @BevanWeiss 

Actually the same problem, i just tried to use another project while doing all the instructions above, and the result is still the same.

I'm still having the same problem as before.

I can use whenever Web Browser Widget and Piechart Widget, and the result both is the same.

Thx before.

Best Regards,

Budiman

[BevanWeiss]

When you open up the browser (IE11) debug view.. what does it say?

Based on your IIS layout, and your HTML file referencing "../resources/apis/proxy.js" I suspect that IE11 was unable to load this javascript file, and hence nothing would work under the way you've deployed this.

Have you tried Chrome? or Firefox? or Opera?  Do any of these work?  I suspect 'no'.  And if you look at the debug window for all of these browsers, I suspect it will be the same resource unavailable issue.

You should make sure that all of those files (referenced by the html) exist, and are accessible to your browser(s).

When I run this locally on my computer (without a web server), I get

If you run yours up in a proper web server, then you should get some indicative error message that you should correct.

[budimanc]

Dear @BevanWeiss 

I dont see the index.html (Web Widget) in network request, while header and main got 404 but header.scc and main.scc load successfuly (200), is that affect the Web Widget ?

[Paul_Derbyshire]

@budimanc Have you resolved your issue widgets being displayed issue?  If not, please let us know. 

I can work with you directly to resolve your issue if required.   Feel free to contact me paul.derbyshire@se.com.  I am a Senior Product Application Specialist for EMSE.  We can post our results here on the SE Exchange so that everyone can benefit.

Thank you,

[budimanc · Accepted solution]

Hi All,

Here I'm posting the result for the custom widget cause with help of all you guys, this problem has been solved.

I don't really know the solution is but its just simply update the EMSE software to 8.1 SP5 version and automatically without any configuration, the custom widget show up in Thin Client Browser.

Thx for all that has been helping me.

Best Regards,

Budiman