jaypy
/
iot-settings
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Activity
Browse Source

changes for mashaiekhi

master
JayPY Code 4 months ago
parent
5c81f79cea
commit
9d5402bfcc
10 changed files with 27 additions and 129 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -1
      public/bundle.js
  2. BIN
      public/icons/engine.png
  3. BIN
      public/icons/fan.png
  4. +0
    -3
      public/icons/home.svg
  5. +0
    -49
      public/icons/settings.svg
  6. +0
    -50
      public/icons/sun.svg
  7. +0
    -8
      public/icons/temperature.svg
  8. +10
    -4
      public/script.js
  9. +1
    -0
      src/components/measurement.circle.scss
  10. +16
    -14
      src/components/measurement.line/measurement.line.item.scss

+ 0
- 1
public/bundle.js
File diff suppressed because it is too large
View File


BIN
public/icons/engine.png View File

Before After
Width: 64  |  Height: 64  |  Size: 2.0 KiB

BIN
public/icons/fan.png View File

Before After
Width: 64  |  Height: 64  |  Size: 2.0 KiB

+ 0
- 3
public/icons/home.svg View File

@ -1,3 +0,0 @@
<svg fill="#4AD4FC" height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg">
<path d="m498.195312 222.695312c-.011718-.011718-.023437-.023437-.035156-.035156l-208.855468-208.847656c-8.902344-8.90625-20.738282-13.8125-33.328126-13.8125-12.589843 0-24.425781 4.902344-33.332031 13.808594l-208.746093 208.742187c-.070313.070313-.140626.144531-.210938.214844-18.28125 18.386719-18.25 48.21875.089844 66.558594 8.378906 8.382812 19.445312 13.238281 31.277344 13.746093.480468.046876.964843.070313 1.453124.070313h8.324219v153.699219c0 30.414062 24.746094 55.160156 55.167969 55.160156h81.710938c8.28125 0 15-6.714844 15-15v-120.5c0-13.878906 11.289062-25.167969 25.167968-25.167969h48.195313c13.878906 0 25.167969 11.289063 25.167969 25.167969v120.5c0 8.285156 6.714843 15 15 15h81.710937c30.421875 0 55.167969-24.746094 55.167969-55.160156v-153.699219h7.71875c12.585937 0 24.421875-4.902344 33.332031-13.808594 18.359375-18.371093 18.367187-48.253906.023437-66.636719zm0 0" />
</svg>

+ 0
- 49
public/icons/settings.svg View File

@ -1,49 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg fill="#4AD4FC" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M496.659,312.107l-47.061-36.8c0.597-5.675,1.109-12.309,1.109-19.328c0-7.019-0.491-13.653-1.109-19.328l47.104-36.821
c8.747-6.912,11.136-19.179,5.568-29.397L453.331,85.76c-5.227-9.557-16.683-14.464-28.309-10.176l-55.531,22.293
c-10.645-7.68-21.803-14.165-33.344-19.349l-8.448-58.901C326.312,8.448,316.584,0,305.086,0h-98.133
c-11.499,0-21.205,8.448-22.571,19.456l-8.469,59.115c-11.179,5.035-22.165,11.435-33.28,19.349l-55.68-22.357
C76.52,71.531,64.04,76.053,58.856,85.568L9.854,170.347c-5.781,9.771-3.392,22.464,5.547,29.547l47.061,36.8
c-0.747,7.189-1.109,13.44-1.109,19.307s0.363,12.117,1.109,19.328l-47.104,36.821c-8.747,6.933-11.115,19.2-5.547,29.397
l48.939,84.672c5.227,9.536,16.576,14.485,28.309,10.176l55.531-22.293c10.624,7.659,21.781,14.144,33.323,19.349l8.448,58.88
C185.747,503.552,195.454,512,206.974,512h98.133c11.499,0,21.227-8.448,22.592-19.456l8.469-59.093
c11.179-5.056,22.144-11.435,33.28-19.371l55.68,22.357c2.688,1.045,5.483,1.579,8.363,1.579c8.277,0,15.893-4.523,19.733-11.563
l49.152-85.12C507.838,331.349,505.448,319.083,496.659,312.107z M256.019,341.333c-47.061,0-85.333-38.272-85.333-85.333
s38.272-85.333,85.333-85.333s85.333,38.272,85.333,85.333S303.08,341.333,256.019,341.333z" />
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 0
- 50
public/icons/sun.svg View File

@ -1,50 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg enable-background="new 0 0 45.16 45.16" version="1.1" viewBox="0 0 45.16 45.16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fill="#fff963">
<path d="m22.58 11.269c-6.237 0-11.311 5.075-11.311 11.312s5.074 11.312 11.311 11.312c6.236 0 11.311-5.074 11.311-11.312s-5.075-11.312-11.311-11.312z"/>
<path d="m22.58 7.944c-1.219 0-2.207-0.988-2.207-2.206v-3.531c0-1.219 0.988-2.207 2.207-2.207s2.207 0.988 2.207 2.207v3.531c0 1.218-0.989 2.206-2.207 2.206z"/>
<path d="m22.58 37.215c-1.219 0-2.207 0.988-2.207 2.207v3.53c0 1.22 0.988 2.208 2.207 2.208s2.207-0.988 2.207-2.208v-3.53c0-1.219-0.989-2.207-2.207-2.207z"/>
<path d="m32.928 12.231c-0.861-0.862-0.861-2.259 0-3.121l2.497-2.497c0.861-0.861 2.259-0.861 3.121 0 0.862 0.862 0.862 2.26 0 3.121l-2.497 2.497c-0.861 0.862-2.258 0.862-3.121 0z"/>
<path d="m12.231 32.93c-0.862-0.863-2.259-0.863-3.121 0l-2.497 2.496c-0.861 0.861-0.862 2.26 0 3.121s2.26 0.861 3.121 0l2.497-2.498c0.862-0.861 0.862-2.259 0-3.119z"/>
<path d="m37.215 22.58c0-1.219 0.988-2.207 2.207-2.207h3.531c1.219 0 2.207 0.988 2.207 2.207s-0.988 2.206-2.207 2.206h-3.531c-1.219 0-2.207-0.987-2.207-2.206z"/>
<path d="m7.944 22.58c0-1.219-0.988-2.207-2.207-2.207h-3.53c-1.219 0-2.207 0.988-2.207 2.207s0.988 2.206 2.207 2.206h3.531c1.218 0 2.206-0.987 2.206-2.206z"/>
<path d="m32.928 32.93c0.862-0.861 2.26-0.861 3.121 0l2.497 2.497c0.862 0.86 0.862 2.259 0 3.12s-2.259 0.861-3.121 0l-2.497-2.497c-0.862-0.862-0.862-2.259 0-3.12z"/>
<path d="m12.231 12.231c0.862-0.862 0.862-2.259 0-3.121l-2.497-2.496c-0.862-0.862-2.259-0.862-3.121 0-0.862 0.861-0.862 2.259 0 3.12l2.497 2.497c0.862 0.863 2.259 0.863 3.121 0z"/>
</svg>

+ 0
- 8
public/icons/temperature.svg View File

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg enable-background="new 0 0 250.189 250.189" version="1.1" viewBox="0 0 250.19 250.19" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fill="#fd1d1d">
<path d="m159.84 147.25v-112.51c0-19.158-15.59-34.744-34.752-34.744-19.159 0-34.746 15.586-34.746 34.744v112.51c-14.234 10.843-22.617 27.59-22.617 45.575 0 31.631 25.732 57.364 57.363 57.364 31.633 0 57.367-25.733 57.367-57.364 0-17.983-8.383-34.73-22.615-45.574zm-34.752 87.938c-23.359 0-42.363-19.004-42.363-42.364 0-14.294 7.188-27.537 19.228-35.425 2.115-1.386 3.39-3.745 3.39-6.273v-116.38c0-10.887 8.858-19.744 19.746-19.744 10.892 0 19.752 8.857 19.752 19.744v116.38c0 2.529 1.274 4.887 3.39 6.273 12.038 7.889 19.226 21.132 19.226 35.425-2e-3 23.36-19.008 42.364-42.369 42.364z"/>
<path d="m132.6 169.04v-99.118c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v99.118c-10.104 3.183-17.43 12.622-17.43 23.783 0 13.767 11.16 24.931 24.93 24.931 13.773 0 24.932-11.164 24.932-24.931-1e-3 -11.162-7.327-20.602-17.432-23.783z"/>
</svg>

+ 10
- 4
public/script.js View File

@ -31,6 +31,8 @@ const ChangeMeasurementCircleArrow = (id, to) => {
let element = document.querySelector(`#${id} div.arrow`);
let rotate = (to * (max - min)) / 90 + min;
element.style.transform = `rotate(${rotate}deg)`;
document.querySelector(`div#${id} span.value`).innerText = to;
};
const ShowIconByName = (name) => {
@ -58,8 +60,8 @@ const NewMeasurementLine = (title = "", id = "") => {
<div class="background"></div>
<div class="percent">
<span class="value">0</span>
<span class="title">${title}</span>
</div>
<span class="title">${title}</span>
</div>`;
document.querySelector('div.measurement-line').innerHTML += html;
@ -82,9 +84,11 @@ NewMeasurementCircle("temp", [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]);
ShowIconByName("sun");
NewMeasurementLine("Title", "item-1");
NewMeasurementLine("Title", "item-2");
NewMeasurementLine("Title", "item-3");
NewMeasurementLine("Title one", "item-1");
NewMeasurementLine("Title two", "item-2");
NewMeasurementLine("Title three", "item-3");
NewMeasurementLine("Title four", "item-4");
NewMeasurementLine("Title five", "item-5");
setTimeout(() => {
SetMeasurementLine('item-1', 50, '50');
@ -93,12 +97,14 @@ setTimeout(() => {
setTimeout(() => {
ChangeMeasurementCircleArrow("temp", 66.5);
SetMeasurementLine('item-1', 30, '30');
SetMeasurementLine('item-2', 40, '40');
ShowIconByName("temp");
}, 3000);
setTimeout(() => {
SetMeasurementLine('item-1', 60, '60');
SetMeasurementLine('item-3', 50, '50');
}, 4000);
setTimeout(() => {

+ 1
- 0
src/components/measurement.circle.scss View File

@ -8,6 +8,7 @@ div.measurement-circle {
$size: 650px;
position: relative;
left: 5%;
width: $size;
height: $size;

+ 16
- 14
src/components/measurement.line/measurement.line.item.scss View File

@ -73,28 +73,30 @@
box-shadow: 0 0 100px rgba($color: #a0d4ff, $alpha: 0.5);
border-radius: 2em;
}
span {
position: absolute;
top: 50%;
span {
position: absolute;
top: 50%;
color: white;
color: white;
&.value {
right: 10px;
&.value {
right: 10px;
font-size: 20px;
font-size: 20px;
transform: translateY(-50%) rotate(-90deg);
}
transform: translateY(-50%) rotate(-90deg);
}
&.title {
font-size: 22px;
&.title {
font-size: 22px;
left: calc(100% + 20px);
right: -50px;
white-space: pre;
transform: translateY(-50%);
}
transform: translateY(-50%);
}
}
}

Write Preview
Loading…
Cancel
Save