jQWidgets Forums
jQuery UI Widgets › Forums › Plugins › AngularJS › jqx-knob with angularjs issue
Tagged: knob
This topic contains 2 replies, has 2 voices, and was last updated by Peter Stoev 9 years, 2 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
Author
-
Dear All
I found an issue that when using more than one jqx-knob with angularjs. From the second jqx-knob, the div position “top” is always be incorrect, you have to substract height of the first jqx-knob in order to make it right. Does anyone have any idea why this happens? Thanks a lot!
Here is the code and I tried with 4.0.0 and 4.1.0, both not working proerly.
<!DOCTYPE html> <html ng-app="Screen1App" lang="en"> <head> <title id='Description'>Screen - Screen1</title> <link rel="stylesheet" href="lib/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="lib/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="lib/scripts/angular.min.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqxknob.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqxinput.js"></script> <style type="text/css"> .Test1_style { width: 110px; height: 70px; position: absolute; vertical-align: middle; border: 0px; font-weight: bold; font-style: normal; font-variant: normal; font-stretch: normal; font-size: 48px; line-height: normal; font-family: Arial; text-align: center; color: #00a644; padding: 0px; -webkit-appearance: none; background: none; margin-top: -35px; margin-left:-55px; left: 200px; top: 200px; }.Test2_style { width: 110px; height: 70px; position: absolute; vertical-align: middle; border: 0px; font-weight: bold; font-style: normal; font-variant: normal; font-stretch: normal; font-size: 48px; line-height: normal; font-family: Arial; text-align: center; color: #00a644; padding: 0px; -webkit-appearance: none; background: none; margin-top: -35px; margin-left:-55px; left: 600px; top: 200px; } </style> <script type="text/javascript"> var Screen1App = angular.module("Screen1App", ["jqwidgets"]); Screen1App.factory('WSService', function() { var service = {}; service.connect = function() { if(service.ws) { return; } var ws = new WebSocket("ws://192.168.199.1:8080/"); ws.onopen = function() {service.callback("Succeeded to open a connection");}; ws.onerror = function() {service.callback("Failed to open a connection");}; ws.onmessage = function(message) {service.callback(message.data);}; service.ws = ws; } service.send = function(message) {service.ws.send(message);} service.subscribe = function(callback) {service.callback = callback;} return service; }); Screen1App.controller("panel1Controller", function ($scope, WSService) { WSService.subscribe(function(message) { var res = message.split(","); for (var index = 0; index < res.length; index++) { var vars = res.split(" "); if (vars[1] == "RES2_Application1_FB0_Usage1") $scope.RES2_Application1_FB0_Usage1 = res[2]; else if (vars[1] == "RES2_Application1_FB0_Usage2") $scope.RES2_Application1_FB0_Usage2 = res[2]; } $scope.$apply(); }); $scope.connect = function() {WSService.connect();} $scope.send = function(data) {WSService.send(data);} $scope.Test1_settings = { value: 50, min: 0, max: 100, startAngle: 270, endAngle: 630, rotation: 'clockwise', allowValueChangeOnDrag: false, allowValueChangeOnClick: false, allowValueChangeOnMouseWheel: false, style: { fill: "#fff" }, dial: { style: { fill: "#fff" }, innerRadius: '68%', outerRadius: '92%', startAngle: 0, endAngle: 360 }, progressBar: { style: { fill: '#00a644' }, background: {fill: '#eeeeee'}, size: '30%', offset: '70%' }, pointer: { type: 'line', style: { fill: '#00a644' }, size: '30%', offset: '70%', thickness: 20 } }; $scope.Test2_settings = { value: 0, min: 0, max: 100, startAngle: 270, endAngle: 630, rotation: 'clockwise', allowValueChangeOnDrag: false, allowValueChangeOnClick: false, allowValueChangeOnMouseWheel: false, style: { fill: "#fff" }, dial: { style: { fill: "#fff" }, innerRadius: '68%', outerRadius: '92%', startAngle: 0, endAngle: 360 }, progressBar: { style: { fill: '#00a644' }, background: {fill: '#eeeeee'}, size: '30%', offset: '70%' }, pointer: { type: 'line', style: { fill: '#00a644' }, size: '30%', offset: '70%', thickness: 20 } }; $scope.RES2_Application1_FB0_Usage1 = 30; $scope.RES2_Application1_FB0_Usage2 = 50; }); </script> </head> <body> <div ng-controller="panel1Controller" style="position: absolute; top: 50px; left: 50px;"> <div data-ng-init="connect()"></div> <jqx-knob ng-model="RES2_Application1_FB0_Usage2" jqx-settings="Test1_settings" style="position: absolute; left: 6px; top: 11px;"></jqx-knob> <jqx-input ng-model="RES2_Application1_FB0_Usage2" class="Test1_style"></jqx-input> <jqx-knob ng-model="RES2_Application1_FB0_Usage1" jqx-settings="Test2_settings" style="position: absolute; left: 410px; top: 11px;"></jqx-knob> <jqx-input ng-model="RES2_Application1_FB0_Usage1" class="Test2_style"></jqx-input> <jqx-knob ng-model="RES2_Application1_FB0_Usage1" jqx-settings="Test2_settings" style="position: absolute; left: 810px; top: 11px;"></jqx-knob> <jqx-input ng-model="RES2_Application1_FB0_Usage1" class="Test2_style"></jqx-input> </div> </body> </html>Here is the screenshot of the results
Hi williamdai,
The Input tag which you positioned is not part of jqxKnob. It is a custom Input tag which you should position yourself with CSS. In this case, it seems that you did not use the correct CSS for that so you will need to play more with this on your side.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.