Dynamic webpage to output a Scalable Vector Graphics (SVG) file.

I am in need of a webpage that will allow customers to enter data (locations, arcs, and facings) via text fields and drop down selections, have that data dynamically update an image on the screen and allow them to save the results as an Scalable Vector Graphics (SVG) file.

They would then email me the resulting file so that I may cut the design on my laser.

In the attached Example1 image, you will see that there are three basic designs/sizes that we will be working with. They are Scout, Bomber and Large Bomber. The page would need to show just one of these at a time (selected from a drop down menu maybe?) Looking at the top row of that image, the red lines are what my laser will cut and the blue objects are what the laser will engrave. The red and blue parts will never change within a design. The bottom row shows what those same images would look like after the customer has used the drop down menus and text fields to enter his data, as seen in the black lines, dots, and text.

The attached Examples2 image shows just the Scout design (base, never changing parts at top) and several examples of what they might create. As you can see, there are a lot of different things they can choose to do.

In order to make it easier for them to enter their data, it needs to be broken down in to the following grouping:

Arc

Location

Facing

Arc: Each of the black lines is actually an arc in degrees. If you look at the second sample on the bottom row of Example2, you can see that the black lines make an arc this about 195 degrees.

Location: This is where the center of the arc talked about above would be located. In that same sample, the Location would just below the 0 on the number dial. In order for the customer to enter in the location, I think it may be best to have a grid under laid so that they could enter in an X and Y coordinates. Coordinates 0,0 would be the center of the red circle and each coordinate would be spaced 1mm from that.

Facing: This is the direction that the arc should be opening up to. Again using that same sample, the Facing would be 0 or 360 degrees.

Looking at Example2, you will also notice that four of the samples have two sets of arcs. The one on the far left would look something like this when entered in by the customer:

Firing Arc 1

Arc: 180°

Location: 0,5

Facing: 0°

Firing Arc 2

Arc: 50°

Location: 0,0

Facing: 180°

On the final output SVG file, I would need all of the red, blue and black objects to be saved.

Due to the complexity of explaining this projects, good English skills will be a must for the selected Freelancer. If you have any questions, please feel free to ask before placing your bid on this project.

Programação C Design Gráfico HTML Java PHP

ID do Projeto: #11929746

Sobre o projeto