-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
217 lines (174 loc) · 9 KB
/
index.html
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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="WEBsources/ESPresso.css" media="all" />
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style>
#github {
position: absolute;
transform: rotate(45deg);
width: 15em;
padding: 2ex;
background-color: var(-bgcolorHighlight);
transform-origin: right;
text-align: center;
right: -30px;
top: 160px;
}
.anImage {
background-color: var(--baseColor);
margin: .5%;
padding: .5%;
}
#HomePageGif {
vertical-align: top;
width: 20%;
float: left;
}
#oLedInterface {
vertical-align: top;
width: 20%;
float: left;
}
#ConfigPageGif {
vertical-align: top;
width: 20%;
float: right
}
#InterfaceImages {
float: right;
background-color: var(--baseColor);
padding: 2ex;
width: 30%
}
.main {
margin-left: 1em;
margin-right: 1em;
}
</style>
</head>
<body>
<div>
<h1>
<div>ESP<div class="numberplaceholder">
<div id="number32">32</div>
</div>resso Machine </div>
</h1>
<div id="github">Find and fork me on <A href="https://github.com/Kolkman/ESP32ressoMachine">Github</A></div>
</div>
<div id="EspressoMachinePNG"><img src="ArtSource/EspressoMachine.png"></div>
<div class="main">
<h2>Overview</h2>
<p>
The project covers somewhat advances features for an espresso machine temperature controller. The basic idea
was to have reproducible "espresso results" due to temperature regulation and being able to fine-tune.
Especially small machines have a low heat capacity and quality suffers a lot from different heat-up-times
and high hysteresis in standard temperature switches. This <i>fork</i> was specifically developed for a
Rancilio Silvia (v1) which are known to have fluctuations up to 20 degrees Celcius.
</p>
<p>
With this project you should be able to install a PID for about 30 Euro of material, some soldering,
uploading the firmware, and installling the hardware.
</p>
<h2>Interface</h2>
<img id="HomePageGif" alt="Picture of the ESP32Machine webinterface home page" class="anImage"
src="ArtSource/HomePageAnimation.gif">
<img id="ConfigPageGif" alt="Picture of the ESP32Machine webinterface configuration page" class="anImage"
src="ArtSource/ConfigPageAnimation.gif">
<p>
The homepage presents a simple temperature gauge, a power indicator, and the ability to turn the heater on
or off. The configuration page contains all that is needed for setting the various parameters that control
the temperature. It contains a graph that presents the last 10 minutes of data so you see what the impact is
of your tuning. When the page is loaded it initiates its buffer with a few minutes of data from board.
Setting the parameters us done using a username and password ( admin/silvia - currently values set at
compilation time).
</p>
<p>
Most of the interaction with the ESP32Machine is done via an restful API. All parameters can be set or read
through it. In addition there is an MQTT interface that is used to publish the machines's current status.
</p>
<p> For makers there is the ability to extend functionality using a physical interface, consisting out of 3
control buttons and a LED or oLed display.
</p>
<h2>Buid Background</h2>
<h3> Software</h3>
<p>
This project refactored from the original <a href="https://github.com/Schm1tz1/ESPressIoT">ESPressIoT
project by Roman Schmit</a> which was originally written for an ESP3866 board with a TSIC sensor.
</p>
<p>
This <i>fork</i> ports that code to an ESP32 with a MAX31855 amplified K thermocouple. It has been
refactored it to be more object oriented and graphically more appealing. It has some small optimisations
to deal with measurement noise and ones that allow for marginally faster convergence. Overal the temperature
stability is about 0.2 degrees centrigrade.
</p>
<p>
For development I used platformIO on Visual Studio Code MAX. The toolchain relies on having <A
href="https://marketplace.visualstudio.com/items?itemName=josee9988.minifyall">MinifyAll</A> installed.
</p>
<p>
The code relies on the following libraries:
<ul>
<li><A href="https://github.com/br3ttb/Arduino-PID-Library">Arduino-PID-Library v1</A></li>
<li><A href="https://github.com/bblanchon/ArduinoJson">ArduinoJSON v6</A></li>
<li><A href="https://github.com/adafruit/Adafruit-MAX31855-library">Adafruit-MAX31855</A></li>
<li><A href="https://github.com/bblanchon/ArduinoStreamUtils/"></A>ArduinoStreamUtils</li>
<li><A href="https://github.com/knolleary/pubsubclient">PubSubClient</A></li>
<li><A href="https://github.com/me-no-dev/ESPAsyncWebServer">ESPAsyncWebServer</A>(Currently we
are using <A href="https://github.com/esphome/ESPAsyncWebServer.git">this fork</A>, as the original code
has stability issues in the event handling</li>
</ul>
The webserver serves a local copy of <A href="https://bernii.github.io/gauge.js/">Gauge.js</A> but the web
frontend will also download a remote
copy of <A href="https://d3js.org">d3j version 4</A> from d3js.org.
</p>
<p> Should you build this project with an oLed or Liquid led interface then additional library dependencies will be
needed.</p>
<p> Before building you should look at <A
href="./include/ESPressoMachineDefaults.h">include/ESPressoMachineDefaults.h</A> where build time
configuration changes should be made.
</p>
<h3>Updating</h3>
<p>Please note that over time I have changed the pin assignement. Mainly to make debugging with an ESP32
possible.</p>
<img id="oLedInterface" alt="Picture of an oLed based physical Interface" class="anImage"
src="ArtSource/oLedImage.gif">
<h3>Hardware</h3>
<p>
For the hardware setup I followed the example from <A
href="https://www.instructables.com/PID-Controlled-Thermostat-Using-ESP32-Applied-to-a/"> "Bnayalivne's
Instructable page"</A> I used a splitter to solder a USB charger to. And the whole circuit I installed
in the space behind the frontplate, in a small 3d printed box.
</p>
<p>
Whilst the Fotek should be able to handle the 3.3 V output from the GPIO it failed doing so. The small
circuit with the transistor, resistor, and the diode (against flowback) uses a GPIO
to switch the output from the 5v voltage pin.
</p>
<p> The schema below is the wiring schema including the connections for 3 control buttons and an oled interface.
The pin layout is defined in <A href="./include/ESPressoMachineDefaults.h">include/ESPressoMachineDefaults.h</A></p>
<img class="anImage" src="ArtSource/Scheme_schem.png" alt="electric scheme" width="70%"
style="vertical-align: top;">
<h2>Acknowledgements</h2>
<p>
Roman Schmit, some of the code is a literal copy of his, some of it is butchered. All good idea's are his,
the errors introduced are mine.
</p>
<p>
The webpages uses, borrows, or was inspired by <a href="https://canvas-gauges.com/">the gauge.min.js</a>
library ; button.css by Ashley Watson-Nolan from htps://codepen.io/ashleynolan/pen/wBppKzt;
the <a href="https://d3js.org/">D3j library</a>. It draws from many examples from the community such as
Brendan Sudol's way to <a href="https://brendansudol.com/writing/responsive-d3">make a graph responsive</a>
and Renzo Mischianti's <A
href="https://www.mischianti.org/2020/11/09/web-server-with-esp8266-and-esp32-manage-security-and-authentication-4/#Simple_token_authentication">
cookie based authentication</A> webpage.
</p>
<p>
Another project that may be of your interest is <a
href="https://github.com/medlor/bleeding-edge-ranciliopid">Medlor's Bleeding Edge</a>
</p>
<p> Finally thanks to Angelo Moriondo, you all know why.</p>
</div>
</body>
</html>