Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dmi2svg as a function that returns css in a string #149

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

tigercat2000
Copy link

I'm using this to make /datum/asset/spritesheet_svg, see this for an example of usage.

tl;dr

fcopy(icon_you_want_svgs_of, "icon.dmi");
// first argument is source file, second argument is target css
// third is an associative map of names.
// if you want to, for example, change "icon-state-a" to "statea", you would do `json_encode(list("icon-state-a" = "statea"))`
rustg_dmi_convert_to_svg("icon.dmi", "icon.css", json_encode(list()))
// If you want the actual CSS text in memory:
var/css = file2text("icon.css")
// Otherwise if you're just sending it to a client:
fcopy_rsc("icon.css")

Basically, this uses my new library, dmi2svg, to take a dmi file and convert all of the sprites within into svg paths using the contour_tracing library.

Known limitations right now:

  • Animated icons are not supported
  • Directional icons have to be split into separate states if you want to render each direction.

If you provide a DMI with either of these, it just grabs the first frame facing SOUTH and discards the rest. This is already good enough for my usecase, but I'm open to supporting these if people would like them.

Cargo.lock got updated because of a conflict in thiserror version requirements.

@@ -57,6 +57,7 @@ dbpnoise = { version = "0.1.2", optional = true }
pathfinding = { version = "4.2.1", optional = true }
num = { version = "0.4.0", optional = true }
dmi = { version = "0.3.0", optional = true }
dmi2svg = { git = "https://github.com/tigercat2000/dmi2svg", optional = true }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be set to a release using rev or tag

Comment on lines +32 to +34
* output: ready-to-ship svg file
*/
#define rustg_dmi_convert_to_svg_symbols(fname, output, namemap) RUSTG_CALL(RUST_G, "dmi_convert_to_svg_symbols")(fname, output, namemap)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what's with the _symbols suffix?
Bit unclear what's the actual difference between the 'svg symbols' one and the 'svg css' one - why use either

Copy link
Author

@tigercat2000 tigercat2000 Aug 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The difference is that _symbols produces a .svg file that looks like this:

<svg>
  <symbol id="spriteName">
    <path blablabla />
  </symbol>
</svg>

<symbol> elements are templates that can be used in <use> elements later.

Whereas _svgcss produces a .css file that looks like this:

.prefix.spriteName { background-image: "data:image/svg+xml;base64,jifgdigfdujdgfiopjgdfijgtdf" }

I've been actively experimenting with different APIs while I actually develop this into an interface, and realized that the CSS approach did not work for coloring icons- there is no way to tint them in the way I wanted.
Admittedly I think I submitted this PR too soon - I didn't actually have anything other than a test.html file when I made this.

Accordingly, I'm going to mark this as a draft until I have actually ironed out the real world usage.

@tigercat2000 tigercat2000 marked this pull request as draft August 16, 2023 09:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants