Skip to content

Commit

Permalink
[doc] Document how to use SVG icons for EMF metamodels
Browse files Browse the repository at this point in the history
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
  • Loading branch information
pcdavid committed May 15, 2023
1 parent 9233699 commit b44b8e5
Showing 1 changed file with 58 additions and 0 deletions.
58 changes: 58 additions & 0 deletions doc/how-to/use-svg-icons-in-emf.adoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
= How to use SVG icons for EMF metamodels

By default, the code generated by EMF for its metamodels only support bitmap formats for the element icons.
This is not adapted to modern contexts, especially on the web.
It is possible to force EMF to use SVG icons but this requires a few tweaks.

1. In the main `EditPlugin` class in that project (the one which extends `EMFPlugin`), add the following code to override the default `doGetImage` implementation:
[source,java]
----
@Override
protected Object doGetImage(String key) throws IOException {
URL url = new URL(this.getBaseURL() + "icons/" + key + extensionFor(key));
InputStream inputStream = url.openStream();
inputStream.close();
return url;
}
/**
* Computes the file extension to be used with the key to specify an image resource.
*
* @param key
* the key for the imagine.
* @return the file extension to be used with the key to specify an image resource.
*/
protected static String extensionFor(String key) {
String result = ".gif";
int index = key.lastIndexOf('.');
if (index != -1) {
String extension = key.substring(index + 1);
if ("png".equalsIgnoreCase(extension) ||
"gif".equalsIgnoreCase(extension) ||
"bmp".equalsIgnoreCase(extension) ||
"ico".equalsIgnoreCase(extension) ||
"jpg".equalsIgnoreCase(extension) ||
"jpeg".equalsIgnoreCase(extension) ||
"tif".equalsIgnoreCase(extension) ||
"tiff".equalsIgnoreCase(extension) ||
"svg".equalsIgnoreCase(extension)) {
result = "";
}
}
return result;
}
----
The only difference with the default/normal implementation is that the `extensionFor` method used now knows about the `.svg` file extension.
2. Place the icon(s) you want for you types as SVG files in the `icons/full/obj16` folder of the `.edit` generated plug-in/project.
3. For each type with such an SVG icon, modify its `ItemProvider`'s `getImage` method to reference the actual SVG image path, *including the file extension*:
[source,java]
----
/**
* @generated NOT
*/
@Override
public Object getImage(Object object) {
return this.overlayImage(object, this.getResourceLocator().getImage("full/obj16/SliderDescription.svg"));
}
----
Do not forget to mark the method as `@generated NOT` so the customization is not lost on regeneration.

0 comments on commit b44b8e5

Please sign in to comment.