공태현 / healthcare-with-webcam

Go to a project
Toggle navigation Toggle navigation pinning
정지호
377f31ff 1 parent 12e6311b

Design squat page

Inline Side-by-side
Showing 3 changed files with 47 additions and 20 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 2
3 button { 3 button {
4 margin: 10px; 4 margin: 10px;
5 - margin-bottom: 40px; 5 + margin-bottom: 20px;
6 } 6 }
7 7
8 .w-btn { 8 .w-btn {
...@@ -45,12 +45,21 @@ button { ...@@ -45,12 +45,21 @@ button {
45 } 45 }
46 46
47 .Title { 47 .Title {
48 - font-size : 60px; 48 + font-size : 100px;
49 + font-family: fantasy;
50 + color : aliceblue;
51 + margin-top: 15%;
52 + text-align: center;
53 +}
54 +
55 +.click_title {
56 + font-size : 40px;
49 font-family: fantasy; 57 font-family: fantasy;
50 color : aliceblue; 58 color : aliceblue;
51 - margin-top: 60px; 59 + margin-top: 40px;
52 margin-bottom: 20px; 60 margin-bottom: 20px;
53 text-align: center; 61 text-align: center;
62 + transition: 500ms;
54 } 63 }
55 64
56 .label-container { 65 .label-container {
...@@ -63,4 +72,15 @@ button { ...@@ -63,4 +72,15 @@ button {
63 72
64 .visible { 73 .visible {
65 visibility: visible; 74 visibility: visible;
75 +}
76 +
77 +.circle {
78 + margin: 20px;
79 + width: 100px;
80 + height: 100px;
81 + background-color: aliceblue;
82 + color: #2e2f30;
83 + text-align: center;
84 + border-radius: 50%;
85 + line-height: 100px;
66 } 86 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -8,22 +8,25 @@ ...@@ -8,22 +8,25 @@
8 <title>Squat Page</title> 8 <title>Squat Page</title>
9 </head> 9 </head>
10 <body bgcolor= "#353535"> 10 <body bgcolor= "#353535">
11 - <div class="Title">Squat Page</div> 11 + <div id="title" class="Title">
12 - <center> 12 + Squat Page
13 - <button class="w-btn w-btn-indigo" type="button" onclick="init()">WEBCAM START</button> 13 + <center>
14 - <div> 14 + <button class="w-btn w-btn-indigo" type="button" onclick="init()">WEBCAM START</button>
15 - <canvas id="canvas"></canvas> 15 + <div>
16 - <iframe 16 + <canvas id="canvas"></canvas>
17 - id="youtube" 17 + <iframe
18 - class="hidden" 18 + id="youtube"
19 - width="560" height="315" 19 + class="hidden"
20 - src="https://www.youtube.com/embed/9WhpAVOSyl8?start=22" 20 + width="560" height="400"
21 - title="YouTube video player" 21 + src="https://www.youtube.com/embed/9WhpAVOSyl8?start=22"
22 - frameborder="0" 22 + title="YouTube video player"
23 - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> 23 + frameborder="0"
24 - </iframe> 24 + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
25 - </div> 25 + </iframe>
26 - </center> 26 + </div>
27 + <div id="counter" class="circle">0</div>
28 + </center>
29 + </div>
27 <div id="label-container" class="label-container"></div> 30 <div id="label-container" class="label-container"></div>
28 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script> 31 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
29 <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script> 32 <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
......
...@@ -13,13 +13,16 @@ async function init() { ...@@ -13,13 +13,16 @@ async function init() {
13 var target = document.getElementById("youtube"); 13 var target = document.getElementById("youtube");
14 target.className = "visible"; 14 target.className = "visible";
15 15
16 + var target2 = document.getElementById("title");
17 + target2.className = "click_title";
18 +
16 // load the model and metadata 19 // load the model and metadata
17 // Refer to tmImage.loadFromFiles() in the API to support files from a file picker 20 // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
18 // Note: the pose library adds a tmPose object to your window (window.tmPose) 21 // Note: the pose library adds a tmPose object to your window (window.tmPose)
19 model = await tmPose.load(modelURL, metadataURL); 22 model = await tmPose.load(modelURL, metadataURL);
20 maxPredictions = model.getTotalClasses(); 23 maxPredictions = model.getTotalClasses();
21 // Convenience function to setup a webcam 24 // Convenience function to setup a webcam
22 - const size = 300; 25 + const size = 400;
23 const flip = true; // whether to flip the webcam 26 const flip = true; // whether to flip the webcam
24 webcam = new tmPose.Webcam(size, size, flip); // width, height, flip 27 webcam = new tmPose.Webcam(size, size, flip); // width, height, flip
25 await webcam.setup(); // request access to the webcam 28 await webcam.setup(); // request access to the webcam
...@@ -60,6 +63,7 @@ async function predict() { ...@@ -60,6 +63,7 @@ async function predict() {
60 var audio = new Audio('./sound/' + count%10 + '.wav'); 63 var audio = new Audio('./sound/' + count%10 + '.wav');
61 audio.play(); 64 audio.play();
62 console.log(count); 65 console.log(count);
66 + document.getElementById("counter").innerText(count);
63 } 67 }
64 status = "stand" 68 status = "stand"
65 } else if (prediction[1].probability.toFixed(2) == 1.00) { // 스쿼트 자세 69 } else if (prediction[1].probability.toFixed(2) == 1.00) { // 스쿼트 자세
......