Hello, 

I realized this project for a particular Oled display.
It represent an cabin altitude gauge from aircraft, with the proper specifications of the system.

A range of 0 to 10625 fts, for the needle and the numeric value(on right side).

And a step of 50ft !

So, 211 differents needles angles and numeric values, and the flow of errors edited who I corrected after.

It done a smooth displaying of my gauge, but not without an long editing work.    

I had to change manually with object transformation and color background all images, costed to me one week of work.

Does exist another most quick solution to this manual editing ?

Thanks any reply 

What is the final maximum resting position of the needle ? 

Does 10625 correspond with the red '10' ? 

Was thinking about creating an animated svg displaying every values between the full range, 

then maybe capture that with a screen recorder -if raster images are good output format. 

(By splitting video into an image sequence. After that even if it's selecting the right frames is done manually, 211 clicks for selection should be manageable.

There may be clever ways to speed up that process too.)

Still, a week for this seems a bit excessive for manual editing. 

Had done my fair share of repetitive manual editing, the key is to organise the process by the kind of repeating pattern.

Like, instead of (adjusting angle, adjusting text, saving file)*211, 

try adjust angle*211, adjust text*211, save file*211.

Even done manually with the transformation panel -shift+ctrl+m- you can just click away 210 times the initial value.

But there may be more clever approaches, like using the tiled clones panel.     (-or maybe somekind of interpolation/pattern along path lpe)

The text maybe also broken down to digits of wich a special distribution could do the trick. 

Saving 211 times? Create a document with 211 pages and put each variation onto a new page.

Can save it as a multipage pdf and maybe it's much easier splitting that into individual files (with pdfsam basic into separate pdf-s.)

Batch converting pdf-s to svg-s? Would need to look that up. Imagemagick may do that or some could suggest a commandline way to do that with inkscape. 

Or use somekind of splitter extension to split the multipage svg into individual  files -need to look that up; there was one for large format printing.

Hello,

many thanks for helping me.

First, 10625, is the last value of the range, but not corresponding to the 10 value position.

10, correspond of 10000, or from 0 to 10 (0 to 10000), you have 180° of angle.

So, 0,9° every 50 ft.

Normally, if you do exactly the indication process of the gauge.

If altidude increase again, needle stay in max position and value increase up to 37000 in red color.

seem like more 500 images if you would like to strictly respect the process, with a total of 700 images.

ok, I say one week, but it most 4 or 5 hours passed in a week.

but I am sure that exist another solutions to realize it quickly.

I tried to use image magic but unfortunately, my rended failed.

and it work with the needle only.

I thinked that Gimps could do it, but won’t sure that the appropriate software for that.

does it similar to inkskape or really for animation.

at finality, I must have separed différent images with own angle of needle position and own associated value.

my program, call every adressed images every step counting, showing a needle gauge moving like a real one.

One image with a needle bad position, or value not at correct place, is immediately shown on the display.

and must be solved.

a lot of control necessary before export the images.

even images controlled, lot and lot of times, I found several faults in my final design.

I trust that you are aware that SVG files can animate on the fly without the use of frame by frame display of stills...

https://codepen.io/naikus/pen/BzZoLL

https://codepen.io/enxaneta/pen/EVYRJJ

https://github.com/rpsthecoder/svg-meter-gauge

It is typically the solution which I search, 

But, why I use frame by frame,

Cause, it is easier to control the gauge, frame by frame.

My display which communicate with a serial port can register a range of frame adressed from ID0 to IDn.

Every increments I display new frame.

It is easy to realize.

You can see on video added below, the needle and the numeric value, increasing and decreasing, with an hidden control board who I control with a switch, by simply call the adressed frame.

I guess your solution is sure better, but how can I control it ?

Which command code to control it ?

Can I export it in png format necessary for my display, 

Does you load three différents images, as circular form, digit and needle and set the program to realize a range of value ?

I am not skilled in the creation of these, but want to share that SVG supports real-time variation based on script input. e.g. this clock shows the time from your browser: https://codepen.io/brumgb/pen/LrRGdE

SVG is a native web graphic, so your interface might work be displaying an HTML page with included SVG, or maybe just the SVG in some frameless browser window. 

I can't say if "live" svg is better for your project. It seems like heavy work to shuffle static images, but I'm not a UI designer. Maybe some UI designers can chime in. I will edit the topic title to include "UI design".

TylerDurden

It seems like heavy work to shuffle static images

Reason for why I search here another better process to realize my frames...

Even the manufacturer claim that display cover a range of image formats, it not include the .svg format.

Probably because it is an embedded display managed by a micrcontroler, and not an web application from a server

I am opened to every remarks and helps, and not time pushed.
Any help, could help me and probably others sames users.

If no solutions appear, I will continue to use my process, wich for this time work perfectly on the display.

It's possible to do the movement of the needle using Inkscape shell mode, generating a text file of action strings using javascript. 

However the Inkscape command line does not allow for the modification of text. You can set attributes / style properties. However text is a node, so cannot be modified by the command line.

Do you understand any python ? 

It can be done using a python batch script via the extension system.

Here is a random example for an interactive svg.

https://openclipart.org/detail/351253/mandala-generator#comment-80369

I could probably recreate an animated svg of the original gauge, but haven't dived deep enough into that linked mandala generator.

Hello,

inklinea

Do you understand any python ? 

No, but if it consist of changing few values of variable, I could do it, but no more.

I am newbie user with arduino, no much.

Only found, was with image magick on another forum from 2014.

You built the gauge background and needle on separed file, in a general file.

After instal image magic application,

First you run Needle file, it produce n image at png format, after you run gauge file and you obtain a set a combinated file with gauge and needle at different position.

But never worked with me.and never understood nothing to the software.

This dial was quick to draw. Use the Transform dialog [shift+ctrl+m] to rotate the needle in increments of (180/200) degrees. Use the Text tool [t] to update the altitude. Use the Export dialog [shift+ctrl+e] to save a png. Once you set dialog parameters, repetition takes less than 30 seconds for each frame. 211 frame should take 2 hours, not a week.

A decent programmer (not me) might take less less time to automate this.

Hello, Paddy

I used transform object tool and the text modification, to do it.

I not used shortcut key.

Don't forgot that every step are 0.9 ° from 0 to 180°, and numeric value must not moving phisicaly from previous image to next one. 

Happily,  I had help by an excel table, for the position angle of the needle at every altitude step.

Even I done a lot of care, I had two issues with the numeric value two times, and three time with the needle, even I passed a large time to control it.

For sure a guy, do the addition of angle by himself without any table near, it work during the 10 first times, but after we are not covered of an error...

Imagine for step of 5 ft from 0 to 15000 ft and angle of 0.25 ° from 0 to 225°, for a most detailled gauge... 

You don't need to do the math manually. 

First, the spinboxes take mathematical formulas. Like, you can type in 0.9*23 etc. and hit enter.

Then, you don't even need to do that either. Rotate by 0.9 every time one after another on the same object, 

so the transformations accumulate. 

Still, that even might not be necessary if you set up the tiled clones panel right. 

Need to draw the needle ot have a specific bounding box. Like, group it with an invisible rectrangle.

Make it 1 row, 211 columns adjust the shiftingand the rotation value.

The digits might be a bit tricky. Make them into separate groups of single digits in a column -like in a mechanical instrument.

Make sure its bounding box is the right size. Then you can easily shift copies/clones of it,

and clip to the desired number value (by clipping the digit-column groups grouped together).

Then preferably put every individual "constellation" onto a new page. 

Can export that to a multipage pdf and worst case use a pdf viewer to export each page to a raster image.

Don't  have to deal with separate page thing. You can use the  batch export/selection  in export window.  For easier selection and more consistent dimensions can again use tile cloned rectangles in separate layer for defining the area of each image. It even works if the rectangles are opaque and hide the whole layer. In my opinion it's much easier to setup grid of rectangles than pages since currently there is no easy way to batch position pages.

I've attached an example output folder from something I automated. 

It's set to have 10000 at the 180 degree mark, then continue to the end. 

The needle has one smaller step at the very end to account for the 25 instead of 50. Since 10625 does not divide by 50 to give a whole number.

The automation only works for needles that are symmetrical and have the centre of rotation at the midpoint of the indicator line. Otherwise I think it would need a centre of mass calculation ( at least in the extension system).

The output is a series of svg files. In Ubuntu you can just batch convert to png from the command line to png using Inkscape. It's a bit more difficult in Windows, as the command line interprets the wildcard * as a character instead of a wildcard. This may have been fixed in the latest version ? 

Hello, 

Come back to matricial view of gauge, is not a bad idea.
I done it in the first version with lot of images shifting issues, were solved lately.

It permit a global view of every steps, and I will plan to do it.  

Thanks Inklinea, for this new way 

And effectively, the last one is different, normally I had to increment of 0.45° instead of 0.9°, but for the demonstration, I lyed a little bit...

I converted a part of the SVG file in line, and will continue it later early.
And effectively, if it is an automated result is very interesting.

If anyone wants to have a play:

Dial Batch sample extension attached.

Exports to randomly named folder in the system temp folder

Another option is the NextGenerator extension.

NextGenerator (Replace & Export) - Inkspace the Inkscape Gallery | Inkscape

Seems to work. Attached is the files I created for the test (SVG and CSV).

Hello, 

Good evening, sorry for this absolute late replying.

Inklinea, 

Il will try this week end, on my windows session, but not insuring anything if any, one, it is not adapted under windows, two, requiring a command comprehension who I am not mastering.

Aero, 

I will try it, particularly if it look like an extension of Inkskape and running under windows.
       

Thanks for your help, together.

Hello,

Next Generator, answer exactly to my query at the title.

After installed the extension, I tested your exemple with my version of Inkskape, which generated the set of samples.

But i tried it by myself with my proper excel file and inkskape image to modify, seem not generate any modifications.

I need to correctly understood the process, before scream victory.
And will report soonly my result.

Thank you 

TOURNEUR

But i tried it by myself with my proper excel file....

Check the CSV file in a text editor.
You may have to change the regional format in your spreadsheet to english before exporting to CSV.

Hello Aero,

Thanks in advance for this extension which (and repeat myself), respond exactly to my query.

First, 

I used your exemple, worked. But with some questions due to my interrogation.

I tried to do by myself a first test with a CSV file and a SVG picture in Inkskape.

I have started by a simple export of 15 image in SVG format, where I change the name of a text named "value".

It is worked.
I exported 15 images with a text from 0 to 15.

Now, modify angle of an other object and it color is less easy.

I saw your "merge" file in CSV, where you use "alt", "rot","color", without finding any relation in the SVG file, except the canva block named : "%VAR_alt%".

I have trouble with "non text value to replace" window, cause I don't now at this time if I could use it, and what I have to write inside.  

When I loaded the file, nothing writen inside, but I don't know is a loaded file log the extension parameter.

First, how you assigned the position of an object and it particularly angle and color in you excel (CSV) file ?    

I won't find any ID (proper of object in the canva), in the CSV file.

How the application recognize from the CSV file value attributed to the SVG object ID ?

I won't find other parameters in the canvas, there is here where I block .

But, many thanks 
 

Use the XML-Editor in Inkscape or a text editor to find all occurences of %VAR_... in the merge.svg file.
You can use the NextGenerator extension to create a finished SVG file to play with in the XML editor. You will see the effects in real time. 
In NextGenerator I used %VAR_alt% in the File name pattern field. I did not use the Non text values to replace field.
 

Hello, dear Aero,

I'm sorry, but I have many difficult with certain details in the process between the CSV file and Next Generator option parametering.

In first, I would precise my absolute non competence in python programming, in case that the code is python.

I know that is busy to explain a thing which can seam very easy, but complex to a non initiate. 

To start on corect base here is my little svg picture exemple, look like a filled circle and a modified text at the upper, writted : 
%VAR_value%.

If I understood xml editor is the link between next generator and the image objects, and apparently we can add some lines.

Things I have done like your merge exemple, when I remarqued in your xml editor. 
But with no inssurance that you added it....

I renamed my layer like you : %VAR_alt%, but does it necessary in the doubt, I done it.

Now the CSV file, 

I simply edit value in the first case, and a suit of number from 0 to 15, and I save it like a CSV file, with coma separation, where I called the file "data".

Now, 

In Next Generator, I done the simple thing, and typed in "file name patern" parameter : %VAR_value%, and export as SVG file , and it is work.

I rtied the same experiency but now with the red center line of my circle, "path684"
And add a new line in it XML parameter with a name : "transform" 
and a value "%VAR_rotate%", like a see in you exemple.

I recreate a new CSV file named "data" but with "rotate", in the top of column.
And repeat the process with %VAR_rotate%, in file pattern parameter.

Without no success.

I tried with %VAR_alt%, the name of the layer, wit no success too.

I tried to do a similar (and shorten) serie with value and rotate in CSV file and type %VAR_alt% in the file pattern of Next generator, with no success.

But in all case, the correct number of svg picture is done, thats is the only good point.

Here is my expemple files.

Any more details could finalise my help.

Thanks 

I was talking about my testfiles merge.csv and merge.svg already shared with you.

Regarding your new set of test files.
Your data.csv file have 1 column (rotate) and 16 rows. Hence, the only variable you can use for your Test_1.svg is %VAR_rotate%.
In addition you had a typo. The right format is transform="rotate(%VAR_rotate%)".

<svg width="50mm"
     height="50mm"
     viewBox="-25 -25 50 50"
     xmlns="http://www.w3.org/2000/svg">
    <circle style="fill:lime;stroke:black;stroke-width:0.1"
            cx="0"
            cy="0"
            r="12"/>
    <path style="fill:none;stroke:red;stroke-width:0.5;"
          d="m -13,0 13,-0 13,0 v 0"
          transform="rotate(135)"/>
</svg>

Hello Aero, 

Here is a status of my advancement.

This extension is very powerful, and could help me so lot, but ....

This is completely not easy to set, particularly if we need to use the XML editor.

I try since yesterday, to understood anything in your explaination, in particulary with the rotate syntax.

But without any success, nothing work !
For changing text, It work, but for the others parameters like the rotation and the color, it is completely a nightmare !

Nothing very detailed and precises about object motion, with this extension.
Since this morning I read more and more time the exemple linked in next generator site, and web tutorials, but nothing about XML editing.

I search any explication with next generator and object motions tutorial but found nothing ...

Lot of explainations settings are hidden who cause to me a really hard comprehension.

Your edition (in red), is completly different to my XML one in my project.

Does it really necessary to pass throught the XML editor for the rotation and the color change ?

At this time I cannot understood how ths CSV file arrive to etablish the link with the objects of my projects.

It work easly with a text (except for color, but i not tested), but not with any primite object.

I do not understood nothing to this process, it completly a nightmare to understood.

I try to traduct it many time, (probably my translation not good), but by elimination, some informations are very foged or missed in the exemple and tutorials.

To be honnest, I will try to obtain a good result up to this week end, but If it continue I will left completly... 

The red text is the code inside the image (svg) below the red text.
You can right click the image (svg) and open it up in a new tab. Right click again to select view page source. Do you now recognise a more colorful version of the red text?

You can also edit the image (svg) directly in your browser by selecting Inspect instead of view page source like before.
See if you can change the number 135 to 45 just to check that the rotation works properly. You will find the code in the elements tab, the icon looks like this </>.

The code will also look similar in text editors like Notepad, Notepad++, VS Code and others.

Try the same file in Inkscape. Use the xml editor, change the number 135 to 45 just to check that the rotation works properly.

Now let's test your file Test_1.svg in the browser and Inkscape.
Use transform="rotate(135,25,25)"

I used transform="rotate(135)" in Test_1_try_again.svg because I shifted the origin from upper left to center on viewBox="-25 -25 50 50" before adding anything else to the file.