pipe line added
parent
5d52808b04
commit
ac2e9b8be3
|
@ -44,6 +44,9 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="measurement-pipe">
|
<div class="measurement-pipe">
|
||||||
|
<div class="line">
|
||||||
|
<div class="background"></div>
|
||||||
|
</div>
|
||||||
<div class="marks">
|
<div class="marks">
|
||||||
<div class="marker top">
|
<div class="marker top">
|
||||||
<span class="top">0</span>
|
<span class="top">0</span>
|
||||||
|
|
108
public/script.js
108
public/script.js
|
@ -1,50 +1,88 @@
|
||||||
|
let pipe_bottom_gap, pipe_top_gap;
|
||||||
|
|
||||||
const NewMeasurementCircle = (id, labels = []) => {
|
const NewMeasurementCircle = (id, labels = []) => {
|
||||||
let element = document.getElementById(id);
|
let element = document.getElementById(id);
|
||||||
let ul = document.createElement('ul');
|
let ul = document.createElement("ul");
|
||||||
|
|
||||||
const CreateLabel = (label, length = 10) => {
|
const CreateLabel = (label, length = 10) => {
|
||||||
for (let i = 0; i < length; i++) {
|
for (let i = 0; i < length; i++) {
|
||||||
let li = document.createElement('li');
|
let li = document.createElement("li");
|
||||||
if (i == 0) {
|
if (i == 0) {
|
||||||
let span = document.createElement('span');
|
let span = document.createElement("span");
|
||||||
span.innerText = label;
|
span.innerText = label;
|
||||||
li.appendChild(span);
|
li.appendChild(span);
|
||||||
li.className = 'label'
|
li.className = "label";
|
||||||
}
|
}
|
||||||
if (i == 5) li.className = 'half';
|
if (i == 5) li.className = "half";
|
||||||
ul.appendChild(li);
|
ul.appendChild(li);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
for (let label of labels) {
|
for (let label of labels) {
|
||||||
CreateLabel(label, labels.indexOf(label) == labels.length - 1 ? 1 : 10);
|
CreateLabel(label, labels.indexOf(label) == labels.length - 1 ? 1 : 10);
|
||||||
}
|
}
|
||||||
|
|
||||||
element.appendChild(ul);
|
element.appendChild(ul);
|
||||||
}
|
};
|
||||||
|
|
||||||
const ChangeMeasurementCircleArrow = (id, to) => {
|
const ChangeMeasurementCircleArrow = (id, to) => {
|
||||||
let min = -270, max = 0;
|
let min = -270,
|
||||||
let element = document.querySelector(`#${id} div.arrow`);
|
max = 0;
|
||||||
let rotate = (to * (max - min) / 100) + min;
|
let element = document.querySelector(`#${id} div.arrow`);
|
||||||
element.style.transform = `rotate(${rotate}deg)`;
|
let rotate = (to * (max - min)) / 100 + min;
|
||||||
}
|
element.style.transform = `rotate(${rotate}deg)`;
|
||||||
|
};
|
||||||
|
|
||||||
const ShowIconByName = (name) => {
|
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) => {
|
const HideIconByName = (name) => {
|
||||||
document.querySelector(`div.icons div.icon.${name}`).classList.remove('show');
|
document.querySelector(`div.icons div.icon.${name}`).classList.remove("show");
|
||||||
}
|
};
|
||||||
|
|
||||||
NewMeasurementCircle('temp', [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]);
|
const SetPipePercent = (key = "top", percent = 0) => {
|
||||||
|
let top_max = 390,
|
||||||
|
top_min = 36,
|
||||||
|
bottom_max = 562,
|
||||||
|
bottom_min = 915;
|
||||||
|
|
||||||
ShowIconByName('sun');
|
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;
|
||||||
|
|
||||||
|
switch (key) {
|
||||||
|
case "top":
|
||||||
|
pipe_top_gap = (percent / 100) * (top_max - top_min) + top_min;
|
||||||
|
break;
|
||||||
|
|
||||||
|
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(() => {
|
setTimeout(() => {
|
||||||
ChangeMeasurementCircleArrow('temp', 66.5);
|
SetPipePercent("top", 25);
|
||||||
setTimeout(() => {
|
|
||||||
ShowIconByName('temp');
|
ChangeMeasurementCircleArrow("temp", 66.5);
|
||||||
}, 500);
|
setTimeout(() => {
|
||||||
}, 3000);
|
SetPipePercent("bottom", 55);
|
||||||
|
ShowIconByName("temp");
|
||||||
|
}, 500);
|
||||||
|
}, 3000);
|
||||||
|
|
|
@ -1,22 +1,24 @@
|
||||||
@import "./measurement.pipe/measurement.pipe.background.scss";
|
@import "./measurement.pipe/measurement.pipe.background.scss";
|
||||||
@import "./measurement.pipe/measurement.pipe.marks.scss";
|
@import "./measurement.pipe/measurement.pipe.marks.scss";
|
||||||
@import "./measurement.pipe/measurement.pipe.marker.scss";
|
@import "./measurement.pipe/measurement.pipe.marker.scss";
|
||||||
|
@import "./measurement.pipe/measurement.pipe.line.scss";
|
||||||
|
|
||||||
div.measurement-pipe {
|
div.measurement-pipe {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
left: 350px;
|
left: 350px;
|
||||||
|
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 450px;
|
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 background();
|
||||||
@include marks();
|
@include marks();
|
||||||
@include marker();
|
@include marker();
|
||||||
|
@include line();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,111 +1,111 @@
|
||||||
@mixin marker {
|
@mixin marker {
|
||||||
$font-size: 30px;
|
$font-size: 30px;
|
||||||
|
|
||||||
|
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;
|
||||||
|
|
||||||
|
span {
|
||||||
|
position: absolute;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
font-size: $font-size;
|
||||||
|
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
|
||||||
div.marker {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
|
||||||
left: 418px;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
display: flex;
|
background-color: white;
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
span {
|
border-radius: 1em;
|
||||||
position: absolute;
|
}
|
||||||
color: white;
|
|
||||||
|
|
||||||
font-size: $font-size;
|
&.bottom::before,
|
||||||
|
&.top::before {
|
||||||
|
width: 50px;
|
||||||
|
height: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
text-align: right;
|
&.bottom-middle,
|
||||||
|
&.top-middle {
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: transparent;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
top: 50%;
|
||||||
|
|
||||||
position: absolute;
|
transform: translateY(-50%);
|
||||||
|
|
||||||
background-color: white;
|
width: 20px;
|
||||||
|
height: 5px;
|
||||||
border-radius: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.bottom::before,
|
|
||||||
&.top::before {
|
|
||||||
width: 50px;
|
|
||||||
height: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.bottom-middle,
|
|
||||||
&.top-middle {
|
|
||||||
font-size: 1.5em;
|
|
||||||
color: transparent;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
top: 50%;
|
|
||||||
|
|
||||||
transform: translateY(-50%);
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.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;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,49 +1,49 @@
|
||||||
@mixin marks {
|
@mixin marks {
|
||||||
$gap-top: 390px;
|
$gap-top: 390px;
|
||||||
$gap-bottom: 550px;
|
$gap-bottom: 562px;
|
||||||
|
|
||||||
div.marks {
|
div.marks {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: -170px;
|
left: -170px;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 50px;
|
left: 50px;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
||||||
width: 50vw;
|
width: 50vw;
|
||||||
|
|
||||||
background: radial-gradient(
|
background: radial-gradient(
|
||||||
circle at calc(1920px / 2.6),
|
circle at calc(1920px / 2.6),
|
||||||
transparent,
|
transparent,
|
||||||
transparent 64.6%,
|
transparent 64.6%,
|
||||||
white 64.7%,
|
white 64.7%,
|
||||||
white 65%,
|
white 65%,
|
||||||
transparent 65.1%
|
transparent 65.1%
|
||||||
);
|
);
|
||||||
|
|
||||||
// cut from the center l-t r-t r-b l-b
|
// cut from the center l-t r-t r-b l-b
|
||||||
clip-path: polygon(
|
clip-path: polygon(
|
||||||
0% 65px,
|
0% 60px,
|
||||||
0% 100%,
|
0% 100%,
|
||||||
0 100%,
|
0 100%,
|
||||||
0 $gap-top,
|
0 $gap-top,
|
||||||
100% $gap-top,
|
100% $gap-top,
|
||||||
100% $gap-bottom,
|
100% $gap-bottom,
|
||||||
0 $gap-bottom,
|
0 $gap-bottom,
|
||||||
0 100%,
|
0 100%,
|
||||||
100% calc(100% - 96px),
|
100% calc(100% - 85px),
|
||||||
100% 0%
|
100% 0%
|
||||||
);
|
);
|
||||||
|
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue