Designer: Is there a way to change hundreds of layers 'width' correctly?

[GreenGirl]

I think this is a bug... 

 

So I'm using Designer 2.

I've created 360 'tick' marks to make a compass.

I've created them such that they have a width of 5px and a length of 2048px regardless of it's angle (this was done using the CMD-J)

I've also named all the layers for the degree mark each of these lines represents. 

However, I want to duplicate this group (of 360 lines) but increase the width of them from 5px to 7px.

But when I do the 'width' in the inspector is the combined with of all the marks as a rectangle, rather than the 5px of each line.

My Question:

Is there a quick way to change all 360 of these from 5px x 2048px to 7px x 2048px rather they manually editing these boxes 360 times? 

I also need to do this for 9px and 3px too... so that's another 720 text edits to come.

Manually changed to 7px

 

This is the next one to edit - it's 5px 

 

 

When I group select them all to change at once the W: parameter - instead of showing '5px' it's not the combined 'rectangle' of the selected items - this is a huge bug IMHO 

[GarryP]

I don’t think there is a way to do what you want, and that’s not a bug.

If you had made the lines as straight curves and given them a Stroke thickness then it would be trivial to do – you just select all of the curves and change the thickness.

But, if you have created them as rectangles it could probably be easier, and quicker, to recreate them from scratch (especially if you don’t rename them).

Is there some reason why you renamed them? If you have renamed them to be able to easily identify each individual line then, if you created them as curves, you can just use the rotation amount to tell you which one is which – see attached video.

[anto]

9 minutes ago, NotMyFault said:

Did you activate „transform objects separately“ ?

It does not work.

 

3 hours ago, GreenGirl said:

Is there a quick way to change all 360 of these from 5px x 2048px to 7px x 2048px rather they manually editing these boxes 360 times? 

If you want to have exact widths and lengths, you can use symbols. But you need to redesign everything.

 

 

[NotMyFault]

Yeah, transform panel does not work for rectangles.

Symbols is probably the best way to go

[NotMyFault]

What is missing in move tool: a switch to temporary deactivate any layer rotation (or shear), before a change to width or height is done.

 

[David in Яuislip]

It can be done, sort of
Here's a yellow group of 36 rectangles, all 5w 560h

To change these to 9px wide do:
Turn off all other layers
Ungroup
Export svg with Flatten transforms unticked
Open in text editor
note <rect x="320" y="20" width="28" height="560"

28 x 9 / 5 = 50.4
so change all widths to width="50.4"
Save file
Open in Affinity
Deep ungroup so that only rectangles remain
Note that the spacing is not quite right, probably rounding errors
Select all rectangles and align middle center
Group
Paste back into original doc, resizing W H X Y to match
Select one of the new rectangles and note width is now 9

Or bite the bullet and redo it as above

ResizeRectWidth.svg

[firstdefence]

Symbols are good although the layers panel starts to get messy, so you'll end up with 1080 layers.

Using the cog shape will give you the same result but with 3 layers, the problem is getting the length of the tick because the inner radius and hole radius is percentage dependent, and at the dimensions you have, using a percentage input won't work, so, I use three small curves drawn with the pen tool and set to; in your case, 7mm, 5mm and 3mm respectively, it's still much easier than trying to edit 1080 layers even with symbols and it will be a much lighter document and much nicer to edit, you can also edit the tick shape. Have a play with the file and see what you think.

I edit the cogs inner radius and hole radius in wire frame view mode.

Example.

Compass ticks.afdesign

[v_kyr]

8 hours ago, GreenGirl said:

Is there a quick way to change all 360 of these from 5px x 2048px to 7px x 2048px rather they manually editing these boxes 360 times? 

I also need to do this for 9px and 3px too... so that's another 720 text edits to come.

Well you probably already know what I would suggest to do here, pretty much the same as I told in the pasts. Do it instead programmatically in order to be overall much more flexible here. Then you can create and let the tick marks be generated with whatever width you need and also change the width setting for certain ticks then on demand!

As a workaround for what you already have here in ADe, then try to export the whole as SVG code (...use flatten transforms in SVG export options so you get cleaner readable and traversable SVG output code), open the SVG in some capable text editor with multiple reg exp find/replace support and change all the related tickmark width values "from->to" in the SVG code accordingly via a find & replace run. - Afterwards (re)import the altered/modified SVG code into ADe and check if the width has been everywhere where needed been changed accordingly.

[Old Bruce]

@GreenGirl,

You would be best served by using a Symbol for the tick mark(s) then you can resize one rectangle (inside the Symbol group) and all 360 will change. Make a new symbol and do the Command + J to power duplicate it, resize to another size ... rinse and repeat. Note that if you really need the tick marks to be named then you'll need to group the Symbol all on its lonesome and then when you name the Group (holding the symbol (holding the rectangle)) the name will not be changed for each symbol, just its containing group.

 

There are things you can do with editing/resizing the Rectangle inside the Symbol versus resizing the Symbol. There are ways you can use the Transform Origin button on the context toolbar once you select the Symbol or the Rectangle which will benefit you regarding the Command + J power duplication.

[BlueLiner]

If a simple compass dial I would use the cog tool and make one or two cogs. Two if I want say a larger tick every 10 degrees as I show below. When happy, I might duplicate the cog(s), hide, and then make the copies visible and convert to curves.

[BlueLiner]

3 minutes ago, BlueLiner said:

In my example above, the cogs settings are as follows:

 

 

[v_kyr]

Python script Example:

• drawing SVG clocks for learning the clock/time for kids, via a little Python script
• it contains functions for drawing a clock face and to add tick marks
• ...

Generated time.svg sample output from a script call/run ("python3 make_clock.py 4") ...

 

• time.svg

And here is the Python script to run in order to create such clocks ...

• make_clock.py

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
#
# Sample calls:
#
# python3 Make_clock.py number -d difficulty
#
# python3 make_clock.py N -d D
#
#   where N is the number of clocks to draw 
#   and D is a "difficulty": 
#     e (easy: HH:00 times only), 
#     m (medium: HH:00 and HH:30), 
#     h (hard: HH:00, HH:15, HH:30 and HH:45), 
#     v (very hard: any time HH:MM). 
#  The additional options -L and -T suppress the minute labels and ticks respectively.

import sys
import random
import argparse
import math


# Difficulty flags
DIFFICULTIES = EASY, MEDIUM, HARD, VERYHARD = 'e', 'm', 'h', 'v'

def preamble(fo):
    """The SVG preamble and styles."""

    print('<?xml version="1.0" encoding="utf-8"?>\n'

    '<svg xmlns="http://www.w3.org/2000/svg"\n' + ' '*5 +
       'xmlns:xlink="http://www.w3.org/1999/xlink" width="{}" height="{}" >'
            .format(width, height), file=fo)

    print("""
        <defs>
        <style type="text/css"><![CDATA[""", file=fo)

    print('circle {fill:none; stroke-width: 2px; stroke: #000;}', file=fo)
    print('circle.centre-circ {fill:#000;}', file=fo)
    print('line {stroke-width: 2px; stroke: #000;}', file=fo)
    print('text {dominant-baseline: middle; text-anchor:middle;'
          '      font-family:Arial,Helvetica;font-size: 20pt;'
          '      font-weight: bold;}', file=fo)
    print('text.min-labels {font-size: 14pt; font-weight: normal;}', file=fo)
    print('line.mn-hand {stroke-width: 4px; stroke: #f00;}', file=fo)
    print('line.hr-hand {stroke-width: 12px; stroke: #000;}', file=fo)

    print("""]]></style>
    </defs>""", file=fo)

def make_clock_face(fo, cx, cy, r):
    """Make the clock face, with numbers and ticks."""

    print('<circle cx="{}" cy="{}" r="{}"/>'.format(cx, cy, r), file=fo)

    def add_tick(x, y, length):
        """Add a tickmark of specifed length at position (x, y)."""

        x1, y1 = (r-length)*x + cx, (r-length)*y + cy
        x2, y2 = r*x + cx, r*y + cy
        print('<line x1="{}" y1="{}" x2="{}" y2="{}"/>'.format(x1,y1,x2,y2),
              file=fo)
    hr = -1
    for mn in range(60):
        th = math.pi/30 * mn - math.pi/3
        x, y = math.cos(th), math.sin(th)
        if mn // 5 > hr:
            # This tick is an hour tick so it's a bit longer
            hr += 1 
            xt, yt = (r-40)*x + cx, (r-40)*y + cy
            print('<text x="{}" y="{}">{}</text>'.format(xt,yt,str(hr+1)),
                  file=fo)
            if min_ticks and min_ticklabels:
                xt, yt = (r+20)*x + cx, (r+20)*y + cy
                print('<text x="{}" y="{}" class="min-labels">{}</text>'
                      .format(xt,yt,str((hr+1)*5 % 60)), file=fo)
            add_tick(x, y, 20)
            continue
        if min_ticks:
            # A regular minute tick
            add_tick(x, y, 10)
    print('<circle cx="{}" cy="{}" r="10" class="centre-circ"/>'
                                            .format(cx, cy), file=fo)


def add_clock_hands(fo, cx, cy, r, time):
    """Add the clock hands indicating the provided time."""

    hr, mn = [int(f) for f in time.split(':')]
    assert 0 < hr <= 12
    assert 0 <= mn < 60

    def hand_line(x2, y2, cls):
        print('<line x1="{}" y1="{}" x2="{}" y2="{}" class="{}"/>'.format(
            cx, cy, x2, y2, cls), file=fo)

    # minutes
    th = math.pi/30 * mn - math.pi/2
    x, y = math.cos(th), math.sin(th)
    x2, y2 = r*0.7*x + cx, r*0.7*y + cy
    hand_line(x2, y2, 'mn-hand')

    # hours
    th = math.pi/6 * hr - math.pi/2 + mn / 60 * math.pi / 6
    x, y = math.cos(th), math.sin(th)
    x2, y2 = r*0.5*x + cx, r*0.5*y + cy
    hand_line(x2, y2, 'hr-hand')

def add_clock(cx, cy, r, time):
    """Add a clock indicating the given time centred at cx,cy."""

    add_clock_hands(fo, cx, cy, r, time)
    make_clock_face(fo, cx, cy, r)

def get_random_times(n, difficulty):
    """Return a list of random times of some specified difficulty."""

    times = []
    for i in range(n):
        hr = random.randint(1,12)
        if difficulty == MEDIUM:
            mn = random.randint(0,1)*30
        elif difficulty == HARD:
            mn = random.randint(0,3)*15
        elif difficulty == VERYHARD:
            mn = random.randint(0,59)
        else:
            mn = 0
        times.append('{}:{}'.format(hr,mn))
    return times


parser = argparse.ArgumentParser(description='Create clock faces to help'
    ' learning the time.')
parser.add_argument('n', help='The number of clocks to draw',
    default=1, type=int, choices=(1, 2, 4, 6))
parser.add_argument('-d', '--difficulty', dest='difficulty', nargs='?',
    default=MEDIUM, choices=DIFFICULTIES)
parser.add_argument('-T', '--no-minute-ticks', dest='no_min_ticks',
    help='Suppress minute tick marks around the inside of the clock',
    default=False, action='store_true')
parser.add_argument('-L', '--no-minute-ticklabels', dest='no_min_ticklabels',
    help='Suppress minute tick labels around the outside of the clock',
    default=False, action='store_true')
args = parser.parse_args()
min_ticks = not args.no_min_ticks
min_ticklabels = not args.no_min_ticklabels
n = args.n
assert n in (1, 2, 4, 6)
ncols = 1
if n > 2:
    ncols = 2
nrows = n // ncols
difficulty = args.difficulty
times = get_random_times(n, difficulty)

# We've got the parameters: los geht's!
width = 800
height = 800 * nrows // ncols
cwidth = cheight = width // ncols
r = cwidth * 0.4
with open('time.svg', 'w') as fo:
    preamble(fo)
    for i, time in enumerate(times):
        print('{:2d}:{:02d}'.format(*[int(s) for s in time.split(':')]))
        cy = (i // ncols) * cwidth + cwidth // 2
        cx = (i % ncols) * cheight + cheight // 2
        add_clock(cx, cy, r, time)
    print('</svg>', file=fo)

Call examples ...

• > python3 make_clock.py 4
• > python3 pyclock.py 4 -d v
• ... see the py code for possible option settings

[GreenGirl]

I want to thank everyone on here for all of their suggestions and taking the time to take screenshots / write code and generally be the most supportive and helpful forum on the Internet. 

 

Yeah, I obviously screwed up - I don't know Designer / Photo as well as I know Photoshop and I'm still stuck doing things the 'Adobe' way. I'm barely a software engineer let alone a designer, and I'm not finding the affinity stuff easy to use or intuitive. @v_kyr Hey buddy! xXx I'm not going to code this, as I want to avoid that where I can but I still owe you a beer from years ago! 

I will look at some symbols tutorials and redo what I've already done. 

Thanks again everyone.

 

PS (Grumble mode on) I *still* think I should be able to do it as I'd suggested wanted - even if I had to toggle a specific option on. 

:)

[GreenGirl]

Just so you have a better understanding of what I'm doing... in case it changes the suggestions:

I made this in Photoshop in 2019:

 

As I no longer have access to photoshop, I'm recreating it from scratch in Designer. I'm losing some FX capabilities.

I also made a Circular Slide Rule in Photoshop but I used @v_kyr's suggestion of programatically generating SVG files.

This year I redid the whole thing in Designer:

 

This is about as good as my 'design' skills get. The first image is what I'm recreating now in Designer 2. There are a lot of things that have to line up perfectly but be different lengths / widths etc and I hope that symbols will help me do this much more easily than manually editing 360 rectangle widths by hand each time. 

 

 

[v_kyr]

6 hours ago, GreenGirl said:

I made this in Photoshop in 2019

That one looks pretty nice (very good work) and I really have to zoom-in deeper, in order to see some minimal irregularies on the outer scales darker gray subdivisions placements (probably due to move behind/over transformation).

It will be difficult and a lot of tedious work, to come close to that with/for ADe, as there aren't many functions available for such a more, or very precise, creation and distribution of scale tickmarks, their labeling and the like. - I even doubt that using symbols will be a halfway pleasing solution here, as you will have to setup a mass/lot of those and from my memory those also have their issues and are not always well behaving. - However, you have to give it a try in order to see how far that will bring you then here. Good luck!

[GreenGirl]

41 minutes ago, v_kyr said:

That one looks pretty nice (very good work) and I really have to zoom-in deeper, in order to see some minimal irregularies on the outer scales darker gray subdivisions placements (probably due to move behind/over transformation).

It will be difficult and a lot of tedious work, to come close to that with/for ADe, as there aren't many functions available for such a more, or very precise, creation and distribution of scale tickmarks, their labeling and the like. - I even doubt that using symbols will be a halfway pleasing solution here, as you will have to setup a mass/lot of those and from my memory those also have their issues and are not always well behaving. - However, you have to give it a try in order to see how far that will bring you then here. Good luck!

Well this is what I've done so far with symbols...Slow going but getting there...

It's also closer to the original (I have better reference documents this time around)

 

Reference Docs:

 

 

[anto]

44 minutes ago, GreenGirl said:

Well this is what I've done so far with symbols...Slow going but getting there...

It's also closer to the original (I have better reference documents this time around)

 

Reference Docs:

 

 

That's cool. I tried to see if I could reproduce it. It works.
Have you tried making symbols from groups of elements? It is faster.

 

[GarryP]

Just out of interest, and quite off-topic, but looking at the reference image, does anyone know why some of the numbers and lettering is ‘pointed’ inwards and some is ‘pointed’ outwards?

By ‘pointed’ I mean that the ‘baseline’ of the text is either farther away from the centre than the top of the text is, or it’s nearer to the centre. (There’s probably a proper word for this but it’s not coming to mind at the moment.)

E.g. The outer circle of numbers is ‘pointed’ towards the inside while the other circles of numbers are ‘pointed’ outwards, but the manufacturer information (if that’s what it is) is ‘pointed’ inwards.

Is this something to do with how the instrument would be used, or is there another reason?

[v_kyr]

1 hour ago, GreenGirl said:

Well this is what I've done so far with symbols...Slow going but getting there...

It's also closer to the original (I have better reference documents this time around)

Looks good so far, you are coming closer and closer!

BTW, that's an pretty old German Navy calculating disc (aka Angriffsscheibe) used by submarines for torpedo attack calculations and the like. - There are a bunch of image und usage references of that on the net, especially in/from submarine & naval simulation sites and game (Silent Hunter) forums.

See for example image references and descriptions also:

• http://www.tvre.org/en/torpedo-attacks-during-wwi

 

Drawing parts ...

 

[GreenGirl]

22 minutes ago, GarryP said:

Just out of interest, and quite off-topic, but looking at the reference image, does anyone know why some of the numbers and lettering is ‘pointed’ inwards and some is ‘pointed’ outwards?

By ‘pointed’ I mean that the ‘baseline’ of the text is either farther away from the centre than the top of the text is, or it’s nearer to the centre. (There’s probably a proper word for this but it’s not coming to mind at the moment.)

E.g. The outer circle of numbers is ‘pointed’ towards the inside while the other circles of numbers are ‘pointed’ outwards, but the manufacturer information (if that’s what it is) is ‘pointed’ inwards.

Is this something to do with how the instrument would be used, or is there another reason?

Yeah, because of how you read/use it in anger.

[GreenGirl]

@v_kyr Yeah, all those are home made ones. 

AFAIK there are only 4 photos of real ones and I have two of them.

I'm now creating my own fonts to make them as close as I possibly can. 

 

[thomaso]

30 minutes ago, GarryP said:

why some of the numbers and lettering is ‘pointed’ inwards and some is ‘pointed’ outwards?

Guessing: one ruler (the outer) is fixed (for reference?), while the inner scales can rotate. Whereas the design / orientation of numbers appears to vary …

 

[v_kyr]

50 minutes ago, GarryP said:

Is this something to do with how the instrument would be used, or is there another reason?

Of course, read that here to get an overall idea of it's usage ...

• http://www.tvre.org/en/torpedo-attacks-during-wwi

 

Quote

...

However, in the case of periscope observations, the directly read value was the relative target bearing which had to be converted to the real target bearing incorporating the own course. For this purpose, there was a more complicated calculating disc, the Angriffsscheibe (equivalent of American Is-Was, Attack course finder).

It consisted of three trainable, concentric dials - external (A) indicating relative bearing to the target (Germ. Schiffspeilung), middle (B) – compass rose – indicating own ship course (Germ. Kompaßrose) and internal (C) indicating angle on the bow together with the pointer which indicated target course (Germ. Lagenwinkelscheibe mit Gegnerkursarm). The external dial was provided with a scale from 0 to 360°. The compass rose was provided with two scales – on the external edge scaled from 0 to 360° and on the internal edge – also from 0 to 360°, but in the opposite direction and shifted by 180° relative to the external scale. The internal dial was scaled from 0 up to 180° and then down to 0. On the null mark it had a target course indicator pointed outward. As can be seen by comparing it to the Lagenwinkelscheibe – the external dial (A) was added. Together with the compass rose (B) it made it possible to convert all relative bearings to the real bearings. Knowing the own ship course and two of the three following values: target course, angle on the bow, or relative bearing – the unknown value could be calculated.

Two additional, trainable, transparent pointers: bearing and lead angle (D) (Germ. Vorhaltwinkelscheibe mit Peilarm) and attack course pointer (E) (Germ. Angriffskurs-Zeiger) enabled calculating deflection angle and determining the attack course for an attack from the bow and stern torpedo tubes.

...
...

 

[GreenGirl]

18 hours ago, v_kyr said:

Looks good so far, you are coming closer and closer!

BTW, that's an pretty old German Navy calculating disc (aka Angriffsscheibe) used by submarines for torpedo attack calculations and the like. - There are a bunch of image und usage references of that on the net, especially in/from submarine & naval simulation sites and game (Silent Hunter) forums.

 

I know

Here's my app that's been out since 2019:

Sub Buddy Website

https://apps.apple.com/us/app/sub-buddy/id1470196349

 

[v_kyr]

1 hour ago, GreenGirl said:

I know ...

I know too and have already seen your website, as I initially did a Google image search before after that sort of naval compass and that then referenced your website two or three times image wise!  😉