Browse Source

pipe line added

master
JayPY Code 6 months ago
parent
commit
ac2e9b8be3
6 changed files with 261 additions and 174 deletions
  1. +3
    -0
      public/index.html
  2. +74
    -36
      public/script.js
  3. +12
    -10
      src/components/measurement.pipe.scss
  4. +44
    -0
      src/components/measurement.pipe/measurement.pipe.line.scss
  5. +89
    -89
      src/components/measurement.pipe/measurement.pipe.marker.scss
  6. +39
    -39
      src/components/measurement.pipe/measurement.pipe.marks.scss

+ 3
- 0
public/index.html View File

@ -44,6 +44,9 @@
</div>
<div class="measurement-pipe">
<div class="line">
<div class="background"></div>
</div>
<div class="marks">
<div class="marker top">
<span class="top">0</span>

+ 74
- 36
public/script.js View File

@ -1,50 +1,88 @@
let pipe_bottom_gap, pipe_top_gap;
const NewMeasurementCircle = (id, labels = []) => {
let element = document.getElementById(id);
let ul = document.createElement('ul');
const CreateLabel = (label, length = 10) => {
for (let i = 0; i < length; i++) {
let li = document.createElement('li');
if (i == 0) {
let span = document.createElement('span');
span.innerText = label;
li.appendChild(span);
li.className = 'label'
}
if (i == 5) li.className = 'half';
ul.appendChild(li);
}
}
let element = document.getElementById(id);
let ul = document.createElement("ul");
for (let label of labels) {
CreateLabel(label, labels.indexOf(label) == labels.length - 1 ? 1 : 10);
const CreateLabel = (label, length = 10) => {
for (let i = 0; i < length; i++) {
let li = document.createElement("li");
if (i == 0) {
let span = document.createElement("span");
span.innerText = label;
li.appendChild(span);
li.className = "label";
}
if (i == 5) li.className = "half";
ul.appendChild(li);
}
};
for (let label of labels) {
CreateLabel(label, labels.indexOf(label) == labels.length - 1 ? 1 : 10);
}
element.appendChild(ul);
}
element.appendChild(ul);
};
const ChangeMeasurementCircleArrow = (id, to) => {
let min = -270, max = 0;
let element = document.querySelector(`#${id} div.arrow`);
let rotate = (to * (max - min) / 100) + min;
element.style.transform = `rotate(${rotate}deg)`;
}
let min = -270,
max = 0;
let element = document.querySelector(`#${id} div.arrow`);
let rotate = (to * (max - min)) / 100 + min;
element.style.transform = `rotate(${rotate}deg)`;
};
const ShowIconByName = (name) => {
document.querySelector(`div.icons div.icon.${name}`).classList.add('show';);
}
document.querySelector(`div.icons div.icon.${name}`).classList.add("show";);
};
const HideIconByName = (name) => {
document.querySelector(`div.icons div.icon.${name}`).classList.remove('show');
}
document.querySelector(`div.icons div.icon.${name}`).classList.remove("show");
};
const SetPipePercent = (key = "top", percent = 0) => {
let top_max = 390,
top_min = 36,
bottom_max = 562,
bottom_min = 915;
let line = document.querySelector(
"div.measurement-pipe div.line div.background"
);
if (pipe_bottom_gap == null) pipe_bottom_gap = bottom_min;
if (pipe_top_gap == null) pipe_top_gap = top_min;
NewMeasurementCircle('temp', [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]);
switch (key) {
case "top":
pipe_top_gap = (percent / 100) * (top_max - top_min) + top_min;
break;
ShowIconByName('sun');
case "bottom":
pipe_bottom_gap =
(percent / 100) * (bottom_max - bottom_min) + bottom_min;
break;
}
line.setAttribute(
"style",
`clip-path: polygon(0% 60px, 0% 100%, 0 100%, 0 ${pipe_top_gap}px, 100% ${pipe_top_gap}px, 100% ${pipe_bottom_gap}px, 0 ${pipe_bottom_gap}px, 0 100%, 100% calc(100% - 75px), 100% 0%)`
);
};
NewMeasurementCircle("temp", [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]);
ShowIconByName("sun");
SetPipePercent("bottom", 35);
setTimeout(() => {
ChangeMeasurementCircleArrow('temp', 66.5);
setTimeout(() => {
ShowIconByName('temp');
}, 500);
}, 3000);
SetPipePercent("top", 25);
ChangeMeasurementCircleArrow("temp", 66.5);
setTimeout(() => {
SetPipePercent("bottom", 55);
ShowIconByName("temp");
}, 500);
}, 3000);

+ 12
- 10
src/components/measurement.pipe.scss View File

@ -1,22 +1,24 @@
@import "./measurement.pipe/measurement.pipe.background.scss";
@import "./measurement.pipe/measurement.pipe.marks.scss";
@import "./measurement.pipe/measurement.pipe.marker.scss";
@import "./measurement.pipe/measurement.pipe.line.scss";
div.measurement-pipe {
position: absolute;
position: absolute;
left: 350px;
left: 350px;
height: 100vh;
width: 450px;
height: 100vh;
width: 450px;
overflow: hidden;
overflow: hidden;
z-index: 2;
z-index: 2;
border-radius: 40% 0 0 40%;
border-radius: 40% 0 0 40%;
@include background();
@include marks();
@include marker();
@include background();
@include marks();
@include marker();
@include line();
}

+ 44
- 0
src/components/measurement.pipe/measurement.pipe.line.scss View File

@ -0,0 +1,44 @@
@mixin line {
div.line {
position: absolute;
top: 0;
left: -162px;
right: 0;
bottom: 0;
div.background {
position: absolute;
top: 0;
left: 50px;
right: 0;
bottom: 0;
width: 50vw;
background: radial-gradient(
circle at calc(1920px / 2.6),
transparent,
transparent 61.6%,
white 61.7%,
white 65%,
transparent 65.1%
);
// cut from the center l-t r-t r-b l-b
// clip-path: polygon(
// 0% 60px,
// 0% 100%,
// 0 100%,
// 0 $gap-top,
// 100% $gap-top,
// 100% $gap-bottom,
// 0 $gap-bottom,
// 0 100%,
// 100% calc(100% - 76px),
// 100% 0%
// );
z-index: -1;
}
}
}

+ 89
- 89
src/components/measurement.pipe/measurement.pipe.marker.scss View File

@ -1,111 +1,111 @@
@mixin marker {
$font-size: 30px;
$font-size: 30px;
div.marker {
position: absolute;
top: 0;
left: 418px;
right: 0;
bottom: 0;
div.marker {
position: absolute;
top: 0;
left: 418px;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
span {
position: absolute;
color: white;
span {
position: absolute;
color: white;
font-size: $font-size;
font-size: $font-size;
text-align: right;
text-align: right;
&::before {
content: "";
&::before {
content: "";
position: absolute;
position: absolute;
background-color: white;
background-color: white;
border-radius: 1em;
}
border-radius: 1em;
}
&.bottom::before,
&.top::before {
width: 50px;
height: 2px;
}
&.bottom::before,
&.top::before {
width: 50px;
height: 2px;
}
&.bottom-middle,
&.top-middle {
font-size: 1.5em;
color: transparent;
&.bottom-middle,
&.top-middle {
font-size: 1.5em;
color: transparent;
&::before {
top: 50%;
&::before {
top: 50%;
transform: translateY(-50%);
transform: translateY(-50%);
width: 20px;
height: 5px;
}
}
width: 20px;
height: 5px;
}
}
}
&.top span {
&.top {
top: 0;
&::before {
top: 100%;
left: -2px;
}
}
&.top-middle {
top: 120px;
left: -50px;
}
&.bottom-middle {
top: 250px;
left: -120px;
}
&.bottom {
top: 388px;
left: -190px;
}
&.top span {
&.top {
top: 0;
&::before {
top: 100%;
left: 5px;
}
}
&.top-middle {
top: 120px;
left: -50px;
}
&.bottom-middle {
top: 250px;
left: -120px;
}
&.bottom {
top: 388px;
left: -190px;
}
}
&.bottom span {
&.top {
bottom: 387px;
left: -190px;
&::before {
top: 100%;
}
}
&.bottom-middle {
bottom: 120px;
left: -50px;
}
&.top-middle {
bottom: 250px;
left: -120px;
}
&.bottom {
bottom: 0px;
&.bottom span {
&.top {
bottom: 387px;
left: -190px;
&::before {
top: 100%;
}
}
&.bottom-middle {
bottom: 120px;
left: -50px;
}
&.top-middle {
bottom: 250px;
left: -120px;
}
&.bottom {
bottom: 0px;
&::before {
left: 1px;
}
}
&::before {
left: 7px;
}
}
}
}
}

+ 39
- 39
src/components/measurement.pipe/measurement.pipe.marks.scss View File

@ -1,49 +1,49 @@
@mixin marks {
$gap-top: 390px;
$gap-bottom: 550px;
$gap-top: 390px;
$gap-bottom: 562px;
div.marks {
position: absolute;
top: 0;
left: -170px;
right: 0;
bottom: 0;
div.marks {
position: absolute;
top: 0;
left: -170px;
right: 0;
bottom: 0;
&::before {
content: "";
&::before {
content: "";
position: absolute;
top: 0;
left: 50px;
right: 0;
bottom: 0;
position: absolute;
top: 0;
left: 50px;
right: 0;
bottom: 0;
width: 50vw;
width: 50vw;
background: radial-gradient(
circle at calc(1920px / 2.6),
transparent,
transparent 64.6%,
white 64.7%,
white 65%,
transparent 65.1%
);
background: radial-gradient(
circle at calc(1920px / 2.6),
transparent,
transparent 64.6%,
white 64.7%,
white 65%,
transparent 65.1%
);
// cut from the center l-t r-t r-b l-b
clip-path: polygon(
0% 65px,
0% 100%,
0 100%,
0 $gap-top,
100% $gap-top,
100% $gap-bottom,
0 $gap-bottom,
0 100%,
100% calc(100% - 96px),
100% 0%
);
// cut from the center l-t r-t r-b l-b
clip-path: polygon(
0% 60px,
0% 100%,
0 100%,
0 $gap-top,
100% $gap-top,
100% $gap-bottom,
0 $gap-bottom,
0 100%,
100% calc(100% - 85px),
100% 0%
);
z-index: -1;
}
z-index: -1;
}
}
}

Loading…
Cancel
Save