actor with too less talent in programming asks for help

[mmengelhardt]

Hello Vuo’s,

i’m working in Quartz-composer to make poems acoustic-visually. I want to change the positions of certain words in a vers. Just drag and drop into the new position.
Now i cannot find the right info for QC, i found the Vuo project and i ask myself, if i should start this new way with VUO.

in fact 2 questions:
is there anyone out there who will try to help me in QC? i can send further explanation about my problem.
or
is there anyone out there who will support me after purchasing and installing of VUO through my problem.

Thanx for any afford.

Michael

[mmengelhardt]

screensh_OSX.pdf (16.5 KB)

[mmengelhardt]

screensh_OSX.pdf (16.5 KB)

[jersmi]

Since this is home of Vuo, should probably stick to Vuo. But you’re not too far off base with QC. You should buy Vuo anyway!

[mmengelhardt]

Hi Jersmi,

i bought and installed VUO. So far so good.
I tried to make a first setup of my project, based on my (pretty amateuristic) skills and experience out of QC.

Now i stuck at probably the same problems as in QC.

May i introduce my project and ask you some questions to bring me step by step forward?

i’m coming with a coded string:

Rings_um ruh-et die_Stadt, still wird die_erleucht-et-e_Gasse,//Und, mit_Fak-eln ge-schmükt, rausch-en die_Wag-en hinweg.

that means, two verses(separated by //), two lines of words; words with a “_” in between means, these words stay together, its one item; “-” means syllables, something what matters on another level.

The string above can be divided into lists
first line:
•Rings um (item1)
•ruhet (item2)
•die Stadt, (item3)
•still (item4)
•wird (item5)
•die erleuchtete Gasse, (item6)
second line:
•Und, (item1)
•mit Fakeln (item2)
•geschmükt, (item3)
•rauschen (item4)
•die Wagen (item5)
•hinweg. (item6)

What i need first its the right position of each element, depending of the length of the items before and its own length. There will be lines with up to 12 elements, each element has per line another length.

How can i detect the width of an string? What i did now, is choosing a lettertype with a fixed width per character (curier) , so i can calculate the with of the item out of the amount of its characters. In QC i could fetch the width of the ‘printed’ phrase.

My preferred way of publishing would be out of the center. So each vers stays in the middle of the screen, the spaces between the items are equal and its looks fine like a sentence.

Then i want to change positions of the elements, by drap and drop.
In first instance graphicly on the screen, in second instance, i will connect audio to each element, so the vers is spoken in the new order.

What will be the best framework for this challenge?

Where do i find the right informations about lists and width of strings (and parts of its) and the right way to calculate with all these parameters?

attached my first setup. I know, its amateuristic, but thats my reality. Whats wrong with my set up of toggling between verse 1 and verse 2 by F1 and F2 button?

I would appreciate any help that brings me forward.

Thanks and regards
Michael

VuoComposition.vuo (24.9 KB)

[Bodysoulspirit]

Hi @mmengelhardt and welcome ;)

Great start!

• For the width of a string, with this version of Vuo it’s probably better to calculate the amount of characters in each string like you started yes. The next version of Vuo should allow text layers to scale and their sizes will probably be easier to measure.

• So calculating the amount of characters and the next step is to sort the list, I tried using the dictionary built-in nodes but I’m getting a bug (joining the composition for the team, no output from the dictionary) but using Martinus Magneson’s amazing custom list nodes, it’s pretty easy !
  So you need to install these nodes in order to use the composition I’m sending you, so for that :

  • go to Node Set: Magneson’s List Tools and download the 4th version of his nodes (V.4 With cutting edge list cutting)
  • open Vuo and with a composition open and in the menu bar go to “Tools” and click “open user modules folder” and drop Magneson’s downloaded node in that folder
  • relaunch Vuo

Now you can open the joined composition and give it a try.

• For the A or B sentence you can use a “Get Latest” node like I did in the Magneson nodes composition. I just used Keypad 1 and 2 instead of F1 or F2.

• This is to get you started, I have also dropped some nodes to get you started to also play audio files in a different order (I haven’t tested that part might need some more work but you get an idea).

 

Sort Strings - Magneson List Tools.vuo (20.9 KB)

Sort Strings - Dictionnary Bug.vuo (19.1 KB)

[Bodysoulspirit]

Regarding the drag and drop thing I never made something like that.
Here is a beta composition but the problem is instead of being able to insert it between other strings, it only moves the selected string on top or bottom of the other strings.
Also, when a string is selected, it slightly moves some pixels when clicked.

Maybe someone will be able to hep you more on this part.

Also, you’ll need another custom node for this composition : Karl Henkel’s Parabox nodes.
Download it and install the “co.parabox.nodes.vuonode” custom node which is located in the BIN folder of the download in your Vuo user module folder like explained for the Magneson nodes & relaunch Vuo.  

Sort + Displace Layers Strings 1.0.vuo (41.5 KB)

[mmengelhardt]

Thanx a lot.

Before you go further: there was a communication-shift. i don’t wanna arrange the items vertically. I’m looking for a horizontal line where the items (images of txt-strings) are reordering their position.

and i was fishing in dark water, but built something. generating a list of the width of all image-parts.
see screenshot attached.

Now i’m busy to send this information to the x-position of each element.
I have to accumulate the data per list-item.

and my favorite formula is:

Total width of all element = WT

width of elements = W1;W2 … W6

x-pos means the number of pixels from the left edge of the window where the image of the element starts.

x1 = x-pos of element 1 : (Width of window - WT) / 2 [the empty space left is the same than right]

x2 = x-pos of element 2 : x1+ W1

x3 = x-pos of element 3 : x2+ W2

x4 = x-pos of element 4 : x3+ W3

…

i hope this can make my thoughts clear.

[jstrecker (Jaymie)]

So calculating the amount of characters and the next step is to sort the list, I tried using the dictionary built-in nodes but I’m getting a bug (joining the composition for the team, no output from the dictionary)

Not a bug, just need to swap the keys and values. The counts should be the keys since you want to sort by count.

Sort Strings - Dictionary.vuo (19.1 KB)

[mmengelhardt]

i don’t want to sort by count of length! i want to sort by drag and drop in any possible order.

the count of characters is just one possibility of positioning in horizontal order.

[jstrecker (Jaymie)]

Gee whiz, @mmengelhardt — I thought you said you weren’t good at programming ;-) You have a nice systematic approach, breaking it down into smaller problems, etc.

Adding on to the suggestions from @Bodysoulspirit, here are a couple of tips…

You can let the Arrange Layers in Row node calculate the text widths and positions for you. There’s a little trick to make it work with text layers (which I had to remind myself of with the “Show Arranged Text Layers” example composition, found in the Arrange Layers in Row documentation). ArrangeTextLayers.vuo (attached) demonstrates for one line of the poem.

While there is a Receive Mouse Drags on Layer node, the approach that comes to my mind for your case — with multiple text layers that are continually swapping position — is to use plain old Receive Mouse Drags. See DragFirstTextLayer.vuo (attached).

• I simplified the problem (don’t know if this will work for you) by imagining the window divided left to right into 6 zones of equal width (the number 6 because there are 6 text layers). If you drag a piece of text into zone 6, the right-most zone, it goes to the end of the line. If you drag it into zone 2, it goes to the second position in the line. Etc.
• I further simplified the problem by always dragging the first (left-most) text layer. I know that’s oversimplifying — you want to be able to drag any of the text layers. For that, you could replace the Take from List with a some nodes that remove an item from a certain position in the list, based on the position of the drag.

ArrangeTextLayers.vuo (3.78 KB)

DragFirstTextLayer.vuo (9.05 KB)

[mmengelhardt]

oh i love it !!
for the first time, i can see what i think.
Now we have to work at the logic. because what i drag and drop is not what i see and need.
i made a screencapture movie, i hope its not too big for this environment:

[mmengelhardt]

simple question, i hope:
what does that sign means, what does it do and how to handle it? The gray sign left and right of the Window-port.

[mmengelhardt]

next try of arranging the items per verse(line) in an optimal way.

here you see the list of width in px of all elements in one line.

The amount of items varies between 1 and 12. Till now the x-positions of these items is ruled by the “Arrange layers in row” node. I want to change this.

width of each element = W1;W2 … W6

Total width of all elements = “WT” = W1 + W2 + W3 … + W…

x-pos means the distance from the left edge of the window in pixels where the left edge of the element will be set.

x0 = (Width of window - WT) / 2
[the empty space left of the verse to the left edge of the window is the same than at the right side. horizontally centering the verse.]

x1 = x-pos of left edge of element 1 = x0

x2 = x-pos of element 2 : x1+ W1

x3 = x-pos of element 3 : x2+ W2

x4 = x-pos of element 4 : x3+ W3

…

what will be the kings road to arrange text layers or images in that order?

for any suggestions and work, big THNX.

[mmengelhardt]

why do my uploaded images disappear after a while? Here they are again.

[mmengelhardt]

Hi everyone,

i worked further, and here i am now:

see video.

Whats the way to synchronize the two lists?

Thanx
Michael  

TestNeu3.vuo (14.4 KB)

[jstrecker (Jaymie)]

simple question, i hope: what does that sign means, what does it do and how to handle it? The gray sign left and right of the Window-port.

That’s a hidden cable. You can right-click on the port and select Unhide Cable, or shift-cmd-H (View > Show Hidden Cables) to unhide it temporarily. If there’s a long cable stretching across the composition and it’s a commonplace connection (like Showed Window output port to Window input port), I like to hide the cable for neatness, so it’s easier to see the interesting cables.