Processing 1.0 - Processing Discourse - ProXML

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Other Libraries › ProXML - draw all content

‹ Previous Topic | Next Topic ›

Pages: 1

ProXML - draw all content (Read 675 times)

leanderlike

ProXML - draw all content
Nov 15^th, 2008, 2:54pm

i have a xml document containing the following:

<?xml version="1.0" encoding="ISO-8859-1"?>
<pics>
<pic>
<pic_width pw="190"/>
<pic_height ph="90"/>
</pic>
<pic>
<pic_width pw="30"/>
<pic_height ph="30"/>
</pic>
<pic>
<pic_width pw="100"/>
<pic_height ph="180"/>
</pic>
<pic>
<pic_width pw="277"/>
<pic_height ph="130"/>
</pic>
</pics>

the two values refer to the width and height of a rect. Now, i want Processing to go through the xml file, take the two values an draw them on the screen. between each rect should be a space of about 30 pixel.
i thought of using the translate function but i don't have an idea to realise it?
do you have any scripts or suggestions how to realise this? i think it's not going to be very complicated, but as always..i don't have a starting point...

PhiLho

Re: ProXML - draw all content
Reply #1 - Nov 15^th, 2008, 8:44pm

Mmm, despite the title, I used the built-in XML parser of Processing.

If you don't mind, I would say your XML structure is a bit convoluted. Now, XML design isn't simple, there isn't a single road, and I am not an expert, so take or leave my advice.

To wet my feet, I made my own structure(s) of your data, then I tried to read you.

The XML files:
mine1.xml (my preferred version...)
Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<pics>
   <pic width="190" height="90"/>
   <pic width="30" height="30"/>
   <pic width="100" height="180"/>
   <pic width="277" height="130"/>
 </pics>

mine2.xml (actually the first simplification I made)
Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<pics>
   <pic>
    <width>190</width>
    <height>90</height>
  </pic>
   <pic>
    <width>30</width>
    <height>30</height>
  </pic>
   <pic>
    <width>100</width>
    <height>180</height>
  </pic>
   <pic>
    <width>277</width>
    <height>130</height>
  </pic>
 </pics>

original.xml
Code:

(as in your message!)

Now, the code I used to parse these files:
Code:

XMLElement xml;
final int SPACING = 30;

void setup()
{
  size(800, 300);
  smooth();
  noLoop();
  background(#AAFFEE);

  fill(#AAFF00);
  ReadMine1();
  fill(#BBEE00);
  ReadMine2();
  fill(#CCDD00);
  ReadOriginal();
}

void ReadMine1()
{
  xml = new XMLElement(this, "mine1.xml");
  int numPics = xml.getChildCount();
  int pos = SPACING;
  for (int i = 0; i < numPics; i++)
  {
    XMLElement pic = xml.getChild(i);
    int w = pic.getIntAttribute("width");
    int h = pic.getIntAttribute("height");
//    println("Got: " + w + " " + h);

    rect(pos, SPACING, w, h);
    pos += w + SPACING;
  }
}

void ReadMine2()
{
  xml = new XMLElement(this, "mine2.xml");
  int numPics = xml.getChildCount();
  int pos = 2 * SPACING;
  for (int i = 0; i < numPics; i++)
  {
    XMLElement pic = xml.getChild(i);
    // Warning: this is brittle, 
    // relying on order of tags in XML file
    XMLElement wEl = pic.getChild(0);
    XMLElement hEl = pic.getChild(1);
    int w = int(wEl.getContent());
    int h = int(hEl.getContent());
//    println("Got: " + w + " " + h);

    rect(pos, 2 * SPACING, w, h);
    pos += w + SPACING;
  }
}

void ReadOriginal()
{
  xml = new XMLElement(this, "original.xml");
  int numPics = xml.getChildCount();
  int pos = 3 * SPACING;
  for (int i = 0; i < numPics; i++)
  {
    XMLElement pic = xml.getChild(i);
    XMLElement wEl = pic.getChild(0);
    XMLElement hEl = pic.getChild(1);
    int w = wEl.getIntAttribute("pw");
    int h = hEl.getIntAttribute("ph");
    println("Got: " + w + " " + h);

    rect(pos, 3 * SPACING, w, h);
    pos += w + SPACING;
  }
}

I like this site because each question make me explore a library or some algorithms or some function...

leanderlike

Re: ProXML - draw all content
Reply #2 - Nov 16^th, 2008, 12:43pm

that's great.

thank you so very much. this site is only that great because of people like you who put so much energy in solving problems!! thanks again.

first, i think about simplifying my xml - your advice is very good, as I see how easy the structure could be.

when executing your script it works perfectly well, but i get an error for the original.xml

processing.xml.XMLParseException: XML Parse Exception during parsing of a pics element at line 3: Expected: /

Hm, any idea what might be wrong there? thanks for your help again!!!

PhiLho YaBB Moderator Offline Posts: 4190 Near Paris (France)	Re: ProXML - draw all content Reply #3 - Nov 16^th, 2008, 3:49pm I fear I can't answer: I just copy/pasted your XML to do original.xml. It seems well formed anyway.

leanderlike

Re: ProXML - draw all content
Reply #4 - Nov 16^th, 2008, 5:29pm

ok, was my mistake. i forgot to copy the first line of the xml file...

one more question. in my current xml file i have about 100 different pairs of data, that i want to display.

so i need more than one row.

two question concerning that:

1) as each rect has got a different length would it be easier to put as much rects in one row as possible, or to say: in every row are going to be 5 rects? i don't have any idea how to bring the width of my applet together with the width of the rects i draw. so i think saying a fix value of 5 rects per row would be easier.
2) how to realise it? i think i need a second for () structure to only get 5 rects into one row and then start another row with rect 6 to rect 10, start a third row an so on?

« Last Edit: Nov 16^th, 2008, 9:18pm by leanderlike »

PhiLho

Re: ProXML - draw all content
Reply #5 - Nov 17^th, 2008, 2:01pm

Here is a way to do it with variable number of rectangles per line:
Code:

XMLElement xml;
final int SPACING_X = 30;
final int SPACING_Y = 10;
final int MAX_HEIGHT = 200;

void setup()
{
  size(800, 800);
  smooth();
  noLoop();
  background(#AAFFEE);

  fill(#AAFF00);
  ReadMine1();
}

void ReadMine1()
{
  xml = new XMLElement(this, "mine1.xml");
  int numPics = xml.getChildCount();
  int posX = SPACING_X;
  int posY = SPACING_Y;
  int maxHeight = 0;
  for (int i = 0; i < numPics; i++)
  {
    XMLElement pic = xml.getChild(i);
    int w = pic.getIntAttribute("width");
    int h = pic.getIntAttribute("height");

    // If new rectangle doesn't fit in the remainder of the line
    if (posX + w > width - SPACING_X)
    {
	// Start a new line
	posX = SPACING_X;
	posY += SPACING_Y + maxHeight;
	maxHeight = 0;
    }
    // Keep track of tallest rectangle on this line
    // to get even spacing of lines (ie. smallest spacing)
    if (h > maxHeight) maxHeight = h;

    rect(posX, posY, w, h);
    posX += w + SPACING_X;
  }
}

I try to fit as much rectangles as possible in a line.

If you prefer a fixed number per line, replace the test with

if (count > RECTS_PER_LINE)

where count is set at 0 before start of loop, incremented on each loop and reset to 0 when we start a new line.

Pages: 1

‹ Previous Topic | Next Topic ›