Skip to content

Sd project #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Sd project #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
af5609a
1
Yeok-c May 7, 2021
659867a
2
Yeok-c May 7, 2021
6b2ff29
Revert "1"
Yeok-c May 8, 2021
87d902b
Revert "2"
Yeok-c May 8, 2021
0c7a12c
Added detection
Yeok-c May 10, 2021
9558121
Updated SD branch
Yeok-c Sep 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 144 additions & 1 deletion js/pose.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,145 @@ function zColor(data) {
return `rgba(0, ${255 * z}, ${255 * (1 - z)}, 1)`;
}


var prev_nose;
var previous_wrist_left;
var previous_wrist_right;


function onResultsPose(results) {
document.body.classList.add('loaded');
fpsControl.tick();

var wrist_right = results.poseLandmarks[16];
var wrist_left = results.poseLandmarks[15];
var nose = results.poseLandmarks[0];
var shoulder_right = results.poseLandmarks[11];
var shoulder_left = results.poseLandmarks[12];

var hip_right = results.poseLandmarks[23];
var knee_right = results.poseLandmarks[25];
var ankle_right = results.poseLandmarks[27];

var hip_left = results.poseLandmarks[24];
var knee_left = results.poseLandmarks[26];
var ankle_left = results.poseLandmarks[28];

var standing;
var moving;
var sleeping;

//Scale all variables according to shoulder width

//Detect if Person (if less than 50% confidence on landmarks above hips, assume no person)
textContent=document.getElementsByClassName("pose_results")[0];
var j;
var visibility_count = 0;
for(j = 0; j < 25; j++){
if(results.poseLandmarks[j].visibility > 0.7) visibility_count++;
}
if(visibility_count > 15) textContent.innerHTML = 'visible nodes: ' + visibility_count + ' -> Able to determine posture';
else textContent.innerHTML = 'visible nodes: ' + visibility_count + ' -> Unable to determine posture!';

//STATICS ------------------------------

//Lie down detection
textContent=document.getElementsByClassName("pose_results")[1];
//var scale = Math.sqrt((shoulder_right.y-shoulder_left.y)**2 + (shoulder_right.x-shoulder_left.x)**2)
var shoulder_average = (shoulder_left.y + shoulder_right.y) / 2;
var hip_average = (hip_left.y + hip_right.y) / 2;
//var difference = (hip_average - shoulder_average) / scale;
var difference = (hip_average - shoulder_average);
//textContent.innerHTML = difference;

if(difference> 0.1){
textContent.innerHTML = 'Not lying down, difference: ' + difference ;
standing = 1;
sleeping = 0;
} else {
textContent.innerHTML = 'Lying down, difference: ' + difference;
standing = 0;
sleeping = 1;
}

//Sitting vs standing detection - bent knees
textContent=document.getElementsByClassName("pose_results")[2];
var knee_average = (knee_left.y + knee_right.y) / 2;
var hip_average = (hip_left.y + hip_right.y) / 2;
difference = knee_average - hip_average;
if(difference> 0.1){
textContent.innerHTML = 'Not sitting, difference: ' + difference;
standing = 1;
} else {
textContent.innerHTML = 'Sitting, difference: ' + difference;
standing = 0;
}

//Sitting vs standing detection - bent knees
textContent=document.getElementsByClassName("pose_results")[3];
var left_hand_difference = nose.y - wrist_left.y;
var right_hand_difference = nose.y - wrist_right.y;
textContent.innerHTML = 'Right hand raised: ' + right_hand_difference;



textContent.innerHTML = 'No hand raised';
if(sleeping == 0){
if(right_hand_difference > 0){
textContent.innerHTML = 'Right hand raised: ' + right_hand_difference;
}
if(left_hand_difference > 0){
textContent.innerHTML = 'left hand raised: ' + left_hand_difference;
}
if(right_hand_difference > 0 && left_hand_difference > 0){
textContent.innerHTML = 'Both hands raised';
}
}

//-------------------------------------

//MOVING-------------------------------
/*
//Hand movement detection (exercise)
textContent=document.getElementsByClassName("pose_results")[3];
var avg_hand_movement = (DISTANCE(wrist_left.x, wrist_left.y, previous_wrist_left.x, previous_wrist_left.y) + DISTANCE(wrist_right.x, wrist_right.y, previous_wrist_right.x, previous_wrist_right.y)) / 2;

previous_wrist_right.x = wrist_right.x;
previous_wrist_left.x = wrist_left.x;
previous_wrist_right.y = wrist_right.y;
previous_wrist_left.y = wrist_left.y;

if(standing == 1){
if(avg_hand_movement> 0.3){
textContent.innerHTML = 'Exercising, Hand Movement: ' + avg_hand_movement;
}
else {
textContent.innerHTML = 'Not exercising, Hand Movement: ' + avg_hand_movement;
}
} else {
textContent.innerHTML = 'Not exercising, Hand Movement: ' + avg_hand_movement;
}
*/
/*
//Walking fast detection
textContent=document.getElementsByClassName("pose_results")[4];
var shoulder_average_movement = DISTANCE(shoulder_average, previous_shoulder_average);
if(sleeping == 0){
if(difference> 0.3){
textContent.innerHTML = 'Hand Movement: ' + difference + ' -> exercising';
}
else {
textContent.innerHTML = 'Hand Movement: ' + difference + ' -> not exercising';
}
} else {
textContent.innerHTML = 'Hand Movement: ' + difference + ' -> not exercising';
}
*/

//-----------------------------------


console.log(results.poseLandmarks[0]);

canvasCtx5.save();
canvasCtx5.clearRect(0, 0, out5.width, out5.height);
Expand Down Expand Up @@ -60,6 +196,12 @@ function onResultsPose(results) {
canvasCtx5.restore();
}


function DISTANCE(ax, bx, ay, by)
{
return Math.sqrt((ax-bx)**2 + (ay-by)**2);
}

const pose = new Pose({locateFile: (file) => {
return `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`;
}});
Expand All @@ -74,8 +216,9 @@ const camera = new Camera(video5, {
});
camera.start();


new ControlPanel(controlsElement5, {
selfieMode: true,
selfieMode: false,
upperBodyOnly: false,
smoothLandmarks: true,
minDetectionConfidence: 0.5,
Expand Down
82 changes: 82 additions & 0 deletions pose - Copy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/control_utils.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="demo.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/camera_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/control_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/drawing_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/pose.js" crossorigin="anonymous"></script>

<style type = text/css>
.landmark_coordinates {
overflow-wrap: break-word;
word-wrap: break-word;
}
</style>
</head>



<body>

<!-- CONTENTS -->
<div class="container" style="margin-top: 20px;">

<video style="visibility: hidden; height:0; width:0;" class="input_video5"></video>

<div class="columns">

<!-- MEDIAPIPE OUTPUT -->
<div class="column is-two-thirds">
<article class="panel is-info">
<p class="panel-heading">
Mediapipe Pose Detection
</p>
<div class="panel-block">

<canvas class="output5" width="480px" height="480px"></canvas>
</div>
</article>
</div>
<!-- MEDIAPIPE OUTPUT -->
<div class="column">
<article class="panel is-info">
<p class="panel-heading">
Detection Results
</p>
<div class="panel-block">
<p class = "pose_results">Initializing</p>
</div>

<div class="panel-block">
<p class = "pose_results">Initializing</p>
</div>

<div class="panel-block">
<p class = "pose_results">Initializing</p>
</div>

<div class="panel-block">
<p class = "pose_results">Initializing</p>
</div>


</article>
</div>

</div>

<div class="loading">
<div class="spinner"></div>
</div>
<div style="visibility: hidden;" class="control5">
</div>


<script type="text/javascript" src="./js/pose.js"></script>
</body>
</html>
95 changes: 40 additions & 55 deletions pose.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,80 +10,64 @@
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/control_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/drawing_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/pose.js" crossorigin="anonymous"></script>
</head>

<body>

<!-- BULMA NAVBAR -->
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="index.html">
<img src="https://camo.githubusercontent.com/82f2bfa2005e2755362d419da02d788b366506b0d55212c160abd5100f3a8822/68747470733a2f2f312e62702e626c6f6773706f742e636f6d2f2d7753746b30565a44664d6b2f59434330474952507244492f41414141414141414147632f31796a37494f556564766f654f3143754378713745544c57304671586e69366d77434c63424741735948512f733332302f6c6f676f746578742e706e67" >
</a>

<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>

<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="face.html">
Face
</a>

<a class="navbar-item" href="faceMesh.html">
Face Mesh
</a>

<a class="navbar-item" href="hands.html">
Hands
</a>
<style type = text/css>
.landmark_coordinates {
overflow-wrap: break-word;
word-wrap: break-word;
}
</style>
</head>

<a class="navbar-item" href="pose.html">
Pose
</a>

<a class="navbar-item" href="holistic.html">
Holistic
</a>

</div>
</div>

</div>
</nav>
<body>

<!-- CONTENTS -->
<div class="container" style="margin-top: 20px;">

<video style="visibility: hidden; height:0; width:0;" class="input_video5"></video>

<div class="columns">

<!-- WEBCAM INPUT -->
<div class="column">
<article class="panel is-info">
<p class="panel-heading">
Webcam Input
</p>
<div class="panel-block">
<video class="input_video5"></video>
</div>
</article>
</div>

<!-- MEDIAPIPE OUTPUT -->
<div class="column">
<div class="column is-two-thirds">
<article class="panel is-info">
<p class="panel-heading">
Mediapipe Pose Detection
</p>
<div class="panel-block">

<canvas class="output5" width="480px" height="480px"></canvas>
</div>
</article>
</div>
</div>
<!-- MEDIAPIPE OUTPUT -->
<div class="column">
<article class="panel is-info">
<p class="panel-heading">
Detection Results
</p>
<div class="panel-block">
<p class = "pose_results">Initializing</p>
</div>

<div class="panel-block">
<p class = "pose_results">Initializing</p>
</div>

<div class="panel-block">
<p class = "pose_results">Initializing</p>
</div>

<div class="panel-block">
<p class = "pose_results">Initializing</p>
</div>


</article>
</div>

</div>

<div class="loading">
Expand All @@ -92,6 +76,7 @@
<div style="visibility: hidden;" class="control5">
</div>


<script type="text/javascript" src="./js/pose.js"></script>
</body>
</html>