cancel
Showing results for 
Search instead for 
Did you mean: 
SOLVED

Include standalone HTML as Custom HTML

Include standalone HTML as Custom HTML

Hemingway
Established Member

I have a html page that analyze the .npg file and render the points. It works fine without webiq, but when I am trying to add this html to the project I am only can choose the file to read and that's all. What the problem might be? I've attached zip which contains webiq project zip, html page and .npg file.

3 REPLIES 3

webiq-sk
Frequent Contributor

 

Please note that the HTML tag simply embeds HTML code into the page - it is not intended to insert complete HTML documents - this will actually result in invalid HTML code (you then have multiple HEAD, DOCTYPE, BODY tags in the page which is not allowed in HTML) - only parts between the opening and closing BODY tag can be used, i.e. HTML code/elements, not documents.

Instead you can get it working by following best practises here:
1. You already have a complete HTML document you want to embed
2. Simply embed it using the iFrame widget:
   a) In the closed and unpacked project directory add the "New.html" to the main directory, i.e. the same one that webiq.json, index.html etc. are in
   b) Load this modified project and delete the HTML widget in the HMI
   c) Add an iFrame element and set the URL to "New.html" (excluding the quotation marks)

Then it will work. Why it didn't work I don't know but when working with web technology and especially JavaScript you should familiarize yourself with JavaScript debugging.

Hemingway
Established Member

I have one more question: is that possible to send opcua vars into iFrame which launch custom HTML page? 

webiq-sk
Frequent Contributor

Your question is not specific to WebIQ per se, but rather a web development question you can find a lot of info and examples online, e.g. here:

When it comes to reading item values in an HMI with JavaScript have a look at the scripting demo which contains a lot of examples.

Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist