aboutsummaryrefslogtreecommitdiff
path: root/gerboweb/templates/index.html
blob: c5c85033353ed6ed4c95fc17d3c63890c85c8592 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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>