Electronics > Microcontrollers
ESP32 combining two scripts
tooki:
Ok, now that I know what to look for:
In your code in reply #5, you define .slider multiple times, first:
--- Code: --- .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #38c0ff ;
outline: none; -webkit-transition: .2s; transition: opacity .2s;}
--- End code ---
And then a few lines later:
--- Code: --- .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}
--- End code ---
If memory serves me correctly, CSS “overwrites” from top to bottom, so the second declaration overwrites the first.
The second one is setting an absolute position at 0,0 which seems to be where they’re showing up.
PSR B1257:
--- Quote ---If memory serves me correctly, CSS “overwrites” from top to bottom, so the second declaration overwrites the first.
--- End quote ---
Yes, I expected such a behavior, but put together the "pseudo code" anyway, just to see how bad the result is.
So the question would be, how to define more than one style to different objects.
I tried to put the switch-part in brackets like "h2 {...}" as it is typically done for different styles.
That does make no difference. The HTML-page looks exactly the same as in the code where I deleted the whole switch-style.
--- Code: --- <style>
html {font-family: Times New Roman; 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: #38c0ff ;
outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background:#01070a; cursor: pointer;}
.slider::-moz-range-thumb { width: 35px; height: 35px; background: #01070a; cursor: pointer; }
switch {
.switch {position: relative; display: inline-block; width: 120px; height: 68px}
.switch input {display: none}
.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}
.slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px}
input:checked .slider {background-color: #b30000}
input:checked .slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
}
</style>
</head>
<body>
<h2>ESP32 Control</h2>
<p><span id="textslider_value">%SLIDERVALUE%</span></p>
<p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="I_min" max="I_max" value="%SLIDERVALUE%" step="1" class="slider"></p>
<switch>%BUTTONPLACEHOLDER%</switch>
<script>
--- End code ---
tooki:
--- Quote from: PSR B1257 on March 28, 2023, 06:17:40 am ---
--- Quote ---If memory serves me correctly, CSS “overwrites” from top to bottom, so the second declaration overwrites the first.
--- End quote ---
Yes, I expected such a behavior, but put together the "pseudo code" anyway, just to see how bad the result is.
So the question would be, how to define more than one style to different objects.
--- End quote ---
You can assign multiple classes to an element, or you can nest it inside another element (like a div) to which you’ve assigned another class.
See
https://www.w3schools.com/tags/att_global_class.asp
https://stackoverflow.com/questions/13444647/css-class-definition-with-multiple-identifiers
PSR B1257:
Thank you, but I don't get the code to work.
Something is still not right in the syntax.
--- Code: --- <title>ESP32 Control</title>
<style>
html {font-family: Times New Roman; 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: #38c0ff ;
outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background:#01070a; cursor: pointer;}
.slider::-moz-range-thumb { width: 35px; height: 35px; background: #01070a; cursor: pointer; }
p.switch {
.switch {position: relative; display: inline-block; width: 120px; height: 68px}
.switch input {display: none}
.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}
.slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px}
input:checked .slider {background-color: #b30000}
input:checked .slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
}
</style>
</head>
<body>
<h2>ESP32 Control</h2>
<p><span id="textslider_value">%SLIDERVALUE%</span></p>
<p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="I_min" max="I_max" value="%SLIDERVALUE%" step="1" class="slider"></p>
<p class="switch">%BUTTONPLACEHOLDER%</p>
<script>
--- End code ---
This code also gives the same result, as the code with no switch-style.
PSR B1257:
Haaaaaaang on a second..... the switch-style is defined in the BUTTONPLACEHOLDER sub-routine.....yeah, I know :palm:
I just had to rename the variable for the slider in the switch-part to prevent a redefinition of the variable.
--- Code: --- <style>
html {font-family: Times New Roman; 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: #38c0ff ;
outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background:#01070a; cursor: pointer;}
.slider::-moz-range-thumb { width: 35px; height: 35px; background: #01070a; cursor: pointer; }
.switch {position: relative; display: inline-block; width: 120px; height: 68px}
.switch input {display: none}
.sliderSwitch {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}
.sliderSwitch:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px}
input:checked .sliderSwitch {background-color: #b30000}
input:checked .sliderSwitch:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
</style>
</head>
<body>
<h2>ESP32 Control</h2>
<p><span id="textslider_value">%SLIDERVALUE%</span></p>
<p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="I_min" max="I_max" value="%SLIDERVALUE%" step="1" class="slider"></p>
%BUTTONPLACEHOLDER%
<script>
function updateSliderPWM(element) {
var slider_value = document.getElementById("pwmSlider").value;
document.getElementById("textslider_value").innerHTML = slider_value*0.24;
console.log(slider_value);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value=" slider_value, true);
xhr.send();
}
function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/update?output=" element.id "&state=1", true); }
else { xhr.open("GET", "/update?output=" element.id "&state=0", true); }
xhr.send();
}
</script>
</body>
</html>
)rawliteral";
String processor(const String& var){
if (var == "SLIDERVALUE"){
return slider_value;
}
//Serial.println(var);
if(var == "BUTTONPLACEHOLDER"){
String buttons = "";
buttons = "<h4>Output - AusgangL1</h4><label class="switch"><input type="checkbox" onchange="toggleCheckbox(this)" id="AusgangL1" " outputState(AusgangL1) "><span class="sliderSwitch"></span></label>";
buttons = "<h4>Output - AusgangL2</h4><label class="switch"><input type="checkbox" onchange="toggleCheckbox(this)" id="AusgangL2" " outputState(AusgangL2) "><span class="sliderSwitch"></span></label>";
buttons = "<h4>Output - AusgangL3</h4><label class="switch"><input type="checkbox" onchange="toggleCheckbox(this)" id="AusgangL3" " outputState(AusgangL3) "><span class="sliderSwitch"></span></label>";
return buttons;
}
return String();
}
--- End code ---
Navigation
[0] Message Index
[#] Next page
[*] Previous page
Go to full version