I’m looking to add 20 dimmers (Robodyn) in OH3.3 through HTTP binding.
I successfully add the dimmer [Thing], status = online.
But, I don’t know how to set Advanced Configuration of the Thing in order to send/receive http commands (dim light). This dimmer is only an electronic board controlled by another NodeMCU 3.22 board (for wifi connection). I’m hopeless because of my lack of knowledge in understanding http protocols.
My project
REFERENCES
Summary:
Procedure from the dimmer producer.
Arduino code (to control dimmer).
Webpage generated by the Arduino code.
OH3 Thing settings - screenshot.
Wireshark - screenshot.
Procedure followed from the dimmer producer :
(Blog - Dimmer and ESP8266 with WEB interface. | robotdyn.com)
This is the code from Arduino / NodeMCU 3.22 board:
//=====
String sliderValue = "0";
const char* PARAM_INPUT = "value";
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dimmer ESP Controller</title>
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 2.3rem;}
p {font-size: 1.9rem;}
body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
.slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
.slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; }
.button { background-color: #003249; border: none; color: white; padding: 16px 40px;}
</style>
</head>
<body>
<h2>Dimmer ESP Controller</h2>
<p><span id="textSliderValue">%SLIDERVALUE%</span></p>
<p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="100" value="%SLIDERVALUE%" step="1" class="slider"></p>
</br>
<p><a href=/output/on\><button class=\"button\">WiFi RST</button></a></p>
<script>
function updateSliderPWM(element) {
var sliderValue = document.getElementById("pwmSlider").value;
document.getElementById("textSliderValue").innerHTML = sliderValue;
console.log(sliderValue);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();
}
</script>
</body>
</html>
)rawliteral";
// Replaces placeholder with button section in your web page
String processor(const String& var){
//Serial.println(var);
if (var == "SLIDERVALUE"){
return sliderValue;
}
return String();
}
//=================================================================== start HTTP_GET communication
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
// Send a GET request to <ESP_IP>/slider?value=<inputMessage>
server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage;
// GET input1 value on <ESP_IP>/slider?value=<inputMessage>
if (request->hasParam(PARAM_INPUT)) {
inputMessage = request->getParam(PARAM_INPUT)->value();
sliderValue = inputMessage;
// analogWrite(output, sliderValue.toInt());
dimmer.setPower(sliderValue.toInt());
}
else {
inputMessage = "No message sent";
}
//Serial.println(inputMessage);
Serial.println(sliderValue);
request->send(200, "text/plain", "OK");
});
// Start server
server.begin();
//=====
}
void loop() {
// put your main code here, to run repeatedly:
}
This is webpage generated by the Arduino code. Page work perfectly, slides the light brightness.
This is the Thing configuration in OH3.3 which needs to be set in order to send commands to the dimmer controlled by the Arduino board.
This is Wireshark filtering traffic between through local wifi from my computer [192.168.1.5] (where the already presented screenshot with slider/webpage is running) to the dimmer [192.168.1.11]. OH3 is installed on a Raspebbery Pi [192.168.1.6]
Wireshark traffic between my computer [192.168.1.5] to OH3 / installed on Raspebbery Pi [192.168.1.6].
