Is there any UI clipping/masking of any sort implemented yet?

Since I don’t have a key yet I’ve been trying to mock things up with html and scss but I realized that one component that I cant seem to find a way to make with the currently supported styles is a progress/health ring. Usually for html/css I’d use an SVG and leverage the dasharray and dashoffset for the border but nothing like that is available nor could I use an SVG at all for it so I cant even modify it dynamically like I could in something like Vue. The next solution would be using masks or clipping paths but nothing like that exists either from what I can tell either. Does anyone know of any implemented masking feature for UI? It would also be useful for a ton of UI elements but if it’s not implemented yet I’ll hold off on those sorts of things.

There’s no way to do masks outside of overflow restrictions, and I believe they were acting funny recently. I will double check if anything changed for you.

I was guilty of requesting clip path without researching it, apparently it is not even supported by most browsers and Garry said he can’t imagine them ever integrating it.

Supported styling is here: Supported Style Properties - S&box Wiki

2 Likes

I know he mentioned (I believe in the discord) that SVG seemed easy enough and would be implemented down the line which would be a better solution than clip path anyway if that’s not going to be supported. Ideally though I hope they decide to add the border controls such as dasharray to normal elements. That would solve the problem too and be probably easier to implement and have other uses. You could use the border image to do dashed outlines/underlines but being able to do it programmatically would be really nice and allow for things like Circular progress bars.

Well you can technically do a circular progress bar as it stands, it’s just a significantly larger amount of work

Here is a radial UI menu I made, I could not use clipping or overflows, so it’s a lot of border magic

But once SVG gets added absolutely it would be good to make sure those tricks work

( edited so you know I wasn’t disagreeing with you or something )

I did a similar design when I was making a simple app to record and test people’s Rust theories about the roulette wheel (rustwheel) I assume to get a smooth outer edge though you are using a border overtop to cover the harsh edges?
I’m not sure how practical that would be for a progress ring or if it would allow you to animate it easily without a lot of CS overhead. Pure SCSS for the transition animations would be ideal. There’s a handful of ways to do it with some CS but I think it would be pretty hacky in comparison. I was also largely hoping to find something I could start implementing/designing right now since I don’t have a key yet.

Since there isnt, I’m going to see if I can get a hacky scss version working with a 100 segmented circle and scss variables to control opacity. I’m not sure if I’ll be able to get a continuous animation working for it but it should still work in terms of displaying a percentage as a ring.

There are no harsh edges, this is completely smooth

If you’re really keen on implementing things at this state, use very basic CSS and follow the styling I posted a few replies above.

But really the UI and general “front end” is still being worked on, things are bound to change and even get better, I’d only commit the time to the workarounds if I had to deliver on something in a deadline. I’m currently working on Polystrike and we want to have a demo for people to play with, but you have the benefit of patience

I’ve been using that page as a reference for a while now but I’m just curious how you gave the black parts that you hover over a rounded edge to fit the circle if the gray border going past it is optional.

Hey David, as a follow-up, do you know if linear-gradient for the background-image property is implemented? I found a way I might be able to get the circular progress bar working as well as an easy way to setup a radial menu like you have but it hinges on the linear-gradient. (based off this jsfiddle http://jsfiddle.net/jonathansampson/7PtEm/)

Didn’t get to answer you

The smoothing is done by the standard triangle drawing for css, but with rounded corners. There’s a lot of fine tuning to actually make it look good regarding resolution and such.

In regards to your idea, it will not work AT THE MOMENT. Gradient currently has a bug where color stops are not respected, so you can not have hard stops. Once this is fixed however you should be fine.

1 Like

thanks! I appreciate you taking the time to answer these kinds of things. I tried getting a triangle based thing working before using the border sizes and an element with 0 width and height but even with the rounding I couldn’t get a proper circle segment. I’ll give it another go though since that’s how you got it working.