I'am working on a project basically using Javascript (mainly webcam libraries). What i want to achieve is to manage when and where to use each library on a specific purpose.
To walk you through, first of all I provide different features that would potentially work according to what is selected from the radio buttons (See Figure 1).
For example in Default Mode none features are applied, however on the second radio button (Face Tracking Mode), I want to access a specific library and detect the face from the given input - which works.
The issue here is that I want to :
1)stop tracking faces,
2)clear everything on the canvas,
in case of changing the radio input selection.
My first idea to solve this, is to create a function that would do that every time i call it (when i change mode-radio button) -> see last function resetCanvasFeatures() that would basically use something like faceTracking.stop();
Im not sure if the following ideas (threads or jquery) would help here.
Please if you have any suggestions let me know.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Face Tracking</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Libraries Declaration -->
<!-- p5js -->
<script type="text/javascript" src="libraries/p5.min.js"></script>
<script type="text/javascript" src="libraries/addons/p5.dom.min.js"></script>
<script type="text/javascript" src="libraries/addons/p5.sound.min.js"></script>
<!-- tracking.js -->
<script type="text/javascript" src="libraries/tracking.js-master/tracking.js-master/build/tracking.js"></script>
<script type="text/javascript" src="libraries/tracking.js-master/tracking.js-master/build/data/face-min.js"></script>
<script src="libraries/tracking.js-master/tracking.js-master/examples/assets/stats.min.js"></script>
<!-- jquery.min.js-->
<script src="libraries/jquery-3.3.1.min.js"></script>
<!--
<script src="../node_modules/dat.gui/build/dat.gui.min.js"></script>
-->
<!-- MY SCRIPT -->
<script src="scripts/faceTrackingTool.js"></script>
<!-- Reference Cascade Style Sheet -->
<link rel="stylesheet" type="text/css" href="styles\styles.css">
</head>
<body>
<!-- ADD TITLE ELEMENT -->
<div>
<h1 id="main_Title">Mirror Mirror on the Wall</h1>
<p id="description">Welcome to this website. After enabling your webcam, simply select an option from the sections below.</p>
</div>
<!-- ADD RADIO BUTTONS (Program functionality is performed) -->
<div id="radioButtonController-container">
<form name="radioButtonControllerForm">
<section id="radioButtonsSection">
<!-- DEFAULT -->
<div>
<input type="radio" id="radio0" name="radioButtonController"
value="default">
<label for="radio0">
<h2>Default Mode : </h2>
<p>Canvas draws every frame of the video - No features are implemented here</p>
</label>
</div>
<!-- FACE TRACKING -->
<div>
<input type="radio" id="radio1" name="radioButtonController"
value="faceTracking" onClick="faceTracking()">
<label for="radio1">
<h2>Face Tracking Mode : </h2>
<p>Uses tracking.js library - Detects one or more faces from the given input</p>
</label>
</div>
<!-- SLIM TOOL -->
<div>
<input type="radio" id="radio2" name="radioButtonController"
value="slimTool">
<label for="radio2">
<h2>Slim Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- HAIR TOOL -->
<div>
<input type="radio" id="radio3" name="radioButtonController"
value="hairTool" disabled>
<label for="radio3">
<h2>Hair Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- BACKGROUND TOOL -->
<div>
<input type="radio" id="radio4" name="radioButtonController"
value="backgroundTool">
<label for="radio4">
<h2>Background Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- MORPH WITH TOOL -->
<div>
<input type="radio" id="radio5" name="radioButtonController"
value="morphTool">
<label for="radio5">
<h2>Morph Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
</section>
</form>
</div>
<br/><br/>
<!-- ADD EDITED CANVAS DIV ELEMENT -->
<div id="editingCanvas-container">
<!-- <canvas id="editingCanvas-element"></canvas> is added here from faceTrackingTool.js -->
<!-- <h3>Edited Canvas</h3> -->
</div>
<!-- ADD ORIGINAL VIDEO DIV ELEMENT -->
<div id="originalVideo-container">
<!-- <video id="originalVideo-element"></video> is added here from faceTrackingTool.js -->
<!-- <h3>Original Canvas</h3> -->
</div>
</body>
</html>
JAVASCRIPT FILE:
var canvas;
var canvasWidth = 640;
var canvasHeight= 480;
var videoElement; //Holds the video element (<video....>)
var frame; //Holds an image() object of every frame of the video
var selectedRadioButton; //Holds the value of the selected radio button
var tracker;
var trackingTask;
var faceTrackingMode = false; //TRUE- Open Tracking, FALSE-Declare variables once
function setup(){
//Set Default Radio Button (Get access from <form> element)
document.radioButtonControllerForm.radioButtonController[0].checked= true; //Default Mode
//Create original canvas and move it
//so it’s inside <div id="editedCanvas-container">
canvas = createCanvas(canvasWidth, canvasHeight); //480p
canvas.parent('editingCanvas-container');
canvas.id("editingCanvas-element");
//Change the style of the canvas so it presents a mirror
document.getElementById("editingCanvas-element").style.border = "1px solid black";
document.getElementById("editingCanvas-element").style.borderRadius = "40px";
//Activate Web-Camera,set attributes and move it
//so it’s inside <div id="originalVideo-container">
videoElement = createCapture(VIDEO);
videoElement.parent('originalVideo-container');
videoElement.id("originalVideo-element");
videoElement.size(canvasWidth, canvasHeight); //480p
//originalCapture.hide(); //Do not Hide Original Capture
var canvasTitle = createElement("h3", "Editing Canvas");
canvasTitle.parent('editingCanvas-container');
var videoTitle = createElement("h3", "Original Video");
videoTitle.parent('originalVideo-container');
}
function draw(){
/* Store every frame in the variable (Holds image() Object)*/
frame = image(videoElement, 0, 0, width, height);
// (Default, Face Tracking, Slim Tool, Hair Tool, Background Tool, Morph Tool)
selectedRadioButton = getSelectedRadioButtonValue();
radioButtonsMananger(selectedRadioButton); //Pass the selected Option Value to function
}
function getSelectedRadioButtonValue(){
var selected; //Set variable to hold selected value
//Default
if (document.radioButtonControllerForm.radioButtonController[0].checked) {
selected = document.radioButtonControllerForm.radioButtonController[0].value;
}
...........
else if (document.radioButtonControllerForm.radioButtonController[5].checked) {
selected = document.radioButtonControllerForm.radioButtonController[5].value;
}
return selected; //Return selected values
}
function radioButtonsMananger(selectedOption){
switch(selectedOption){
case "default":
resetCanvasFeatures();
//console.log("use default");
break;
case "faceTracking":
resetCanvasFeatures();
//faceTracking();
break;
...........
}
}
function faceTracking(){
//Check if the variables are already declared
if(faceTrackingMode === false){
myVideo = document.getElementById('originalVideo-element');
myCanvas = document.getElementById('editingCanvas-element');
myCanvasContext = myCanvas.getContext('2d');
//Open Tracker from tracking.js library
//Open tracker - use array (ObjectTracker(['face','eye','mouth']))
tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
trackingTask = tracking.track(myVideo, tracker, { camera: true });
faceTrackingMode = true; //Set to TRUE - Do not declare those variables again
}
trackingTask.run();
tracker.on('track', function(event) {
event.data.forEach(function(rect) {
myCanvasContext.strokeStyle = '#a64ceb';
myCanvasContext.strokeRect(rect.x, rect.y, rect.width, rect.height);
myCanvasContext.font = '11px Arial';
myCanvasContext.fillStyle = '#000000 ';
myCanvasContext.fillText('x: ' + rect.x + 'px', rect.x +
rect.width + 5, rect.y + 11);
myCanvasContext.fillText('y: ' + rect.y + 'px', rect.x +
rect.width + 5, rect.y + 22);
});
});
}
function resetCanvasFeatures(){
setTimeout(function () {
trackingTask.stop();
}, 10000);
}
FIGURE
Using onchange tag on the input seems to be working great. no repeated loop functions.
<input type/id/name/value onchange="nameOfTheFunction()">
Related
The following HTML code rests inside a Modal component provided by reactstrap.
<div>
<label htmlFor="address">Location*</label>
<br />
<input
id="address"
className={classes.WholeWidthInput + " " + classes.BorderOverride}
type="text"
onChange={this.handleFormChange.bind(this, "address")}
onBlur={this.saveAddress.bind(this)}
required
placeholder="Find location"
value={this.props.post.address}
/>{" "}
<br />
</div>
The following code hooks up the google places api with the above input element.
handleGoogleSearchLoad = () => {
/* global google */
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, -180),
new google.maps.LatLng(90, 180)
);
var options = { bounds: defaultBounds, types: ['(cities)'] };
const autocomplete = new google.maps.places.Autocomplete(document.getElementById("address"), options);
autocomplete.setFields(['address_components', 'formatted_address', 'geometry']);
this.setState({autocomplete});
}
But the thing is the dropdown appears behind the modal when I type something into the form to search. I tried the .pac_container css suggestion but it didn't work or maybe I don't know where the css should have been used. Thanks in advance.
I am new in Angular and
I am facing a problem right now that is, I have a number pad and some textboxes.
I have to input to the particular textbox from number pad.
Here is the Code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = ''
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button id="btn1" ng-click="count = count + 1">1</button>
<button id="btn2" ng-click="count = count + 2">2</button>
<label>Textbox1</label><input type="text" id="Textbox1" value="{{count}}"/>
<label>Textbox2</label><input type="text" id="Textbox2" value="{{count}}"/>
</div>
</body>
</html>
Now if I click on Textbox1 then click on button 1 or 2 text should be only on Textbox1 not textbox2
is it possible to bind value to value using ng-click like this
function on controller
$scope.change = function(evt) {
evt.target.value={{count}};
alert(evt.target.id)
html
<label>Textbox1</label><input type="text" id="Textbox1" value="{{count}}" ng-click="change($event)"/>
<label>Textbox2</label><input type="text" id="Textbox2" value="{{count}}" ng-click="change($event)"/>
or some other way
I'm not 100% sure I understood what you want to do, but if I'm right, this should do what you want:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.field1count;
$scope.field2count;
$scope.selectedField = 0;
$scope.calculateField = function(amount){
var result = $scope.count + amount;
$scope.count = result;
if($scope.selectedField == 1){
$scope.field1count = result;
} else if($scope.selectedField == 2){
$scope.field2count = result;
}
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button id="btn1" ng-click="calculateField(1)">1</button>
<button id="btn2" ng-click="calculateField(2)">2</button>
<label>Textbox1</label>
<input type="text" id="Textbox1" ng-focus="selectedField = 1" ng-model="field1count"/>
<label>Textbox2</label>
<input type="text" id="Textbox2" ng-focus="selectedField = 2" ng-model="field2count"/>
</div>
</body>
</html>
If you want the two input fields to display different values, you need to actually assign them different values, as angular's two-way-binding means the value will be updated in both the model and the controller simultaneously.
Ng-focus can also be replaced by ng-click in this case, if you prefer using that. Ng-focus is triggered when the input field gains focus (When you use, for example, the tab key to reach the field, this will also be triggered), while ng-click does so when the field is clicked upon.
In this example ng-model="field1count" can also be replaced with value="{{field1count}}", as you did in your example, but the use of ng-model is more appropriate to the use of angular.
Working snippet:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.field1count;
$scope.field2count;
$scope.selectedField = 0;
$scope.calculateField = function(amount){
var result = $scope.count + amount;
$scope.count = result;
if($scope.selectedField == 1){
$scope.field1count = result;
} else if($scope.selectedField == 2){
$scope.field2count = result;
}
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button id="btn1" ng-click="calculateField(1)">1</button>
<button id="btn2" ng-click="calculateField(2)">2</button>
<label>Textbox1</label><input type="text" id="Textbox1" ng-click="selectedField = 1" ng-model="field1count"/>
<label>Textbox2</label><input type="text" id="Textbox2" ng-click="selectedField = 2" ng-model="field2count"/>
</div>
</body>
</html>
You should use two separeted ng-model on your input if what you want is to output two different datas.
But I'm not really sure of what you want to do here .. Can you try to explain it a bit more ?
I want to use the image title (meta data value from below screenshot) to auto display as each images caption underneath each image. Also for Accessibility purposes auto assign this meta value as the 'alt=""' value by default?
Current template code:
<link rel="stylesheet" href="#App.Path/dist/lib/blueimp/css/blueimp-gallery.min.css" data-enableoptimizations="true" />
<script type="text/javascript" src="#App.Path/dist/lib/blueimp/js/blueimp-gallery.min.js" data-enableoptimizations="bottom"></script>
<link rel="stylesheet" href="#App.Path/dist/app/view.css" data-enableoptimizations="true" />
#if(#Dnn.User.IsSuperUser)
{
#Content.Toolbar
} else {
#Edit.Toolbar(Content, actions: "edit,add")
}
<div id="blueimp-gallery-items-#Dnn.Module.ModuleID" style="display:none;">
#foreach (var pic in AsAdam(Content, "Images").Files)
{
<a href="#pic.Url?w=#App.Settings.CarouselImageWidth&h=#App.Settings.CarouselImageHeight&mode=crop" title="#(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID">
#(((dynamic)pic.Metadata).Title)
</a>
}
</div>
#* this is the rotator element *#
<div id='blueimp-gallery-#Dnn.Module.ModuleID' class='blueimp-gallery blueimp-gallery-carousel' data-carousel='true' data-start-slideshow="true">
<div class='slides'></div>
<h3 class='title'></h3>
<a class='prev'>‹</a>
<a class='next'>›</a>
<a class='play-pause'></a>
<ol class='indicator'></ol>
</div>
<script type="text/javascript">
$(document).ready(function () {
// initialize the carousel gallery
blueimp.Gallery($('[data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID"]').get(), {
container: '#blueimp-gallery-#Dnn.Module.ModuleID',
carousel: true
}
);
});
</script>
Also note that when I click on meta data tag, the following error message pop up appears:
Note: Version: 9.2.0
UPDATE:
Changing "Image Metadata" to "ImageMetadata" worked thx.
Still having trouble adding alt tag to each image. title shows but when I set alt to same it doesn't?
<div id="blueimp-gallery-items-#Dnn.Module.ModuleID" style="display:none;">
#foreach (var pic in AsAdam(Content, "Images").Files)
{
<a href="#pic.Url?w=#App.Settings.CarouselImageWidth&h=#App.Settings.CarouselImageHeight&mode=crop" title="#(((dynamic)pic.Metadata).Title)" alt="#(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID">
#(((dynamic)pic.Metadata).Title)
</a>
}
</div>
So you're asking a few things at the same time.
number 1: to use the title you want to check if the image has metadata, and if yes, use that. This code should help (pic is the image-variable in your loop) :
#(pic => !pic.HasMetadata ? "" : ((dynamic)pic.Metadata).Title)
number 2 seems to be an issue in the configuration. as far as I can see, the metadata-button in the default toolbar works. I checked the internal and the field-configuration is wrong - you should change it from "Image Metadata" to "ImageMetadata"
I have a client that wants the function of being able to enter a key word into a search bar and have it start to highlight the results on the page as you are typing (or after you hit search).
This is just like using the ⌘+F function on a Mac (or Ctrl+F on PC) and the browser itself pops up a search box.
He doesn't want to have to hit ⌘+F though, or have his customers to have to know that command. He wants to just have a search bar already on that page that he can type into and it start highlighting words.
ANY idea how to do this in WordPress? I've searched the internet and cannot find a tutorial on how to do it.
If not a search box, maybe a button they can click that prompts to pull up command F on a mac or Ctrl+F on a pc?
I am at a loss here and cannot figure this out. Any tips or experience with this, I would be very grateful.
So I found this on another thread and it seems to work but it only finds the first occurrence. I need it to highlight all the occurrences. Any idea how to get it to do that?
<p> hello world, hello world, hello world, hello world</p>
<!--BEGIN SEARCH BOX -->
<div class="search_box">
<form action="" id="form2">
<div>
<input type="text" id="search">
<input type="button" id="submit_form" onclick="checkInput()" value="Submit">
</div>
</form>
</div>
<!--END SEARCH BOX -->
<script>
function checkInput() {
var query = document.getElementById('search').value;
window.find(query);
return true;
}
</script>
https://codepen.io/b-jody-spedicato/pen/ExNzqQP
<html>
<head>
<script language="JavaScript">
<!--
var TRange=null;
function findString (str) {
if (parseInt(navigator.appVersion)<4) return;
var strFound;
if (window.find) {
// CODE FOR BROWSERS THAT SUPPORT window.find
strFound=self.find(str);
if (strFound && self.getSelection && !self.getSelection().anchorNode) {
strFound=self.find(str)
}
if (!strFound) {
strFound=self.find(str,0,1)
while (self.find(str,0,1)) continue
}
}
else if (navigator.appName.indexOf("Microsoft")!=-1) {
// EXPLORER-SPECIFIC CODE
if (TRange!=null) {
TRange.collapse(false)
strFound=TRange.findText(str)
if (strFound) TRange.select()
}
if (TRange==null || strFound==0) {
TRange=self.document.body.createTextRange()
strFound=TRange.findText(str)
if (strFound) TRange.select()
}
}
else if (navigator.appName=="Opera") {
alert ("Opera browsers not supported, sorry...")
return;
}
if (!strFound) alert ("String '"+str+"' not found!")
return;
}
//-->
</script>
</head>
<body>
<form name="f1" action=""
onSubmit="if(this.t1.value!=null && this.t1.value!='') findString(this.t1.value);return false">
<input type="text" name=t1 value="" size=20>
<input type="submit" name=b1 value="find">
<p>This is some sample text, do a search above to see how the search bar functions.
You can now add your own CSS styling.
</p>
</form>
</body>
</html>
I have a form that I'm putting on a webpage, and most of my users will be using IE. There's a series of radio buttons at the top, and when any of them are selected, the form below should change. Here's the code:
<html>
<head>
<script language="javascript">
function prepareForm() {
var t = document.getElementById('top');
document.getElementById('search1').style.top = t.style.top + t.style.height;
document.getElementById('search2').style.top = t.style.top + t.style.height;
document.getElementById('search3').style.top = t.style.top + t.style.height;
}
function displayForm() {
var a = document.getElementsByName('search');
var b = document.getElementsByName('searchBy');
for (i=0;i<a.length;i++) {
if (!b[i].checked) {
a[i].style.display="none";
} else {
a[i].style.display="block";
}
}
}
</script>
</head>
<body style="font-family:calibri;text-align:center;" onLoad="displayForm();">
<div id="top">
<center><h3>My webpage</h3></center>
<br>
<form method="post" action="results.html" name='myForm'>
<center><font face='calibri'>Search By:</center><br>
<center>
<input type="radio" name="searchBy" value="search1" checked onClick="displayForm();">Form one
<input type="radio" name="searchBy" value="search2" onClick="displayForm();">Form two
<input type="radio" name="searchBy" value="search3" onClick="displayForm();">Form three
</div>
<!-- search area 1 -->
<div name="search" id="search1" style="margin-left:auto;margin-right:auto;display:block;">
<p>Form 1</p>
<input type="Submit" value="Submit">
</div>
<!-- search area 2-->
<div name="search" id="search2" style="margin-left:auto;margin-right:auto;display:none;">
<p>Form 2</p>
<input type="Submit" value="Submit"></b>
</div>
<!-- search area 3 -->
<div name="search" id="geoSearch" style="margin-left:auto;margin-right:auto;display:none;">
<p>Form 3</p>
</div>
</body>
</html>
This code appears to work in Chrome, but in IE9, the displayed doesn't change when the javascript function displayForm() is called. Is there something about a div's style.display attribute that's different between IE9 and Chrome?
If you truely need help, start by searching about why IE bugs with document.getElementByID
From : http://msdn.microsoft.com/en-us/library/ie/ms536437%28v=vs.85%29.aspx :
this method performs a case-insensitive match on both the ID and NAME
attributes, which might produce unexpected results.
After reading some about it, validating over a <!doctype>, try replacing your 'name' and 'id' so they match then test it and come back here with details and more infos so WE can try to help you further more.
PostScriptum : when i read this : "I didn't know that language attribute is obsolete from HTML 4" it felt like dang! Am i waisting my time trying to help someone who will never grow in a web UI development career, didn't do his homework with all his heart, and is most likely to become a 'copy-paster' coming on Stackoverflow to ask for 'do this because i can't'.