2017年2月25日 星期六

[Electric imp] 如何在agent 網頁顯示控制項

以往我們都把agent網頁當作一個處理我們post過去參數的後端，

如何讓它變成前端呢？


在IDE裡將以下內容貼在agent端的程式碼


const html = @"<!doctype html>
 
<html lang=""en"">
<head>
  <meta charset=""utf-8"" />
  <title>Electric Imp NeoPixel Colorpicker</title>
  <link rel=""stylesheet"" href=""https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"" />
  <script src=""https://code.jquery.com/jquery-1.9.1.js""></script>
  <script src=""https://code.jquery.com/ui/1.10.3/jquery-ui.js""></script>
  <style>
  #red, #green, #blue {
    float: left;
    clear: left;
    width: 300px;
    margin: 15px;
  }
 
  #red .ui-slider-range { background: #d3d3d3; }
  #red .ui-slider-handle { border-color: #ef2929; }
  #green .ui-slider-range { background: #8ae234; }
  #green .ui-slider-handle { border-color: #8ae234; }
  #blue .ui-slider-range { background: #729fcf; }
  #blue .ui-slider-handle { border-color: #729fcf; }
  </style>
  <script>
    function sendToImp(value){
        if (window.XMLHttpRequest) {devInfoReq=new XMLHttpRequest();}
        else {devInfoReq=new ActiveXObject(""Microsoft.XMLHTTP"");}
        try {
            devInfoReq.open('POST', document.URL, false);
            devInfoReq.send(value);
        } catch (err) {
            console.log('Error parsing device info from imp');
        }
    }
  function hexFromRGB(r, g, b) {
    var hex = [
      r.toString( 16 ),
      g.toString( 16 ),
      b.toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
      if ( val.length === 1 ) {
        hex[ nr ] = ""0"" + val;
      }
    });
    return hex.join( """" ).toUpperCase();
  }
  function refreshSwatch() {
    var red = $( ""#red"" ).slider( ""value"" ),
      green = $( ""#green"" ).slider( ""value"" ),
      blue = $( ""#blue"" ).slider( ""value"" ),
      hex = hexFromRGB( red, green, blue );
    $( ""#swatch"" ).css( ""background-color"", ""#"" + hex );
    sendToImp('{""red"":""' + red +'"",""blue"":""' + blue + '"",""green"":""' + green + '""}');
  }
  $(function() {
    $( ""#red, #green, #blue"" ).slider({
      orientation: ""horizontal"",
      range: ""min"",
      max: 255,
      value: 127,
      
      stop: refreshSwatch
    });
    $( ""#red"" ).slider( ""value"", 0 );
    $( ""#green"" ).slider( ""value"", 0 );
    $( ""#blue"" ).slider( ""value"", 0 );
  });
  </script>
</head>
<body class=""ui-widget-content"" style=""border: 0;"">
 
<p class=""ui-state-default ui-corner-all ui-helper-clearfix"" style=""padding: 4px;"">
  <span class=""ui-icon ui-icon-pencil"" style=""float: left; margin: -2px 5px 0 0;""></span>
  Lamp Web Controller 
</p>

<div id=""red""></div>
<div id=""green"" style=""display:none""></div>

<div id=""blue""></div>

<div id=""swatch"" class=""ui-widget-content ui-corner-all""></div>
 
 
</body>
</html>";

http.onrequest(function(request,res){
    if (request.body == "") {
        res.send(200, html);
    }else{
        local json = http.jsondecode(request.body);
        server.log(json)
        if("red" in json && "green" in json && "blue" in json){
            server.log("RGB: " + request.body);
            device.send("rgb", json);
        }else {
            server.log("Unrecognized Body: "+request.body);
        }
        res.send(200, "");
    }
});

執行畫面








































這是我拿一個RGB的調整範例來改的，因為只需要二個拉bar，所以我把green不顯示
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)