Page 1 of 3

Let lines simultaneously been drawn

Posted: Sat Jun 09, 2018 10:04 am
by Alex sminia
Hi there,

I use Inkscape to make SVG files for scribe files.

No I want try to explain what I want to ask because it is difficult for me.

I want to make respiration curves like on a ventilator. A pressure curve, a flow curve and a volume curve
There for the lines/curves I want to make must be simultaneously been drawn. So not one after the other but in the same time.

Is there any way to achieve this in Inkscape?

Re: Let lines simultaneously been drawn

Posted: Sat Jun 09, 2018 9:44 pm
by tylerdurden
What have you tried, and what was the result?

Can you provide a sketch of what you want to do?

An animated set of waveforms should be manageable in svg or gif.

Re: Let lines simultaneously been drawn

Posted: Sun Jun 10, 2018 7:34 am
by brynn
Yes, it sounds like you need animation. Here's an overview of different ways to use images made in Inkscape, to create animation: https://inkscape.org/en/learn/animation/ Many ways! But Inkscape doesn't have animation by itself.

Actually as I think about it more, I'm not sure what kind of approach to take, to animate a line being drawn. For a GIF animation, I guess you'd have many frames, where in each frame, the line (or lines) are extended by a few pixels more. Oh, or maybe you could use pattern along path, and extend the path a little bit more for each frame?

For SVG animation....I really don't know how that would work. I can think of moving a box across the screen. But extending a line more and more across a screen....I can't imagine how that would work. I don't mean to say it can't work - just that I haven't learned how.

I wouldn't be surprised if there isn't some graphics program somewhere, that will do exactly what you want.

Re: Let lines simultaneously been drawn

Posted: Sun Jun 10, 2018 5:53 pm
by Xav
The classic (and probably simplest) way to animate a line being drawn in SVG is this:

https://css-tricks.com/svg-line-animation-works/

Re: Let lines simultaneously been drawn

Posted: Mon Jun 11, 2018 1:58 am
by Moini
What exactly is scribe? Does anyone know what the OP is asking about?

Re: Let lines simultaneously been drawn

Posted: Mon Jun 11, 2018 9:36 am
by tylerdurden
Moini wrote:What exactly is scribe? Does anyone know what the OP is asking about?

Maybe this: https://www.videoscribe.co/en/

But I think the best way to do what the OP wants is to have three waveforms that are revealed by a moving mask.

Re: Let lines simultaneously been drawn

Posted: Mon Jun 11, 2018 9:46 am
by Moini
So, doesn't that mean that this is a thing that needs to be set in videoscribe?

Inkscape's paths are always 'consecutive', no matter if you use subpaths, or groups, or separate paths - they always have an order - and if videoscribe uses that order for drawing a single line at once, there must be a solution in videoscribe to also draw 3 lines at once...

Re: Let lines simultaneously been drawn

Posted: Mon Jun 11, 2018 9:47 am
by Moini
(or to just move whole objects from left to right on the screen, while hiding their end behind a static white rectangle)

Re: Let lines simultaneously been drawn

Posted: Mon Jun 11, 2018 10:08 am
by tylerdurden
Yeah, I don't think these whiteboard sketchy programs do more than sequentially follow path creation order, so I suggested a more conventional/archaic method of "wipe" to reveal waveforms. (if they are waveforms... Some pulmonary/respiratory plots are loops that draw simultaneously.)

https://www.youtube.com/watch?v=ybR1g_91Eb4

It probably needs to be a wipe, rather than "slide-in" to simulate a display... some systems might slide in the waveforms right to left, since we westerners have defacto standardized time charting with increasing duration in the right-hand direction.

Re: Let lines simultaneously been drawn

Posted: Mon Jun 11, 2018 11:00 am
by tylerdurden
I really like the CSS trick to make the dash-array draw the stroke... is there a way to include that CSS within the SVG?

(A working example would be greatly appreciated.)

Thanks!

Re: Let lines simultaneously been drawn

Posted: Mon Jun 11, 2018 11:33 am
by Moini
I think there is one in Jabier's gallery on the website... Let me look for it... https://inkscape.org/en/~jabiertxof/%E2 ... er-logo-in

Re: Let lines simultaneously been drawn

Posted: Mon Jun 11, 2018 4:56 pm
by Xav
Including CSS in any SVG file is as simple as putting it in a <style> block in the XML - of course you have to add that by hand. Animations included this way will also run in the browser when an SVG image is included in an <img> tag, whereas externally referenced CSS files won't.

My tutorial series is focusing on SVG in web pages for a few months; I'll certainly be covering adding CSS, and this technique in particular, but I'm not sure yet exactly how long it will be until I get to that.

FWIW, if anyone's in an extension writing mood, this would be a great one to have. Select a path, run the extension to set the animation delay, length and whether it loops or not, and the extension would add a new <style> block with the right CSS in it.

Re: Let lines simultaneously been drawn

Posted: Mon Jun 11, 2018 10:33 pm
by tylerdurden
An extension would be awesome.

Here's what I've hacked together so far to make a waveform:
SVG Image

Obviously fast and dirty, just cutting/pasting stuff to replace Jabier's code.

Re: Let lines simultaneously been drawn

Posted: Sat Jun 16, 2018 12:26 am
by Moini
Hehe, this is a fun extension idea... I'd love to make one like that.... TD, can you send me the details of the interface options and the code that Inkscape would need to insert for a selected path? That would make it faster (but still would take long, because I'm currently in a hurry to finish another project, which will take several weeks still).

Re: Let lines simultaneously been drawn

Posted: Mon Jun 18, 2018 11:45 pm
by Moini
I've made a minimized version of the SVG, which doesn't need clones anymore.

https://framadrive.org/s/LWXyAT9kaFoZLGa/download

Re: Let lines simultaneously been drawn

Posted: Tue Jun 19, 2018 1:20 am
by Moini
I've already made a concept of the extension now... It's going to allow multiple animations in a file :) (not written yet, but I know each step already)

Re: Let lines simultaneously been drawn

Posted: Tue Jun 19, 2018 1:24 am
by tylerdurden
This is so great!

I've only had a moment to look at the css animation properties, but this is helping me understand much better. =)

TD

Re: Let lines simultaneously been drawn

Posted: Tue Jun 19, 2018 1:39 am
by Xav
Moini wrote:I've already made a concept of the extension now... It's going to allow multiple animations in a file :) (not written yet, but I know each step already)


You've probably already worked this out, but just in case...

The "obvious" method for animating more than one path is to add CSS animation properties for each one to a single <style> element. It's the way you might typically do it if you're adding the properties by hand. But it's worth remembering that you can have more than one Style element in an SVG document. A simpler approach for an extension might therefore be to add a separate <style> element for each path - that way there's less chance of accidentally trampling over any existing CSS rules. By giving each <style> element an appropriate ID or other attribute, constructed from the ID of the path its animating, it also makes it much more viable for the extension to be able to replace an existing block, rather than just appending a new one every time.

Re: Let lines simultaneously been drawn

Posted: Tue Jun 19, 2018 3:16 am
by Moini
Thank you, I didn't think of using multiple style tags.

As I've been planning to try and not repeat myself too much in the styles I insert, so it can still be adapted manually without a lot of search-and-replace, I've thought of using classes for some of this, and ids for other parts. But this can still be combined with multiple style tags.

Your hint will save me some style-parsing :) It's quicker to just access tags/ids.

Re: Let lines simultaneously been drawn

Posted: Tue Jun 19, 2018 8:18 pm
by Xav
Moini wrote:Your hint will save me some style-parsing :)


I've been there and done that. If I can help even one person avoid having to deal with the hell that is parsing CSS, I've done some good ;)

(One of my personal bugbears is that CSS wasn't implemented as an XML language, even though the W3C was going XML crazy at the time. If it had been, we would have a style language that could be manipulated more easily in code, and which allowed for future extensibilty without having to introduce increasingly obtuse syntax)

Re: Let lines simultaneously been drawn

Posted: Wed Jun 20, 2018 1:28 am
by Moini
:)

The scaffolding is there now, all lego bricks I need exist. Now I only need to do the actual putting together of them, to make it actually do something.

If anyone's interested, work is going to happen here:
https://gitlab.com/Moini/ink_delineator

(and if anyone could tell me if the name I chose sounds okay to a native English speaker, that would be helpful)

Re: Let lines simultaneously been drawn

Posted: Wed Jun 20, 2018 2:27 am
by Xav
Moini wrote:(and if anyone could tell me if the name I chose sounds okay to a native English speaker, that would be helpful)


I'm not convinced by it. Although "delineate" might literally mean to draw or trace a line, it's not commonly used in that sense.

Perhaps "Path Animator" or "Line Animator"? I know it might be misinterpreted as causing the path to move, but every other option I've thought of is too long or too clunky - and the CSS Tricks article does refer to it as "Line Animation", after all.

Re: Let lines simultaneously been drawn

Posted: Wed Jun 20, 2018 2:51 am
by Moini
Yeah, I know, I wanted to make a pun... something less ordinary. People often use these kinds of videos for explaining things, so the dual meaning would have been used. But if it doesn't work with a native speaker, there's not much sense using it :)

Sketchit was in use already, and I'm not familiar enough with the language to think of other, smart names.

Re: Let lines simultaneously been drawn

Posted: Wed Jun 20, 2018 2:54 am
by Moini
(ghostwriter would be nice, too, but I think it's used multiple times already...)

Re: Let lines simultaneously been drawn

Posted: Wed Jun 20, 2018 1:56 pm
by brynn
Maybe "ghost pen" or "ghost ink pen"? ("Ink pen" kind of harkens back to when I was a child, growing up in the south, where "pen" and "pin" sound exactly alike when spoke with southern accent, and "inkpen" was commonly used for clarity.)

What about just "writer" or "handwriter"? Well, I guess it works for more than just writing text....

I could cast a 2nd vote for "path animator".

To me (native English speaker) "delineate" is more about creating a border or outline, or maybe separating groups.

Edit
I'll be glad to test it, when it's ready, as long as other software is not needed (I have totally no idea how you're doing it).