Skip to content

Commit 890a755

Browse files
pepc84pepc84
committed
Added description to pictures and identifiers
1 parent e7a6df3 commit 890a755

3 files changed

Lines changed: 77 additions & 21 deletions

File tree

‎downloads/index.html‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,17 @@
4040
border-radius: 8px;
4141
aspect-ratio: 16/9;
4242
display: flex;
43+
flex-direction: column;
4344
align-items: center;
4445
justify-content: center;
4546
color: #a18f4f;
4647
font-size: 12px;
4748
text-align: center;
4849
padding: 1rem;
4950
}
51+
.shot-placeholder .shot-filename { font-family: "SF Mono","Fira Code",monospace; font-weight: 700; margin-bottom: 0.35rem; }
52+
.shot-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; display: block; }
53+
.shot-img[hidden] { display: none; }
5054
.mode-callout .step-list { color: #6b5a1f; font-size: 13.5px; line-height: 1.9; margin: 0 0 1rem 1.1rem; }
5155

5256
/* Header library downloads */
@@ -98,10 +102,22 @@ <h2>Looking for the C++ Mode?</h2>
98102
<li>Search for <strong>C++ Mode</strong> in the Contribution Manager and click Install.</li>
99103
</ol>
100104
<div class="shots">
101-
<!-- SCREENSHOT 1: Processing IDE with the mode dropdown open, "Add Mode..." highlighted -->
102-
<div class="shot-placeholder">Screenshot: mode dropdown open, "Add Mode..." highlighted</div>
103-
<!-- SCREENSHOT 2: Contribution Manager with "C++ Mode" found and the Install button visible -->
104-
<div class="shot-placeholder">Screenshot: Contribution Manager showing C++ Mode</div>
105+
<div>
106+
<img class="shot-img" src="../assets/screenshot1.png" alt="Mode dropdown open, &quot;Add Mode...&quot; highlighted"
107+
onerror="this.hidden=true; this.nextElementSibling.hidden=false;">
108+
<div class="shot-placeholder" hidden>
109+
<span class="shot-filename">assets/screenshot1.png</span>
110+
<span>Mode dropdown open, "Add Mode..." highlighted</span>
111+
</div>
112+
</div>
113+
<div>
114+
<img class="shot-img" src="../assets/screenshot2.png" alt="Contribution Manager showing C++ Mode"
115+
onerror="this.hidden=true; this.nextElementSibling.hidden=false;">
116+
<div class="shot-placeholder" hidden>
117+
<span class="shot-filename">assets/screenshot2.png</span>
118+
<span>Contribution Manager showing C++ Mode</span>
119+
</div>
120+
</div>
105121
</div>
106122
<p>Once it's installed, restart Processing and select <strong>C++</strong> from the same mode dropdown.</p>
107123
</div>
@@ -124,7 +140,7 @@ <h3>CMake</h3>
124140

125141
<div class="vscode-note">
126142
<p><strong>Using an editor like VS Code?</strong> See the full walkthrough for setting up either download in an external editor and build system.</p>
127-
<p><a href="/downloads/vscode" style="border-bottom:1px solid #ddd;">Read the VS Code setup tutorial →</a></p>
143+
<p><a href="/downloads/vscode.html" style="border-bottom:1px solid #ddd;">Read the VS Code setup tutorial →</a></p>
128144
</div>
129145
</div>
130146
</div>

‎downloads/vscode.html‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
aspect-ratio: 16/9;
5353
max-width: 560px;
5454
display: flex;
55+
flex-direction: column;
5556
align-items: center;
5657
justify-content: center;
5758
color: #999;
@@ -60,6 +61,9 @@
6061
padding: 1rem;
6162
margin: 0.5rem 0 1.5rem;
6263
}
64+
.shot-placeholder .shot-filename { font-family: "SF Mono","Fira Code",monospace; font-weight: 700; margin-bottom: 0.35rem; color: #777; }
65+
.shot-img { width: 100%; max-width: 560px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; display: block; margin: 0.5rem 0 1.5rem; }
66+
.shot-img[hidden] { display: none; }
6367

6468
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
6569
@media (max-width: 768px) {
@@ -87,8 +91,12 @@ <h2>Drag-and-Drop version</h2>
8791
<div class="step-num">1</div>
8892
<div class="step-body">
8993
<p>Unzip the download into your project folder, alongside your own source files. You should see <code>Processing.h</code> and <code>Processing.cpp</code>.</p>
90-
<!-- SCREENSHOT: VS Code file explorer showing Processing.h / Processing.cpp dropped into a project folder -->
91-
<div class="shot-placeholder">Screenshot: Processing.h / Processing.cpp in the VS Code file explorer</div>
94+
<img class="shot-img" src="../assets/screenshot3.png" alt="Processing.h / Processing.cpp in the VS Code file explorer"
95+
onerror="this.hidden=true; this.nextElementSibling.hidden=false;">
96+
<div class="shot-placeholder" hidden>
97+
<span class="shot-filename">assets/screenshot3.png</span>
98+
<span>Processing.h / Processing.cpp in the VS Code file explorer</span>
99+
</div>
92100
</div>
93101
</div>
94102
<div class="step">
@@ -112,8 +120,12 @@ <h2>Drag-and-Drop version</h2>
112120
<div class="step-body">
113121
<p>Open a terminal in VS Code (<code>Ctrl+`</code>) and compile directly with <code>g++</code>:</p>
114122
<pre><code>g++ -std=c++17 sketch.cpp Processing.cpp -o sketch && ./sketch</code></pre>
115-
<!-- SCREENSHOT: VS Code integrated terminal running the g++ command above, sketch window open alongside -->
116-
<div class="shot-placeholder">Screenshot: VS Code terminal compiling and running the sketch</div>
123+
<img class="shot-img" src="../assets/screenshot4.png" alt="VS Code terminal compiling and running the sketch"
124+
onerror="this.hidden=true; this.nextElementSibling.hidden=false;">
125+
<div class="shot-placeholder" hidden>
126+
<span class="shot-filename">assets/screenshot4.png</span>
127+
<span>VS Code terminal compiling and running the sketch</span>
128+
</div>
117129
</div>
118130
</div>
119131

@@ -123,8 +135,12 @@ <h2>CMake version</h2>
123135
<div class="step-num">1</div>
124136
<div class="step-body">
125137
<p>Unzip the download and drop the folder into your project (e.g. as a <code>third_party/processing-cpp</code> subdirectory).</p>
126-
<!-- SCREENSHOT: VS Code file explorer showing the unzipped folder placed under third_party/ -->
127-
<div class="shot-placeholder">Screenshot: project tree with the library folder added</div>
138+
<img class="shot-img" src="../assets/screenshot5.png" alt="Project tree with the library folder added"
139+
onerror="this.hidden=true; this.nextElementSibling.hidden=false;">
140+
<div class="shot-placeholder" hidden>
141+
<span class="shot-filename">assets/screenshot5.png</span>
142+
<span>Project tree with the library folder added</span>
143+
</div>
128144
</div>
129145
</div>
130146
<div class="step">
@@ -140,8 +156,12 @@ <h2>CMake version</h2>
140156
<div class="step-body">
141157
<p>If you have the CMake Tools extension installed, VS Code will pick up the project automatically. Use the status bar build/run buttons, or from the terminal:</p>
142158
<pre><code>cmake -B build && cmake --build build && ./build/your_target</code></pre>
143-
<!-- SCREENSHOT: VS Code with CMake Tools status bar visible, terminal showing the build running -->
144-
<div class="shot-placeholder">Screenshot: VS Code building with CMake Tools</div>
159+
<img class="shot-img" src="../assets/screenshot6.png" alt="VS Code building with CMake Tools"
160+
onerror="this.hidden=true; this.nextElementSibling.hidden=false;">
161+
<div class="shot-placeholder" hidden>
162+
<span class="shot-filename">assets/screenshot6.png</span>
163+
<span>VS Code building with CMake Tools</span>
164+
</div>
145165
</div>
146166
</div>
147167

‎gettingstarted/index.html‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
aspect-ratio: 16/9;
7676
max-width: 560px;
7777
display: flex;
78+
flex-direction: column;
7879
align-items: center;
7980
justify-content: center;
8081
color: #999;
@@ -83,6 +84,9 @@
8384
padding: 1rem;
8485
margin: 0.5rem 0 1.5rem;
8586
}
87+
.shot-placeholder .shot-filename { font-family: "SF Mono","Fira Code",monospace; font-weight: 700; margin-bottom: 0.35rem; color: #777; }
88+
.shot-img { width: 100%; max-width: 560px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; display: block; margin: 0.5rem 0 1.5rem; }
89+
.shot-img[hidden] { display: none; }
8690

8791
.next-steps { border-top: 1px solid #e0e0e0; margin-top: 3rem; padding-top: 2rem; display: flex; gap: 1.5rem; flex-wrap: wrap; }
8892
.next-steps a { font-size: 14px; font-weight: 600; border-bottom: 1px solid #ccc; padding-bottom: 2px; }
@@ -125,16 +129,24 @@ <h2>2. Open a new sketch</h2>
125129
<div class="step-num">1</div>
126130
<div class="step-body">
127131
<p>Restart Processing, open the mode dropdown again, and select <strong>C++</strong>.</p>
128-
<!-- SCREENSHOT: mode dropdown with C++ selected -->
129-
<div class="shot-placeholder">Screenshot: mode dropdown with C++ selected</div>
132+
<img class="shot-img" src="../assets/screenshot7.png" alt="Mode dropdown with C++ selected"
133+
onerror="this.hidden=true; this.nextElementSibling.hidden=false;">
134+
<div class="shot-placeholder" hidden>
135+
<span class="shot-filename">assets/screenshot7.png</span>
136+
<span>Mode dropdown with C++ selected</span>
137+
</div>
130138
</div>
131139
</div>
132140
<div class="step">
133141
<div class="step-num">2</div>
134142
<div class="step-body">
135143
<p>You'll see a blank editor, just like Java mode. This is where you'll write your sketch.</p>
136-
<!-- SCREENSHOT: blank C++ Mode editor window -->
137-
<div class="shot-placeholder">Screenshot: blank C++ Mode editor</div>
144+
<img class="shot-img" src="../assets/screenshot8.png" alt="Blank C++ Mode editor"
145+
onerror="this.hidden=true; this.nextElementSibling.hidden=false;">
146+
<div class="shot-placeholder" hidden>
147+
<span class="shot-filename">assets/screenshot8.png</span>
148+
<span>Blank C++ Mode editor</span>
149+
</div>
138150
</div>
139151
</div>
140152

@@ -155,16 +167,24 @@ <h2>4. Run it</h2>
155167
<div class="step-num">1</div>
156168
<div class="step-body">
157169
<p>Click the Run button (the play icon) in the top-left of the editor, or press <code>Ctrl+R</code> (<code>Cmd+R</code> on Mac).</p>
158-
<!-- SCREENSHOT: Run button highlighted in the C++ Mode toolbar -->
159-
<div class="shot-placeholder">Screenshot: Run button in the toolbar</div>
170+
<img class="shot-img" src="../assets/screenshot9.png" alt="Run button in the toolbar"
171+
onerror="this.hidden=true; this.nextElementSibling.hidden=false;">
172+
<div class="shot-placeholder" hidden>
173+
<span class="shot-filename">assets/screenshot9.png</span>
174+
<span>Run button in the toolbar</span>
175+
</div>
160176
</div>
161177
</div>
162178
<div class="step">
163179
<div class="step-num">2</div>
164180
<div class="step-body">
165181
<p>A window opens with a dark gray background. Move your mouse over it and a circle follows the cursor.</p>
166-
<!-- SCREENSHOT: the sketch above running, circle following the cursor -->
167-
<div class="shot-placeholder">Screenshot: the sketch running, circle following the cursor</div>
182+
<img class="shot-img" src="../assets/screenshot10.png" alt="The sketch running, circle following the cursor"
183+
onerror="this.hidden=true; this.nextElementSibling.hidden=false;">
184+
<div class="shot-placeholder" hidden>
185+
<span class="shot-filename">assets/screenshot10.png</span>
186+
<span>The sketch running, circle following the cursor</span>
187+
</div>
168188
</div>
169189
</div>
170190

0 commit comments

Comments
 (0)