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

Html widget Java Script

Html widget Java Script

GB_
Established Member

Hello Everyone,

I am trying to use this simple example with the WebIQ HTML widget. The code works correctly but if I paste it into the "HTML code" section of the widget then the Java part of the json file no longer works.

You can find the file in the zip folder, I simply copied the html code into "Html Code".


Can you tell me what's wrong? I've tried pointing to the json file and creating the same one with the "code manager" tool and then pointing to that but nothing. I've also tried putting the files in the appropriate folders inside WebIQ for css and local scripts. Both the image and the css settings work, it's only the animation via java script that never works.

GiulianoB_0-1651140354318.png

Thank you very much!

 

22 REPLIES 22

webiq-sk
Frequent Contributor

WebIQ is a web HMI and as such all files have to be delivered by the web server.

On the internet the browser security model prevent local access to files, as such you cannot use any local paths on your local disk:

webiqsk_0-1651142834875.png

The proper way to implement this with WebIQ would be to create a LocalScript in Code Manager, add the code from animate.js and from the body of the HTML document there, add the LocalScript to your HMI in the Layout Manager, create a new Stylesheet in the Code Manager with the CSS code from style.css.

The HTML widget inserts HTML code into the HMI - the HTML standard forbids multiple DOCTYPE declarations. You can insert HTML using the HTML widget, but not a complete document as this would not be valid HTML.

GB_
Established Member

Thank you very much for your reply.
I had already tried to create a local script via the code manager but it didn't work, is it because I only inserted the javascript code inside animated.json? Do I have to insert the html part inside the local script too? If so, could you please tell me where?
This is my local script at the moment

Thank you very much.

GiulianoB_0-1651146161615.png

 

webiq-sk
Frequent Contributor

What are you actually trying to achieve? It might be easier if you explain what you are trying to achieve in detail: animating somethng?

Maybe there's a better way to do that.

GB_
Established Member

Yes in general, animate an image or a text.
I was actually trying to figure out how to use custom scripts in webIQ starting with the simplest.
However, an animation like the one in my example or similar does not need to be a specific type.

Thanks you very much.

webiq-sk
Frequent Contributor

What would be the trigger for the animation? Clicking on something? When an item changes its value?

GB_
Established Member

When an item changes its value it would be great, thanks you!

webiq-sk
Frequent Contributor

I have attached a simple demo using your code illustrating the use. For demonstration purposes the internal item "SInt" has been used and a LocalScript and a custom CSS stylesheet has been created in the Code Manager.

Please also note the class name "brickToAnimate" which has been added to the image widget.

GB_
Established Member

Thank you very much,
unfortunately I'm still using version 2.10.0 of webIQ so I can't open it and at the moment I can't update it due to problems with the CtrlX server, if you can pass me a version in 2.10 you'd be doing me a favour if not it's fine as it is, I'll import the files manually.

Thank you very much!

webiq-sk
Frequent Contributor

Sorry, but you can simply install WebIQ 2.11 on a different system and then see how it was done - then you also know what to copy.

GB_
Established Member

I've tried downloading version 2.11 both on a real machine and on a dedicated virtual machine but without connecting to CtrlX CORE it won't start, but on CtrlX CORE I have the app WebIQ Server 02.10.0 so it won't start even if I connect.

webiq-sk
Frequent Contributor

You can signup on https://www.smart-hmi.com/signup/ and get a free 30-day trial key which you can use locally without any connection to ctrlX.

HmiGuide
Community Moderator
Community Moderator
For ctrlX the WebIQ version 2.11 will hopefully be available soon, but what you can do, you can install WebIQ 2.11 from the homepage of WebIQ. Get a 30 day trial license from WebIQ homepage Connect to the WebIQ server running on that engineering PC (you can't connect to ctrlX with version 2.10)

GB_
Established Member

Tjanks you, where should I enter the licence? It didn't ask me during the installation and in the licence manager that I see in 2.10 I can't enter it because I would have to connect first. Thank you very much.

GB_
Established Member

Thanks you, so there is no 2.11 app for ctrlx core yet? Because I was thinking of updating everything but if so I avoid. Where should I enter the licence? It didn't ask me during the installation and in the licence manager that I see in 2.10 I can't enter it because I would have to connect first. Thank you very much.

HmiGuide
Community Moderator
Community Moderator
You must enter the license in the ctrlX license management.

GB_
Established Member

So I have to use an external app to activate the free WebIQ licence? And then how do I do that if I can't connect to ctrlX CORE? Then the license manager asks me for a file not a code andI already have the 150items license for version 2.10 on the ctrlX.
I give up, thanks a lot for the help.

webiq-sk
Frequent Contributor

If you installed WebIQ 2.11 on your system and start WebIQ Designer using the normal shortcut (i.e. not connecting to ctrlX) it will automatically prompt you to enter your WebIQ license key if you no not yet have a valid license. If not you can follow the instructions here: https://www.smart-hmi.de/user/download/deliver/docs/documentation-manual-license-installation-2-2.11... 

HmiGuide
Community Moderator
Community Moderator
The license manager of ctrlX is included in the ctrlX web visu. It manages the licenses for all ctrlX apps.

GB_
Established Member

It doesn't to me, I've tried to install several times, on real and virtual machines but all I get is this:

GiulianoB_0-1651487005467.png


It only works when I connect it to ctrlX but then it says the versions are not compatible.
I also tried in the properties of the desktop link to enter localhost, ip address, different ports, I tried to replicate the local server of version 2.10. Nothing worked. Sorry for the time I have wasted on you.

webiq-sk
Frequent Contributor

Just to clarify: when you connect with WebIQ Designer to a ctrlX instance using --ws-host command line parameter ctrlX licensing is handling your license.

If you start WebIQ Designer normally there is no connection whatsoever to ctrlX which means that you need to have a WebIQ license which is the one you get for free when signing up for 30 days. This has to be enterd in WebIQ Designer when you are prompted to enter it.

Regarding the error message: If it occurs while you are *not* connecting to ctrlX using the --ws-host parameter please check in the Windows services panel if the two WebIQ services are running - if not please start them manually. Then the error would not be shown.

GB_
Established Member

I managed to start WebIQ 2.11 some windows network settings were blocking the start of the web service even manually but I solved it and managed to implement the example project in my own. Thanks a lot for the help. Very useful!

HmiGuide
Community Moderator
Community Moderator

WebIQ 2.11 is now available in ctrlX shop for ctrlX CORE. The app for ctrlX CORE virtual is not yet available.

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