Make images on dark mode darker
This commit is contained in:
jaseg
parent
9d2ecb11fd
commit
aa54c194ff
5 changed files with 59 additions and 36 deletions
|
|
@ -125,25 +125,29 @@ means that on every step, the algorithm is choosing a new direction at random.
|
|||
|
||||
.. raw:: html
|
||||
|
||||
<figure>
|
||||
<figure class="side-by-side">
|
||||
<img src="images/cells-0.svg" alt="a completely organized looking grid with spiral patterns all over.">
|
||||
<figcaption>0%</figcaption>
|
||||
</figure><figure class="side-by-side">
|
||||
<img src="images/cells-25.svg">
|
||||
<figcaption>25%</figcaption>
|
||||
</figure><figure class="side-by-side">
|
||||
<img src="images/cells-50.svg">
|
||||
<figcaption>50%</figcaption>
|
||||
</figure><figure class="side-by-side">
|
||||
<img src="images/cells-75.svg">
|
||||
<figcaption>75%</figcaption>
|
||||
</figure><figure class="side-by-side">
|
||||
<img src="images/cells-100.svg" alt="a completely random looking grid with cells aggregating into ireggular
|
||||
areas that look like paint splotches.">
|
||||
<figcaption>100%</figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
<div class="subfigure">
|
||||
<figure>
|
||||
<img src="images/cells-0.svg" alt="a completely organized looking grid with spiral patterns all over.">
|
||||
<figcaption>0%</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="images/cells-25.svg">
|
||||
<figcaption>25%</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="images/cells-50.svg">
|
||||
<figcaption>50%</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="images/cells-75.svg">
|
||||
<figcaption>75%</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="images/cells-100.svg" alt="a completely random looking grid with cells aggregating into ireggular
|
||||
areas that look like paint splotches.">
|
||||
<figcaption>100%</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
After I have built this tree like you would do in a depth-first search, I draw my one or several mesh mesh traces into
|
||||
it. The core observation here is that there is only 16 possible ways a cell can be connected: It has four neighbors,
|
||||
|
|
|
|||
|
|
@ -376,15 +376,16 @@ the resulting brightness curve below.
|
|||
|
||||
.. raw:: html
|
||||
|
||||
<figure>
|
||||
<figure class="side-by-side">
|
||||
<div class="subfigure">
|
||||
<figure>
|
||||
<img src="images/uncorrected_brightness_sim.svg" alt="">
|
||||
<figcaption>
|
||||
Calculated brightness curve for the uncorrected BCM setup. As you can see, at low setpoints the result
|
||||
is about as smooth as sandpaper, which is well in line with our observations. At high setpoints the
|
||||
offset gets swamped out and the nonlinearity in the low bits is not visible anymore.
|
||||
</figcaption>
|
||||
</figure><figure class="side-by-side">
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="images/corrected_brightness_sim.svg" alt="">
|
||||
<figcaption>
|
||||
Brightness curve for the corrected BCM setup extrapolated using actual measurements. Looks as buttery
|
||||
|
|
@ -392,7 +393,7 @@ the resulting brightness curve below.
|
|||
</figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
.. _BPW34: http://www.vishay.com/docs/81521/bpw34.pdf
|
||||
.. _MCP6002: http://ww1.microchip.com/downloads/en/DeviceDoc/21733j.pdf
|
||||
|
|
@ -431,19 +432,20 @@ Conclusion
|
|||
|
||||
.. raw:: html
|
||||
|
||||
<figure>
|
||||
<figure class="side-by-side">
|
||||
<div class="subfigure">
|
||||
<figure>
|
||||
<a href="images/olsndot_schematic.png">
|
||||
<img src="images/olsndot_schematic.png" alt="A picture of the LED driver schematic">
|
||||
</a>
|
||||
<figcaption>The LED driver <a href="images/olsndot_schematic.png">schematic</a></figcaption>
|
||||
</figure><figure class="side-by-side">
|
||||
</figure>
|
||||
<figure>
|
||||
<a href="images/olsndot_pcb.png">
|
||||
<img src="images/olsndot_pcb.png" alt="A picture of the LED driver PCB layout">
|
||||
</a>
|
||||
<figcaption>The LED driver <a href="images/olsndot_pcb.png">PCB layout</a></figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
Putting some thought into the control circuitry and software, you can easily control large numbers of channels of LEDs
|
||||
using extremely inexpensive driving hardware without any compromises on dynamic range. The design we settled on can
|
||||
|
|
|
|||
|
|
@ -47,15 +47,16 @@ currents their `trip times get long enough that they become unlikely to trip in
|
|||
|
||||
.. raw:: html
|
||||
|
||||
<figure>
|
||||
<figure class="side-by-side">
|
||||
<div class="subfigure">
|
||||
<figure>
|
||||
<img src="images/schematic.png">
|
||||
<figcaption>
|
||||
The schematic of the driver board, with the ESP8266 on the top left, the STM32 microcontroller for LED
|
||||
modulation below, the shift register in the middle and the LED drivers and outputs on the right.
|
||||
<a href="resource/schematic_and_pcb.pdf">Download PDF</a>
|
||||
</figcaption>
|
||||
</figure><figure class="side-by-side">
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="images/layout.png">
|
||||
<figcaption>
|
||||
The board layout with the top side being visible. The top side contains the footprint for the ESP8266, the
|
||||
|
|
@ -66,7 +67,7 @@ currents their `trip times get long enough that they become unlikely to trip in
|
|||
<a href="resource/schematic_and_pcb.pdf">Download PDF</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
.. raw:: html
|
||||
|
||||
|
|
|
|||
|
|
@ -13,3 +13,10 @@ summary: >
|
|||
part of gerbolyze.
|
||||
---
|
||||
|
||||
svg-flatten is a command-line utility that performs vector occlusion and clipping on SVG files, producing a flattened
|
||||
SVG file without overlapping elements, without changing what the file looks like. svg-flatten is used as a part of
|
||||
gerbolyze.
|
||||
|
||||
I developed svg-flatten as part of gerbolyze_, but it can be used independently.
|
||||
|
||||
.. _gerbolyze: {{< ref "projects/gerbolyze" >}}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ html {
|
|||
--c-bg-backdrop: #0d1015;
|
||||
--c-bg-behind: #1f232a;
|
||||
--c-bg-front: #272c35;
|
||||
--c-bg-highlight #383f4c;
|
||||
--c-bg-figure-backdrop: #b5bcc8;
|
||||
--c-bg-highlight: #383f4c;
|
||||
--c-bg-figure-backdrop: #383f4c;
|
||||
--c-text: #d0d0d0;
|
||||
--c-text-inverted: #101010;
|
||||
--c-text-muted: #a0a0a0;
|
||||
|
|
@ -333,8 +333,7 @@ figure.side-by-side {
|
|||
|
||||
figure img, figure video {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin: 0 auto 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -356,6 +355,12 @@ img {
|
|||
max-width: 100%;
|
||||
margin: 40px auto 40px auto;
|
||||
display: block;
|
||||
filter: brightness(70%);
|
||||
transition: filter 100ms;
|
||||
}
|
||||
|
||||
img:hover {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.code {
|
||||
|
|
@ -492,7 +497,7 @@ body .il { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.L
|
|||
--c-bg-backdrop: hsl(220, 10%, 90%);
|
||||
--c-bg-behind: hsl(220, 10%, 95%);
|
||||
--c-bg-front: hsl(220, 10%, 96%);
|
||||
--c-bg-highlight #ffffff;
|
||||
--c-bg-highlight: #ffffff;
|
||||
--c-bg-figure-backdrop: #b5bcc8;
|
||||
--c-text: hsl(220, 20%, 30%);
|
||||
--c-text-inverted: hsl(220, 20%, 100%);
|
||||
|
|
@ -516,6 +521,10 @@ body .il { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.L
|
|||
a:hover, nav a:hover {
|
||||
color: var(--c-text-inverted);
|
||||
}
|
||||
|
||||
img {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0 0 3px 1px rgba(0, 0, 0, calc(0.5*var(--shadow-opacity)));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue