Copyright © https://mongoose-os.com

Mongoose OS Forum

frame

Using html file to trigger events

scymynscymyn Pretoria
edited October 8 in mJS JavaScript engine

Hi
I am trying to get this to work but it seems to have a problem registering the RPC events, so the buttons dont do anything:

my index.html:

<html>
<head>
<style>
  /* Copyright 2014 Owen Versteeg; MIT licensed */body,textarea,input,select{background:0;border-radius:0;font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}label>*{display:inline}form>*{display:block;margin-bottom:10px}.btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:2px 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 14px 11px}.row{margin:1% 0;overflow:auto}.col{float:left}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}h1{font-size:3em}.btn,h2{font-size:2em}.ico{font:33px Arial Unicode MS,Lucida Sans Unicode}.addon,.btn-sm,.nav,textarea,input,select{outline:0;font-size:14px}textarea,input,select{padding:8px;border:1px solid #ccc}textarea:focus,input:focus,select:focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em}.addon{padding:8px 12px;box-shadow:0 0 0 1px #ccc}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin:-54px 7px;display:none}@media(min-width:1310px){.container{margin:auto;width:1270px}}@media(max-width:870px){.row .col{width:100%}}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{padding:.5em 0;display:block;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}.msg{padding:1.5em;background:#def;border-left:5px solid #59d}
  .hero { background: #eee; padding: 20px; border-radius: 10px; margin-top: 1em; }
  .hero h1 { margin-top: 0; margin-bottom: 0.3em; }
  .c4 { padding: 10px; box-sizing: border-box; }
  .c4 h3 { margin-top: 0; }
  .c4 a { margin-top: 10px; display: inline-block; }
  .form-control { margin: 0.5em 0; }
  .form label { min-width: 8em; display: inline-block; }
  #result {
    background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 5px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    min-height: 7em; white-space: pre; padding: 0.5em; overflow: auto;
  }
</style>
<script src="zepto.min.js"></script>

</head>
<body>
  <nav class="hero" tabindex="-1">
    <div class="container">
      <h1>Isert Test Facility</h1>
   </div>
 </nav>
 <div class="container">
  <div class="hero">




  <div class="row form">

    <div class="col c4">
      <div class="form-control">

    <div class="form-control"><button href="#" class="btn btn-sm btn-c" id="sendAT">Send AT</button></div>
        <div class="form-control"><button href="#" class="btn btn-sm btn-c" id="sendGetDeviceID">Get Device ID</button></div>
        <div class="form-control"><button href="#" class="btn btn-sm btn-c" id="sendGetDevicePAC">Get Device PAC</button></div>
        <div class="form-control"><button href="#" class="btn btn-sm btn-c" id="sendSetFullPower">Set Full Power</button></div>
        <div class="form-control"><button href="#" class="btn btn-sm btn-c" id="sendCW_On">Send Continuous Wave On</button></div>
        <div class="form-control"><button href="#" class="btn btn-sm btn-c" id="sendCW_Off">Send Continuous Wave Off</button></div>
        <div class="form-control"><button href="#" class="btn btn-sm btn-c" id="sendMW_On">Send Modulation Wave On</button></div>
        <div class="form-control"><button href="#" class="btn btn-sm btn-c" id="sendMW_Off">Send Modulation Wave Off</button></div>
      </div>


    </div>

    <div class="col c8">
      <!-- <h3>Result:</h3> -->
      <div id="result"></div>
    </div>

  </div>
</div>

<script>

let log = function(msg){
  $('<span/>').html(msg + '\n').appendTo('#result')
};

  $('#sendAT').on('click', function() {
    log('Sending sendAT  ...');
    print('Sent AT');
    $.ajax({
      url: '/rpc/call.sendAT',
      type: 'POST',
      data: JSON.stringify({}),
      // contentType: 'application/json',
      success: function(data) {
        log('Sent sendAT');

      },
    })
  });




    $('#sendSetFullPower').on('click', function() {
    log('Sending sendSetFullPower  ...');
    $.ajax({
      url: '/rpc/call.sendSetFullPower',
      type: 'POST',
      data: JSON.stringify({}),
      // contentType: 'application/json',
      success: function(data) {
        log('Sent sendSetFullPower');

      },
    })
  });




    $('#sendGetDeviceID').on('click', function() {
    log('Sending sendGetDeviceID  ...');
    $.ajax({
      url: '/rpc/call.sendGetDeviceID',
      type: 'POST',
      data: JSON.stringify({}),
      // contentType: 'application/json',
      success: function(data) {
        log('Sent sendGetDeviceID');

      },
    })
  });



    $('#sendGetDevicePAC').on('click', function() {
    log('Sending sendGetDevicePAC  ...');
    $.ajax({
      url: '/rpc/call.sendGetDevicePAC',
      type: 'POST',
      data: JSON.stringify({}),
      // contentType: 'application/json',
      success: function(data) {
        log('Sent sendGetDevicePAC');

      },
    })
  });



    $('#sendGoToCWE').on('click', function() {
    log('Sending sendCW_On  ...');
    $.ajax({
      url: '/rpc/call.sendCW_On',
      type: 'POST',
      data: JSON.stringify({}),
      // contentType: 'application/json',
      success: function(data) {
        log('Send sendCW_On');

      },
    })
  });


    $('#sendCW_Off').on('click', function() {
    log('Sending sendCW_Off  ...');
    $.ajax({
      url: '/rpc/call.sendCW_Off',
      type: 'POST',
      data: JSON.stringify({}),
      // contentType: 'application/json',
      success: function(data) {
        log('Sent sendCW_Off');

      },
    })
  });



    $('#sendMW_On').on('click', function() {
    log('Sending sendMW_On  ...');
    $.ajax({
      url: '/rpc/call.sendMW_On',
      type: 'POST',
      data: JSON.stringify({}),
      // contentType: 'application/json',
      success: function(data) {
        log('Sent sendMW_On');

      },
    })
  });

  $('#sendMW_Off').on('click', function() {
    log('Sending sendMW_Off  ...');
    $.ajax({
      url: '/rpc/call.sendMW_Off',
      type: 'POST',
      data: JSON.stringify({}),
      // contentType: 'application/json',
      success: function(data) {
        log('Sent sendMW_Off');

      },
    })
  });

</script>
</body>
</html>

Comments

  • scymynscymyn Pretoria
    edited October 8

    And the init,js:

    load('api_config.js');
    load('api_rpc.js');
    load('api_uart.js');
    load('api_sys.js');
    
    
    
    let uartNo = 2;   // Uart number used for this example
    let rxAcc = '';   // Accumulated Rx data, will be echoed back to Tx
    let value = false;
    
    print('init.js started');
    
    
    
    // Configure UART at 115200 baud
    UART.setConfig(uartNo, {
      baudRate: 9600,
      esp32: {
        gpio: {
          rx: 16,
          tx: 17,
        },
      },
    });
    
    // Set dispatcher callback, it will be called whenver new Rx data or space in
    // the Tx buffer becomes available
    UART.setDispatcher(uartNo, function(uartNo) {
      let ra = UART.readAvail(uartNo);
      if (ra > 0) {
        // Received new data: print it immediately to the console, and also
        // accumulate in the "rxAcc" variable which will be echoed back to UART later
        let data = UART.read(uartNo);
        print('Received UART data:', data);
        rxacc = data;
        log(data);
    
        }
    
    }, null);
    
    // Enable Rx
    UART.setRxEnabled(uartNo, true);
    
    
    function sendAT()
    {
      UART.write(
        uartNo,
        'AT\n');
        print ('Sent AT');
        return rxAcc;
    
    }
    
    
    
    function sendSetFullPower()
    {
        UART.write(
        uartNo,
        'ATS302=15\n');
        print ('Sent sendSetFullPower');
        return rxAcc;
    
    }
    
    
    function sendGetDeviceID()
    {
      UART.write(
        uartNo,
        'AT$I=10\n');
        print ('Sent getDeviceID');
        return rxAcc;
    }
    
    
    
    function sendGetDevicePAC()
    {
      UART.write(
        uartNo,
        'AT$I=11\n');
        print ('Sent getDevicePAC');
        return rxAcc;
    
    }
    
    
    
    function sendCW_On()
    {
      UART.write(
        uartNo,
        'AT$CW=868130000,1,15\n');
        print ('Sent sendCW_On');
        return rxAcc;
    
    }
    
    
    
    function sendCW_Off()
    {
      UART.write(
        uartNo,
        'AT$CW=868130000,0,15\n');
        print ('Sent sendCW_Off');
        return rxAcc;
    
    }
    
    
    function sendMW_On()
    {
      UART.write(
        uartNo,
        'AT$IF=868130000,1,15\n');
        print ('Sent sendMW_On');
        return rxAcc;
    
    }
    
    
    
    function sendMW_Off()
    {
      UART.write(
        uartNo,
        'AT$IF=868130000,0,15\n');
        print ('Sent sendMW_Off');
        return rxAcc;
    
    }
    
    RPC.addHandler('call.sendAT', function(args) {
      return { value: sendAT() };
        });
    
    RPC.addHandler('call.sendSetFullPower', function(args) {
      return { value: sendSetFullPower() };
        });
    
    RPC.addHandler('call.sendGetDeviceID', function(args) {
      return { value: sendGetDeviceID() };
        });
    
    RPC.addHandler('call.sendGetDevicePAC', function(args) {
      return { value: sendGetDevicePAC() };
        });
    
    RPC.addHandler('call.sendCW_On', function(args) {
      return { value: sendCW_On() };
        });
    
    RPC.addHandler('call.sendCW_Off', function(args) {
      return { value: sendCW_Off() };
        });
    
    
    RPC.addHandler('call.sendMW_On', function(args) {
      return { value: sendMW_On() };
        });
    
    RPC.addHandler('call.sendMW_Off', function(args) {
      return { value: sendMW_Off() };
        });
    
Sign In or Register to comment.