Making html shapes with C

**DrPenguin** · 10-13-2014

So basically I have to write a C program that, when opening the html file in a browser, looks essentially like this:

Making html shapes with C-csc-jpg

(Size, position, color of the shapes doesn't matter so long as I have one of each shape and the box surrounding them. Words up top dont matter either.)

This is what I have so far:

Code:

#include <stdio.h>
#include <stdlib.h>
#define FILENAME   ("A4P1.html")


void circle(FILE* ofp){
    int cx, cy, r, red, g, b;
    float a;
    cx = 150;
    cy = 80;
    r = 90;
    red = 225;
    g = 69;
    b = 133;
    a = 1.0;
    fprintf(ofp, "\t\t\t<circle cx=\"%d\" cy=\"%d\" r=\"%d\" fill=\"rgba(%d,%d,%d,%0.1f)\"?>\n", cx, cy, r, red, g, b, a);
    }

void square(FILE* ofp){
    int x, y, width, height, r, g, b;
    float a;
    x = 50;
    y = 150;
    width = 100;
    height = 100;
    r = 0;
    g = 225;
    b = 225;
    a = 0.8;
    fprintf(ofp, "\t\t\t<square x=\"%d\" y=\"%d\" width=\"%d\" height=\"%d\" fill=\"rgba(%d,%d,%d,%0.1f)\"?>\n", x, y, width, height, r, g, b, a);
    }


void ellipse(FILE* ofp){
    int cx, cy, rx, ry, r, g, b;
    float a;
    cx = 200;
    cy = 100;
    rx = 175;
    ry = 75;
    r = 0;
    g = 0;
    b = 255;
    a = 0.6;
    fprintf(ofp, "\t\t\t<ellipse cx=\"%d\" cy=\"%d\" rx=\"%d\" ry=\"%d\" fill=\"rgba(%d,%d,%d,%0.1f)\"?>\n", cx, cy, rx, ry, r, g, b, a);
    }


void box(FILE* ofp){
    int x, y, width, height, r, g, b;
    float a;
    x = 0;
    y = 0;
    width = 500;
    height = 300;
    r = 255;
    g = 51;
    b = 153;
    a = 1.0;
    fprintf(ofp, "\t\t\t<box x=\"%d\" y=\"%d\" width=\"%d\" height=\"%d\" fill=\"rgba(%d,%d,%d,%0.1f)\"?>\n", x, y, width, height, r, g, b, a);
    }

void rect(FILE* ofp){
    int x, y, width, height, r, g, b;
        float a;
        x = 200;
        y = 200;
        width = 300;
        height = 75;
        r = 255;
        g = 0;
        b = 0;
        a = 1.0;
        fprintf(ofp, "\t\t\t<rect x=\"%d\" y=\"%d\" width=\"%d\" height=\"%d\" fill=\"rgba(%d,%d,%d,%0.1f)\"?>\n", x, y, width, height, r, g, b, a);
        }



int main(void) {
    FILE* ofp = NULL;
    printf("We are about to create a file called %s for writing into it\n", FILENAME);
    ofp = fopen(FILENAME, "w");
    if (ofp == NULL) {
        printf("Cannot open output file %s\n", FILENAME);
        exit(EXIT_FAILURE);  // exit() is defined in <stdlib.h>
    } /* if */
    printf("We created the file %s successfully for writing\n", FILENAME);
    fprintf(ofp, "<!DOCTYPE html>\n");
    fprintf(ofp, "<html>\n");
    fprintf(ofp, "\t<head>\n");
    fprintf(ofp, "\t\t<title>A4P1.html</title>\n");
    fprintf(ofp, "\t</head>\n");
    fprintf(ofp, "\t<body>\n");
    fprintf(ofp, "\t\t<p>Happy Thanksgiving!</p>\n");
    fprintf(ofp, "\t\t<svg width=\"500\" height=\"300\">n");
    fprintf(ofp, "\t\t\t<defs>\n");
    fprintf(ofp, "\t\t\t\t<clipPath id=\"myframe\">\n");
    fprintf(ofp, "\t\t\t\t<rect x=\"0\" y=\"0\" width=\"500\" height=\"300\">\n");
    fprintf(ofp, "\t\t\t\t</clipPath>\n");
    fprintf(ofp, "\t\t\t</defs>\n");
    box(ofp);
    rect(ofp);
    circle(ofp);
    ellipse(ofp);
    square(ofp);
    fprintf(ofp, "\t\t</svg>\n");
    fprintf(ofp, "\t</body>\n");
    fprintf(ofp, "</html>\n");
    printf("We wrote HTML5 code into the file %s successfully\n", FILENAME);
    fclose(ofp);
    printf("We closed the file %s successfully\n", FILENAME);
    return EXIT_SUCCESS;
} /*main*/

Anyways i can get the individual shapes, but I don't know how to get all the shapes to appear at once...

I also can't get the box thing to work...

Any help would be appreciated!

**c99tutorial** · 10-13-2014

Originally Posted by DrPenguin

Anyways i can get the individual shapes, but I don't know how to get all the shapes to appear at once...

I also can't get the box thing to work...

Any help would be appreciated!

I tried this but it showed no output in my browser. Look at the HTML output that your code generates and see what you have to fix to make it validate in an HTML5 validation.

For example

Code:

<circle cx="150" cy="80" r="90" fill="rgba(225,69,133,1.0)"?>

The tag should end with /> but you have ?> instead, so it is not guaranteed to be rendered properly in web browsers. Mine just gave me a blank canvas.

As for "box" I'm not familiar with that. If you want to draw a box, why not use rect?

https://developer.mozilla.org/en-US/...G/Element/rect

**DrPenguin** · 10-13-2014

ok thank you!

switching the "?" made it work

I have no clue why the example we were given had question marks in it...

Ok as for the border, box, frame thing, I tried making it a rect but still couldn't get it work...

**c99tutorial** · 10-13-2014

Originally Posted by DrPenguin

Ok as for the border, box, frame thing, I tried making it a rect but still couldn't get it work...

Your generated HTML might have an error. You could try running the resulting HTML file through an HTML5 validation tool (many are available online). This would also have caught the invalid closing of the tags you had earlier.

**DrPenguin** · 10-13-2014

So using the code I currently have:

Code:

#include <stdio.h>
#include <stdlib.h>
#define FILENAME   ("A4P1.html")


void circle(FILE* ofp){
    int cx, cy, r, red, g, b;
    float a;
    cx = 150;
    cy = 80;
    r = 90;
    red = 225;
    g = 69;
    b = 133;
    a = 1.0;
    fprintf(ofp, "\t\t\t<circle cx=\"%d\" cy=\"%d\" r=\"%d\" fill=\"rgba(%d,%d,%d,%0.1f)\"/>\n", cx, cy, r, red, g, b, a);
    }

void square(FILE* ofp){
    int x, y, width, height, r, g, b;
    float a;
    x = 50;
    y = 150;
    width = 100;
    height = 100;
    r = 0;
    g = 225;
    b = 225;
    a = 0.8;
    fprintf(ofp, "\t\t\t<square x=\"%d\" y=\"%d\" width=\"%d\" height=\"%d\" fill=\"rgba(%d,%d,%d,%0.1f)\"/>\n", x, y, width, height, r, g, b, a);
    }


void ellipse(FILE* ofp){
    int cx, cy, rx, ry, r, g, b;
    float a;
    cx = 200;
    cy = 100;
    rx = 175;
    ry = 75;
    r = 0;
    g = 0;
    b = 255;
    a = 0.6;
    fprintf(ofp, "\t\t\t<ellipse cx=\"%d\" cy=\"%d\" rx=\"%d\" ry=\"%d\" fill=\"rgba(%d,%d,%d,%0.1f)\"/>\n", cx, cy, rx, ry, r, g, b, a);
    }


void box(FILE* ofp){
    int x, y, width, height, r, g, b;
    float a;
    x = 0;
    y = 0;
    width = 500;
    height = 300;
    r = 255;
    g = 51;
    b = 153;
    a = 1.0;
    fprintf(ofp, "\t\t\t<box x=\"%d\" y=\"%d\" width=\"%d\" height=\"%d\" fill=\"rgba(%d,%d,%d,%0.1f)\"/>\n", x, y, width, height, r, g, b, a);
    }

void rect(FILE* ofp){
    int x, y, width, height, r, g, b;
        float a;
        x = 200;
        y = 200;
        width = 300;
        height = 75;
        r = 255;
        g = 0;
        b = 0;
        a = 1.0;
        fprintf(ofp, "\t\t\t<rect x=\"%d\" y=\"%d\" width=\"%d\" height=\"%d\" fill=\"rgba(%d,%d,%d,%0.1f)\"/>\n", x, y, width, height, r, g, b, a);
        }



int main(void) {
    FILE* ofp = NULL;
    printf("We are about to create a file called %s for writing into it\n", FILENAME);
    ofp = fopen(FILENAME, "w");
    if (ofp == NULL) {
        printf("Cannot open output file %s\n", FILENAME);
        exit(EXIT_FAILURE);  // exit() is defined in <stdlib.h>
    } /* if */
    printf("We created the file %s successfully for writing\n", FILENAME);
    fprintf(ofp, "<!DOCTYPE html>\n");
    fprintf(ofp, "<html>\n");
    fprintf(ofp, "\t<head>\n");
    fprintf(ofp, "\t\t<title>A4P1.html</title>\n");
    fprintf(ofp, "\t</head>\n");
    fprintf(ofp, "\t<body>\n");
    fprintf(ofp, "\t\t<p>Happy Thanksgiving!</p>\n");
    fprintf(ofp, "\t\t<svg width=\"500\" height=\"300\">");
    fprintf(ofp, "\t\t\t<defs>\n");
    fprintf(ofp, "\t\t\t\t<clipPath id=\"myframe\">\n");
    fprintf(ofp, "\t\t\t\t<rect x=\"0\" y=\"0\" width=\"500\" height=\"300\">\n");
    fprintf(ofp, "\t\t\t\t</clipPath>\n");
    fprintf(ofp, "\t\t\t</defs>\n");
    box(ofp);
    rect(ofp);
    circle(ofp);
    ellipse(ofp);
    square(ofp);
    fprintf(ofp, "\t\t</svg>\n");
    fprintf(ofp, "\t</body>\n");
    fprintf(ofp, "</html>\n");
    printf("We wrote HTML5 code into the file %s successfully\n", FILENAME);
    fclose(ofp);
    printf("We closed the file %s successfully\n", FILENAME);
    return EXIT_SUCCESS;
} /*main*/

And taking the generated html source and throwing that through a validator, I got these errors:

Error: End tag clippath did not match the name of the current open element (rect).
From line 11, column 5; to line 11, column 15
300">↩ </clipPath>↩ </
Error: Element box not allowed as child of element svg in this context. (Suppressing further errors from this subtree.)
From line 13, column 4; to line 13, column 74
/defs>↩ <box x="0" y="0" width="500" height="300" fill="rgba(255,51,153,1.0)"/>↩ <r
Error: Element square not allowed as child of element svg in this context. (Suppressing further errors from this subtree.)
From line 17, column 4; to line 17, column 79
.6)"/>↩ <square x="50" y="150" width="100" height="100" fill="rgba(0,225,225,0.8)"/>↩ </s

But I have no clue how to fix those using the C file...?

(Also I did have a few other errors that I managed to fix myself, so I'm not just resorting to you guys)

**c99tutorial** · 10-13-2014

Originally Posted by DrPenguin

And taking the generated html source and throwing that through a validator, I got these errors:

Error: End tag clippath did not match the name of the current open element (rect).
From line 11, column 5; to line 11, column 15
300">↩ </clipPath>↩ </
Error: Element box not allowed as child of element svg in this context. (Suppressing further errors from this subtree.)
From line 13, column 4; to line 13, column 74
/defs>↩ <box x="0" y="0" width="500" height="300" fill="rgba(255,51,153,1.0)"/>↩ <r
Error: Element square not allowed as child of element svg in this context. (Suppressing further errors from this subtree.)
From line 17, column 4; to line 17, column 79
.6)"/>↩ <square x="50" y="150" width="100" height="100" fill="rgba(0,225,225,0.8)"/>↩ </s

But I have no clue how to fix those using the C file...?

Yes. This validation shows exactly what to fix. I would first fix those HTML errors and only then go back to the C File. In other words, get a valid HTML file first by using a normal text editor and then afterwards work out how you can generate that file from your generator. As a last step, make sure that several test cases produced from your generator also validate.

As for the HTML errors I would check out the relevant doc pages from here

https://developer.mozilla.org/en-US/...ement/clipPath

In the sidebar of that page are links to the other SVG elements. I mentioned before but I don't recognize square or box. Why can't you use rect to draw a square?

**DrPenguin** · 10-13-2014

Ya but my point is I have absolutely no idea how to do that in the C file even after fixing the html one in a text editor...

As for the rect thing, I dont know? I tried using rect but it tells me it is just a redefinition of rect and doesn't work. If I name it rect2 etc it just doesn't work..

And I was just following what someone else told me about box and square... which apparently doesnt work either....

*EDIT*

I figured out you meant just rect within the fprintf statement right? Cause that seemed to work. The only thing I need to do now is remove the fill within the big rect (former box)

*EDITED EDIT*

I got it now!
Thank you very much for your help

Thread: Making html shapes with C

Thread Tools

Search Thread

Display

Making html shapes with C

Similar Threads

fetching html pages in C. output only shows html source sometimes

Printing Shapes

html header and html body

Counting shapes

Draw Shapes.

Tags for this Thread