Jump to content

Toggle Switch


Qazi
 Share

Recommended Posts

Hello everyone
I am doing an IOT project in which is am successfull to send my microcontroller data to MySQL. I am receiving data in 0 and 1.
Now what i want to do?
I just to create a toggle switch that will ON when data in database is 1 and when data is 0 it remains OFF.
secondly when i click the switch it should OFF in case it is already ON and a data 0 should be sended to database. same in case of OFF to ON.
Please help me
You can also use Javascript.

button.PNG

Link to comment
Share on other sites

<?php
$conn = mysqli_connect("localhost","root","","toggle");
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  exit();
}
 
$sql="SELECT state FROM esp  ORDER BY no DESC LIMIT 1";
$result = mysqli_query($conn,$sql);
?>
<!DOCTYPE html>
<html>
<head>
<style>
.switch {
  positionrelative;
  displayinline-block;
  width60px;
  height34px;
}
 
.switch input { 
  opacity0;
  width0;
  height0;
}
 
.slider {
  positionabsolute;
  cursorpointer;
  top0;
  left0;
  right0;
  bottom0;
  background-color#ccc;
  -webkit-transition.4s;
  transition.4s;
}
 
.slider:before {
  positionabsolute;
  content"";
  height26px;
  width26px;
  left4px;
  bottom4px;
  background-colorwhite;
  -webkit-transition.4s;
  transition.4s;
}
 
input:checked + .slider {
  background-color#2196F3;
}
 
input:focus + .slider {
  box-shadow0 0 1px #2196F3;
}
 
input:checked + .slider:before {
  -webkit-transformtranslateX(26px);
  -ms-transformtranslateX(26px);
  transformtranslateX(26px);
}
 
/* Rounded sliders */
.slider.round {
  border-radius34px;
}
 
.slider.round:before {
  border-radius50%;
}
</style>
</head>
<body>
 
<h1 style="text-align:center;">LED STATUS</h1>
<form action="" method="POST" id="myform">
  <?php
  $row2 = mysqli_fetch_assoc($result);
  if ($row2['state']==0){
  ?>
 <label class="switch">
  <input type="checkbox" name="off" onclick="myform()">
  <span class="slider round"></span>
</label>
  <?php
  } 
  elseif ($row2['state']==1) {
    ?>
    <label class="switch">
  <input type="checkbox" name="on"  onclick="myform()" checked>
  <span class="slider round"></span>
</label>
   <?php
  }
  ?>
</form>
<script>
  function myform(){
    document.getElementById("myform").submit();
    alert("okay take it easy");
  }
  </script>
  <?php
  echo $_POST['on'];
  echo $_POST['off'];
  ?>
</body>
Link to comment
Share on other sites

Use only one, identify if 'on' add or remove 'checked' and include value if you want for the opposite value

 <?php
$checked = "";
$OppisteCheckedVal = "ON";
if ($row2['state']==1){
$checked = "checked";
$OppisteCheckedVal = "OFF"; 
  } 
  ?>
 <label class="switch">
  <input type="checkbox" name="offOn" onclick="myform()" <?php echo $checked ?> value="<?php echo $OppisteCheckedVal; ?>">
  <span class="slider round"></span>
</label>

Haven't test but should give same result

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...