Community Tip - When posting, your subject should be specific and summarize your question. Here are some additional tips on asking a great question. X
Hello,
I want to create Proportional chart or Progress bar in Vuforia Studio on 3D Eyewear project.
Is there any way to create custom gauges in VS?
I am using .SVG file for customized gauges but they are static.
I want dynamic gauge. please find below image for reference.
Solved! Go to Solution.
Using dynamic SVG format we can also create a vertical chart :
Here in this picture above additionally to the horizontal bar is also shown a vertical chart with 4 columns/bars
The function from the previous post was extended so that the with a call like:
$timeout(proportionalBarMoretimes('image-2',20,20,2,'green',306,'yellow',300,'magenta',77,'yellow',100,'green',300,'magenta',77,'yellow',100,'blue',200),1000)
The following call
$timeout(proportionalBarMoretimes('image-2',20,20,4,'green',306,'yellow',300,'magenta',77,'yellow',100,'green',300,'magenta',77,'yellow',100,'blue',200),1000)
will display a chart with 2 vertical bars :
Hi @Swapnil_More ,
I do not believe that we can use the current barChart to create the desired functionality ( but actually not 100% sure, may be somebody have other idea)
But I think the using of the SVG file is a good approach. I think we can generate and set svg file dynamically according to the post "Display SVG as 3D Image on HoloLens"
If you have difficulties to get it working, then , please, sent me the svg file - so I could try to create an example for dynamic setting.
Thanks!
Hello @RolandRaytchev ,
Please find attached .SVG files for reference and could you please explain me how it could be done?
I want to show Line history ( if Machine Running == Green, If Machine Idle == Red.)
Please tell me how I can achieve it.
Hi @Swapnil_More ,
actually when I give somebody a hint in a post , in generally I will expect that at least some tests or consideration should be done there. Did you check the link I mention in the last post . "Display SVG as 3D Image on HoloLens" ? In this topic was mention how to generate dynamic svg file. Did you try this and what are the problems?
Nevertheless I did test it further and it was working as expected after some work… and some tests.(Because I think this is a very good quesiton and need to be investigated furhter)
The mean approach is there to create a dynamic xml file using the SVG syntax.
Following function with variable arguments
function proportionalBar(<ImageWdiget>,heightBar,color1,width1,color2, width2 ..... )
example of call:
$timeout(proportionalBar('image-1',60,'red',126,'green',300,'magenta',77,'yellow',100),1000) //or $timeout(proportionalBar('image-2',20,'green',306,'yellow',300,'magenta',77,'yellow',100,'green',300,'magenta',77,'yellow',100),1000)
There are 2 Image widgets (image-1 and image-2)
I used the following code:
//function proportionalBar(<ImageWdiget>,heightBar,color1,width1,color2, width2 ..... )
function proportionalBar() { var imgWidget='' var height=30 var color ='red' var width=0 var x=0 var firstWidth=0 var xmlsrc_in='' var xmlsrc='<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n' if(arguments.length>0) imgWidget=arguments[0] if(arguments.length>1) height=arguments[1] if(arguments.length>2) console.log ("number of arguments ="+ arguments.length) for (var i= 2; i < arguments.length; i++) { console.log('Argument ['+i+']='+arguments[i]); if ( i % 2 == 0) { color =arguments[i] console.log('color='+color)} else { if(firstWidth ==0) {firstWidth++ x=0 width=arguments[i] console.log('width='+width) } else { width=arguments[i] console.log('width='+width) x=x+arguments[i-2] console.log('x='+x) } xmlsrc_in = xmlsrc_in+'<rect x="'+x+'" y="0" width="'+width+'" height="'+height+'" style="fill:'+color+'"/>\n' console.log('xmlsrc_in='+xmlsrc_in) } } width= width+x xmlsrc=xmlsrc+'<svg xmlns="http://www.w3.org/2000/svg" height="'+height+'" width="'+ width+'">\n' xmlsrc=xmlsrc+ xmlsrc_in xmlsrc=xmlsrc+'</svg>' console.warn(xmlsrc); $scope.view.wdg[imgWidget].imgsrc='data:image/svg+xml;base64,'+btoa(xmlsrc); } /////////////////////////////////////////////// $scope.$on('$ionicView.afterEnter', function() { $timeout(proportionalBar('image-1',60,'red',126,'green',300,'magenta',77,'yellow',100),1000) $timeout(proportionalBar('image-2',20,'green',306,'yellow',300,'magenta',77,'yellow',100,'green',300,'magenta',77,'yellow',100),1000) })
During the tests I did some printing to the console for debugging purpuse. You can disable them /comment or remove /
Using dynamic SVG format we can also create a vertical chart :
Here in this picture above additionally to the horizontal bar is also shown a vertical chart with 4 columns/bars
The function from the previous post was extended so that the with a call like:
$timeout(proportionalBarMoretimes('image-2',20,20,2,'green',306,'yellow',300,'magenta',77,'yellow',100,'green',300,'magenta',77,'yellow',100,'blue',200),1000)
The following call
$timeout(proportionalBarMoretimes('image-2',20,20,4,'green',306,'yellow',300,'magenta',77,'yellow',100,'green',300,'magenta',77,'yellow',100,'blue',200),1000)
will display a chart with 2 vertical bars :
Hello @RolandRaytchev ,
Thanks for solution,
Actually I tried your previous solution and it was working fine but I was unable to add multiple images in that scenario. but now all are working fine now.
Thanks once again.
Hello @RolandRaytchev ,
I am working on your solution but I am not able to see Images.
Please find attached project for your reference.
Hi @Swapnil_More ,
I downloaded your project and will check it today and will give a feedback (today a little bit later )
Regards and Thanks!
When I answered to this topic the first time I did test only on mobile project. There was everything workig fine.
I checked with your project for the HoloLens and I also did not get it working.
so needed to check somethings and have and somehow I got it working but it took for a while...
I suspect to use the direct set to src property of 3DImage widget we need some kind of action to wake up the upload mechanism of the widget. otherwise I have no idea why now is working when I am calling the function in a fetch construct and in the “then” brach of the fetch I will call the function proportionalBar()- then it works.
The code was modified to :
const toDataURL = url => fetch(url) .then(response => response.blob()) .then(blob => new Promise((resolve, reject) => { const reader = new FileReader() reader.onloadend = () => resolve(reader.result) reader.onerror = reject reader.readAsDataURL(blob) })) ////////////////////////////////////////////////////// $scope.$on('$ionicView.afterEnter', function() { toDataURL('app/resources/Uploaded/green.svg') .then(dataUrl => { console.log('RESULT:', dataUrl) }) toDataURL('app/resources/Uploaded/red.svg') .then(dataUrl => { $timeout(proportionalBar('image-1',60,'red',126,'green',300,'magenta',77,'yellow',100),1000) $timeout(proportionalBar('image-2',20,'green',306,'yellow',300,'magenta',77,'yellow',100,'green',300,'magenta',77,'yellow',100),1000) }) }) ////////////////////////////////////// function proportionalBar() { var imgWidget='' var height=30 var color ='red' var width=0 var x=0 var firstWidth=0 var xmlsrc_in='' var xmlsrc='<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n' if(arguments.length>0) imgWidget=arguments[0] if(arguments.length>1) height=arguments[1] if(arguments.length>2) console.log ("number of arguments ="+ arguments.length) for (var i= 2; i < arguments.length; i++) { console.log('Argument ['+i+']='+arguments[i]); if ( i % 2 == 0) { color =arguments[i] console.log('color='+color)} else { if(firstWidth ==0) {firstWidth++ x=0 width=arguments[i] console.log('width='+width) } else { width=arguments[i] console.log('width='+width) x=x+arguments[i-2] console.log('x='+x) } xmlsrc_in = xmlsrc_in+'<rect x="'+x+'" y="0" width="'+width+'" height="'+height+'" style="fill:'+color+'"/>\n' console.log('xmlsrc_in='+xmlsrc_in) } } width= width+x xmlsrc=xmlsrc+'<svg xmlns="http://www.w3.org/2000/svg" height="'+height+'" width="'+ width+'">\n' xmlsrc=xmlsrc+ xmlsrc_in xmlsrc=xmlsrc+'</svg>' console.warn(xmlsrc); $scope.view.wdg[imgWidget].src='data:image/svg+xml;base64,'+btoa(xmlsrc); } //////////////////////////////////////////////////////////////
I attached the modified project to this post