Skip to content

PLCnext 2152 - HTML5 und Rest API

aliteraalitera
edited August 2019 in PLCnext Technology & PLCnext Controls

Hi, habe mir heute den Sourcecode herunter geladen.

https://github.com/PLCnext/HTML5_with_REST

Nutze gerade die Firmware 2019.3 und auch PLCnext Engineer 2019.3

Das Steuerungsprogramm aus Projekt läuft und die Simulation zeigt Werte an.

Dann habe ich mir den Javascript Sourcecode vorgenommen. Die HTML Seite geht im Browser auf und ich könnte USER / Passwort eingeben zum Authentifizieren.

Dann passiert aber nichts weiter. Wenn ich mir im Google Chrome nur den Profiler anschaue, dann zeigt er folgenden Fehler an.

Access to XMLHttpRequest at 'http://192.168.10.10/_pxc_api/auth/auth-token' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
pxcapiclient.js:189 POST http://192.168.10.10/_pxc_api/auth/auth-token net::ERR_FAILED

in der Github Beschreibung steht leider nichts.

Was kann ich tun?

Danke!

Alex.

 

 

 

 

 

Comments

  • aliteraalitera 
    Hi, I downloaded the source code today.

    https://github.com/PLCnext/HTML5_with_REST

    Use just the firmware 2019.3 and also PLCnext Engineer 2019.3

    The control program from the project is running and the simulation shows values.

    Then I made the javascript source code. The HTML page goes into the browser and I could enter USER / password to authenticate.

    Then nothing happens. If I only look at the Profiler in Google Chrome, it shows the following error.

    Access to XMLHttpRequest at 'http://192.168.10.10/_pxc_api/auth/auth-token' from origin 'null' has been blocked by CORS policy: Redirect is not allowed for a preflight request.
    pxcapiclient.js: 189 POST http://192.168.10.10/_pxc_api/auth/auth-token net :: ERR_FAILED

    in the Github description is unfortunately nothing.

    What can I do?

    Thank you!

    Alex.
  • Martin - PLCnext Technology TeamMartin - PLCnext Technology Team

    Hi Alex

    I’m not very familiar with cross-origin requests, but does any thing in this page help?

    https://developer.chrome.com/extensions/xhr

    - Martin

  • aliteraalitera

    Hi Martin,

    thank you for the information regarding the CORS policy. It seems that first I should transfer the web page to the web server of the PLC 2153 controller :)

    I tried it from my local PC Webserver :)

    Folder of the Webserver: /var/www/plcnext

    I have make a directory ehmi. 

    mkdir ehmi

    --> chmod --> folder  write / read access 

    Then I have transfered all the necessary files to the folder ehmi.

    When I trying to test for example https://192.168.10.10/ehmi/HMIDemo.html then the controller redirect to the welcome page.

    Do you have an idea, what is the reason for that?

    Thanks a lot.

    Alex

     

     

  • Martin - PLCnext Technology TeamMartin - PLCnext Technology Team

    Hi Alex,

    You may need to configure the NGINX web server on the PLC.

    Again, I'm not too familiar with the NGINX server but here is a page that might give some useful tips:

    https://www.linode.com/docs/web-servers/nginx/how-to-configure-nginx/

    ... in particular, the "location" block in the nginx configuration file might need to be edited.

    - Martin.

  • aliteraalitera

    Hi Community, I found my mistake.

    I though, that I have to transfer the HMIDemo.html Webpage and the folders /img /js /css to the nginx Webserver folder: /var/www/plcnext

    But this is wrong.

    The correct folder is this:

    /opt/plcnext/projects/PCWE/Services/Ehmi/ehmi/

     

    You don´t need to disable the redirection of Webpages (/etc/nginx/nginx.conf)!

     

    With the picture below, you can see - It is working fine, now ?

    WebAPP.PNG

  • Martin - PLCnext Technology TeamMartin - PLCnext Technology Team

    That's excellent news, thank you for sharing!

    If you are happy to prepare a step-by-step guide to how you got this working, it would make a great Makers Blog post.   :-)

    Martin.

     

  • anonymous_user_rMt6cZxaMhanonymous_user_rMt6cZxaMh

    Hi Alitera,

    From this discussion, it seems you were able to display a custom JavaScript page on the Webserver. Awesome!. The question that I have is how you were able to connect the HMI tags created in the controller to the JavaScript page. Let's say I want to display a value (calculated in the controller) into the custom javaScript page. How would I do that? How would I connect a variable(HMI Tag) in the PLC to the JavaScript HMTL page.

    I would appreciate if you can reply.

  • Oliver PLCnext TeamOliver PLCnext Team

    Hey,
    The solution to that question is the REST API that the PLCnext Ehmi provides.
    Here you find solutions how to do Authentication and how to access variables:
    https://www.plcnext.help/te/Service_Components/REST_data_interface/REST_data_interface_Introduction.htm

    You can add your Custom JS files via the Engineer ehmi Support Files and access them from the ehmi via a Button or something like that.

    kind regards,
    Oliver

Sign In or Register to comment.