cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper I
Helper I

Adding a svg object

Hi everyone,

 

I want to add a SVG status/progress bar. However when I inser the code, I dont see anything. Any suggestions why? I am working on a german environment. Maybe some syntax issue?

 

"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100px%22%20height%3D%22100px%22%3E"

&
"%3Cpath%20fill%3D%22none%22%20style%3D%22stroke-width%3A18%3Bstroke%3Argb%28230%2C230%2C230%29%3Bstroke-linecap%3Around%3B%22%20d%3D%22" &
"M%20" &
Text(50-40*Sin(Pi()/4)) & "%20" & Text(50+40*Cos(Pi()/4)) &
"%20A%20" &
"40%2040%200%201%201%20" & Text(50-40*Sin(2*Pi()-Pi()/4)) & "%20" & Text(50+40*Cos(2*Pi()-Pi()/4)) &
"%22%3E" &
"%3C%2Fpath%3E" &
"%3Cpath%20fill%3D%22none%22%20style%3D%22stroke-width%3A18%3Bstroke%3Argb%2869%2C204%2C206%29%3Bstroke-linecap%3Around%3B%22%20d%3D%22" &
"M%20" &
Text(50-40*Sin(Pi()/4)) & "%20" & Text(50+40*Cos(Pi()/4)) &
"%20A%20" &
"40%2040%200%20" & If(Slider1.Value/Slider1.Max>Pi()/(2*(Pi()-Pi()/4));"1";"0") & "%201%20" & Text(50-40*Sin(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max)) & "%20" & Text(50+40*Cos(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max)) &
"%22%3E" &
"%3C%2Fpath%3E" &
"%3C%2Fsvg%3E"

18 REPLIES 18
Highlighted

@NamegomJan 

Change the : in the first line to ":"

 

Should be "data:image"

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!
Highlighted

Awesome, thanks! The circle is working now. However the original code is still not working. I'll send a screenshot below.

 

NamegomJan_0-1601761238910.png

 

Highlighted

@NamegomJan 

Odd!! Looks exactly like mine except for the 2 ;'s 

 

I don't know if there is some encoding conversion that is throwing it off because of the difference in language. 

Perhaps try this formula:

With({p4:If(Slider2.Value/Slider2.Max>Pi()/(2*(Pi()-Pi()/4));"1";"0"),
      pSin:40*Sin(Pi()/4),
      pCos:40*Cos(Pi()/4),
      sVal:Slider2.Value/Slider2.Max },

"data:image/svg+xml,"&

EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'>
    
    <path fill='none' style='stroke-width:18;stroke:rgb(230,230,230);stroke-linecap:round;' d='M " & Text(50-pSin) & " " & Text(50+pCos) & " A 40 40 0 1 1 " & Text(50-40*Sin(2*Pi()-Pi()/4)) & " " & Text(50+40*Cos(2*Pi()-Pi()/4)) & "'>
     </path>
     
    <path fill='none' style='stroke-width:18;stroke:rgb(69,204,206);stroke-linecap:round;' d='M " & Text(50-pSin) & " " & Text(50+pCos) & " A 40 40 0 " & 
     p4 & " 1 " & Text(50-40*Sin(Pi()/4+2*(Pi()-Pi()/4)*sVal)) & " " & Text(50+40*Cos(Pi()/4+2*(Pi()-Pi()/4)*sVal)) & "'>
     </path>

     
</svg>")

)

Note again that if this gets encoded in this post and the data : image changes then change it back to a colon :

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!
Highlighted

At least I see something now.. however not as intended:

 

NamegomJan_0-1601762096757.png

 

Highlighted

@NamegomJan 

I believe something is going on in the encode on your side.  I can't say why, just seems like those paths are way crazy!

 

Here is what I would suggest (and this will be somewhat painful)

Put a Label on a screen and make it big.  Set the Text property to the EXACT formula I sent you.

Here comes the pain...compare what you see in that label to what I show (Image for exactness):

RandyHayes_0-1601762363697.png

I will put it here as well as Text, but I bet the forum editor will somehow dork it up.

data&colon;image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100px%27%20height%3D%27100px%27%3E%0D%0A%20%20%20%20%0D%0A%20%20%20%20%3Cpath%20fill%3D%27none%27%20style%3D%27stroke-width%3A18%3Bstroke%3Argb%28230%2C230%2C230%29%3Bstroke-linecap%3Around%3B%27%20d%3D%27M%2021.71572875%2078.28427125%20A%2040%2040%200%201%201%2078.28427125%2078.28427125%27%3E%0D%0A%20%20%20%20%20%3C%2Fpath%3E%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%3Cpath%20fill%3D%27none%27%20style%3D%27stroke-width%3A18%3Bstroke%3Argb%2869%2C204%2C206%29%3Bstroke-linecap%3Around%3B%27%20d%3D%27M%2021.71572875%2078.28427125%20A%2040%2040%200%200%201%2013.8069179%2032.96882834%27%3E%0D%0A%20%20%20%20%20%3C%2Fpath%3E%0D%0A%0D%0A%20%20%20%20%20%0D%0A%3C%2Fsvg%3E

 

See if there is some difference and that might lead to the issue.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!
Highlighted

No pain.. no gain . I did the comparison and below is what the differences are. However I did not find out what the reason could be:

 

NamegomJan_0-1601810989238.png

 

Highlighted

@NamegomJan 

I see the issue...your Text function is converting the text into your language format - periods are replaced by commas.  This will not work for the SVG.

 

Change your two paths in your image formula to the following formula (note: this is not a complete formula as I got tired of fussing with the colon on the data image part in previous posts - this is just the two Path objects):

    <path fill='none' style='stroke-width:18;stroke:rgb(230,230,230);stroke-linecap:round;' d='M " & Text(50-pSin, "#.0########", "en-US") & " " & Text(50+pCos, "#.0#######", "en-US") & " A 40 40 0 1 1 " & Text(50-40*Sin(2*Pi()-Pi()/4), "#.0########", "en-US") & " " & Text(50+40*Cos(2*Pi()-Pi()/4), "#.0########", "en-US") & "'>
     </path>
     
    <path fill='none' style='stroke-width:18;stroke:rgb(69,204,206);stroke-linecap:round;' d='M " & Text(50-pSin, "#.0########", "en-US") & " " & Text(50+pCos, "#.0########", "en-US") & " A 40 40 0 " & 
     p4 & " 1 " & Text(50-40*Sin(Pi()/4+2*(Pi()-Pi()/4)*sVal), "#.0########", "en-US") & " " & Text(50+40*Cos(Pi()/4+2*(Pi()-Pi()/4)*sVal), "#.0########", "en-US") & "'>
     </path>

 

Let's see where that gets you.

 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

View solution in original post

Highlighted

That is it - the Text function by default in German uses ',' as the decimal separator, and the SVG specification requires '.' as the decimal separator. If you replace your original expression with the one below, it should work. The second parameter to the Text function ("[$-de-DE]0,000") determines the format (whole part, followed by three decimals, in German), and the third parameter ("en-US") instructs the function to use the English format when converting the number to text

 

"data&colon;image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100px%22%20height%3D%22100px%22%3E"

&
"%3Cpath%20fill%3D%22none%22%20style%3D%22stroke-width%3A18%3Bstroke%3Argb%28230%2C230%2C230%29%3Bstroke-linecap%3Around%3B%22%20d%3D%22" &
"M%20" &
Text(50-40*Sin(Pi()/4);"[$-de-DE]0,000";"en-US") & "%20" & Text(50+40*Cos(Pi()/4);"[$-de-DE]0,000";"en-US") &
"%20A%20" &
"40%2040%200%201%201%20" & Text(50-40*Sin(2*Pi()-Pi()/4);"[$-de-DE]0,000";"en-US") & "%20" & Text(50+40*Cos(2*Pi()-Pi()/4);"[$-de-DE]0,000";"en-US") &
"%22%3E" &
"%3C%2Fpath%3E" &
"%3Cpath%20fill%3D%22none%22%20style%3D%22stroke-width%3A18%3Bstroke%3Argb%2869%2C204%2C206%29%3Bstroke-linecap%3Around%3B%22%20d%3D%22" &
"M%20" &
Text(50-40*Sin(Pi()/4);"[$-de-DE]0,000";"en-US") & "%20" & Text(50+40*Cos(Pi()/4);"[$-de-DE]0,000";"en-US") &
"%20A%20" &
"40%2040%200%20" & If(Slider1.Value/Slider1.Max>Pi()/(2*(Pi()-Pi()/4));"1";"0") & "%201%20" & Text(50-40*Sin(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max);"[$-de-DE]0,000";"en-US") & "%20" & Text(50+40*Cos(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max)) &
"%22%3E" &
"%3C%2Fpath%3E" &
"%3C%2Fsvg%3E"

 

(somehow the code editor keeps changing 'data&colon;image/svg..." to 'data&colon;image/svg...' - you'll need to replace the '&colon;' with ':' for this to work)

 Hope this helps!

View solution in original post

Highlighted

Woow thanks! This was it. Finally, it works. You all area great. Thanks again!

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (10,357)