diff options
Diffstat (limited to 'gerboweb/templates/index.html')
| -rw-r--r-- | gerboweb/templates/index.html | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/gerboweb/templates/index.html b/gerboweb/templates/index.html new file mode 100644 index 0000000..c5c8503 --- /dev/null +++ b/gerboweb/templates/index.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gerbolyze Raster image to PCB renderer</title> + </head> + <body> + <div class="desc"> + <h1>Raster image to PCB converter</h1> + <p> + Gerbolyze is a tool for rendering black and white raster (PNG) images directly onto gerber layers. You can + use this to put art on a PCB's silkscreen, solder mask or copper layers. The input is a black-and-white PNG + image that is vectorized and rendered into an existing gerber file. Gerbolyze works with gerber files + produced with any EDA toolchain and has been tested to work with both Altium and KiCAD. + </p> + </div> + + <div class="step" id="step1"> + <h2>Step 1: Upload zipped gerber files</h2> + <p> + First, upload a zip file containing all your gerber files. The default file names used by KiCAD, Eagle + and Altium are supported. + </p> + + <form method="POST" action="{{url_for('upload', namespace='gerber')}}" enctype="multipart/form-data"> + {{gerber_form.csrf_token}} + {{gerber_form.upload_file.label}} {{gerber_form.upload_file(size=20)}} + <input type="submit" value="Submit"> + </form> + </div> + + {% if 'render_job' in session or has_renders %} + <div class="step" id="step2"> + <h2>Step 2: Download the target side's preview image</h2> + <p> + Second, download either the top or bottom preview image and use it to align and scale your own artwork + in an image editing program such as Gimp. Then upload your overlay image below. + + Note that you will have to convert grayscale images into binary images yourself. Gerbolyze can't do this + for you since there are lots of variables involved. Our <a href="{{url_for('static', + filename='image_processing_guide.html')}}">Guideline on image processing</a> gives an overview on + <i>one</i> way to produce agreeable binary images from grayscale source material. + </p> + {% if 'render_job' in session %} + <strong>Processing...</strong> (this may take several minutes!) + {% else %} + <img src="{{url_for('render_preview', side='top')}}"> <a href="{{url_for('render_download', side='top')}}">Download</a> + <img src="{{url_for('render_preview', side='bottom')}}"> <a href="{{url_for('render_download', side='bottom')}}">Download</a> + {% endif %} + <form method="POST" action="{{url_for('session_reset')}}"> + {{reset_form.csrf_token}} + <input type="submit" value="Start over"> + </form> + </div> + + <div class="step" id="step3"> + <h2>Step 3: Upload overlay image</h2> + <p> + Now, upload your binary overlay image as a PNG and let gerbolyze render it onto the target layer. The PNG + file should be a black and white binary file with details generally above about 10px size. <b>Antialiased + edges are supported.</b> + </p> + <form method="POST" action="{{url_for('upload', namespace='overlay')}}" enctype="multipart/form-data"> + {{overlay_form.csrf_token}} + {{overlay_form.upload_file.label}} {{overlay_form.upload_file(size=20)}} + {{overlay_form.side.label}} {{overlay_form.side()}} + <input type="submit" value="Submit"> + </form> + </div> + + {% if 'vector_job' in session or has_output %} + <div class="step" id="step4"> + <h2> Step 4: Download the processed gerber files</h2> + {% if 'vector_job' in session %} + <strong>Processing...</strong> (this may take several minutes!) + {% else %} + <a href="{{url_for('output_download')}}">Download</a> + {% endif %} + <form method="POST" action="{{url_for('session_reset')}}"> + {{reset_form.csrf_token}} + <input type="submit" value="Start over"> + </form> + </div> + {% endif %} {# vector job #} + {% endif %} {# render job #} + </body> +</html> |