Hello everyone，
I want to use a widget （like a gauge, .html file…) via WebViewer,
if any possibility that i can replace the value of js code with the AS variable?
I don’t want to use the web server because it’s independent of mappview, a full page of html.
Can you give me an DEMO to tell me how to do it, because I’m a novice in web front-end development.
Thank you!
Hi,
that’s not so easy to answer to be honest 
I understood that you want do build not a complete own web visualization, but a “small webite”, containing for example that gauge widget from the first screenshot, and display this “mini website” via the webviewer widget of mappView → am I right?
Because if yes, you have to use the embedded webserver of the PLC also, there’s no way around. But in that case only for the “small website”, containing only your gauge for example.
1.) To get the value from a PLC variable, you need to use the active webpage elements (ASP) functions from the webserver, or you have to provide the data you need by programming an own webservice using AsHttp(s) library.
2.) To refresh the variable / data, you need to poll the ASP calls from your own Javascript code → this is normally done by using AJAX calls (asynchronous javascript calls).
3.) To embed the polled data into your own website, normally you also use some Javascript code to change a value somewhere in the DOM (document object model) of the website, for example by accessing the object by it’s DOM id.
How to do this in detail, for example with your gauge, depends strongly on the Javascript framework you want to use (for example jQuery) and from the library for the frontend/content/widget (for example jqWidgets, jQueryUI, …).
Thats the reason why I can’t provide a “simple demo”, because the way to go is always the same like written above, but the how the code has to look like is very different from framework to framework → What UI framework do you use and what JS framework is behind?
Best regards!
Hi again @jayD ,
I found a more or less “stripped down to the absolute minimum” demo on my harddrive I made about 10 years ago that shows, how to read a plc variable trough the embedded webserver using ajax and webservers ASP.
I used the jQuery framework inside this demo (a very old version, but that makes no difference for this use-case). Even if jQuery is not the framework you use, maybe the sample code helps a bit because it shows only the principle behind PLCs ASP and Ajax, nothing more → therefore the’re no fancy widgets or anything else inside: looks ugly, but does the job 
Here’s the demo zip, some explanation follows:
VerySimpleAjaxDemo.zip (147.6 KB)
It’s a AS4.12 project, only containing 1 task with 3 variables.
The HTML, Javascript, and ASP data is located in the AS project root folder, subfolder “WEBROOT”:
Depending on where the demo is located on the harddrive, you have to change the webroot setting in the project. If you use “c:\projects”, it should be fine, if not please change the following setting to your needs:
How it works?
In the PLC, there’s a task hosting 3 variables changing their values.
In the webroot, the’re 3 files:
index.html
demo_variables.json.asp
Here, the JSON coded data is inside, using <%ReadPLC(“variablename”);%> as ASP method of the PLCs webserver to get variable values.
In the end, if everything works fine … if you open your webbrowser it should look like the following screenshot, and the marked values should change about every second.
I hope, this little demo shows a bit more concrete how it could be done by using Ajax and webservers ASP functions.
Best regards!
wow，thanks for your patient answers,alexander.
I already understood your meaning,thanks again!
Also i want to ask that if the Web Server can implement interaction between button click events and PLC variables?
Sorry, Mr.Hefner
I cannot found the WEBROOT files in your AS project.
Can you upload it again?
Oh sorry, it seems that the folder was removed while zipping the project, I’ll upload again later today when I’m back in office!
Hi @jayD ,
I uploaded the zip again (inside the original post), should now include also the WEBROOT folder.
I deleted everything not mandatory neccessary from the project directory to keep the zip as small as possible, so to use it, it has to be compiled and downloaded in Automation Studio first.
Best regards!
Hi @jayD ,
Yes, in general this is also possible by using the “goform/readwrite” ASP of the webserver.
But I have to mention: please be aware, by activating this functionality every PLC variable could be written by goform/readwrite, there’s no possibility to grant access only to wanted variables.
If only “some values should be written”, it could be a better solution to develop a own webservice backend in the PLC using AsHttp library - which is “some / much more work to do”, yes, but then it’s “in your own hands” what you’ll do with the data sent by the browser.
… finally I found a extended demo to what I uploaded already, containing the same information as above (therefore, I’m not explaining it in the same detailed level), but also including samples for writing variables (goform/readwrite), combination of the different ASP functions, and also a simple AsHttp webservice example.
From the frontend point of view, it’s as ugly as the first demo but hopefully it gives a short overview of the possibilities using webservers ASP functions and AsHttp webservice together with Ajax.
Here it is:
SimpleAjaxWsDemos.zip (161.7 KB)
Best regards!
Thank you，Alexander
It’s beautiful 
It’s easy to learn and useful.
Best regards.
