Restyle some devices and creation of both dimmers (button and knob).
This commit is contained in:
christiancp
parent
db2916ac2a
commit
024e40deca
20 changed files with 501 additions and 273 deletions
2
smart-hut/public/img/buttonDimmer.svg
Normal file
2
smart-hut/public/img/buttonDimmer.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
<?xml version="1.0"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" enable-background="new 0 0 512 512" height="512px" viewBox="0 0 512 512" width="512px" class=""><g><path d="m150 461c0 11.046-8.954 20-20 20h-110c-11.046 0-20-8.954-20-20s8.954-20 20-20h110c11.046 0 20 8.954 20 20zm232-365h34v34c0 11.046 8.954 20 20 20s20-8.954 20-20v-34h36c11.046 0 20-8.954 20-20s-8.954-20-20-20h-36v-36c0-11.046-8.954-20-20-20s-20 8.954-20 20v36h-34c-11.046 0-20 8.954-20 20s8.954 20 20 20zm-52 47v226c0 40.804-33.196 74-74 74s-74-33.196-74-74v-226c0-40.804 33.196-74 74-74s74 33.196 74 74zm-40 0c0-18.748-15.252-34-34-34s-34 15.252-34 34v226c0 18.748 15.252 34 34 34s34-15.252 34-34zm148 93h-53c-11.046 0-20 8.954-20 20s8.954 20 20 20h53c18.748 0 34 15.252 34 34v128c0 18.748-15.252 34-34 34s-34-15.252-34-34v-102c0-11.046-8.954-20-20-20s-20 8.954-20 20v102c0 40.804 33.196 74 74 74s74-33.196 74-74v-128c0-40.804-33.196-74-74-74zm-306 0h-58c-18.748 0-34-15.252-34-34v-128c0-18.748 15.252-34 34-34s34 15.252 34 34v103c0 11.046 8.954 20 20 20s20-8.954 20-20v-103c0-40.804-33.196-74-74-74s-74 33.196-74 74v128c0 40.804 33.196 74 74 74h58c11.046 0 20-8.954 20-20s-8.954-20-20-20z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/></g> </svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
2
smart-hut/public/img/intensityLightIcon.svg
Normal file
2
smart-hut/public/img/intensityLightIcon.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
<?xml version="1.0"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 -1 512 512" width="512px" class=""><g><path d="m141.554688 114.441406c0 34.976563 15.71875 67.589844 43.128906 89.46875 3.640625 2.90625 5.761718 7.3125 5.761718 11.972656v54.371094h50.238282v-101.769531l-41.207032-41.207031c-5.984374-5.980469-5.984374-15.679688 0-21.664063 5.980469-5.980469 15.679688-5.980469 21.664063 0l34.859375 34.859375 34.855469-34.859375c5.984375-5.980469 15.683593-5.980469 21.664062 0 5.984375 5.980469 5.984375 15.679688 0 21.664063l-41.199219 41.203125v101.773437h50.226563v-54.371094c0-4.660156 2.121094-9.066406 5.761719-11.972656 27.410156-21.882812 43.128906-54.492187 43.128906-89.46875 0-63.101562-51.339844-114.441406-114.441406-114.441406-63.101563 0-114.441406 51.339844-114.441406 114.441406zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFD31D"/><path d="m190.445312 300.890625c.148438 36.019531 29.5 65.273437 65.550782 65.273437 36.054687 0 65.402344-29.253906 65.550781-65.273437zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFD31D"/><path d="m496.679688 428.113281h-91.660157v82.71875h91.660157c8.460937 0 15.320312-6.859375 15.320312-15.320312v-52.082031c0-8.460938-6.859375-15.316407-15.320312-15.316407zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFD31D"/><path d="m374.382812 428.113281h-359.0625c-8.460937 0-15.320312 6.855469-15.320312 15.316407v52.082031c0 8.460937 6.859375 15.320312 15.320312 15.320312h359.0625zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFD31D"/><path d="m15.320312 368.375h13.105469v13.109375c0 8.457031 6.859375 15.316406 15.320313 15.316406 8.460937 0 15.316406-6.859375 15.316406-15.316406v-13.109375h13.109375c8.457031 0 15.316406-6.859375 15.316406-15.316406 0-8.460938-6.859375-15.320313-15.316406-15.320313h-13.109375v-13.105469c0-8.460937-6.855469-15.320312-15.316406-15.320312-8.460938 0-15.320313 6.859375-15.320313 15.320312v13.105469h-13.105469c-8.460937 0-15.320312 6.859375-15.320312 15.320313 0 8.457031 6.859375 15.316406 15.320312 15.316406zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFD31D"/><path d="m439.828125 368.375h56.851563c8.460937 0 15.320312-6.859375 15.320312-15.316406 0-8.460938-6.859375-15.320313-15.320312-15.320313h-56.851563c-8.457031 0-15.316406 6.859375-15.316406 15.320313 0 8.457031 6.859375 15.316406 15.316406 15.316406zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFD31D"/></g> </svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
1
smart-hut/public/img/knob.svg
Normal file
1
smart-hut/public/img/knob.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m256 512c-111.382812 0-202-90.617188-202-202s90.617188-202 202-202 202 90.617188 202 202-90.617188 202-202 202zm0 0" fill="#004fc4"/><path d="m256 108v404c111.382812 0 202-90.617188 202-202s-90.617188-202-202-202zm0 0" fill="#003480"/><path d="m256 452c-78.300781 0-142-63.699219-142-142s63.699219-142 142-142 142 63.699219 142 142-63.699219 142-142 142zm0 0" fill="#47f5ff"/><path d="m398 310c0-78.300781-63.699219-142-142-142v284c78.300781 0 142-63.699219 142-142zm0 0" fill="#69a7ff"/><path d="m415.804688 96.191406c-42.683594-42.683594-99.4375-66.191406-159.804688-66.191406s-117.121094 23.507812-159.804688 66.191406l-21.214843-21.210937c48.351562-48.351563 112.640625-74.980469 181.019531-74.980469s132.667969 26.628906 181.019531 74.980469zm0 0" fill="#fee362"/><path d="m0 130h90v30h-90zm0 0" fill="#003480"/><path d="m512 130h-30v-30h-30v30h-30v30h30v30h30v-30h30zm0 0" fill="#001739"/><path d="m345.191406 199.59375-55.957031 55.957031 21.214844 21.214844 55.957031-55.957031c-6.308594-7.792969-13.421875-14.90625-21.214844-21.214844zm0 0" fill="#bb266d"/><path d="m415.804688 96.191406 21.214843-21.210937c-48.351562-48.351563-112.640625-74.980469-181.019531-74.980469v30c60.367188 0 117.121094 23.507812 159.804688 66.191406zm0 0" fill="#ffcb00"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
2
smart-hut/public/img/knobDimmer.svg
Normal file
2
smart-hut/public/img/knobDimmer.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
<?xml version="1.0"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512px" height="512px"><g><g id="_12-home" data-name="12-home"><g id="glyph"><circle cx="202" cy="460" r="4" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><circle cx="310" cy="428" r="4" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><circle cx="140" cy="364" r="4" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="M264.485,67.515a12,12,0,0,0-16.97,0L188,127.03V108a12,12,0,0,0-12-12H80a12,12,0,0,0-12,12V247.03L7.515,307.515A12,12,0,0,0,16,328H68V496a12,12,0,0,0,12,12H432a12,12,0,0,0,12-12V328h52a12,12,0,0,0,8.485-20.485ZM136.8,391.821a28,28,0,1,1,8.061-55.39L162,297.477V204a12,12,0,0,1,12-12h0a12,12,0,0,1,12,12v96a12,12,0,0,1-1.016,4.833l-20.259,46.044A27.991,27.991,0,0,1,136.8,391.821ZM244,380a12,12,0,0,1-.707,4.059L222.75,441.221a27.987,27.987,0,1,1-22.2-9.183L220,377.909V156a12,12,0,0,1,12-12h0a12,12,0,0,1,12,12Zm62.777,75.819a27.985,27.985,0,0,1-17.563-46.557l-19.947-39.894A12.007,12.007,0,0,1,268,364V124a12,12,0,0,1,12-12h0a12,12,0,0,1,12,12V361.167l19.435,38.87a28,28,0,1,1-4.658,55.782ZM334.15,343.94A28,28,0,0,1,324,290.707V204a12,12,0,0,1,12-12h0a12,12,0,0,1,12,12v86.707a28,28,0,0,1-13.85,53.233Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><circle cx="336" cy="316" r="4" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="M352,124a36.04,36.04,0,0,1,36,36,12,12,0,0,0,24,0,60.068,60.068,0,0,0-60-60,12,12,0,0,0,0,24Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="M352,76a84.1,84.1,0,0,1,84,84,12,12,0,0,0,24,0A108.123,108.123,0,0,0,352,52a12,12,0,0,0,0,24Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="M352,28c72.785,0,132,59.215,132,132a12,12,0,0,0,24,0C508,73.981,438.019,4,352,4a12,12,0,0,0,0,24Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/></g></g></g> </svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
1
smart-hut/public/img/plusminus.svg
Normal file
1
smart-hut/public/img/plusminus.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg id="Layer" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m437.02 74.98c-48.35-48.35-112.64-74.98-181.02-74.98s-132.67 26.63-181.02 74.98-74.98 112.64-74.98 181.02 26.63 132.67 74.98 181.02 112.64 74.98 181.02 74.98 132.67-26.63 181.02-74.98 74.98-112.64 74.98-181.02-26.63-132.67-74.98-181.02z" fill="#f0eaea"/><path d="m512 256c0 68.38-26.63 132.67-74.98 181.02s-112.64 74.98-181.02 74.98-132.67-26.63-181.02-74.98l362.04-362.04c48.35 48.35 74.98 112.64 74.98 181.02z" fill="#dccfcf"/><g fill="#00e1d7"><path d="m208 152h-16v-16c0-13.255-10.745-24-24-24s-24 10.745-24 24v16h-16c-13.255 0-24 10.745-24 24s10.745 24 24 24h16v16c0 13.255 10.745 24 24 24s24-10.745 24-24v-16h16c13.255 0 24-10.745 24-24s-10.745-24-24-24z"/><path d="m384 312h-80c-13.255 0-24 10.745-24 24s10.745 24 24 24h80c13.255 0 24-10.745 24-24s-10.745-24-24-24z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 928 B |
|
|
@ -1 +1,2 @@
|
||||||
<svg id="Layer_1" enable-background="new 0 0 511.929 511.929" height="512" viewBox="0 0 511.929 511.929" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m176.652 174.329v57.6h32v-57.6c0-8.84-7.16-16-16-16-8.83 0-16 7.16-16 16z"/><path d="m303.592 174.329v57.6h32v-57.6c0-8.84-7.17-16-16-16-8.84 0-16 7.16-16 16z"/><path d="m344.052 263.929h-175.86c-8.84 0-16 7.16-16 16 0 8.83 7.16 16 16 16h4.2v41.6c0 21.17 17.22 38.4 38.4 38.4h90.66c21.18 0 38.4-17.23 38.4-38.4v-41.6h4.2c8.84 0 16-7.17 16-16 0-8.84-7.16-16-16-16z"/><path d="m224.122 407.929v8.53c0 11.843 6.438 22.175 16 27.708v51.762c0 8.84 7.16 16 16 16s16-7.16 16-16v-51.762c9.562-5.534 16-15.866 16-27.708v-8.53c-24.422 0-39.67 0-64 0z"/><path d="m193.731 89.704c-6.249 6.248-6.249 16.379 0 22.627 6.248 6.248 16.379 6.249 22.627 0 21.886-21.885 57.309-21.887 79.196 0 3.124 3.124 7.219 4.686 11.313 4.686 14.126 0 21.422-17.206 11.313-27.314-34.391-34.39-90.057-34.394-124.449.001z"/><path d="m363.436 44.448c-59.263-59.264-155.695-59.266-214.96 0-6.249 6.249-6.249 16.379 0 22.627 6.248 6.249 16.379 6.249 22.627 0 46.897-46.896 122.804-46.901 169.706 0 3.124 3.125 7.219 4.687 11.313 4.687 14.126 0 21.422-17.206 11.314-27.314z"/><circle cx="255.955" cy="151.929" r="24"/></g></svg>
|
<?xml version="1.0"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" enable-background="new 0 0 512 512" height="512px" viewBox="0 0 512 512" width="512px"><g><g><path d="m384.533 56.233c-8.284 0-15 6.716-15 15s6.716 15 15 15c22.736 0 41.233 18.497 41.233 41.233 0 8.284 6.716 15 15 15s15-6.716 15-15c.001-39.278-31.954-71.233-71.233-71.233z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="m384.533 0c-8.284 0-15 6.716-15 15s6.716 15 15 15c53.743 0 97.467 43.724 97.467 97.467 0 8.284 6.716 15 15 15s15-6.716 15-15c0-70.285-57.182-127.467-127.467-127.467z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><circle cx="384.533" cy="127.467" r="15" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="m272.066 144.6h-176.733c-51.798 0-95.333 41.856-95.333 95.334v176.733c0 53.521 43.561 95.333 95.333 95.333h176.733c51.794 0 95.334-41.848 95.334-95.333v-176.733c0-53.521-43.561-95.334-95.334-95.334zm65.334 272.067c0 36.68-29.865 65.333-65.334 65.333h-176.733c-35.401 0-65.333-28.594-65.333-65.333v-176.733c0-36.702 29.888-65.334 65.333-65.334h176.733c35.402 0 65.334 28.594 65.334 65.334z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="m183.7 337.4c-25.487 0-47.133 20.558-47.133 47.133v48.2c0 8.284 6.716 15 15 15h64.267c8.284 0 15-6.716 15-15v-48.2c-.001-26.576-21.646-47.133-47.134-47.133zm17.133 80.333h-34.267v-33.2c0-9.594 7.778-17.133 17.133-17.133 9.366 0 17.133 7.552 17.133 17.133v33.2z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="m111.4 224.934c-8.284 0-15 6.716-15 15v64.266c0 8.284 6.716 15 15 15s15-6.716 15-15v-64.267c0-8.284-6.716-14.999-15-14.999z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/><path d="m256 224.934c-8.284 0-15 6.716-15 15v64.266c0 8.284 6.716 15 15 15s15-6.716 15-15v-64.267c0-8.284-6.716-14.999-15-14.999z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/></g></g> </svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -1 +1,2 @@
|
||||||
<svg id="Layer_1" enable-background="new 0 0 511.929 511.929" height="512" viewBox="0 0 511.929 511.929" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m343.964 263.929v56c0 30.93-25.07 56-56 56h-64c-30.924 0-56-25.071-56-56v-56z" fill="#a2d0ff"/><path d="m343.964 263.929v32h-82.04c-38.53 0-69.96 31.216-69.96 69.96-14.51-10.12-24-26.93-24-45.96v-56z" fill="#8bc4ff"/><path d="m255.965 439.929c-17.624 0-32-14.278-32-32v-32h64v32c-.001 17.673-14.327 32-32 32z" fill="#8bc4ff"/><g fill="#2e58ff"><path d="m367.964 247.929c-13.903 0-26.139 0-40 0v-64c0-8.836-7.163-16-16-16s-16 7.164-16 16v64h-80v-64c0-8.836-7.163-16-16-16s-16 7.164-16 16v64c-13.873 0-26.083 0-40 0-8.837 0-16 7.164-16 16s7.163 16 16 16h8v48c0 32.579 24.475 59.531 56 63.482v16.518c0 20.858 13.377 38.643 32 45.248v42.752c0 8.836 7.163 16 16 16s16-7.164 16-16v-42.752c18.623-6.605 32-24.389 32-45.248v-16.518c31.525-3.951 56-30.904 56-63.482v-48h8c8.837 0 16-7.164 16-16s-7.163-16-16-16zm-96 160c0 8.822-7.178 16-16 16s-16-7.178-16-16v-16h32zm56-80c0 17.645-14.355 32-32 32-16.043 0-63.799 0-80 0-17.645 0-32-14.355-32-32v-48h144z"/><circle cx="255.795" cy="151.929" r="24"/><path d="m306.71 117.017c14.126 0 21.422-17.206 11.313-27.314-34.392-34.391-90.058-34.394-124.45 0-6.249 6.248-6.249 16.379 0 22.627 6.248 6.248 16.379 6.249 22.627 0 21.886-21.885 57.309-21.887 79.196 0 3.124 3.125 7.219 4.687 11.314 4.687z"/><path d="m170.945 67.076c46.897-46.896 122.804-46.901 169.706 0 6.247 6.248 16.379 6.249 22.627 0 6.249-6.248 6.249-16.379 0-22.627-59.263-59.264-155.695-59.266-214.96 0-6.249 6.249-6.249 16.379 0 22.627 6.248 6.249 16.379 6.249 22.627 0z"/></g></svg>
|
<?xml version="1.0"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" enable-background="new 0 0 512 512" height="512px" viewBox="0 0 512 512" width="512px" class=""><g><g><path d="m183.7 367.4c-9.355 0-17.133 7.539-17.133 17.133v33.2h34.267v-33.2c-.001-9.581-7.768-17.133-17.134-17.133z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#505BDA"/><path d="m272.066 144.6h-176.733c-51.798 0-95.333 41.856-95.333 95.334v176.733c0 53.521 43.561 95.333 95.333 95.333h176.733c51.794 0 95.334-41.848 95.334-95.333v-176.733c0-53.521-43.561-95.334-95.334-95.334zm-145.666 159.6c0 8.284-6.716 15-15 15s-15-6.716-15-15v-64.267c0-8.284 6.716-15 15-15s15 6.716 15 15zm104.433 128.533c0 8.284-6.716 15-15 15h-64.267c-8.284 0-15-6.716-15-15v-48.2c0-26.575 21.647-47.133 47.133-47.133 25.488 0 47.133 20.556 47.133 47.133v48.2zm40.167-128.533c0 8.284-6.716 15-15 15s-15-6.716-15-15v-64.267c0-8.284 6.716-15 15-15s15 6.716 15 15z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#505BDA"/><path d="m384.533 56.233c-8.284 0-15 6.716-15 15s6.716 15 15 15c22.736 0 41.233 18.497 41.233 41.233 0 8.284 6.716 15 15 15s15-6.716 15-15c.001-39.278-31.954-71.233-71.233-71.233z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#505BDA"/><path d="m384.533 0c-8.284 0-15 6.716-15 15s6.716 15 15 15c53.743 0 97.467 43.724 97.467 97.467 0 8.284 6.716 15 15 15s15-6.716 15-15c0-70.285-57.182-127.467-127.467-127.467z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#505BDA"/><circle cx="384.533" cy="127.467" r="15" data-original="#000000" class="active-path" data-old_color="#000000" fill="#505BDA"/></g></g> </svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.7 KiB |
|
|
@ -1,48 +1,14 @@
|
||||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
<?xml version="1.0"?>
|
||||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
|
||||||
<svg version="1.1" id="Capa_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>
|
<g>
|
||||||
<path d="M336.709,74.843c-10.322-3.944-21.88,1.219-25.825,11.537c-3.945,10.316,1.22,21.879,11.536,25.824
|
<path d="M256,0C114.841,0,0,114.841,0,256s114.841,256,256,256s256-114.841,256-256S397.159,0,256,0z M256,485.345 C129.539,485.345,26.655,382.461,26.655,256S129.539,26.655,256,26.655S485.345,129.539,485.345,256S382.461,485.345,256,485.345z " data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/>
|
||||||
C393.115,139.239,442,207.384,442,286c0,102.561-83.439,186-186,186S70,388.561,70,286c0-78.659,48.908-146.766,119.573-173.793
|
|
||||||
c10.317-3.946,15.481-15.509,11.536-25.825c-3.947-10.317-15.512-15.48-25.825-11.536C89.185,107.777,30,190.692,30,286
|
|
||||||
c0,124.922,101.09,226,226,226c124.922,0,226-101.09,226-226C482,190.65,422.778,107.759,336.709,74.843z"/>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g><g>
|
||||||
<g>
|
|
||||||
<g>
|
<g>
|
||||||
<path d="M256,0c-11.046,0-20,8.954-20,20v195.851c0,11.046,8.954,20,20,20s20-8.955,20-20V20C276,8.954,267.046,0,256,0z"/>
|
<path d="M338.722,115.086c-6.343-3.732-14.513-1.611-18.244,4.733s-1.613,14.513,4.733,18.244 c41.646,24.492,67.517,69.683,67.517,117.937c0,75.394-61.335,136.729-136.729,136.729c-75.393,0-136.729-61.337-136.729-136.729 c0-48.254,25.87-93.445,67.517-117.937c6.345-3.73,8.464-11.899,4.733-18.244c-3.73-6.345-11.898-8.462-18.244-4.733 C123.523,144.347,92.616,198.342,92.616,256c0,90.091,73.293,163.384,163.384,163.384S419.384,346.091,419.382,256 C419.382,198.343,388.475,144.347,338.722,115.086z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g><g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
<path d="M256,74.832c-7.361,0-13.328,5.968-13.328,13.328V256c0,7.361,5.967,13.328,13.328,13.328 c7.361,0,13.328-5.967,13.328-13.328V88.16C269.328,80.801,263.361,74.832,256,74.832z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#1A2849"/>
|
||||||
<g>
|
</g>
|
||||||
</g>
|
</g></g> </svg>
|
||||||
<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>
|
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,48 +1,5 @@
|
||||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
<?xml version="1.0"?>
|
||||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class=""><g><path style="fill:#FFFFFF" d="M256,0c141.155,0,256,114.845,256,256S397.155,512,256,512S0,397.155,0,256S114.845,0,256,0z M485.344,256c0-126.467-102.877-229.344-229.344-229.344S26.656,129.533,26.656,256S129.533,485.344,256,485.344 S485.344,382.467,485.344,256z" data-original="#1E0478" class="active-path" data-old_color="#1E0478"/><path style="fill:#505BDA" d="M256,26.656c126.467,0,229.344,102.877,229.344,229.344S382.467,485.344,256,485.344 S26.656,382.467,26.656,256S129.533,26.656,256,26.656z M419.385,256c0-57.656-30.907-111.66-80.66-140.915 c-6.344-3.732-14.514-1.613-18.246,4.731s-1.613,14.514,4.731,18.246C366.86,162.559,392.73,207.74,392.73,256 c0,75.395-61.334,136.73-136.73,136.73S119.27,331.395,119.27,256c0-48.26,25.869-93.441,67.519-117.938 c6.344-3.732,8.463-11.902,4.731-18.246s-11.902-8.463-18.246-4.731C123.522,144.34,92.615,198.344,92.615,256 c0,90.096,73.289,163.385,163.385,163.385S419.385,346.096,419.385,256z M269.328,256V88.163c0-7.37-5.971-13.328-13.328-13.328 c-7.357,0-13.328,5.958-13.328,13.328V256c0,7.357,5.971,13.328,13.328,13.328C263.357,269.328,269.328,263.357,269.328,256z" data-original="#94E7EF" class="" data-old_color="#94E7EF"/><g>
|
||||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
<path style="fill:#FFFFFF" d="M338.726,115.085c49.753,29.254,80.66,83.259,80.66,140.915 c0,90.096-73.289,163.385-163.385,163.385S92.615,346.096,92.615,256c0-57.656,30.907-111.66,80.66-140.915 c6.344-3.732,14.514-1.613,18.246,4.731s1.613,14.514-4.731,18.246C145.14,162.559,119.27,207.74,119.27,256 c0,75.395,61.334,136.73,136.73,136.73S392.73,331.395,392.73,256c0-48.26-25.869-93.441-67.519-117.938 c-6.344-3.732-8.463-11.902-4.731-18.246C324.212,113.473,332.382,111.354,338.726,115.085z" data-original="#1E0478" class="active-path" data-old_color="#1E0478"/>
|
||||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
<path style="fill:#FFFFFF" d="M269.328,88.163V256c0,7.357-5.971,13.328-13.328,13.328c-7.357,0-13.328-5.971-13.328-13.328 V88.163c0-7.37,5.971-13.328,13.328-13.328C263.357,74.835,269.328,80.793,269.328,88.163z" data-original="#1E0478" class="active-path" data-old_color="#1E0478"/>
|
||||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="30" y1="258" x2="482" y2="258" gradientTransform="matrix(1 0 0 -1 0 514)">
|
</g></g> </svg>
|
||||||
<stop offset="0" style="stop-color:#80D8FF"/>
|
|
||||||
<stop offset="0.16" style="stop-color:#88D1FF"/>
|
|
||||||
<stop offset="0.413" style="stop-color:#9FBEFE"/>
|
|
||||||
<stop offset="0.725" style="stop-color:#C4A0FD"/>
|
|
||||||
<stop offset="1" style="stop-color:#EA80FC"/>
|
|
||||||
</linearGradient>
|
|
||||||
<path style="fill:url(#SVGID_1_);" d="M256,512C131.09,512,30,410.922,30,286c0-95.308,59.185-178.223,145.284-211.154
|
|
||||||
c10.313-3.944,21.878,1.219,25.825,11.536c3.945,10.316-1.219,21.879-11.536,25.825C118.908,139.234,70,207.341,70,286
|
|
||||||
c0,102.561,83.439,186,186,186s186-83.439,186-186c0-78.616-48.885-146.761-119.58-173.796
|
|
||||||
c-10.316-3.945-15.481-15.508-11.536-25.824c3.945-10.318,15.503-15.481,25.825-11.537C422.778,107.759,482,190.65,482,286
|
|
||||||
C482,410.91,380.922,512,256,512z M276,215.851V20c0-11.046-8.954-20-20-20s-20,8.954-20,20v195.851c0,11.046,8.954,20,20,20
|
|
||||||
C267.046,235.851,276,226.896,276,215.851z"/>
|
|
||||||
<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>
|
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 2.3 KiB |
|
|
@ -2,7 +2,7 @@ import React from "react";
|
||||||
import Light from "./Light";
|
import Light from "./Light";
|
||||||
import SmartPlug from "./SmartPlug";
|
import SmartPlug from "./SmartPlug";
|
||||||
import Sensor from "./Sensor";
|
import Sensor from "./Sensor";
|
||||||
import DefaultDimmer from "./Dimmer";
|
import { ButtonDimmer, KnobDimmer } from "./Dimmer";
|
||||||
import Switcher from "./Switch";
|
import Switcher from "./Switch";
|
||||||
|
|
||||||
const DeviceType = (props) => {
|
const DeviceType = (props) => {
|
||||||
|
|
@ -36,7 +36,16 @@ const DeviceType = (props) => {
|
||||||
);
|
);
|
||||||
case "buttonDimmer":
|
case "buttonDimmer":
|
||||||
return (
|
return (
|
||||||
<DefaultDimmer
|
<ButtonDimmer
|
||||||
|
updateDev={props.updateDeviceUi}
|
||||||
|
onChangeData={props.changeDeviceData}
|
||||||
|
device={props.device}
|
||||||
|
edit={props.edit}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "knobDimmer":
|
||||||
|
return (
|
||||||
|
<KnobDimmer
|
||||||
updateDev={props.updateDeviceUi}
|
updateDev={props.updateDeviceUi}
|
||||||
onChangeData={props.changeDeviceData}
|
onChangeData={props.changeDeviceData}
|
||||||
device={props.device}
|
device={props.device}
|
||||||
|
|
|
||||||
|
|
@ -7,36 +7,97 @@
|
||||||
The user can change the state of a dimmer through an intuitive UI in SmartHut .
|
The user can change the state of a dimmer through an intuitive UI in SmartHut .
|
||||||
**/
|
**/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component, useState } from 'react';
|
||||||
|
import {
|
||||||
|
CircularInput,
|
||||||
|
CircularProgress,
|
||||||
|
CircularThumb,
|
||||||
|
useCircularInputContext
|
||||||
|
} from "react-circular-input";
|
||||||
|
import { ButtonDimmerContainer, MinusPanel, PlusPanel, ThumbText } from "./styleComponents";
|
||||||
|
import Settings from "./DeviceSettings";
|
||||||
|
import {
|
||||||
|
CircularThumbStyle,
|
||||||
|
KnobDimmerStyle,
|
||||||
|
KnobProgress,
|
||||||
|
ValueStyle,
|
||||||
|
textStyle,
|
||||||
|
knobIcon,
|
||||||
|
knobContainer
|
||||||
|
} from "./DimmerStyle";
|
||||||
|
|
||||||
export class StatefulDimmer extends Component {
|
export class ButtonDimmer extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {};
|
||||||
intensityLevel: 0,
|
|
||||||
pointingLDevices: [],
|
|
||||||
};
|
};
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {}
|
increaseIntensity = () => {
|
||||||
|
console.log("Increase!")
|
||||||
|
};
|
||||||
|
decreaseIntensity = () => {
|
||||||
|
console.log("Decrease!")
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
componentDidMount() {
|
||||||
return <div>This is a Dimmer</div>;
|
};
|
||||||
}
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<ButtonDimmerContainer>
|
||||||
|
<Settings
|
||||||
|
deviceId={this.props.device.id}
|
||||||
|
edit={this.props.edit}
|
||||||
|
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
|
||||||
|
<img alt="icon" src="/img/buttonDimmer.svg" />
|
||||||
|
<span className="knob">
|
||||||
|
{this.props.device.name}
|
||||||
|
</span>
|
||||||
|
<PlusPanel onClick={this.increaseIntensity}>
|
||||||
|
<span>+</span>
|
||||||
|
</PlusPanel>
|
||||||
|
<MinusPanel onClick={this.decreaseIntensity}>
|
||||||
|
<span>−</span>
|
||||||
|
</MinusPanel>
|
||||||
|
|
||||||
|
</ButtonDimmerContainer>
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class DefaultDimmer extends Component {
|
export class KnobDimmer extends Component {
|
||||||
// As far as I am concern, even though this dimmer doesn't have state, internally it's needed
|
constructor(props) {
|
||||||
constructor(props) {
|
super(props);
|
||||||
super(props);
|
this.state = {
|
||||||
this.state = {
|
pointingDevices: [],
|
||||||
pointingDevices: [],
|
value: 1
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {}
|
|
||||||
|
|
||||||
render() {
|
componentDidMount() {
|
||||||
return <div>This is a Dimmer</div>;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div style={knobContainer}>
|
||||||
|
<Settings
|
||||||
|
deviceId={this.props.device.id}
|
||||||
|
edit={this.props.edit}
|
||||||
|
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
|
||||||
|
<CircularInput style={KnobDimmerStyle} value={this.state.value}
|
||||||
|
onChange={(value) => this.setState({ value: value })}>
|
||||||
|
|
||||||
|
<text style={textStyle} x={100} y={120} textAnchor="middle" dy="0.3em" fontWeight="bold">
|
||||||
|
{this.props.device.name}
|
||||||
|
</text>
|
||||||
|
<CircularProgress style={{ ...KnobProgress, opacity: this.state.value + 0.1 }} />
|
||||||
|
<CircularThumb style={CircularThumbStyle} />
|
||||||
|
<ThumbText color={"#1a2849"} />
|
||||||
|
</CircularInput>
|
||||||
|
<img style={knobIcon} src="/img/knobDimmer.svg" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
71
smart-hut/src/components/dashboard/devices/DimmerStyle.js
Normal file
71
smart-hut/src/components/dashboard/devices/DimmerStyle.js
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
import {CircularThumb} from "react-circular-input";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export const KnobDimmerStyle = {
|
||||||
|
cursor: "pointer",
|
||||||
|
marginTop : "1rem",
|
||||||
|
width: "9rem",
|
||||||
|
height: "9rem",
|
||||||
|
fill: "#1a2849",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const KnobHolder = {
|
||||||
|
marginTop : "1rem",
|
||||||
|
cursor : "pointer",
|
||||||
|
padding : "3rem",
|
||||||
|
backgroundColor : "white",
|
||||||
|
width: "10rem",
|
||||||
|
height: "10rem",
|
||||||
|
}
|
||||||
|
|
||||||
|
export const KnobCircularTrack = {
|
||||||
|
fill : "white",
|
||||||
|
stroke :"#1a2849"
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const KnobIcon = {
|
||||||
|
fill: "#1a2849"
|
||||||
|
};
|
||||||
|
|
||||||
|
export const KnobProgress = {
|
||||||
|
stroke : "#1a2849",
|
||||||
|
strokeWidth : "3rem",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ValueStyle = {
|
||||||
|
pointerEvents: 'none',
|
||||||
|
fill: "#1a2849",
|
||||||
|
fontSize: "1.3rem",
|
||||||
|
fontFamily : "Lato",
|
||||||
|
textAnchor: "middle"
|
||||||
|
};
|
||||||
|
|
||||||
|
export const CircularThumbStyle = {
|
||||||
|
fill: "white",
|
||||||
|
stroke: "#1a2849",
|
||||||
|
strokeWidth : ".2rem",
|
||||||
|
r: "1.4rem"
|
||||||
|
};
|
||||||
|
|
||||||
|
export const textStyle = {
|
||||||
|
position: "absolute",
|
||||||
|
fill: "#1a2849",
|
||||||
|
fontSize: "1.5rem",
|
||||||
|
fontFamily: "Lato",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const knobIcon = {
|
||||||
|
position : "absolute",
|
||||||
|
left: "50%",
|
||||||
|
top: "30%",
|
||||||
|
transform: "translateX(-50%)",
|
||||||
|
width: "2rem",
|
||||||
|
height: "2rem",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const knobContainer = {
|
||||||
|
position: "relative",
|
||||||
|
width: "9rem",
|
||||||
|
height: "9rem",
|
||||||
|
}
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import { iconStyle, StyledDiv } from "./styleComponents";
|
import { iconStyle, StyledDiv, ThumbText } from "./styleComponents";
|
||||||
import Settings from "./DeviceSettings";
|
import Settings from "./DeviceSettings";
|
||||||
import { Image } from "semantic-ui-react";
|
import { Image } from "semantic-ui-react";
|
||||||
import {
|
import {
|
||||||
|
|
@ -19,10 +19,13 @@ import {
|
||||||
CircularTrack,
|
CircularTrack,
|
||||||
} from "react-circular-input";
|
} from "react-circular-input";
|
||||||
import {
|
import {
|
||||||
valueStyle,
|
LightDimmerContainer,
|
||||||
intensityLightStyle,
|
LightDimmerStyle,
|
||||||
style,
|
textStyle,
|
||||||
nameStyle,
|
nameStyle,
|
||||||
|
KnobProgress,
|
||||||
|
CircularThumbStyle,
|
||||||
|
knobIcon
|
||||||
} from "./LightStyle";
|
} from "./LightStyle";
|
||||||
import { call } from "../../../client_server";
|
import { call } from "../../../client_server";
|
||||||
|
|
||||||
|
|
@ -31,7 +34,7 @@ export default class Light extends Component {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
turnedOn: false,
|
turnedOn: false,
|
||||||
intensity: 0,
|
intensity: props.device.intensity,
|
||||||
};
|
};
|
||||||
this.iconOn = "/img/lightOn.svg";
|
this.iconOn = "/img/lightOn.svg";
|
||||||
this.iconOff = "/img/lightOff.svg";
|
this.iconOff = "/img/lightOff.svg";
|
||||||
|
|
@ -63,6 +66,16 @@ export default class Light extends Component {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
getIcon = () => {
|
||||||
|
if (this.state.turnedOn) {
|
||||||
|
return this.iconOn;
|
||||||
|
}
|
||||||
|
return this.iconOff;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
setIntensity = (newValue) => {
|
setIntensity = (newValue) => {
|
||||||
this.props.device.intensity =
|
this.props.device.intensity =
|
||||||
Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100);
|
Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100);
|
||||||
|
|
@ -76,79 +89,51 @@ export default class Light extends Component {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
getIcon = () => {
|
|
||||||
if (this.state.turnedOn) {
|
|
||||||
return this.iconOn;
|
|
||||||
}
|
|
||||||
return this.iconOff;
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
if (this.props.device.hasOwnProperty("intensity")) {
|
|
||||||
this.setState({
|
|
||||||
intensity: this.props.device.intensity,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.setState({
|
|
||||||
turnedOn: this.props.device.on,
|
|
||||||
});
|
|
||||||
// Get the state and update it
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const intensityLightView = (
|
const intensityLightView = (
|
||||||
<CircularInput
|
<div style={LightDimmerContainer}>
|
||||||
value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
|
|
||||||
onChange={this.setIntensity}
|
|
||||||
style={style}
|
|
||||||
>
|
|
||||||
<CircularTrack />
|
|
||||||
<CircularProgress />
|
|
||||||
<CircularThumb />
|
|
||||||
|
|
||||||
<text
|
|
||||||
style={valueStyle}
|
|
||||||
x={100}
|
|
||||||
y={100}
|
|
||||||
textAnchor="middle"
|
|
||||||
dy="0.3em"
|
|
||||||
fontWeight="bold"
|
|
||||||
>
|
|
||||||
{Math.round(this.state.intensity)}%
|
|
||||||
</text>
|
|
||||||
<text
|
|
||||||
style={intensityLightStyle}
|
|
||||||
x={100}
|
|
||||||
y={150}
|
|
||||||
textAnchor="middle"
|
|
||||||
dy="0.3em"
|
|
||||||
fontWeight="bold"
|
|
||||||
>
|
|
||||||
{this.props.device.name}
|
|
||||||
</text>
|
|
||||||
</CircularInput>
|
|
||||||
);
|
|
||||||
|
|
||||||
const normalLightView = (
|
|
||||||
<div onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
|
|
||||||
<Image src={this.getIcon()} style={iconStyle} />
|
|
||||||
<h5 style={nameStyle}>{this.props.device.name}</h5>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StyledDiv>
|
|
||||||
<Settings
|
<Settings
|
||||||
deviceId={this.props.device.id}
|
deviceId={this.props.device.id}
|
||||||
edit={this.props.edit}
|
edit={this.props.edit}
|
||||||
onChangeData={(id, newSettings) =>
|
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
|
||||||
this.props.onChangeData(id, newSettings)
|
<CircularInput style={LightDimmerStyle}
|
||||||
}
|
value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
|
||||||
/>
|
onChange={this.setIntensity}>
|
||||||
{this.props.device.intensity >= 0
|
<text style={textStyle} x={100} y={120} textAnchor="middle" dy="0.3em" fontWeight="bold">
|
||||||
? intensityLightView
|
{this.props.device.name}
|
||||||
: normalLightView}
|
</text>
|
||||||
</StyledDiv>
|
<CircularProgress style={{ ...KnobProgress, opacity: this.state.intensity + 0.3 }} />
|
||||||
|
<CircularThumb style={CircularThumbStyle} />
|
||||||
|
<ThumbText color={"#ffd31d"} />
|
||||||
|
</CircularInput>
|
||||||
|
<Image style={knobIcon} src="/img/intensityLightIcon.svg" />
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
|
const normalLightView = (
|
||||||
|
<StyledDiv>
|
||||||
|
<div onClick={this.props.edit.mode ? () => {
|
||||||
|
} : this.onClickDevice}>
|
||||||
|
<Image src={this.getIcon()} style={iconStyle} />
|
||||||
|
<h5 style={nameStyle}>{this.props.device.name}</h5>
|
||||||
|
</div>
|
||||||
|
</StyledDiv>
|
||||||
|
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Settings
|
||||||
|
deviceId={this.props.device.id}
|
||||||
|
edit={this.props.edit}
|
||||||
|
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
|
||||||
|
{
|
||||||
|
this.props.device.intensity ? (intensityLightView) : (normalLightView)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,12 +13,20 @@ export const valueStyle = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const intensityLightStyle = {
|
export const intensityLightStyle = {
|
||||||
fill: "#3e99ff",
|
fill: "#ffd31d",
|
||||||
fontSize: "1.2rem",
|
fontSize: "1.2rem",
|
||||||
fontFamily: "Lato",
|
fontFamily: "Lato",
|
||||||
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
|
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const textStyle = {
|
||||||
|
position: "absolute",
|
||||||
|
fill: "#ffd31d",
|
||||||
|
fontSize: "1.5rem",
|
||||||
|
fontFamily: "Lato",
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
export const nameStyle = {
|
export const nameStyle = {
|
||||||
fontSize: "1rem",
|
fontSize: "1rem",
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
|
|
@ -27,3 +35,38 @@ export const nameStyle = {
|
||||||
transform: "translateX(-50%)",
|
transform: "translateX(-50%)",
|
||||||
color: "black",
|
color: "black",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const LightDimmerStyle = {
|
||||||
|
cursor: "pointer",
|
||||||
|
marginTop: "1rem",
|
||||||
|
width: "9rem",
|
||||||
|
height: "9rem",
|
||||||
|
fill: "#ffd31d",
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LightDimmerContainer = {
|
||||||
|
position: "relative",
|
||||||
|
width: "9rem",
|
||||||
|
height: "9rem",
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CircularThumbStyle = {
|
||||||
|
fill: "white",
|
||||||
|
stroke: "#ffd31d",
|
||||||
|
strokeWidth: ".2rem",
|
||||||
|
r: "1.4rem"
|
||||||
|
};
|
||||||
|
|
||||||
|
export const KnobProgress = {
|
||||||
|
stroke: "#ffd31d",
|
||||||
|
strokeWidth: "3rem",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const knobIcon = {
|
||||||
|
position: "absolute",
|
||||||
|
left: "50%",
|
||||||
|
top: "30%",
|
||||||
|
transform: "translateX(-50%)",
|
||||||
|
width: "2rem",
|
||||||
|
height: "2rem",
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -11,17 +11,21 @@ import {
|
||||||
} from "semantic-ui-react";
|
} from "semantic-ui-react";
|
||||||
|
|
||||||
const StyledDiv = styled.div`
|
const StyledDiv = styled.div`
|
||||||
background-color: #ff4050;
|
background-color : #505bda;
|
||||||
padding: 3rem;
|
padding : 3rem;
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
border: none;
|
border: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: 3px 2px 10px 5px #ccc;
|
box-shadow: 3px 2px 10px 5px #ccc;
|
||||||
transition: all 0.3s ease-out;
|
transition : all .3s ease-out;
|
||||||
:hover {
|
:hover{
|
||||||
background-color: #ff2436;
|
background-color : #4345d9;
|
||||||
|
}
|
||||||
|
:active{
|
||||||
|
transform : translate(0.3px, 0.8px);
|
||||||
|
box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
@ -144,10 +148,10 @@ export default class NewDevice extends Component {
|
||||||
image: { avatar: true, src: "/img/switchOn.svg" },
|
image: { avatar: true, src: "/img/switchOn.svg" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "buttonDimmer",
|
key: 'buttonDimmer',
|
||||||
text: "Button Dimmer",
|
text: 'Button Dimmer',
|
||||||
value: "buttonDimmer",
|
value: 'buttonDimmer',
|
||||||
image: { avatar: true, src: "/img/dimmer.svg" },
|
image: { avatar: true, src: '/img/plusMinus.svg' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "knobDimmer",
|
key: "knobDimmer",
|
||||||
|
|
@ -274,7 +278,7 @@ export default class NewDevice extends Component {
|
||||||
{this.state.typeOfDevice === "sensor" ? sensorForm : ""}
|
{this.state.typeOfDevice === "sensor" ? sensorForm : ""}
|
||||||
{this.state.typeOfDevice === "switch" ? switchOptions : ""}
|
{this.state.typeOfDevice === "switch" ? switchOptions : ""}
|
||||||
{this.state.typeOfDevice === "buttonDimmer" ||
|
{this.state.typeOfDevice === "buttonDimmer" ||
|
||||||
this.state.typeOfDevice === "knobDimmer"
|
this.state.typeOfDevice === "knobDimmer"
|
||||||
? dimmerOptions
|
? dimmerOptions
|
||||||
: ""}
|
: ""}
|
||||||
</Form>
|
</Form>
|
||||||
|
|
@ -307,8 +311,8 @@ export default class NewDevice extends Component {
|
||||||
Back
|
Back
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
{this.state.step < steps.length ? (
|
{this.state.step < steps.length ? (
|
||||||
<Button
|
<Button
|
||||||
color="blue"
|
color="blue"
|
||||||
|
|
@ -320,8 +324,8 @@ export default class NewDevice extends Component {
|
||||||
<Icon name="right arrow" />
|
<Icon name="right arrow" />
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
{this.state.step === steps.length ? (
|
{this.state.step === steps.length ? (
|
||||||
<Button
|
<Button
|
||||||
onClick={this.createDevice}
|
onClick={this.createDevice}
|
||||||
|
|
@ -333,8 +337,8 @@ export default class NewDevice extends Component {
|
||||||
Finish
|
Finish
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
</Modal.Actions>
|
</Modal.Actions>
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -5,10 +5,10 @@
|
||||||
The user can reset this value.
|
The user can reset this value.
|
||||||
**/
|
**/
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import { StyledDiv } from "./styleComponents";
|
import { StyledDiv, BottomPanel } from "./styleComponents";
|
||||||
import Settings from "./DeviceSettings";
|
import Settings from "./DeviceSettings";
|
||||||
import { Image } from "semantic-ui-react";
|
import { Image } from "semantic-ui-react";
|
||||||
import { energyConsumedStyle, imageStyle, nameStyle } from "./SmartPlugStyle";
|
import { energyConsumedStyle, imageStyle, nameStyle, kwhStyle } from "./SmartPlugStyle";
|
||||||
import { call } from "../../../client_server";
|
import { call } from "../../../client_server";
|
||||||
|
|
||||||
export default class SmartPlug extends Component {
|
export default class SmartPlug extends Component {
|
||||||
|
|
@ -33,19 +33,6 @@ export default class SmartPlug extends Component {
|
||||||
call.socketSubscribe(this.props.device.id, this.stateCallback);
|
call.socketSubscribe(this.props.device.id, this.stateCallback);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
call.socketUnsubscribe(this.props.device.id, this.stateCallback);
|
|
||||||
}
|
|
||||||
|
|
||||||
onClickDevice = () => {
|
|
||||||
this.props.device.on = !this.state.turnedOn;
|
|
||||||
call.deviceUpdate(this.props.device, "smartPlug").then((res) => {
|
|
||||||
if (res.status === 200) {
|
|
||||||
this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
getIcon = () => {
|
getIcon = () => {
|
||||||
if (this.state.turnedOn) {
|
if (this.state.turnedOn) {
|
||||||
return this.iconOn;
|
return this.iconOn;
|
||||||
|
|
@ -60,20 +47,27 @@ export default class SmartPlug extends Component {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
call.socketUnsubscribe(this.props.device.id, this.stateCallback);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
|
<StyledDiv onClick={this.props.edit.mode ? () => {
|
||||||
|
} : this.onClickDevice}>
|
||||||
<Settings
|
<Settings
|
||||||
deviceId={this.props.device.id}
|
deviceId={this.props.device.id}
|
||||||
edit={this.props.edit}
|
edit={this.props.edit}
|
||||||
onChangeData={(id, newSettings) =>
|
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
|
||||||
this.props.onChangeData(id, newSettings)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Image src={this.getIcon()} style={imageStyle} />
|
<Image src={this.getIcon()} style={imageStyle} />
|
||||||
<h4 style={energyConsumedStyle}>{this.state.energyConsumed} KWh</h4>
|
<span style={nameStyle}>{this.props.device.name}</span>
|
||||||
<h5 style={nameStyle}>{this.props.device.name}</h5>
|
|
||||||
|
<BottomPanel style={this.state.turnedOn ? { backgroundColor: "#505bda" } : { backgroundColor: "#1a2849" }}>
|
||||||
|
<span style={energyConsumedStyle}>{this.state.energyConsumed}</span><span style={kwhStyle}>KWh</span>
|
||||||
|
</BottomPanel>
|
||||||
</StyledDiv>
|
</StyledDiv>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,35 @@
|
||||||
export const energyConsumedStyle = {
|
export const energyConsumedStyle = {
|
||||||
color: "black",
|
color: "white",
|
||||||
fontSize: "1.3rem",
|
fontSize: "1.3rem",
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: "30%",
|
top: "20%",
|
||||||
left: "50%",
|
left: "50%",
|
||||||
transform: "translateX(-50%)",
|
transform: "translateX(-50%)"
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const kwhStyle = {
|
||||||
|
color: "white",
|
||||||
|
fontSize: "1rem",
|
||||||
|
position: "absolute",
|
||||||
|
top: "50%",
|
||||||
|
left: "50%",
|
||||||
|
transform: "translateX(-50%)"
|
||||||
|
}
|
||||||
|
|
||||||
export const imageStyle = {
|
export const imageStyle = {
|
||||||
width: "3.5rem",
|
width: "2rem",
|
||||||
height: "auto",
|
height: "auto",
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: "10%",
|
top: "5%",
|
||||||
left: "50%",
|
left: "50%",
|
||||||
transform: "translateX(-50%)",
|
transform: "translateX(-35%)",
|
||||||
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))",
|
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))"
|
||||||
};
|
};
|
||||||
|
|
||||||
export const nameStyle = {
|
export const nameStyle = {
|
||||||
color: "black",
|
color: "black",
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: "50%",
|
top: "30%",
|
||||||
left: "50%",
|
left: "50%",
|
||||||
transform: "translateX(-50%)",
|
transform: "translateX(-50%)"
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -5,11 +5,12 @@
|
||||||
* The user can change the state of a switch through the SmartHut interface.
|
* The user can change the state of a switch through the SmartHut interface.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from 'react';
|
||||||
import { StyledDiv } from "./styleComponents";
|
import { BottomPanel, StyledDiv } from "./styleComponents";
|
||||||
import Settings from "./DeviceSettings";
|
import Settings from "./DeviceSettings";
|
||||||
import { Image } from "semantic-ui-react";
|
import { Image } from "semantic-ui-react";
|
||||||
import { imageStyle, nameStyle } from "./SwitchStyle";
|
import { imageStyle, nameStyle } from "./SwitchStyle";
|
||||||
|
import { energyConsumedStyle } from "./SmartPlugStyle";
|
||||||
import { call } from "../../../client_server";
|
import { call } from "../../../client_server";
|
||||||
|
|
||||||
export default class Switch extends Component {
|
export default class Switch extends Component {
|
||||||
|
|
@ -17,12 +18,19 @@ export default class Switch extends Component {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
turnedOn: false,
|
turnedOn: false,
|
||||||
pointingLights: [],
|
pointingLights: []
|
||||||
};
|
};
|
||||||
this.iconOn = "/img/switchOn.svg";
|
this.iconOn = "/img/switchOn.svg";
|
||||||
this.iconOff = "/img/switchOff.svg";
|
this.iconOff = "/img/switchOff.svg";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getIcon = () => {
|
||||||
|
if (this.state.turnedOn) {
|
||||||
|
return this.iconOn;
|
||||||
|
}
|
||||||
|
return this.iconOff;
|
||||||
|
};
|
||||||
|
|
||||||
onClickDevice = () => {
|
onClickDevice = () => {
|
||||||
this.props.device.on = !this.state.turnedOn;
|
this.props.device.on = !this.state.turnedOn;
|
||||||
let state = "";
|
let state = "";
|
||||||
|
|
@ -42,13 +50,6 @@ export default class Switch extends Component {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
getIcon = () => {
|
|
||||||
if (this.state.turnedOn) {
|
|
||||||
return this.iconOn;
|
|
||||||
}
|
|
||||||
return this.iconOff;
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.setState({
|
this.setState({
|
||||||
turnedOn: this.props.device.on,
|
turnedOn: this.props.device.on,
|
||||||
|
|
@ -57,16 +58,20 @@ export default class Switch extends Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
|
<StyledDiv
|
||||||
|
onClick={this.props.edit.mode ? () => {
|
||||||
|
} : this.onClickDevice}>
|
||||||
<Settings
|
<Settings
|
||||||
deviceId={this.props.device.id}
|
deviceId={this.props.device.id}
|
||||||
edit={this.props.edit}
|
edit={this.props.edit}
|
||||||
onChangeData={(id, newSettings) =>
|
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
|
||||||
this.props.onChangeData(id, newSettings)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Image src={this.getIcon()} style={imageStyle} />
|
<Image src={this.getIcon()} style={imageStyle} />
|
||||||
<h5 style={nameStyle}>{this.props.device.name}</h5>
|
<span style={nameStyle}>{this.props.device.name}</span>
|
||||||
|
|
||||||
|
<BottomPanel style={this.state.turnedOn ? { backgroundColor: "#505bda" } : { backgroundColor: "#1a2849" }}>
|
||||||
|
<span style={energyConsumedStyle}>{this.state.turnedOn ? "ON" : "OFF"}</span>
|
||||||
|
</BottomPanel>
|
||||||
</StyledDiv>
|
</StyledDiv>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,16 @@
|
||||||
export const imageStyle = {
|
export const imageStyle = {
|
||||||
width: "4.5rem",
|
width: "2rem",
|
||||||
height: "auto",
|
height: "auto",
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: "15%",
|
top: "5%",
|
||||||
left: "50%",
|
left: "50%",
|
||||||
transform: "translateX(-50%)",
|
transform: "translateX(-50%)",
|
||||||
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))",
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const nameStyle = {
|
export const nameStyle = {
|
||||||
color: "black",
|
color: "black",
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: "45%",
|
top: "30%",
|
||||||
left: "50%",
|
left: "50%",
|
||||||
transform: "translateX(-50%)",
|
transform: "translateX(-50%)",
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,25 @@
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
import { useCircularInputContext } from "react-circular-input";
|
||||||
|
import { ValueStyle } from "./DimmerStyle";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
export const editButtonStyle = {
|
export const editButtonStyle = {
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: "0",
|
top: "0",
|
||||||
right: "0",
|
right: "0",
|
||||||
backgroundColor: "#3e99ff",
|
backgroundColor: "#505bda",
|
||||||
borderRadius: "0 0 0 20px",
|
borderRadius: "0 0 0 20px",
|
||||||
|
border: "none",
|
||||||
padding: ".4rem 1.2rem",
|
padding: ".4rem 1.2rem",
|
||||||
outline: "none",
|
outline: "none",
|
||||||
color: "white",
|
color: "white",
|
||||||
fontFamily: "Lato",
|
fontFamily: "Lato",
|
||||||
textTransform: "uppercase",
|
textTransform: "uppercase"
|
||||||
};
|
};
|
||||||
|
|
||||||
export const panelStyle = {
|
export const panelStyle = {
|
||||||
position: "relative",
|
position: "relative",
|
||||||
backgroundColor: "black",
|
backgroundColor: "#fafafa",
|
||||||
height: "100vh",
|
height: "100vh",
|
||||||
width: "auto",
|
width: "auto",
|
||||||
padding: "0rem 3rem",
|
padding: "0rem 3rem",
|
||||||
|
|
@ -41,7 +45,7 @@ export const editModeIconStyle = {
|
||||||
width: "0.75rem",
|
width: "0.75rem",
|
||||||
height: "0.75rem",
|
height: "0.75rem",
|
||||||
borderRadius: "20%",
|
borderRadius: "20%",
|
||||||
zIndex: "101",
|
zIndex: "101"
|
||||||
};
|
};
|
||||||
|
|
||||||
export const iconStyle = {
|
export const iconStyle = {
|
||||||
|
|
@ -51,13 +55,13 @@ export const iconStyle = {
|
||||||
top: "20%",
|
top: "20%",
|
||||||
left: "50%",
|
left: "50%",
|
||||||
transform: "translateX(-50%)",
|
transform: "translateX(-50%)",
|
||||||
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))",
|
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))"
|
||||||
};
|
};
|
||||||
export const nameStyle = {
|
export const nameStyle = {
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: "50%",
|
top: "50%",
|
||||||
left: "50%",
|
left: "50%",
|
||||||
transform: "translateX(-50%)",
|
transform: "translateX(-50%)"
|
||||||
};
|
};
|
||||||
|
|
||||||
export const formStyle = {
|
export const formStyle = {
|
||||||
|
|
@ -79,8 +83,9 @@ export const addDeviceFormStyle = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const StyledDiv = styled.div`
|
export const StyledDiv = styled.div`
|
||||||
background-color: white;
|
cursor: pointer;
|
||||||
padding: 3rem;
|
background-color : white;
|
||||||
|
padding : 3rem;
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
|
|
@ -97,3 +102,113 @@ export const StyledDiv = styled.div`
|
||||||
box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
|
box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
export const ButtonDimmerContainer = styled.div`
|
||||||
|
background-color : white;
|
||||||
|
padding : 3rem;
|
||||||
|
width: 10rem;
|
||||||
|
height: 10rem;
|
||||||
|
border-radius : 100%;
|
||||||
|
border : none;
|
||||||
|
position : relative;
|
||||||
|
box-shadow: 3px 2px 10px 5px #ccc;
|
||||||
|
transition : all .3s ease-out;
|
||||||
|
text-align : center;
|
||||||
|
display: inline-block;
|
||||||
|
.knob {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 10rem;
|
||||||
|
color: #1a2849;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const PlusPanel = styled.div`
|
||||||
|
position : absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
bottom: 0;
|
||||||
|
left: 5rem;
|
||||||
|
background-color: #1a2849;
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
border-radius: 0 0 5rem 0;
|
||||||
|
:hover{
|
||||||
|
background-color : #505bda;
|
||||||
|
}
|
||||||
|
:active{
|
||||||
|
transform : translate(0.3px, 0.8px);
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: white;
|
||||||
|
position: absolute;
|
||||||
|
top: 40%;
|
||||||
|
left: 45%;
|
||||||
|
font-size: 3rem;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const MinusPanel = styled.div`
|
||||||
|
cursor: pointer;
|
||||||
|
position : absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: #1a2849;
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
border-radius: 0 0 0 5rem;
|
||||||
|
:hover{
|
||||||
|
background-color : #505bda;
|
||||||
|
}
|
||||||
|
:active{
|
||||||
|
transform : translate(0.3px, 0.8px);
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: white;
|
||||||
|
position: absolute;
|
||||||
|
top: 40%;
|
||||||
|
left: 45%;
|
||||||
|
font-size: 3rem;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const BottomPanel = styled.div`
|
||||||
|
position : absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0rem;
|
||||||
|
width: 10rem;
|
||||||
|
height: 5rem;
|
||||||
|
border-bottom-left-radius: 10rem;
|
||||||
|
border-bottom-right-radius: 10rem;
|
||||||
|
span {
|
||||||
|
color: white;
|
||||||
|
position: absolute;
|
||||||
|
top: 40%;
|
||||||
|
left: 45%;
|
||||||
|
font-size: 3rem;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ThumbText = (props) => {
|
||||||
|
const { getPointFromValue, value } = useCircularInputContext();
|
||||||
|
const { x, y } = getPointFromValue();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<text style={{ ...ValueStyle, fill: props.color }} x={x} y={y + 5}>
|
||||||
|
{Math.round(value * 100)}
|
||||||
|
</text>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue