SVG Objects library - Githubissues

iotgopher commented 6 years ago

Great job with this plugin. It would be very useful to be able to provide to the user while editing the panel the possibility to insert different objects taken from a library. I have a library of SVG objects for industrial use cases (tanks, pumps, pipes etc...) that I would like to contribute to your plugin. Can we do that?

MarcusCalidus commented 6 years ago

I think this is generally possible. I guess there are some things to consider.

do you have the copyright to those SVG objects. If yes, what license are they under?
are those SVGs already prepared to be controlled (e.g. IDs for relevant groups inside the SVG) - if you are unsure about that point you may just send me one example and I'll have a look.

iotgopher commented 6 years ago

There is no license associated as they have been individually made. I guess you can put Apache 2.0 if distributed as part of the plugin and you can let people add their own SVGs in a specific folder
See an example attached. There may be more than one of the same type in the same panel

svg01.zip

MarcusCalidus commented 6 years ago

Hey this really looks cool. I like it :-) I'm ok with the Apache 2.0 license. I am not at home for the weekend but I will be able to include your idea by next week. To allow end users to add their own SVGs is a good idea. I guess I'll have to sleep about that how to include them. If however you already have an idea you might also send a PR ;-) cheers.

iotgopher commented 6 years ago

Good deal! In the weekend I will prepare a folder with a few dozen SVGs and upload it as a zip file on this thread. Ideally since it will be a big library we may want to assign a category to each SVG so that people can filter by category and be facilitated in searching for the object.

MarcusCalidus commented 6 years ago

I guess it would be good to include some sort of repository.json. In effect this could be an array with a descriptor for each icon, like: { "category": "name of the category", "name": "name of the icon", "path": "relative path in repository directory", "description": "some useful hints (e.g. which groups can be used to control the SVG display)" }

I'm not yet sure how to handle using multiple SVGs of the same type. When you add two compressor objects (each having the id #compressor) you'd still have to change those IDs manually in the code in order to access each of them seperately. Or one would have to use some sort of placeholder syntax inside the object ids to enumerate them. Would be glad to hear your input on that.

iotgopher commented 6 years ago

I think the best would be to have a placeholder syntax inside the id attribute increasing incrementally.

Basically this is the workflow I see when adding a new object to the panel -select the type of object browsing the library (by category first and by object name second) -insert X position, Y position, length, width in input textboxes from the panel editor

The function will: -check if an existing object (same name) is already present in the panel. If not, assign id 1 (e.g. ) otherwise go up incrementally (e.g. <g id="Compressor_2")
-change the default position and size based on user input (if any, otherwise leave the default that comes with the svg object part of the library) -inject the required svg code to the panel

Easy to say, difficult to implement though!

MarcusCalidus commented 6 years ago

So I guess there should not be any placeholders in the IDs. If we choose to do it according your idea I simply could add _1, _2 etc. to the id. Another option would be to let the user enter an ID. Maybe he wants all compressors to have the same id to access them via array in snap.svg.

rtmaster notifications@github.com schrieb am Fr., 24. Nov. 2017, 18:44:

I think the best would be to have a placeholder syntax inside the id attribute increasing incrementally.

Basically this is the workflow I see when adding a new object to the panel -select the type of object browsing the library (by category first and by object name second) -insert X position, Y position, length, width in input textboxes from the panel editor

The function will: -check if an existing object (same name) is already present in the panel. If not, assign id 1 (e.g. ) otherwise go up incrementally (e.g. <g id="Compressor_2") -change the default position and size based on user input (if any, otherwise leave the default that comes with the svg object part of the library) -inject the required svg code to the panel

Easy to say, difficult to implement though!

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/MarcusCalidus/grafana-svg-panel/issues/1#issuecomment-346875300, or mute the thread https://github.com/notifications/unsubscribe-auth/AD7D1sRKCcFwrrGx9mKYMXQohDMLWx8wks5s5wBtgaJpZM4Qp_Zm .

iotgopher commented 6 years ago

good point in allowing optionally the user to insert the id for easier modifications afterwards! Do you want me to put in the svg library <g id="Compressor" or <g id="Compressor_1" ?

MarcusCalidus commented 6 years ago

I think you can leave the SVGs as they are. I can use the original ID as suggestion for the input box.

rtmaster notifications@github.com schrieb am Fr., 24. Nov. 2017, 19:03:

good point in allowing optionally the user to insert the id for easier modifications afterwards! Do you want me to put in the svg library or ?

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/MarcusCalidus/grafana-svg-panel/issues/1#issuecomment-346877576, or mute the thread https://github.com/notifications/unsubscribe-auth/AD7D1v8COs3Fp9TtlKbCTgExyJqgO6EDks5s5wTtgaJpZM4Qp_Zm .

MarcusCalidus commented 6 years ago

The SVG repository format is now finalized. Here it is:

{
    "marcuscalidus" : {
        "author": "Marco.Warm@unknown.com",
        "description": "simple examples",
        "license": "MIT",
        "items" :  [
            {
                "category": "Brand Icon",
                "name": "algolia",
                "path": "marcuscalidus/algolia.svg"
            },
            {
                "category": "Brand Icon",
                "name": "amazon",
                "path": "marcuscalidus/amazon.svg"
            },
            {
                "category": "Brand Icon",
                "name": "amilia",
                "path": "marcuscalidus/amilia.svg"
            }
        ]
    }
}

the top level key is the name of the repository (e.g. the username or library name). I guess it is enough to mention the license here and maybe include a License.md in the folder structure. What do you think?

newtility commented 6 years ago

I'd like to re-open (or perhaps expand) this issue: in particular, I'd really like to make it user-friendly to add repositories, categories, and SVG files. To me, making this database driven (rather than a hand-written repository file) wouldnt be a heavy lift, and would enable us to create simple "New Repository", "New Category", or "Upload SVG File" buttons. Currently, adding items to this is an unfriendly process, and to some degree requires some development experience.

I'd be willing to motivate getting this done, short-term, if at all possible!

MarcusCalidus / marcuscalidus-svg-panel

SVG Objects library #1