Setting different ID when toggle switch is off

Question

I'm working on an Arduino-based system where LEDs will be turned on/off using web server (with ESP8266). I want to add a toggle switch in the HTML page so that LED will be on/off using this slide button.

What I have done so far is the toggle switch is created in HTML and added some CSS that I found on the web. Now as you can see in the code attached, 'id' is defined for the button. Now, this id is sent to the Arduino when I click to the button and used to turn the LED on/off.

For example, if 'id'="111" is sent, LED is ON and if 'id'="110", LED is OFF. So the problem is; whenever I click the switch, the same id(111) is sent to the server since the id of the switch is hard coded. Therefore I can not turn off the LED.

All in all, how can I set the id="110" when I click again the switch to turn it off? So LED will be off too. Please let me know your suggestions to make the system more dynamic, and how should I continue. I thought about setting p = p -1 when the button is turned off, but I lost my way.

Thanks,

$(document).ready(function(){  
   $('.switch').click(function(){  
      var p = $(this).attr('id');
      $.get("IPADDRESS", { pin: p });
      $(this).toggleClass("switchOn" );  
  });  
});

.wrapper{  
     width:500px;  
     margin:0 auto;  
}  
.switch{  
     width:200px;  
     height:100px;  
     background:#E5E5E5;  
     z-index:0;  
     margin:0;  
     padding:0;  
     appearance:none;  
     border:none;  
     cursor:pointer;  
     position:relative;  
     border-radius:100px;  
}  

.switch:before{  
     content: ' ';  
     position:absolute;  
     left:5px;  
     top:5px;  
     width:190px;  
     height:90px;  
     background:#ffffff;  
     z-index:1;  
     border-radius:95px;  
}  
.switch:after{  
     content:' ';  
     width:88px;  
     height:88px;  
     border-radius:86px;  
     z-index:2;  
     background:#FFFFFF;  
     position:absolute;  
     transition-duration:500ms;  
     top:6px;  
     left:6px;  
     box-shadow:0 2px 5px #999999;  
}  
.switchOn, .switchOn:before{  
     background:#4cd964; !important;  
}  
.switchOn:after{  
     left:105px;   
}

<head>      
    <title>Smart Home System</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
</head>    

<body>      
        <label>  
             <div id="111" class="switch">        
        </label>  
</body>

Twisty · Accepted Answer · 2022-10-18T17:39:28.467

Welcome to Stack Overflow. Consider the following.

$(function() {
  $('.switch').click(function() {
    $(this).toggleClass("switchOn");
    var myData = {
      pin: $(this).attr("id"),
      on: $(this).hasClass("switchOn") ? true : false
    };
    console.log("Setting Pin " + myData.pin + " High, " + myData.on);
    $.get("IPADDRESS", myData);
  });
});

.wrapper {
  width: 500px;
  margin: 0 auto;
}

.switch {
  width: 200px;
  height: 100px;
  background: #E5E5E5;
  z-index: 0;
  margin: 0;
  padding: 0;
  appearance: none;
  border: none;
  cursor: pointer;
  position: relative;
  border-radius: 100px;
}

.switch:before {
  content: ' ';
  position: absolute;
  left: 5px;
  top: 5px;
  width: 190px;
  height: 90px;
  background: #ffffff;
  z-index: 1;
  border-radius: 95px;
}

.switch:after {
  content: ' ';
  width: 88px;
  height: 88px;
  border-radius: 86px;
  z-index: 2;
  background: #FFFFFF;
  position: absolute;
  transition-duration: 500ms;
  top: 6px;
  left: 6px;
  box-shadow: 0 2px 5px #999999;
}

.switchOn,
.switchOn:before {
  background: #4cd964;
  !important;
}

.switchOn:after {
  left: 105px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><div id="110" class="switch"></div></label>
<label><div id="111" class="switch"></div></label>
<label><div id="112" class="switch"></div></label>

I found no major issues in your code. Consider the logic of sending the Pin and Status last, so that you can gather the status of your switch after it's been toggled.

Update

The following does what you originally requested.

$(function() {
  $('.switch').click(function() {
    $(this).toggleClass("switchOn");
    var i = $(this).attr("id").substr(0,2);
    var s = $(this).attr("id").substr(2) == 1 ? "0" : "1";
    var p = i + s;
    var myData = {
      pin: p
    };
    console.log("Setting Pin " + p);
    $.get("IPADDRESS", myData);
    $(this).attr("id", p);
  });
});

.wrapper {
  width: 500px;
  margin: 0 auto;
}

.switch {
  width: 200px;
  height: 100px;
  background: #E5E5E5;
  z-index: 0;
  margin: 0;
  padding: 0;
  appearance: none;
  border: none;
  cursor: pointer;
  position: relative;
  border-radius: 100px;
}

.switch:before {
  content: ' ';
  position: absolute;
  left: 5px;
  top: 5px;
  width: 190px;
  height: 90px;
  background: #ffffff;
  z-index: 1;
  border-radius: 95px;
}

.switch:after {
  content: ' ';
  width: 88px;
  height: 88px;
  border-radius: 86px;
  z-index: 2;
  background: #FFFFFF;
  position: absolute;
  transition-duration: 500ms;
  top: 6px;
  left: 6px;
  box-shadow: 0 2px 5px #999999;
}

.switchOn,
.switchOn:before {
  background: #4cd964;
  !important;
}

.switchOn:after {
  left: 105px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label><div id="101" class="switch switchOn"></div></label>
<label><div id="111" class="switch switchOn"></div></label>
<label><div id="121" class="switch switchOn"></div></label>

The ID is changed from 111 to 110 and back on each click. Per your comment, this will be Pin 11 and Status 1 or Status 0.

Some items, like .attr() and .data() are both a Getter and a Setter all in one. It depends on what you use as parameters.

$(this).attr("id")

This will Get the ID.

$(this).attr("id", "111");

This will Set the ID.

See more: https://api.jquery.com/attr/

Hi Twisty, thanks for your answer. In your code, I see that id="110" is defined for another switch in order to turn the LED off. What I want to do is that using only one switch; when I click to turn it on, it should send id=111, but when I click to turn it off again, it should send id=110. — Control, Oct 17 '22 at 22:58
@control how would the script know where to start and when to stop sending them? The logic here is confusing and it's not clear what you are trying to accomplish. You can identify the current ID, convert it into a Number, and reduce it with relative ease. — Twisty, Oct 17 '22 at 23:11
Thanks for your patience, @Twisty. I'm trying to accomplish to turn the LED on/off by sending unique IDs using the button. As you can see in my post, id=111 is defined for the button. So when I clicked the button in order to turn it on, it sends id=111 to the Arduino, then Arduino IDE process it so LED is turned on. The problem is, when I re-click the button for turning off, it sends id=111 again since it is hardcoded. Therefore how can I set the id=110 instead of id=111 when I try to turn the switch off? — Control, Oct 18 '22 at 10:28
@Control this is not hard to do, yet the logic behind it is still not clear. When you click on it, it will start with 111, then 110, 109... 0, -1, -2.... where does it end? Also when you click the button, it will be `switchOn` and then `switchOff`, then `switchOn`, `switchOff`, it just doesn't make for a good user interface. — Twisty, Oct 18 '22 at 16:09
No.. It should be only 111 and 110. Nothing more. (11 means Arduino pin, 1 means open) So when I click the button, it will be switchOn and id=111 is sent to the Arduino. Arduino reads it and says pin 11 (Led in this case) is going to be 1(open) When I click to switchOff, id=110 should be sent. — Control, Oct 18 '22 at 16:54
@Control you did not indicate that in your post and there was no way for any of us to know that. — Twisty, Oct 18 '22 at 17:30
@Control I have updated the updated code. This is based on a logic on `11` as the Pin and `1` as the Status, making up the ID. This toggle from 111 to 110 and back, I have also added 101 (100) and 121 (120) for example. — Twisty, Oct 18 '22 at 17:41
Dear @Twisty, this is exactly what I am looking for. I should have stated my problem more clearly, you're right. Very thanks for your help and knowledge. — Control, Oct 18 '22 at 21:19

Setting different ID when toggle switch is off

1 Answers1