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. @Pavlo@Dmitriy .
@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:
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.
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.
