Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Chat-friendly HTML/CSS to draw a rotated ellipse?

1617907235
David M.
Pro
API Scripter
I'm adding some relatively simple drawing elements to chat output with the api (radial-gradient circles, ellipses and the like). I'm having trouble figuring out if there is a way to create a rotated ellipse. From this post, it seems that transforms such as rotate() are stripped before reaching chat. I thought maybe I could approximate using a clip-path polygon after calculating the points of the ellipse, but it appears that clip-path is also unavailable? I logged a test html string (simple polygon, not the rotated ellipse math hell) that failed to clip the div in chat and plugged into jsfiddle to test, so the syntax I am using appears to to be valid. Any of you CSS wizards out there know of another way to produce a rotated ellipse that is Roll20-chat-friendly? 
1617907463
The Aaron
Roll20 Production Team
API Scripter
I'm going to guess you're out of luck with that.  What are you trying to do with the rotated circles, can you approximate it with graphics?
1617907539
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
The only way I know of is to do it with a css plugin. You assign the element a class like say rotate30 and then use stylus or something similar to apply the rotation. This obviously isn't ideal.
1617910083
David M.
Pro
API Scripter
Thanks, guys, I was afraid of those answers :) I'm adding graphical output to the Radar script in addition to the current text/table output. Just making circular "blips" on what looks like a radar screen. Currently getting height & width of tokens to make the pings proportional. Non-square dimensions become an ellipse instead of a circle, but if the token is rotated some arbitrary amount then the ping orientation won't match. Would be super easy with rotate, but alas such is life. Graphics could technically work with a bunch of images corresponding to multiple rotation angles, but the pings are also potentially color-coded based on user-defined text and color filters. I suppose I could overlay a tinted semi-transparent element over a mostly white elliptical background image. Aligning the images would prob be a PIA, though.  Example with all square-dimension tokens. The actual square token is the center of the radar wave. (filtering on npc_type attribute -> Undead are blue, celestials are yellow, fiends are red) I was able to draw diagonal lines (not shown above; optional formatting) by using a mostly transparent linear-gradient fill with super-narrow color. I could probably overlay one of those on top of pings of rotated tokens to show the actual angle. Kinda meh, though.  I may just keep everything as circles of the largest dimension (possible only if token is rotated) or some other cop-out. Folks using it for a space- or other vehicle-based game will probably feel the pain the most, as I imagine there are more instances of rectangular dimensions and rotation. Probably a small subset of a probably already small user base for a niche script, though. I'm sure I'm over thinking it!
1617911390
The Aaron
Roll20 Production Team
API Scripter
Yeah, I think I'd go with the max dimension, or something scaled between min and max based on the ratio of the sides.  Real radar isn't giving you the shape of an object anyway, just the profile it's presenting, so you could calculate the size based on the width as seen from the sensing token—that would at least let those space peeps get some extra dimension of use out of it. =D  "There's a small craft coming our way... wait.. OMG, it turned... it must be Frigate-class at least!"
1617917223
David M.
Pro
API Scripter
Ha! Good points!
1617918083
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Cool looking script David. Looking forward to seeing it complete.