I'm trying to develop a web server application where an external webcam streams video so the client can capture an image from the video stream with a capture button, and if its possible apply some filters with the Accord.NET framework... I just need the webcam stram and the image capture so I can convert it to bitmap... Do someone know how can I do that?
I tried with a jquery plugin but I dont know why it doesn't work. Heres the code I have in imageprocessing.aspx page:
<%# Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeBehind="imageprocessing.aspx.cs" Inherits="SpaceExplorationWeb.imageprocessing" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<title>Image Processing</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src='<%=ResolveUrl("~/Webcam_Plugin/jquery.webcam.js") %>' type="text/javascript"></script>
<script type="text/javascript">
var pageUrl = '<%=ResolveUrl("~/imageprocessing.aspx") %>';
$(function () {
jQuery("#webcam").webcam({
width: 320,
height: 240,
mode: "save",
swffile: '<%=ResolveUrl("~/Webcam_Plugin/jscam.swf") %>',
debug: function (type, status) {
$('#camStatus').append(type + ": " + status + '<br /><br />');
},
onSave: function (data) {
$.ajax({
type: "POST",
url: pageUrl + "/GetCapturedImage",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$("[id*=imgCapture]").css("visibility", "visible");
$("[id*=imgCapture]").attr("src", r.d);
},
failure: function (response) {
alert(response.d);
}
});
},
onCapture: function () {
webcam.save(pageUrl);
}
});
});
function Capture() {
webcam.capture();
return false;
}
</script>
<!--/content -->
<form runat="server">
<div class="news">
<div class="w3lnews-grid">
<div class="col-md-6 col-sm-6 news-left" >
<div id="webcam" style="height:240px; width:320px; ">
</div>
</div>
<div class="col-md-6 col-sm-6 news-right">
<h4>Real-Time Processing</h4>
<asp:DropDownList id="ddlFilters" runat="server"></asp:DropDownList>
<div class="more">
<br /><br />
<!-- <a id="applyRr" onclick="filterApplyR" href="#" class="hvr-shutter-in-vertical" data-toggle="modal" data-target="#myModal">Apply<span class="glyphicon glyphicon-arrow-right"></span></a> -->
<span id="camStatus"></span>
<asp:Button ID="applyR" runat="server" class="hvr-shutter-in-vertical" Text="Apply" onClick="applyR_Click"/>
Restore<span class="glyphicon glyphicon-arrow-right"></span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="w3lnews-grid">
<div class="col-md-6 col-sm-6 news-right">
<h4>Image Processing</h4>
<asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList>
<div class="more">
<br /><br />
<!-- <a id="applyRr" onclick="filterApplyR" href="#" class="hvr-shutter-in-vertical" data-toggle="modal" data-target="#myModal">Apply<span class="glyphicon glyphicon-arrow-right"></span></a> -->
<asp:Button ID="btnCapture" Text="Capture" class="hvr-shutter-in-vertical" runat="server" OnClientClick="return Capture()" />
<!-- <asp:Button ID="Button1" runat="server" class="hvr-shutter-in-vertical" Text="Capture" onClick="Button1_Click"/> -->
<asp:Button ID="btnFiltro" Text="Aplicar Filtro" class="hvr-shutter-in-vertical" runat="server" OnClick="btnFiltro_Click" />
</div>
</div>
<div class="col-md-6 col-sm-6 news-left">
<div class="wthree-almubimg">
<asp:Image ID="imgCapture" runat="server" height="438" style="align-content: center;" />
<!-- <img runat="server" id="img2" src="" alt=" " height="438" style="align-content: center;"/> -->
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</form>
<!-- //content -->
</asp:Content>
Related
I have an asp.net webform and I want to validate the textboxes first
Then after that (after success), go to the behind code cs
but now when I press the button it doesn't work
the jquery code:
...
<script type="text/javascript">
(function () {
'use strict';
window.addEventListener('load', function () {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
</script>
...
the aspx page:
...
<div class="form-row" style="z-index:1">
<div class="form-group col-md-4" style="z-index:1">
<label for="inputEmail4">Birth Date</label>
<asp:TextBox ID="Birth_Date" class="form-control" runat="server" style="text-align:center" ValidationGroup="check" required></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" Enabled="True" TargetControlID="Birth_Date" Format="dd/MM/yyyy">
</cc1:CalendarExtender>
<div class="invalid-feedback">
enter date
</div>
</div></div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputEmail4">phone number</label>
<asp:TextBox ID="Phone" class="form-control" runat="server" style="text-align:center; z-index:-1" ValidationGroup="check" pattern="^\d{10}$" required></asp:TextBox>
<div class="invalid-feedback">
enter phone
</div>
</div>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton ID="signup" runat="server" CssClass="btn btn-outline-success my-2 my-sm-0">save</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
...
the cs code:
...
protected void signup_Click1(object sender, EventArgs e)
{
if(Page.IsValid)
{
Birth_Date.Text = "ُWelcome";
}
}
...
I have more textbox in my aspx page
<script type="text/javascript">
function ftn(){
'use strict';
window.addEventListener('load', function () {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
}
</script>
and add onclientclick property to asp:button
<asp:LinkButton ID="signup" onclientclick="ftn()" runat="server" CssClass="btn btn-outline-success my-2 my-sm-0">save</asp:LinkButton>
This modal is not popping up at all.the modal should pop up on a failed login attempt.
I have uploaded the design and code behind code for reference.
this is design page code.
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<title>SFPL's AMS</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/assets/css/form-elements.css">
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="shortcut icon" href="/assets/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/assets/ico/apple-touch-icon-57-precomposed.png">
<script src="/assets/js/jquery-1.11.1.min.js"></script>
<script src="/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/js/jquery.backstretch.min.js"></script>
<script src="/assets/js/scripts.js"></script>
<script type="text/javascript">
function ShowPopup() {
$("#btnShowPopup").click();
}
</script>
</head>
<body >
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text">
<h1><strong>पदोन्नति</strong></h1>
<div class="description">
<p>
Login Form Pre-Design Phase Starts Here.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>xxxxxxx</h3>
<p>Enter your username and password to log on:</p>
</div>
<div class="form-top-right">
<i class="fa fa-lock"></i>
</div>
</div>
<div class="form-bottom">
<form role="form" action="" method="post" class="login-form" runat="server">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<asp:TextBox ID="txtUserName" CssClass="form-control" placeholder="Enter User ID" runat="server"></asp:TextBox>
</div>
<div class="input-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtUserName"
CssClass="text-danger" ErrorMessage="The user name field is required." />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-key"></span></span>
<asp:TextBox ID="txtPassword" CssClass="form-control" placeholder="Enter Your Password" runat="server" TextMode="Password"></asp:TextBox>
</div>
<div class="input-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtPassword" CssClass="text-danger" ErrorMessage="The password field is required." />
</div>
</div>
<div class="form-group">
<asp:Button ID="btnLogin" CssClass="btn btn-success" Text="Login"
runat="server" OnClick="btnLogin_Click" Style="width: 100%"> </asp:Button>
<asp:Label ID="lblLoginSuccess" data-toggle="modal" data-target="#myModal" runat="server" ></asp:Label>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<button type="button" style="display: none;" id="btnShowPopup" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">
Registration done Successfully</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblMessage" runat="server" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
<button type="button" class="btn btn-primary">
Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</div>
</div>
</body>
I copied this code from the the
web(https://www.aspforums.net/Threads/111893/Open-Show-BootStrap-Modal-Popup-from-Server-Side-using-C-and-VBNet-in-ASPNet/)
, this works perfectly fine in a new web-application but its not working here at all.
Please let me know what i am missing
what's running from behind is:
protected void btnLogin_Click(object sender, EventArgs e)
{
Cls_BA_FieldStaffEO user = new Cls_BA_FieldStaffEO();
user.LoadFieldStaffbyUserAccountName(txtUserName.Text);
lblLoginSuccess.CssClass = "error";
lblLoginSuccess.Text = "";
string password;
if (txtPassword.Text != "" && user.Password != null)
{
password = Cls_StringHelpers.Decrypt(user.Password.Trim());
//BEGIN: Fix for Bug ID -18020
if (txtPassword.Text == password && user.IsActive == true)
{
//END: Fix for Bug ID - 18020
Session["Roles"] = (Cls_MA_RoleEOList)ViewState["Roles"];
Session["UserID"] = user.ID;
Session["UserName"] = user.UserAccountName;
Session["BaseRegionID"] = user.RegionID;
Session["BaseRegionName"] = user.RegionName;
Session["BaseDistrictID"] = user.DistrictID;
Session["BaseDistrictName"] = user.DistrictName;
Session["BaseBranchID"] = user.BranchID;
Session["BaseBranchName"] = user.BranchName;
Session["BaseUnitID"] = user.UnitID;
Session["BaseUnitName"] = user.UnitName;
//Session["Ver"] = trigger.InnerText.Trim();
//Session["VerToolTip"] =Convert.ToString(ViewState["VerToolTip"]);
if (user.CheckDuplicateLogUser(Convert.ToInt32(Session["UserID"])))
{
//lblMsg.CssClass = "error";
Cls_MA_ListLoginUserResultBOList LoginDetails = new Cls_MA_ListLoginUserResultBOList();
LoginDetails.List(Convert.ToInt32(Session["UserID"]));
Session["UnitID"] = LoginDetails[0].UnitId;
//lblLoginSuccess.CssClass = "text-danger";
//lblLoginSuccess.Text = "<b>Please Logout As You Are ALREADY LOGGED IN </b> From <b>" + LoginDetails[0].UnitName.Trim() + "</b> Unit.<br/>Or<br />The <b>Browser Was Closed</b> Forcefully.";
ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
this.lblMessage.Text = "Your Registration is done successfully. Our team will contact you shotly";
}
else
{
Response.Redirect("~/Common/f_CN_OuterHome.aspx");
}
}
else
{
//lblLoginSuccess.Text = (string)HttpContext.GetGlobalResourceObject("Master_ErrorMessages", "regLoginSuccess");
//lblLoginSuccess.CssClass = "text-danger";
//ClearControls();
ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
this.lblMessage.Text = "Your Registration is done successfully. Our team will contact you shotly";
}
}
else
{
//lblLoginSuccess.Text = (string)HttpContext.GetGlobalResourceObject("Master_ErrorMessages", "regLoginSuccess");
//lblLoginSuccess.CssClass = "text-danger";
//ClearControls();
ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
this.lblMessage.Text = "Your Registration is done successfully. Our team will contact you shotly";
}
}
I want to append data to the repeater, the repeater has some data already on page load. But i want to remaing load data while Scrolling Page down.
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
showData();
}
});
function showData() {
PageMethods.getData(onSuccess, onError); // getData is a page webmethod thats return five record in json string.
function onSuccess(data) {
alert(data); // data has all five record.
}
function onError(data) {
alert('Problem');
}
}
</script>
.NET
<div id="Posts" class="container-fluid padded">
<asp:Repeater ID="PostsRepeater" runat="server">
<ItemTemplate>
<section>
<div class="col-md-2">
<img src="images/" <%#("ImagePath") %> alt="<%#Eval("username") %>" class="img-circle img-responsive" />
</div>
<div class="col-md-10">
<div>
<b><%#Eval("username") %></b><p><span class="glyphicon glyphicon-time"></span>Posted on Feb <%#Eval("CreationDate") %></p>
</div>
<hr>
<p><%#Eval("Status") %></p>
<img src="images/1451285316491.jpg" class="img-responsive">
</div>
<div class="row commentbox">
<div class="col-sm-2">
<div class="thumbnail">
<img class="img-responsive user-photo img-circle" src="images/1451285316491.jpg">
</div>
<!-- /thumbnail -->
</div>
<!-- /col-sm-1 -->
<div class="col-sm-10">
<div class="panel panel-default">
<div class="panel-heading">
<strong>Ali</strong> <span class="text-muted">commented 5 days ago</span>
</div>
<div class="panel-body">
This Is awsome post
</div>
<!-- /panel-body -->
</div>
<!-- /panel panel-default -->
</div>
<!-- /col-sm-6 -->
</div>
<!-- /row commentbox -->
</section>
</ItemTemplate>
</asp:Repeater>
<img id="loader" class="img-responsive col-md-offset-4" alt="" src="images/loading.gif" style="display:none" />
</div>
On window scroll, you can make a jQuery Ajax call which returns data and on success method get the response and bind it to your parent Div Posts (i.e. repeator control)
Edited: Code to bind data .i.e( Ajax success method)
function OnSuccess(response) {
var items = response.d;
var fragment='';
$.each(items, function (index, val) {
var aData_imgSRC= val.imgSRC;
var aData_USERNAME= val.USERNAME;
// .....
fragment += "<section> <div class='col-md-2'> <img src='"+aData_imgSRC+"' class='img-circle img-responsive' /> </div> <div class='col-md-10'> <div> <b>"+aData_USERNAME+"</b><p><span class='glyphicon glyphicon-time'></span>Posted on Feb "+aData_Date+"></p> </div> <hr> <p>"+aData_Status+"</p> <img src='images/1451285316491.jpg' class='img-responsive'></div> </section>";
});
$('#Posts').append(fragment);
}
I spent > 8 hours today just to make my slide works but unfortunately it didn't work.It only display the 4 static images.. Why it doesn't work? Can anybody tell me? Here is my code.
asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css" media="screen">
.slides_container {
width:570px;
height:270px;
}
.slides_container div {
width:570px;
height:270px;
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slides.js"></script>
<script>
$(function() {
$("#slides").slides({
preload: true
});
});
</script>
.........................
<div id="slides">
<div class="slides_container">
<div> <img src= "folder/6.jpg" /></div>
<div><img src="folder/7.jpg" /></div>
<div><img src="folder/extreme.jpg" /></div>
<div><img src="folder/alza.jpg" /></div>
</div>
</div>
Someone who knows my problem, please help me. Appreciate that. Have a nice Tuesday :)
I assume you make use of SlideJS? If I am correct - have a look at this demo code - which worked for me
<style type="text/css" media="screen">
.slides_container
{
width: 570px;
height: 270px;
}
.slides_container div
{
width: 570px;
height: 270px;
display: block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- downloaded from SlideJS and put it in a js folder -->
<script src="js/slides.min.jquery.js"></script>
<script>
$(function () {
$("#slides").slides({
preload: true
});
});
</script>
<div id="slides">
<div class="slides_container">
<div>
<img src="pic/1.jpg" /></div>
<div>
<img src="pic/2.jpg" /></div>
<div>
<img src="pic/3.jpg" /></div>
<div>
<img src="pic/4.jpg" /></div>
</div>
</div>
I have some html controls which default display value is none. I have anchor which is showing this form.
Form:
<div id="login_container">
<div id="login_close">
<img src="images/close.png" align="close" title="close" />
</div>
<h2>
Login</h2>
<h5 id="incorrect_login" runat="server">
Username or Password is incorrect</h5>
<span>
<p>
Username:</p>
<asp:TextBox ID="txtUserName" runat="server" CssClass="textbox" />
</span>
<br />
<span>
<p>
Password:</p>
<asp:TextBox ID="txtPasswrod" runat="server" CssClass="textbox" TextMode="Password" />
</span><span>Remember Me
<input type="checkbox" id="chkbRememberMe" class="checkox" runat="server" />
</span>
<input type="button" class="default_button" id="btnLogin" value="Login" runat="server"
onserverclick="btnLogin_Click" />
<br />
<div id="forgot">
Forgot you username?
<br />
Forgot you password?
</div>
</div>
</div>
jquery:
var AnimateLoginShow = function () {
$('#login_form').css('display', 'none');
$('#back_drop, #login_container').animate({ 'opacity': '0.3' }, 200, 'linear');
$('#login_container').animate({ 'opacity': '1.00' }, 0, 'linear');
$('#login_container').animate({ 'width': '430' }, 150, 'linear');
$('#login_container').animate({ 'height': '280' }, 150, 'linear');
$('#login_form').css('display', 'block');
$('#login_form').animate({ 'opacity': '1.00' }, 300, 'linear');
$('#back_drop, #login_container').css('display', 'block');
}
$('#login').click(function () {
AnimateLoginShow();
});
So my problem is that when user clicks login button (on this form) which have code behind this form is Returns to its original state (display:none)
p.s this form is inside ajax update panel
It looks like you need to add script by calling ScriptManager.RegisterStartupScript method to show elements on page:
ScriptManager.RegisterStartupScript(this, this.GetType(), this.ID, "$('#back_drop, #login_container').css('display', 'block');", true);