Drawing Automation based on formulae and range of input values?

[v_kyr]

2 minutes ago, GreenGirl said:

...

I honestly don't know how that happened... 

Well such things sometimes do happen when editing in a hurry. - BTW it sometimes is helpful to let in SVG run a viewport from -1024 to 1024 instead of 0 to 2048, so that point 0,0 builds the center viewport origin then and use clockwise and anticlockwise (negative) degree values for rotations. However it's all more or less a matter of taste. Also things like this here are best done by some program/script for generating the whole math calcs and SVG drawing then, so you can use and adjust variables easily for altering the whole.

[John Rostron]

@GreenGirl, I have had a play with Excel.I used your input values 0.6 to 90 degrees and applied your formula (after conversion to radians using PI()/180.

This gave me a column of degree values from 3.6 to 360. I then used Excel to add the svg to the beginning and end of the value (rounded to two places of decimals.

Here is a screenshot of the spreadsheet:

Note that cells J4 and K4 contain the SVG that performs the rotation. Cell G7 contains the formula for calculating the output angle: =($G$2/2)*(2+LOG(SIN(C7*PI()/180)))

The following text file is the list of svg <use ... /> directives.

Ticks.txt

Hope this helps,

 

John

 

[GreenGirl]

@John Rostron

Yeah, other than the rounding, that's what I've got and that's what I put into the .svg file. 

As @v_kyr pointed out, for some strange reason there was an offset in the .svg. Once I took that out, it seems to have fixed it. But I've created those .svg files about a dozen times, each time putting in my 174 lines of 'code'... but a) I've never noticed the offset and b) I swear that on the original image - of which I can upload, the initial 'tick' is centre around 1024 with 3 pixels either side...

I'm going to give them all a go again, and double check if this weird offset creeps in...

Fingers crossed, and thank you again for all your support. I hope you got something out of all this too!

[GreenGirl]

@John Rostron @v_kyr

Alas, it's still not working.

Following are screenshots of what I've done / doing. You should see that everything is as you've all said and I'm doing all the right steps, but the resulting weird 'offsets' are throwing it all out. Unless, again, I'm missing something obvious.

 

1. Here is the 'master'. The 000 numbers are dead centre and perfectly aligned with the 'master' tick at 0 degrees:

 

2. So, I export as SVG and I edited the file, and remove the odd 'transform' group stuff:

 

 

 

3. Now I paste in the angles I need to rotate the 'master' number by:

 

4. Save this file, and reopen in Designer, then just for poops and giggles, I put it as a new layer via copy/paste over the 'master' layers, and voila, offset and rotated wrong:

 

 

I'm so sorry, but what am I doing wrong?

[v_kyr]

16 hours ago, GreenGirl said:

Alas, it's still not working. ...

It might be helpful to see the whole generated/edited files you are working with in this case (.svg, .afdesign), in order to take a look at the positioning of certain elements.

What I can see from these screenshots is that you used a SVG text element 000 (id="Numbers") here, but the in the screenshot shown SVG code use statement portions for the rotation do reference "#Outer", aka the rect ticks ID. So it's not directly visable how the text elements have been distributed and rotated. Further the text portions will have a different length/wide (dimension) than the ticks and thus probably they might need to be x,y pos/placement related centered accordingly.

[GreenGirl]

@v_kyr There is an 'Outer' for both 'Ticks' and 'Numbers', two different groups. 

The master tick and master numbers are in two groups, to be rotated (using same formula but the numbers only need rotating a subset of the full list of the rotations of the ticks).

So, using your 'fix' for the tick rotations (the last and first seemed perfect, but I haven't checked all 174), I followed the same instructions but for the subset of the numbers, and the screenshots show the problem.

There is nothing else in the file. It's a list of master 'ticks' and master 'numbers' for each of the 5 rulers. That's it, I turn all off except the one I'm using to generate the SVG and then export. Then load up the SVG in TextEdit, paste in the XML generated from a spreadsheet and reload into Designer, then CMD-A, CMD-C and then switch to the proper Designer file for the slide rule, and CMD-V to paste in, then boom, you see everything is orientated incorrectly and off axis. 

I can do a screencast to YouTube if you think it will help, but there's no obfuscation here. I'm doing everything as laid out in the screenshots. 

[firstdefence]

You have some smart guys helping you, let them help you and upload the files you have, sometimes it's easier to work things out when you have the documents in front of you. If you want the files to remain private you could zip them up, give the zip a password and PM the password to v-ykr and John. 

[GreenGirl]

@firstdefence I previously offered to upload my spreadsheet and was told it wasn't necessary. 

You think the virtually empty designer file will help? The problem is in the SVG creation no? You think I'm withholding anything? That's what I get from your brief message?

 

[firstdefence]

8 minutes ago, GreenGirl said:

@firstdefence I previously offered to upload my spreadsheet and was told it wasn't necessary. 

You think the virtually empty designer file will help? The problem is in the SVG creation no? You think I'm withholding anything? That's what I get from your brief message?

 

Not at all, works of art and the efforts involved give you the right to protect that art, there is nothing wrong with protecting that but sometimes people just don't want to upload their work, I have no opinion on that, other than I respect peoples right to privacy, I think nothing of it, just trying to help my friend. I know it seems trivial but T's crossed and i's dotted are easily missed.

I'll give you an example for uploading. My friend couldn't get his email to work, he'd exhausted every trick he knew, so he asked me to take a look, I fixed it in 5 sec much to his shock. He'd typed STMP instead of SMTP it was as simple as that but no matter how many times he checked his brain told him what it should have been not what it actually was, a fresh pair of eyes spotted that where his couldn't.

[GreenGirl]

@firstdefence This isn't about being protective of artwork - at the moment I don't have any artwork; that's kinda the whole problem!

No one has asked for the file - at least no-one who has been contributing - but if you think that my file or how I've created 5 lines, and 5 pieces of text is the problem, here's the file:

Slide Rule.afdesign

If it is something that I've done wrong, in creating the original 5 rects and 5 text objects, then great, I'd love to learn how and more importantly why. but if I'm understanding this correctly, the problem is when, after computing a range of outputs from a formula and a finite range of inputs, you put those into an SVG, they come out twisted and skewed... but there doesn't seem (to me) any obvious reason for that, and certainly nothing pointing back to have 5 rects and 5 text blocks are made. 

And here's the formula with input numbers, for both the tick marks and the subset of numbers to go around the outside of the tick marks. 

Untitled 2.xlsx

[v_kyr]

56 minutes ago, GreenGirl said:

@v_kyr There is an 'Outer' for both 'Ticks' and 'Numbers', two different groups. 

The master tick and master numbers are in two groups, to be rotated (using same formula but the numbers only need rotating a subset of the full list of the rotations of the ticks).

So, using your 'fix' for the tick rotations (the last and first seemed perfect, but I haven't checked all 174), I followed the same instructions but for the subset of the numbers, and the screenshots show the problem.

There is nothing else in the file. It's a list of master 'ticks' and master 'numbers' for each of the 5 rulers. That's it, I turn all off except the one I'm using to generate the SVG and then export. Then load up the SVG in TextEdit, paste in the XML generated from a spreadsheet and reload into Designer, then CMD-A, CMD-C and then switch to the proper Designer file for the slide rule, and CMD-V to paste in, then boom, you see everything is orientated incorrectly and off axis. 

I can do a screencast to YouTube if you think it will help, but there's no obfuscation here. I'm doing everything as laid out in the screenshots. 

I don't need a Youtube screencast, since that's of not much help here in this case. As firstdefence already said it's often better to see the real code in order to comprehend.

For those text numbers you would get something like this ...

• https://jsfiddle.net/869ok3mz/

... when done in plain SVG and without further adjustments in positioning.

[GreenGirl]

2 minutes ago, v_kyr said:

I don't need a Youtube screencast, since that's of not much help here in this case. As firstdefence already said it's often better to see the real code in order to comprehend.

 

You can see the 'real code' in the screenshots I made. Regardless, I've uploaded the original file and the data used to create the expanded SVG. The 'raw' SVG is just turning off all layers in the Designer file and only leaving on the one you need. i.e. Outer Ticks OR Outer Numbers. 

[v_kyr]

I can see this so far for the text numbers in AD and when exported as SVG ...

... which looks Ok to me in terms of centered X/Y-positining for that shown vertical alignment. - Now the question is of course how the rest of labeled text will distribute and align then here around the circled areas.

Imported SVG code in Designer is sometimes showed up offset, also just a subset of the whole SVG syntax is supported in AD and can only be interpreted. Thus it's often necessary to cross check in web browsers and other tools (like MacSVG etc.) how SVG stuff really looks like. In AD things might have to be adjusted then accordingly via the transform panel for correct positionings and the like.

[GreenGirl]

@v_kyr So... what you're saying is that this can't be done? I either have to use another application that has better support for SVG or duplicate and rotate each of these 174 ticks manually?

[John Rostron]

3 hours ago, GreenGirl said:

@v_kyr So... what you're saying is that this can't be done? I either have to use another application that has better support for SVG or duplicate and rotate each of these 174 ticks manually?

I'm sure that you should be able to do what you want using Designer, a spreadsheet and a simple text editor.

My approach has been to create the initial ticks/labels in Designer, then export as SVG, then use the spreadsheet to do the sums before pasting the results back into the SVG file and re-opening this in Designer.  This should avoid some of the quirks you have been seeing.

I will look at your files in the morning when I should have more time.

John

[GreenGirl]

Just now, John Rostron said:

I'm sure that you should be able to do what you want using Designer, a spreadsheet and a simple text editor.

My approach has been to create the initial ticks/labels in Designer, then export as SVG, then use the spreadsheet to do the sums before pasting the results back into the SVG file and re-opening this in Designer.  This should avoid some of the quirks you have been seeing.

I will look at your files in the morning when I should have more time.

John

Thanks, but that is EXACTLY the same process I've been doing. Which was also why I was utterly confused as to why there was a 'transform' and an offset inside the first .svg we went through. It's why I'm so confused as to why it's not working. 

[John Rostron]

@GreenGirl, I have had a look at your files and have come to the conclusion that it is possibly a bug in the Designer export-to-svg routine. I have tried exporting from you .afdesign files with various modifications and they all include the transform. I then deleted all your layers and added a single vertical line, then exported to svg. This svg file had no transforms. just a single path.

You do seem to have a workaround in that you can remove the transform group. But I do think that you should report this as in bug in the appropriate forum (Windows or Mac). This will ensure that it comes to the attention of the developers.

I note that in yours spreadsheet, you have used the SUBSTITUTE function to replace the "45" by your appropriate angle. Much more concise and less error-prone than my version. I would only suggest that you just had your original string there once, and use an absolute reference  ($E$3) in your formula.

John

[GreenGirl]

3 minutes ago, John Rostron said:

@GreenGirl, I have had a look at your files and have come to the conclusion that it is possibly a bug in the Designer export-to-svg routine. I have tried exporting from you .afdesign files with various modifications and they all include the transform. I then deleted all your layers and added a single vertical line, then exported to svg. This svg file had no transforms. just a single path.

You do seem to have a workaround in that you can remove the transform group. But I do think that you should report this as in bug in the appropriate forum (Windows or Mac). This will ensure that it comes to the attention of the developers.

I note that in yours spreadsheet, you have used the SUBSTITUTE function to replace the "45" by your appropriate angle. Much more concise and less error-prone than my version. I would only suggest that you just had your original string there once, and use an absolute reference  ($E$3) in your formula.

John

@John Rostron Thanks for the sanity check, but even without the 'transform' line in the SVG, if you use the 'master outer' numbers, and then use the numbers subset of SVG line commands... 

the output from that, when re-imported into Designer is completely screwed up - it's off centre and has a strange rotation from nowhere...

That's the problem I'm trying to fix now... were you able to replicate that one? 

 

Perhaps they have the transforms in because I cannot 'create' the text or the rect in the exact position I need. At some point I've created it and then moved it around in Designer until it's in the exact place I need it and then used that to export the initial .SVG. Is there any way to 'remove' the 'history' of the transforms from a layer before exporting as an SVG?

 

[v_kyr]

18 hours ago, GreenGirl said:

@v_kyr So... what you're saying is that this can't be done? I either have to use another application that has better support for SVG or duplicate and rotate each of these 174 ticks manually?

No, what I meant instead is to always also prove for sureness with other tools, which are better behaving related to overall SVG parsing and handling, if the SVG how AD treats it (interprets and shows it up) is correct and behaves the expected way. Designer's SVG parser and generator have limitations in this regard. - Also IMO doing all manually is tedious and time consuming, if you have a lot of ticks to replicate.

[John Rostron]

2 hours ago, GreenGirl said:

That's the problem I'm trying to fix now... were you able to replicate that one? 

I will have a further play. Don't hold your breath though. The svg output should reflect the state of the designer layers/objects at the time of Export. I do not see how any transformations you do in Designer should appear in the svg. Having said that I am aware that a rotated object does 'remember' it's original orientation in some circumstances. I also recall that there is is a way to make it forget, but I cannot remember how! I will investigate further.

John

[GreenGirl]

21 minutes ago, John Rostron said:

I will have a further play. Don't hold your breath though. The svg output should reflect the state of the designer layers/objects at the time of Export. I do not see how any transformations you do in Designer should appear in the svg. Having said that I am aware that a rotated object does 'remember' it's original orientation in some circumstances. I also recall that there is is a way to make it forget, but I cannot remember how! I will investigate further.

John

@John Rostron

Thanks. It's this 'memory' of previous translations and scaling that actually drove me from Photoshop and Illustrator into Affinity Designer! I'm very sad that it's cropping up here too.

[v_kyr]

An example with some plain programmatically generated SVG as output and then imported into AD for adjusting layer orientation and setting up colors ...

... the label text here is originally generated in the output SVG code this way ...

...
<text transform="translate(0.000000,-27.000000) rotate(0.000000)"
          font-family="Arial" font-size="4" fill="black" stroke="none"
          text-anchor="middle" dominant-baseline="middle">
      0
    </text>
    <text transform="translate(15.870202,-21.843459) rotate(36.000000)"
          font-family="Arial" font-size="4" fill="black" stroke="none"
          text-anchor="middle" dominant-baseline="middle">
      1
    </text>
    <text transform="translate(25.678526,-8.343459) rotate(72.000000)"
          font-family="Arial" font-size="4" fill="black" stroke="none"
          text-anchor="middle" dominant-baseline="middle">
      2
    </text>
    <text transform="translate(25.678526,8.343459) rotate(108.000000)"
          font-family="Arial" font-size="4" fill="black" stroke="none"
          text-anchor="middle" dominant-baseline="middle">
      3
    </text>
...

When that SVG code is imported into AD it looks Ok and seemed to be interpreted quite the right way. - When exported from inside of AD as a SVG export it's as default written instead this way via matrix transformations ...

...
 <g transform="matrix(1,0,0,1,0,-153.071)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">1</text>
        </g>
        <g transform="matrix(-1,-7.65714e-16,7.65714e-16,-1,0,153.071)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">1</text>
        </g>
        <g transform="matrix(0.585164,-0.810915,0.810915,0.585164,-124.127,-89.5716)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">2</text>
        </g>
        <g transform="matrix(-0.585164,0.810915,-0.810915,-0.585164,124.127,89.5716)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">2</text>
        </g>
        <g transform="matrix(0.0718138,-0.997418,0.997418,0.0718138,-152.676,-10.9926)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">3</text>
        </g>
        <g transform="matrix(-0.0718138,0.997418,-0.997418,-0.0718138,152.676,10.9926)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">3</text>
        </g>
        <g transform="matrix(-0.315165,-0.949037,0.949037,-0.315165,-145.27,48.2426)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">4</text>
        </g>
        <g transform="matrix(0.315165,0.949037,-0.949037,0.315165,145.27,-48.2426)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">4</text>
        </g>
        <g transform="matrix(-0.585164,-0.810915,0.810915,-0.585164,-124.127,89.5716)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">5</text>
        </g>
        <g transform="matrix(0.585164,0.810915,-0.810915,0.585164,124.127,-89.5716)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">5</text>
        </g>
        <g transform="matrix(-0.766798,-0.641888,0.641888,-0.766798,-98.2544,117.374)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">6</text>
        </g>
        <g transform="matrix(0.766798,0.641888,-0.641888,0.766798,98.2544,-117.374)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">6</text>
        </g>
        <g transform="matrix(-0.88391,-0.467658,0.467658,-0.88391,-71.5848,135.301)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">7</text>
        </g>
        <g transform="matrix(0.88391,0.467658,-0.467658,0.88391,71.5848,-135.301)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">7</text>
        </g>
        <g transform="matrix(-0.954011,-0.29977,0.29977,-0.954011,-45.8861,146.031)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">8</text>
        </g>
        <g transform="matrix(0.954011,0.29977,-0.29977,0.954011,45.8861,-146.031)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">8</text>
        </g>
        <g transform="matrix(-0.989686,-0.143257,0.143257,-0.989686,-21.9284,151.492)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">9</text>
        </g>
        <g transform="matrix(0.989686,0.143257,-0.143257,0.989686,21.9284,-151.492)">
            <text x="-4.729px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:17.008px;fill:rgb(213,55,204);">9</text>
        </g>
        <g transform="matrix(1,-1.53143e-15,1.53143e-15,1,0,-187.087)">
            <text x="-11.034px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:11.339px;fill:rgb(213,55,204);">0.00</text>
        </g>
        <g transform="matrix(0.992237,0.124358,-0.124358,0.992237,23.2658,-185.634)">
            <text x="-11.034px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:11.339px;fill:rgb(213,55,204);">0.30</text>
        </g>
        <g transform="matrix(0.974932,0.222505,-0.222505,0.974932,41.6276,-182.397)">
            <text x="-11.034px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:11.339px;fill:rgb(213,55,204);">0.40</text>
        </g>
        <g transform="matrix(0.937183,0.348839,-0.348839,0.937183,65.2631,-175.334)">
            <text x="-11.034px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:11.339px;fill:rgb(213,55,204);">0.50</text>
        </g>
        <g transform="matrix(0.865912,0.500196,-0.500196,0.865912,93.58,-162.001)">
            <text x="-11.034px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:11.339px;fill:rgb(213,55,204);">0.60</text>
        </g>
        <g transform="matrix(0.744147,0.668016,-0.668016,0.744147,124.977,-139.22)">
            <text x="-11.034px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:11.339px;fill:rgb(213,55,204);">0.70</text>
        </g>
        <g transform="matrix(0.551908,0.833905,-0.833905,0.551908,156.012,-103.255)">
            <text x="-11.034px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:11.339px;fill:rgb(213,55,204);">0.80</text>
        </g>
        <g transform="matrix(0.270037,0.96285,-0.96285,0.270037,180.136,-50.5203)">
            <text x="-11.034px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:11.339px;fill:rgb(213,55,204);">0.90</text>
        </g>
        <g transform="matrix(-0.10888,0.994055,-0.994055,-0.10888,185.974,20.37)">
            <text x="-11.034px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:11.339px;fill:rgb(213,55,204);">1.00</text>
        </g>
        <g transform="matrix(-0.553378,0.832931,-0.832931,-0.553378,155.83,103.53)">
            <text x="-11.034px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:11.339px;fill:rgb(213,55,204);">1.10</text>
        </g>
        <g transform="matrix(-0.765771,0.643113,-0.643113,-0.765771,120.318,143.266)">
            <text x="-11.034px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:11.339px;fill:rgb(213,55,204);">1.15</text>
        </g>
...

• kreis_skala_org.svg (program generated)
• kreis_skala_ad.svg (AD exported)
• kreis_skala.afdesign

 

[GreenGirl]

@v_kyr Firstly, WOW. Secondly, you appear to have done it. Thirdly, I don't know from what you've posted, HOW you've done it, and specifically what and where I was going wrong in comparison to how you did it.

Lastly just how in the heck did you manage to get shorter ticks and longer ticks on the same circle? That was going to be the thing I looked at next, after getting all this stuff to work. 

I think, I'm just not following how you did this and how it's different. 

[v_kyr]

Well I didn't draw that myself, instead I let a C program do all the tedious work here generating the SVG code as an output. So it's finally more coding a program with some procedures/functions for the needed math and then running the prog to produce the whole, instead of drawing those things manually.

*** Due to John's odd Chrome browser crashing behaviour removed here ***

Here is that C program source and a Mac compiled version in a ZIP archive ...

• kreisskala.zip

... in order to run the program you have to call it from a terminal (Terminal.app) this way ...

Quote

> ./kreisskala > yourfilename.svg

... since it writes it output just to STDOUT you have to redirect the output of the program into a file via "> filename" .

[John Rostron]

@v_kyr, Your C program source code managed to crash/freeze my Chrome browser on my tablet. (I am on my PC now). Could you please remove the source code from the message. Presumably this is in the zip file link.

John