How to create a single button to power on and off bulb for Arduino in html?

Asked

Viewed 2,052 times

3

Good afternoon guys!! I’m new to everything in the programming universe, but I’m venturing into Rduino, php and html!! I would like to know how to pass two values in a single html button. Type when once clicking call a file . php and light the bulb and while clicking again call another file. php and delete the bulb. Someone could help me???

Follow php code to light bulb :

   $port = fopen("COM1", "w");
            fwrite($port, "1");
            header ("Location:../index.html");
            fclose($port);

From now on I thank you all!!

php html arduino

2 answers

1

Using the Bootstrap together with the Bootstrap Toggle, can customize and leave with an appearance of a switch.

For functionality, I will use AJAX to make the call to PHP:

$(document).on('change', '#switch', function() {

    selectedValue = (this.checked ? 1 : 0);

    $.ajax({
        url: 'arduino.php',
        type: 'POST',
        data: {switch : selectedValue},
        success: function() {
            alert("Ok!")
        }
    });

});

In your file arduino.php make the change:

<?php 

if(isset($_POST['switch'])) {
    $port = fopen("COM1", "w");
    fwrite($port, $_POST['switch']);
    fclose($port);  
}

  • Thank you so much for the help friend!! I will Test.

0

Excellent friend!! Thank you very much, I followed your advice and managed to make the button with bootstrap, on the basis of copy and paste kkk. I just don’t know where I put your html code. Follow the html code I made:

Remembering I’m a layman on the subject D:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>

  <link rel="canonical" href="http://www.bootstraptoggle.com">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="css/bootstrap-toggle.css" rel="stylesheet">
  <link href="doc/stylesheet.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<body>


  <main>
    <div class="container">
      <h3>Exemplo simples</h3>
      <p>Teste de botao funcionando</p>
      <div class="example">
        <input type="checkbox" checked data-toggle="toggle">
      </div>
      <script src="js/bootstrap-toggle.js"></script>
  </main>

</body>

</html>

Browser other questions tagged php html arduino

You are not signed in. Login or sign up in order to post.