I am developing a custom widget which is a button opening the webcam/camera to scan a QR code. It will be deployed on ThingWorx version 6.5.20. I have developed a small html/js website to check the basic functionalities, and that is working so far. The html uses 3 javascript libraries, which are:
- jquery.min.js
- html5-qrcode.min.js
- jsqrcode-combined.min.js
Below is the code of my website showing the camera on a div. It does not work perfectly, but it is just a first test to validate that I can replicate it into a ThingWorx extension.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="html5-qrcode.min.js"></script>
<script type="text/javascript" src="jsqrcode-combined.min.js"></script>
<title>Test print.js</title>
</head>
<body>
<div id="reader" style="width: 300px; height: 250px"></div>
<span id="read" class="center"></span>
<br>
<script type="text/javascript">
function scanQrCode() {
console.log("In scan");
$('#reader').html5_qrcode(function(data) {
alert(data);
$('#reader').html5_qrcode_stop();
},
function(error) {
console.log(error);
}, function(videoError) {
console.log(videoError);
});
}
</script>
<button type="button" onclick="scanQrCode()">Scan</button>
</body>
</html>
I then adapted the code above into Eclipse Java EE IDE. I linked the 3 javascript libraries in the metadata.xml, as showed in the "Include libraries.PNG" attached file (same as jquery has been applied to include the 2 other libraries).
I then imported the extension into ThingWorx Composer, but the Composer was not accessible anymore after the include (see "AccessComposer.PNG" attached). There is the "Uncaught TypeError: simulatedDataTabs.hoverIntent is not a function" error, which can be related to jquery conflict. I then went to the monitoring page and more precisely to the ExtensionManagerListing (see "ExtensionManagerListing.PNG" attached) to remove the extension I had just added. This solved the problem and the Composer was accessible again.
Following that, I wanted to know where did the error come from. I then only added jquery into metadata.xml, and the importation crashed again. Although this time, the ExtensionManagerListing was not accessible properly (see "ExtensionManagerListing rendering fail.PNG" attached). When I click on the delete button, the error "Uncaught TypeError: $.publish is not a function" occurs. I made some research on that and found that it can happen if there is a conflict with jquery library references. While it is surprising that an extension can cause such big problems, I think that the inclusion of my extension somehow overrides the jquery used by ThingWorx.
I then tried to delete files related to my extension on the server and restarted it, but it did not improve the situation.
I noticed a bit after the importation that I made a mistake in the manner of including jquery. According to the ThingWorx Foundation Extension Development Guide page 78, a jquery library must be included by appending html and before that checking if the library already exists. So that could be an explanation on why it fails.
Would someone have an idea how I could fix this issue?
Thanks,
Antoine
