This quick demonstration shows how to build an Online Gerber Viewer that runs directly in your browser – in less than 10 minutes! You can download the source directly from our GitHub

Note: We recommend you first review Building a GUI for Cloud DFM.

Learn more about Cloud DFM

1. Create a Cloud DFM account

Signup and create a Cloud DFM account. The free HOBBY plan is the default. If you already have a Cloud DFM account, please proceed to the next step.

2. Login to Cloud DFM using your account

Once you have logged into Cloud DFM, you will be taken to the Dashboard.

3. Get your Cloud DFM API Key

From the left menu select "Keys". Your API Key will be displayed – copy this key because you will need to paste it in the next step.

4. Paste your Cloud DFM key in the sample HTML (below)

Copy the entire source code below and paste it into any Text editor. Replace YOUR-CLOUDDFM-TOKEN with your Cloud DFM key, and save that as a file named: index.html

5. Open a browser and point to the index.html local file.

The easiest way to do this is open any File Explorer, navigate to the location of your modified index.html, right-click and select Open...

<!DOCTYPE html>
<html>
  <head>
    <title>Cloud DFM Layers Example</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  </head>
  <body>
 
    <h1>Cloud DFM Layers Example</h1>
    <p>Choose up to 5 files with layer types, then click submit.</p>
 
    <form id="form1">
      <input type="hidden" id="fm6" name="fm6" value=""/>
      <input type="hidden" name="async" value="false"/>
      <input type="hidden" name="output" value="files"/>
      <table cellspacing="0" cellpadding="4" border="0">
        <tr>
          <td>Layer 1 <input id="file1" type="file" name="files"/></td>
          <td><select id="select1"></select></td>
        </tr>
        <tr>
          <td>Layer 2 <input id="file2" type="file" name="files"/></td>
          <td><select id="select2"></select></td>
        </tr>
        <tr>
          <td>Layer 3 <input id="file3" type="file" name="files"/></td>
          <td><select id="select3"></select></td>
        </tr>
        <tr>
          <td>Layer 4 <input id="file4" type="file" name="files"/></td>
          <td><select id="select4"></select></td>
        </tr>
        <tr>
          <td>Layer 5 <input id="file5" type="file" name="files"/></td>
          <td><select id="select5"></select></td>
        </tr>
      </table>
      <p><input type="submit" id="submitButton" value="Submit"/></p>
    </form>
 
    <div id="results"></div>
 
    <script>
      //This should NOT be public, you can regenerate keys if it is abused.
      //See the webserver code for a better example how to integrate Cloud DFM to your website
      var CLOUDDFM_TOKEN = 'YOUR-CLOUDDFM-TOKEN';
 
      var LAYER_TYPES = [
        {name:"Top Side Metal",id:"TOP"},
        {name:"Bottom Side Metal",id:"BOTTOM"},
        {name:"Internal Metal (Positive Polarity)",id:"INTERNAL"},
        {name:"Plane (Negative Polarity)",id:"NEG_PLANE"},
        {name:"Plane (Positive)",id:"POS_PLANE"},
        {name:"NC Drill (Thru-Hole)",id:"DRILL_THRUHOLE"},
        {name:"NC Drill (Blind-Buried)",id:"DRILL_BLINDBURIED"},
        {name:"NC Drill (Non-Plated)",id:"DRILL_NONPLATED"},
        {name:"Top Side Silkscreen",id:"SILK_TOP"},
        {name:"Bottom Side Silkscreen",id:"SILK_BOTTOM"},
        {name:"Top Side SolderMask",id:"MASK_TOP"},
        {name:"Bottom Side SolderMask",id:"MASK_BOTTOM"},
        {name:"Top Side Paste",id:"PASTE_TOP"},
        {name:"Bottom Side Paste",id:"PASTE_BOTTOM"},
        {name:"NC Rout",id:"ROUT"},
        {name:"Insulator Layer",id:"INSULATOR"},
        {name:"Top Side Components",id:"COMPONENTS_TOP"},
        {name:"Bottom Side Components",id:"COMPONENTS_BOTTOM"},
        {name:"Temporary Layer",id:"TEMPORARY"},
        {name:"Fab Drawing (Used for reference only)",id:"FAB_DRAWING"},
        {name:"Assembly Drawing (Used for reference only)",id:"ASSEMBLY_DRAWING"},
        {name:"Mechanical Drawing (Used for reference only)",id:"MECHANICAL_DRAWING"},
        {name:"PCB Boarder Layer",id:"BORDER"},
        {name:"Score Layer used for Panel Snap-Outs",id:"SCORE"},
        {name:"Default Layer",id:"GRAPHIC"}
      ];
 
      $(document).ready(function() {
 
        //Populate dropdown with layers
        LAYER_TYPES.forEach(n=>{
          for(let i=1;i<=5;i++) {
            $('#select'+i).append($('<option>').val(n.id).text(n.name))
          }
        });
 
        $("#submitButton").click(function(e) {
          e.preventDefault();
          $('#results').text('Please wait ...')
 
          //Create FM6 file
          var fm6 = 'JOB {\n'
          fm6 +='   NAME=testgerber\n';
          for(var i=1;i<=5;i++) {
            var file = $('#file'+i).val();
            if(file.length==0) break;
            var filename = file.split('\\').pop();
            var layer_type = $('#select'+i).val();
            fm6 += '   LAYER=,'+filename+';'+layer_type+'\n';
          }
          fm6 += '}\n';
          fm6 += 'EXPORT_IMAGE {\n'
          fm6 += '   CELL=active\n'
          fm6 += '   FOLDER=myGerberViewerImages\n'
          fm6 += '   WIDTH=1000\n'
          fm6 += '   BACKGROUND=white\n'
          fm6 += '}\n'
          fm6 += 'EXPORT_IMAGE {\n'
          fm6 += '   CELL=testgerber\n'
          fm6 += '   FILE=myGerberViewerImages/all.jpg\n'
          fm6 += '   WIDTH=2000\n'
          fm6 += '}\n'
          $('#fm6').val(fm6); //Populate value of hidden form variable
          console.log(fm6);
 
          //Send form to CLoud DFM
          $.ajax({
            type: 'POST',
            url: 'https://www.clouddfm.com/api/v1/job',
            enctype: 'multipart/form-data',
            headers: {'clouddfm-token':CLOUDDFM_TOKEN},
            data: new FormData($('#form1')[0]),
            dataType: "json",
            cache: false,
            contentType: false,
            processData: false,
            success: function(data) { //Get results, and show all images
              console.info(data);
              if(data.ok==1) {
                $('#results').empty();
                for(var i=0;i<data.result.outputs.length;i++) {
                  let src = data.result.outputs[i];
                  if(src.ext=='jpg'||src.ext=='png') {
                    $('#results').append('<img src="'+src.url+'" width="320"/>');
                  }
                }
              }
              else {
                $('#results').text(data.err.message);
              }
            },
            error: function(err) {
              $('#results').text(err.statusText);
            }
          });
        });
      });
    </script>
  </body>
</html>

Note: This example only loads 5 gerber/nc files - each individually - and lets you assign the layer types. With a little programming it's easy to add Drag-and-Drop for multiple file selection and more. Visit our GitHub for more examples