3d-print-api-sample/index.html at master · AstroPrint/3d-print-api-sample · GitHub

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<html>
<head>
  <title>AstroPrint 3D Print API</title>
  <meta name="description" content="An easy to use API to import and 3D print models using AstroPrint from any website." />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class='row'>
      <h1>AstroPrint 3D Print API</h1>
      <p>
        The 3D Print API allows developers to inject STL files into the AstroPrint users' accounts with a few lines of javascript.
      </p>
      <p>
        The objects that can be imported are: STLs files or ZIP files (The importer will look inside the zip, extract and import each stl file it founds)
      </p>
      <p>
        This page is in itself an example of all the possible uses. You can see the source code on <a href="https://github.com/AstroPrint/3d-print-api-sample">GitHub</a>.
      <h3>Get Started</h3>
      <p>
        Add the following line close to the closing <b>body</b> tag.
      </p>
<pre>
&lt;body&gt;
  ...
  &lt;script type="text/javascript" src="https://cloud.astroprint.com/js/min/lib/astroprint.import.js"&gt;&lt;/script&gt;
&lt;/body&gt;
</pre>
      <h1>Sample uses</h1>
      <p>
        There are a few ways of using this api.
        <ul>
          <li>Adding HTML attributes to elements</li>
          <li>Calling the Javascript API</li>
          <ul>
            <li>Using a url to the model file</li>
            <li>Using a blob with the contents of the file</li>
          </ul>
        </ul>
      </p>
      <h3>Option 1: Using HTML Attributes</h3>
      <p>
        You can add the class 'astroprint-import' and the following HTML attributes to any html tag and clicking on it will trigger the upload.
      </p>
      <table class="table">
        <tr>
          <th>Attribute</th>
          <th>Description</th>
          <th>Mandatory</th>
        </tr>
        <tr>
          <td>data-ap-download-url</td>
          <td>This is the URL where the STL or ZIP can be found. It needs to be accesible from the internet.</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>data-ap-name</td>
          <td>This is the name that will be used to save the file in the user's account. It must have the STL or ZIP extensions.</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>data-ap-token</td>
          <td>This token will be passed to the download URL. It can be used to authenticate requests for private models.</td>
          <td>No</td>
        </tr>
        <tr>
          <td>data-ap-protection</td>
          <td>Wheter the design can be downloaded by user or not. Present if desired, omit if no protection required.</td>
          <td>No</td>
        </tr>
      </table>
      <p>
        An example of such usage is:
      </p>
      <pre>&lt;button class="astroprint-import" data-ap-download-url="<i>file_url</i>" data-ap-name="test.stl" data-ap-protection="1"&gt; Print with AstroPrint &lt;/button&gt;</pre>
      <p>
        Click below to see a demo of such usage
      </p>
      <button class="astroprint-import btn btn-success" data-ap-download-url="https://www.thingiverse.com/download:2101202" data-ap-name="test.stl" data-ap-protection="1"> Print with AstroPrint </button>

      <h3>Option 2: Calling the Javascript API with a download URL</h3>
      <p>
        You can also the Javascript API in response to an event. In this case we use a download URL. The function
        is <b>importDesign(download_url, name, token)</b> and has the following parameters
      </p>
      <table class="table">
        <tr>
          <th>Parameter</th>
          <th>Description</th>
          <th>Mandatory</th>
        </tr>
        <tr>
          <td>download_url</td>
          <td>This is the URL where the STL or ZIP can be found. It needs to be accesible from the internet.</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>name</td>
          <td>This is the name that will be used to save the file in the user's account. It must have the STL or ZIP extensions.</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>token</td>
          <td>This token will be passed to the download URL. It can be used to authenticate requests for private models.</td>
          <td>No</td>
        </tr>
        <tr>
          <td>protection</td>
          <td>Wheter the design can be downloaded by user or not.</td>
          <td>No</td>
        </tr>
      </table>
      <p>
        An example of this is as follows. A button that calls the API on the click event.
      </p>
<pre>
&lt;button onclick="import()"&gt; Print with AstroPrint &lt;/button&gt;
&lt;script&gt;
  function import() {
    astroprint.importDesign("<i>file_url</i>", "test.stl", null, true);
  }
&lt;/script&gt;
</pre>
      <p>
        Click below to see a demo of such usage
      </p>
      <button class="btn btn-success" onclick="import_url()"> Print with AstroPrint </button>

      <h3>Option 3: Calling the Javascript API with a Blob</h3>
      <p>
        You can call the Javascript API in response to an event. In this case we use <a href="https://developer.mozilla.org/en/docs/Web/API/Blob">a blob</a>. This is useful when a javascript app generates
        the data, like for example a browser-based 3D editor.
        The function is <b>importDesignByBlob(blob, content_type, name)</b> and has the following parameters:
      </p>
      <table class="table">
        <tr>
          <th>Parameter</th>
          <th>Description</th>
          <th>Mandatory</th>
        </tr>
        <tr>
          <td>blob</td>
          <td>This is a blob containing the STL or ZIP data.</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>content_type</td>
          <td>This is the content type (mine type) of the content of the blob. 'application/sla' for STL or 'application/zip' for zip files.</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>name</td>
          <td>This is the name that will be used to save the file in the user's account. It must have the STL or ZIP extensions.</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>protection</td>
          <td>Wheter the design can be downloaded by user or not.</td>
          <td>No</td>
        </tr>
      </table>
      <p>
        An example of this is as follows. A button that calls the API on the click event.
      </p>
<pre>
&lt;button onclick="import()"&gt; Print with AstroPrint &lt;/button&gt;
&lt;script&gt;
  function import() {
    var blob = getDataAsBlob(); //This function is implemented by you to retrieve the STL data as blob
    astroprint.importDesignByBlob(blob, "application/sla", "test.stl", false);
  }
&lt;/script&gt;
</pre>
      <p>
        The example below uses a file input control which returns the local file picked as a blob. This file is then send to the server using
        the importDesignByBlob API
      </p>

      <div class="form-group">
        <label for="the-file">Step 1: Pick a file</label>
        <input type="file" id="the-file"/>
      </div>
      <div class="form-group">
        <label>Step 2: Print it</label><br>
        <button class="btn btn-success" onclick="import_blob()">Print with AstroPrint</button>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="https://cloud.astroprint.com/js/min/lib/astroprint.import.js"></script>
  <script type="text/javascript" src="api.demo.js"></script>
</body>
</html>