Blynk Web Dashboard

Hello Guys,
First of all thanks to Blynk team for creating such wonderful platform.
I want share some work done my brother.He is web designer.
we have created Blynk Web Dashboard.because we love Blynk.
Everyone of you are invited to test this Dashboard.& contribute to this project.
Now,it supports only virtual pins.for adding buttons just enter your blynk token then Enter pin no.=V Pin no.
eg,v4.
by default server is blynk-cloud.com.
http://codepen.io/shrikantgg/full/oYgoxm/

http://codepen.io/shrikantgg/full/oYgoxm/

https://gist.github.com/shrikantgg/6c4f5af76fadc8433954d39f9c85dcf7
What you think let me know.
@Pavel @Dmitriy .

15 Likes

Nice work @saurabh47
We have modified our copy of the code to function locally for Blynkers that don’t use / cant have port forwarding.

Details to follow in due course.

5 Likes

I saw you have also added blynk theme in project information.
I think of adding information about no.widgets and there types.

I was just trying out my none existent java script skills :slight_smile:

2 Likes

Great start! Thanks.

Let’s see how it can be developed.

2 Likes

This is great! I was building something similar myself but will just help develop this instead (because it looks very nice!)

2 Likes

@jamin and others I have been unwell for the last few days and still not recovered but I just wanted to provide a few details.

The html, css and js can be pulled from the codepen site that @saurabh47 linked to.

The index.js for local network use and not requiring a token or server to be entered is as follows:

 $(document).ready(function() {
  

  
  
 $("#sub").click(function(){
   
   var t =$('#focusedInput').val();
   // if no token is entered us this default token
   if (t == "")
	{
		t ="cf15d990fdf7481ebca8615d8dc02a0d";
	}
	//
   var cs =$('#csInput').val();
   if (cs!="" && cs!=null)
     {
         var api = "http://"+cs+":8080/"+t+"/project";
     }else
       {
           var api = "http://192.168.10.145:8080/"+t+"/project";
       }
 
   

    $.getJSON(api,function(data){      
var projectname =data.name;
 var boardTyp = data.boardType;
  var theme = data.theme;
  $("#pn").html(projectname);
    $("#bt").html(boardTyp);
	  $("#th").html(theme);
});
 });


   $("#subpin").click(function () {
     
var buttonlable = $('#epin').val();
     var divid = "div"+buttonlable;
     if(buttonlable!="")
     var bt ="<div id="+divid+" class='alert'><div class='col-sm-2'><legend>"+buttonlable+"</legend></div><div class='col-sm-2'><label class='switch'><input type='checkbox' id="+buttonlable+" value='On'   onclick='toggleCheckbox(this)'><div class='slider round'></div></label></div><div class='col-sm-2'><a href='#' class='btn btn-danger' id="+divid+"    onclick='remo(this)'>Remove</a></div></div><br>";
     
 $("#adddata").append(bt); 
     $('#epin').val("");
    });
  
  

});

Obviously you would need to change to token and IP in javascript above for your own use. Currently we are running nginx on the same Pi as the Blynk server for our tests.

The revised index.html is shown below but remember this is only for local use as the token will be visible to anyone that looks at the source of the webpage. Again there are 2 places in the code where the server IP is hard coded and 1 place for the token.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title> Blynk Web Console</title>
  
  
  <link rel='stylesheet prefetch' href='https://bootswatch.com/flatly/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
 <a class="navbar-brand" href="#">Blynk Web Console</a>
</div>
</div>
</nav>
<div class="container">
<div class="col-sm-2"><legend>Blynk Token</legend></div>
<div class="col-sm-3"><input class="form-control" id="focusedInput" type="text"></div>
  <div class="col-sm-2"><legend>Blynk Server</legend></div>
<div class="col-sm-3"><input class="form-control" id="csInput" type="text" placeholder="192.168.10.145"></div>
  
 <div class="col-sm-2">  <button id="sub"  class="btn btn-primary">Connect</button></div>
</div>
 <br>
<div class="container">
<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">Project Information</h3>
  </div>
  <div class="panel-body">
<div class="container">
  <div class="col-sm-3"><label>Project Name :</label></div>
   <div class="col-sm-9"><label id="pn">------ </label></div>
  
    <div class="col-sm-3"><label>Board Type :</label></div>
   <div class="col-sm-9"><label id="bt">------</label></div>
   
    <div class="col-sm-3"><label>Theme :</label></div>
   <div class="col-sm-9"><label id="th">------</label></div>
</div>
    
  </div>
</div>
</div>
<div class="container ">

 <div class="container">
<div class="col-sm-2"><legend>Enter Pin No</legend></div>
<div class="col-sm-2"><input class="form-control" id="epin" type="text"></div>
 <div class="col-sm-5">  <button id="subpin"  class="btn btn-primary">Add Button</button></div>
</div>
  
  <br>
  
  <div class="text-center" id="adddata">

    
  </div>
  
</div> 



<script>
  function toggleCheckbox(element)
 {
     var e =element.id;

     currentvalue = document.getElementById(e).value;
  if(currentvalue == "Off"){
  var c=0
 document.getElementById(e).value="On";
     
  }else{
      var c=1
    document.getElementById(e).value="Off";
  }
   

    var t =$('#focusedInput').val();
      // if no token is entered us this default token
   if (t == "")
	{
		t ="cf15d990fdf7481ebca8615d8dc02a0d";
	}	
   var cs =$('#csInput').val();
   if (cs!="" && cs!=null)
     {

       var ashow ="http://"+cs+":8080/"+t+"/update/"+e+"?value="+c;
     }else
       {
 var ashow ="http://192.168.10.145:8080/"+t+"/update/"+e+"?value="+c;
       }
   




   $.getJSON(ashow, function (data) {
             
             });
 }
  
   function remo(element)
  {
     var e = "#"+element.id;

    $(e).remove();
    
  }
  
  
</script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

If anyone has javascript skills what would be nice is for the virtual buttons to load up automatically when you press the Connect button rather than having to enter them every time you reload the page.

@saurabh47 has offered the following extract as a starting position:

for(i=0;i<=last no. Widget; i++)
  If((widget[i].type==BUTTON)&&(widget[i].pinType==VIRTUAL))
  {

     //Create buttons;

  }
2 Likes

Small new features added.

  1. hardware Status.
    2)on summiting token buttons will reflact its real position
    I am thinking about drag and drop widgets.if anyone knows how to make this please contribute to this work.
2 Likes

@saurabh47 tested your hardware status and button status mods and they are working very nicely.

1 Like

Hi.
Could you post tutorial how-to deploy this system on the Rasperry PI (Raspbian+Blynk local server)?

Install nginx webserver on the Pi and then you are good to go.

Im sure going to try this after 21 dec

1 Like

actually code is working fine with digital pins. just try to use like “d13”.

1 Like

Cool.
I had tried like D13.

It doesn’t work for digital pin right when can we expect the digital pin?

After 28 dec i will try.

@Dmitriy
Is there http api for controlling digital pins?
Virtual pins works fine.

@saurabh47 surely you can just put the digital interface inside the virtual pin call, right?

Not working.
Have you tried for Digital pins??

Busy with other things but I can’t see how it could fail.

You enter virtual pin in the dashboard and the sketch for the virtual pin includes digital pin control.

Yes,we can do this by writing 2-3 line in sketch for virtual pin to control digital pin.
But i am not understanding why it doesn’t works.
Some peoples starts Blynking by just directly controlling Digital pins.