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

changes for mashaiekhi

master
JayPY Code 11 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