Is it possible to create Proportional Chart or Progress Gauge in Vuforia Studio?

[Swapnil_More]

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.

[RolandRaytchev]

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!

[Swapnil_More]

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.

[RolandRaytchev]

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&colon;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 /

[RolandRaytchev · Accepted 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  :

[Swapnil_More]

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.

[Swapnil_More]

Hello @RolandRaytchev ,

I am working on your solution but I am not able to see Images.

Please find attached project for your reference.

[RolandRaytchev]

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!

[RolandRaytchev]

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&colon;image/svg+xml;base64,'+btoa(xmlsrc);
   
  
}

//////////////////////////////////////////////////////////////

I attached the modified project to this post