I have Batik installed on my Windows computer and can start the Squiggle browser from the Command prompt.

Not impressed yet. Why are applications being started from the Command prompt anyway?

ProcessingLibrariesatiklibrary that includes:

batik.jar

batik-rasterizer.jar

batik-slideshow.jar

batik-squiggle.jar

batik-svgpp.jar

batik-ttf2svg.jar

and folder lib that has other batik jar files

Start sketch.

Import library; select batik from list (indicating the batik library folder is recognized by Processing?)

Enter code that includes:

1. import batik.*;

error: The package “batik” does not exist. You might be missing a library.

Any idea what the problem is?

“The Extensible Markup Language XML has become the standard for exchanging structured data in Internet applications. proXML allows you to easily integrate and manipulate this data in Processing.”

http://creativecomputing.cc/p5libs/proxml/index.htm

I have this file generated in Inkscape - drawing08.svg - with one rectangle. It basically includes the following:

1. <svg
2.   <defs…
3.   <sodipodi…
4.   <metadata…
5.   <g
6.      inkscape:label="Layer 1"
7.      inkscape:groupmode="layer"
8.      id="layer1"
9.      transform="translate(-8.5714245,593.94476)">
10.     <rect…
11.   </g>
12. </svg>

 Add this code:

1.   // get children of root element
2.   XMLElement[] children = element.getChildren();
3.   for(int i = 0; i < children.length;i++)
4.   {
5.     XMLElement child = children[i];
6.     println("child index: " + str(i) + child);
7.   }

Console shows:

children index: 0<defs…

children index: 1<sodipodi…

children index: 2<metadata…

children index: 3<g…

 

Add this code:

1.  // get attributes for child 3 - <g   
2. Println(“children[3]”); 
3. String[] attributes = children[3].getAttributes();
4.   for(int j = 0; j < attributes.length; j++)
5.   {
6.     println("attributes index: " + str(j) + attributes[j]);
7.   }

Console shows:

children[3]

attributes index: 0inkscape:label

attributes index: 1transform

attributes index: 2inkscape:groupmode

attributes index: 3id

 

Add this code:

1.   // look for attribute "transform"
2.   for(int k = 0; k < attributes.length; k++)
3.   {
4.     String matchAtt = "transform";
5.     if(attributes[k] == matchAtt)
6.     {
7.       println(attributes[k] + " EQUAL " + matchAtt);
8.     } 
9.     else
10.     {
11.       println(attributes[k] + " NOT EQUAL " + matchAtt);
12.     } 
13.   }

 Console shows:

inkscape:label NOT EQUAL transform

transform NOT EQUAL transform

inkscape:groupmode NOT EQUAL transform

id NOT EQUAL transform

 

Add this code:

1.   // get value for child[3] attributes[1]
2.   String attValue = children[3].getAttribute(attributes[1]);
3.   println("attValue: " + attValue);

Console shows:

attValue: translate(-8.5714245,593.94476)

1. children[3].setAttribute(attributes[1],“translate(0,0)”);

The term getChild() implies the getting of an independent child object.

I've found this to be a little misleading. 

Each rectangle has id: house, door, window.

The svg file shows:

1. <svg
2.    width="388.57144"
3.    height="297.73553"

In the sketch I have: 

1.   main = loadShape("drawing08.svg");
2.   house = main.getChild("house");
3.   door = main.getChild("door");
4.   window = main.getChild("window");

In a previous thread I mentioned that the x,y values of child shapes can be made absolute if translate and x,y values in the svg file are edited to zero.

When going a step further to modify the size of child shapes, I discovered that getChild is really getChildWithPage.

house.width also returns 388.57144.

door.width also returns 388.57144.

window.width also returns 388.57144.

If your code wants to modify the child shape size, it needs to recognize the Page size. 

For example, to resize the house, this code works: 

1.     float hw = (main.width * w) / houseW;
2.     float hh = (main.height * h) / houseH;

• hw and hh = values to be used in drawing
• main.width and main.height = page size
• w and h = desired house width and height
• houseW and houseH = original width and height of house shape

Parameters houseW and houseH, along with doorW, doorH, windowW and windowH must be manually entered in Processing from the svg file. It would be much easier if Processing provided the actual child shape dimensions found in the svg file (e.g. house.width = 300; door.width = 60; window.width = 100).

Summary.

As a beginner, I was disappointed that getChild() does not get a shape object that’s independent of the source page. When getChild() is utilized, do we really need to know about the source page size?

In the meantime, I’ve found ways to work around the location (x,y) and size (width,height) "problems" of child shapes. I’m providing this because I don’t see it explained anywhere else. 

Please advise if there are simpler ways to do this.

 

In Inkscape, I have 3 separate rectangles in a page 388w x 297h px.

Each rectangle has id: house, door, window.

1. <svg
2.    width="388.57144"
3.    height="297.73553"

That agrees with Page size.

 

But it also includes:

1.   <g
2.      inkscape:label="Layer 1"
3.      inkscape:groupmode="layer"
4.      id="layer1"
5.      transform="translate(-8.5714245,593.94476)">
6.     <rect
7.        style="fill:#00ff00;fill-opacity:1;stroke:none"
8.        id="house"
9.        width="300"
10.        height="200"
11.        x="8.5714245"
12.        y="-584.7807"
13.        ry="8.1554852"
14.        inkscape:label="#rect2985" />
15.     <rect
16.        style="fill:#ff0000;fill-opacity:1;stroke:none"
17.        id="door"
18.        width="60"
19.        height="100"
20.        x="337.14285"
21.        y="-593.94476"
22.        ry="5.6589088"
23.        inkscape:label="#rect2987" />
24.     <rect
25.        style="fill:#00ffff;fill-opacity:1;stroke:none"
26.        id="window"
27.        width="100"
28.        height="70"
29.        x="294.28571"
30.        y="-366.20923"
31.        ry="7.7640224"
32.        inkscape:label="#rect2992" />
33.   </g>  

 

Where does the   transform="translate(-8.5714245,593.94476)">  get these values?

I couldn’t find them in Inkscape.

In the sketch I have:

1.   main = loadShape("drawing08_3RectsId.svg");
2.   house = main.getChild("house");
3.   door = main.getChild("door");
4.   window = main.getChild("window");

 

1.   shape(main);

displays the whole file, all three rectangles as they appear in Inkscape.

 

But to see the children, I need to use

1.   translate(-9, 593);
2.   shape(house,0, 0);
3.   shape(door,0, 0);
4.   shape(window,0, 0);

 In Reference, shape() it indicates that parameters x, y, width, and height refer to location and size of drawn shape.

http://processing.org/reference/shape_.html

The only way I’ve seen this works is if:

• There’s one shape per file, and
• Page size is made equal to the selected object

The sketch has two Main objects.

Each Main has two Part child objects.

But when the Main objects move, the Parts are not staying with them. 

How does that work?

1. // MainAndParts
2. Main m1, m2;  
3. int x = 100;
4. int y = 100;
5. int w = 90;
6. int h = 90;
7. int xx = x;
8. int a;
9.  
10. void setup() {
11.   size(300,300);
12.   smooth();
13.   m1 = new Main(x, y, w, h, color(100));  
14.   m2 = new Main(x, y+h+20, w, h, color(180));  
15. }
16.  
17. void draw() {
18.   background(255);
19.   m1.display();
20.   m2.display();
21.   text("click to move Main", 12, height-12);
22. }
23.  
24. void mousePressed() {
25.   m1.move();
26.   m2.move();
27. }
28.  
29. class Main {
30.   int x;
31.   int y;
32.   int w;
33.   int h;
34.   color c;
35.   Part p1;
36.   Part p2;
37.  
38.   Main(int x_, int y_, int w_, int h_, color c_) {
39.     x = x_;
40.     y = y_;
41.     w = w_;
42.     h = h_;
43.     c = c_;
44.     p1 = new Part(x, this.y, 20, 20, color(250), 1);
45.     p2 = new Part(x, this.y + 30, 20, 20, color(250), 2);
46.   }
47.   void display() {
48.     fill(c);
49.     stroke(0);
50.     ellipse(xx,y,w,h);
51.     p1.display();
52.     p2.display();
53.   }
54.  
55.   void move() {
56.     xx += 2;
57.   } 
58. }
59.  
60. class Part {
61.   int x;
62.   int y;
63.   int w;
64.   int h;
65.   color c;
66.   int id;
67.  
68.   Part(int x_, int y_, int w_, int h_, color c_, int id_) {
69.     x = x_;
70.     y = y_;
71.     w = w_;
72.     h = h_;
73.     c = c_;
74.     id = id_;
75.   }
76.  
77.   void display() {
78.     fill(c);
79.     stroke(0);
80.     ellipse(x, y, w, h);
81.     fill(0);
82.     text(str(id), x-4, y+4);
83.   }
84. }
85. 
    

I don’t have a specific programming code problem. I wanted to share some code that I haven’t seen in tutorials. I’ve found two methods to do mouse rollover on a circle; there may be others. The sketch includes a demonstration of both methods.

Method A. 

S1. Subtract center x from mouseX; square that

S2. Subtract center y from mousey; square that

S3. Add the two square values

S4. If the sum is <= square of radius, the mouse is over (in) the circle.

I copied this concept from: http://stackoverflow.com/questions/481144/how-do-you-test-if-a-point-is-inside-a-circle

Method B. 

S1. Subtract mouseX from center x; square that

S2. Subtract mousey from center y; square that

S3. Add the two square values.

S4. Get the square root of that sum.

S5. If the square root  < radius, the mouse is over (in) the circle.

Note: the “overCircle” block – not used - at end of my code is example of Method B, copied from:

http://processing.org/learning/topics/buttons.html 

When the sketch starts, the mouse positions are 0,0 and is therefore not in the circle. As the user moves the mouse, the values in both methods are updated and displayed. Moving the mouse off the window resets it to 0,0. 

The user can click on one of four X’s to show the values of each “corner” where either mouseX or mouseY is set to the radius. These corner settings are helpful in following the math in both methods. Note: Although the mouse settings are set to these values, I don’t know how to actually move the cursor. 

Notice that only “A – ON CIRCLE” appears in the circle when a corner X is clicked. There seems to be a question of whether the points on the circumference are part of the circle or if they’re an outside wall of the circle. If one imagines the circumference as a “one-pixel-thick” container, the circumference points would not be inside the container. But in a 2d area, it seems that the circumference is part of the circle. I don’t want to open that discussion; you can modify it as desired. When the average person is moving the mouse, she doesn’t know if it’s exactly on the circumference, so either “<=” or “<” seem to work. 

After moving the cursor around, I noticed a pattern. Both methods arrive at the same squared value in step 3. So it makes no difference in steps 1 and 2 which number is subtracted. A negative number squared is positive. So all coordinate differences give positive results in the fourth column.

The big difference is in steps 4 and 5. I don’t understand the logic (especially Method B) but they do work.    

Anybody know how these calculations developed? Is it part of geometry?

1. class Cell extends Shape2 {
2.  
3.   // Inherits all instance variables from parent + adding one
4.   color c;
5.  
6.   Cell(float x_, float y_, float w_, float h_, color(int cr_, int cg_, int cb_, int ch_) {
7.     super(x_,y_,w_,h_); // Call the parent constructor
8.     c(cr_, cg_, cb_, ch_);          // Also deal with this new instance variable
9.   }

I get message on line 6 - expecting TRIPLE_DOT, found '('

As a beginner, I've gone through the book "Getting Started with Processing" by Casey Reas  & Ben Fry. That is a very well-written book.

1. I wonder why the common name "Processing" was selected. It makes it impossible to find specific info on google search. Why not a unique name like "ProcessQ"?

2. Any suggestions for books at the next level?

3. I downloaded the GP4 library guicomponents from http://www.lagers.org.uk/index.html
It appears that the display of these controls is the end-product.
There was no explanation about how to use the controls.

I'm looking for some simple textbox and button controls that work (e.g. how to read the contents of the textbox, etc..)