Merge branch '60-create-dimmers' into 'dev'
Resolve "create dimmers" Closes #60 See merge request sa4-2020/the-sanmarinoes/frontend!69
This commit is contained in:
commit
01dafc861c
27 changed files with 838 additions and 336 deletions
14
smart-hut/package-lock.json
generated
14
smart-hut/package-lock.json
generated
|
|
@ -10483,6 +10483,12 @@
|
||||||
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
|
||||||
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
|
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
|
||||||
},
|
},
|
||||||
|
"prettier": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-piXGBcY1zoFOG0MvHpNE5reAGseLmaCRifQ/fmfF49BcYkInEs/naD/unxGNAeOKFA5+JxVrPyMvMlpzcd20UA==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"pretty-bytes": {
|
"pretty-bytes": {
|
||||||
"version": "5.3.0",
|
"version": "5.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
|
||||||
|
|
@ -10897,6 +10903,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react-device-detect": {
|
||||||
|
"version": "1.11.14",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-1.11.14.tgz",
|
||||||
|
"integrity": "sha512-WSjch241xI+rXHVtJaSYxNUT2WAykzfJgMI2Hg9xjNNTlIZdJu/fmWf4iedNH7qzFq+JaJ6fDJu3mrKFLerKBw==",
|
||||||
|
"requires": {
|
||||||
|
"ua-parser-js": "^0.7.20"
|
||||||
|
}
|
||||||
|
},
|
||||||
"react-dom": {
|
"react-dom": {
|
||||||
"version": "16.12.0",
|
"version": "16.12.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.12.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.12.0.tgz",
|
||||||
|
|
|
||||||
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 |
12
smart-hut/public/img/humidityIcon.svg
Normal file
12
smart-hut/public/img/humidityIcon.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<?xml version="1.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.005 512.005" style="enable-background:new 0 0 512.005 512.005;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M327.159,2.766c-4.063-3.688-10.25-3.688-14.313,0c-4.642,4.186-110.889,101.292-160.228,213.839 c-5.318-1.867-11.44-3.266-19.355-3.266c-18.677,0-28.698,6.969-36.75,12.573c-7.031,4.896-12.583,8.76-24.573,8.76 c-11.969,0-17.521-3.865-24.542-8.75c-8.042-5.604-18.063-12.583-36.729-12.583c-5.896,0-10.667,4.771-10.667,10.667 c0,5.896,4.771,10.667,10.667,10.667c11.969,0,17.521,3.865,24.542,8.75c8.042,5.604,18.063,12.583,36.729,12.583 c18.677,0,28.708-6.979,36.76-12.583c7.031-4.885,12.583-8.75,24.563-8.75c12,0,17.563,3.865,24.604,8.76 c8.052,5.604,18.083,12.573,36.771,12.573c18.677,0,28.708-6.969,36.771-12.573c7.031-4.896,12.594-8.76,24.594-8.76 c5.896,0,10.667-4.771,10.667-10.667c0-5.896-4.771-10.667-10.667-10.667c-18.687,0-28.719,6.969-36.781,12.573 c-7.031,4.896-12.594,8.76-24.583,8.76c-11.208,0-16.823-3.419-23.242-7.854c40.121-92.661,123.661-177.466,148.607-201.49 c33.219,32.01,170.667,171.865,170.667,294.677c0,94.104-76.563,170.667-170.667,170.667c-42.477,0-82.669-15.822-113.78-43.758 c11.542-2.138,18.994-7.177,25.186-11.482c7.031-4.896,12.594-8.76,24.594-8.76c5.896,0,10.667-4.771,10.667-10.667 s-4.771-10.667-10.667-10.667c-18.687,0-28.719,6.969-36.781,12.573c-7.031,4.896-12.594,8.76-24.583,8.76 c-12,0-17.563-3.865-24.594-8.76c-8.063-5.604-18.094-12.573-36.781-12.573c-18.677,0-28.698,6.969-36.75,12.573 c-7.031,4.896-12.583,8.76-24.573,8.76c-11.969,0-17.521-3.865-24.542-8.75c-8.042-5.604-18.063-12.583-36.729-12.583 c-5.896,0-10.667,4.771-10.667,10.667s4.771,10.667,10.667,10.667c11.969,0,17.521,3.865,24.542,8.75 c8.042,5.604,18.063,12.583,36.729,12.583c18.677,0,28.708-6.979,36.76-12.583c7.031-4.885,12.583-8.75,24.563-8.75 c12,0,17.563,3.865,24.604,8.76c4.345,3.023,9.414,6.355,15.961,8.865c36.6,42.996,89.655,67.708,146.174,67.708 c105.865,0,192-86.135,192-192C512.003,171.641,334.701,9.589,327.159,2.766z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
<path d="M10.669,362.672c11.969,0,17.521,3.865,24.542,8.75c8.042,5.604,18.063,12.583,36.729,12.583 c5.896,0,10.667-4.771,10.667-10.667c0-5.896-4.771-10.667-10.667-10.667c-11.969,0-17.521-3.865-24.542-8.75 c-8.042-5.604-18.063-12.583-36.729-12.583c-5.896,0-10.667,4.771-10.667,10.667S4.773,362.672,10.669,362.672z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
<path d="M133.263,341.339c-5.896,0-10.667,4.771-10.667,10.667s4.771,10.667,10.667,10.667c12,0,17.563,3.865,24.594,8.76 c8.063,5.604,18.094,12.573,36.781,12.573c18.677,0,28.708-6.969,36.771-12.573c7.031-4.896,12.594-8.76,24.594-8.76 c12.198,0,18.406,3.969,26.25,8.99c9.052,5.781,19.313,12.344,37.75,12.344c5.896,0,10.667-4.771,10.667-10.667 c0-5.896-4.771-10.667-10.667-10.667c-12.198,0-18.406-3.969-26.25-8.99c-9.052-5.781-19.313-12.344-37.75-12.344 c-18.687,0-28.719,6.969-36.781,12.573c-7.031,4.896-12.594,8.76-24.583,8.76c-12,0-17.563-3.865-24.604-8.76 C161.982,348.307,151.951,341.339,133.263,341.339z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
<path d="M133.263,277.339c-18.677,0-28.698,6.969-36.75,12.573c-7.031,4.896-12.583,8.76-24.573,8.76 c-11.969,0-17.521-3.865-24.542-8.75c-8.042-5.604-18.063-12.583-36.729-12.583c-5.896,0-10.667,4.771-10.667,10.667 c0,5.896,4.771,10.667,10.667,10.667c11.969,0,17.521,3.865,24.542,8.75c8.042,5.604,18.063,12.583,36.729,12.583 c18.677,0,28.708-6.979,36.76-12.583c7.031-4.885,12.583-8.75,24.563-8.75c5.896,0,10.667-4.771,10.667-10.667 C143.93,282.109,139.159,277.339,133.263,277.339z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
<path d="M231.409,307.432c7.031-4.896,12.594-8.76,24.594-8.76c11.969,0,17.521,3.865,24.542,8.75 c8.042,5.604,18.063,12.583,36.729,12.583c18.677,0,28.708-6.979,36.76-12.583c7.031-4.885,12.583-8.75,24.563-8.75 c5.896,0,10.667-4.771,10.667-10.667c0-5.896-4.771-10.667-10.667-10.667c-18.677,0-28.698,6.969-36.75,12.573 c-7.031,4.896-12.583,8.76-24.573,8.76c-11.969,0-17.521-3.865-24.542-8.75c-8.042-5.604-18.063-12.583-36.729-12.583 c-18.687,0-28.719,6.969-36.781,12.573c-7.031,4.896-12.594,8.76-24.583,8.76c-5.896,0-10.667,4.771-10.667,10.667 s4.771,10.667,10.667,10.667C213.315,320.005,223.346,313.036,231.409,307.432z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g></g> </svg>
|
||||||
|
After Width: | Height: | Size: 4.7 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 |
58
smart-hut/public/img/lightSensorIcon.svg
Normal file
58
smart-hut/public/img/lightSensorIcon.svg
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
<?xml version="1.0"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_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>
|
||||||
|
<g>
|
||||||
|
<rect x="241" width="30" height="56" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<rect x="389.218" y="79.775" transform="matrix(0.7071 -0.7071 0.7071 0.7071 55.1847 322.7765)" width="55.999" height="30" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<rect x="456" y="241" width="56" height="30" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<rect x="402.22" y="389.213" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -172.8129 417.2178)" width="30" height="55.999" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<rect x="241" y="456" width="30" height="56" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<rect x="66.783" y="402.215" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -267.2545 189.221)" width="55.999" height="30" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<rect y="241" width="56" height="30" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<rect x="79.779" y="66.777" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -39.2574 94.7787)" width="30" height="55.999" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M373.5,271v90.174c21.892-24.433,36.293-55.704,39.559-90.174H373.5z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M256,98.224c-81.939,0-149.479,62.788-157.059,142.776h314.118C405.479,161.012,337.939,98.224,256,98.224z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M305.167,271v134.922c13.696-4.502,26.571-10.829,38.333-18.698V271H305.167z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M98.941,271c3.266,34.47,17.667,65.741,39.559,90.174V271H98.941z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M236.833,271v141.61c6.285,0.765,12.68,1.167,19.167,1.167s12.882-0.402,19.167-1.167V271H236.833z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M168.5,271v116.224c11.762,7.869,24.637,14.196,38.333,18.698V271H168.5z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g></g> </svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
62
smart-hut/public/img/motionSensorIcon.svg
Normal file
62
smart-hut/public/img/motionSensorIcon.svg
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
<?xml version="1.0"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_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>
|
||||||
|
<g>
|
||||||
|
<path d="M418.998,498.791l-25.075-73.998c-1.375-4.06-5.185-6.791-9.471-6.791h-1.455v-145.01 c0-70.026-56.97-126.997-126.997-126.997s-126.997,56.97-126.997,126.997v145.01h-1.455c-4.286,0-8.096,2.731-9.471,6.791 l-25.074,73.998c-1.035,3.053-0.534,6.416,1.344,9.036c1.878,2.619,4.903,4.173,8.127,4.173h307.053 c3.224,0,6.249-1.554,8.127-4.173C419.532,505.207,420.033,501.844,418.998,498.791z M149.003,272.993 c0-58.998,47.999-106.997,106.997-106.997c58.998,0,106.997,47.999,106.997,106.997v145.01H149.003V272.993z M116.421,492.001 l18.297-53.998h242.563l18.298,53.998H116.421z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M256,0c-5.522,0-10,4.478-10,10v59.999c0,5.522,4.477,10,10,10c5.522,0,10-4.478,10-10V10C266,4.478,261.522,0,256,0z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M263.069,101.884c-1.859-1.86-4.439-2.92-7.069-2.92s-5.21,1.06-7.07,2.92c-1.86,1.87-2.93,4.439-2.93,7.08 c0,2.63,1.069,5.2,2.93,7.07c1.86,1.859,4.44,2.92,7.07,2.92s5.21-1.061,7.069-2.92c1.86-1.87,2.931-4.44,2.931-7.07 C266,106.323,264.93,103.754,263.069,101.884z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M95.504,267.66H49.587c-5.522,0-10,4.478-10,10s4.478,10,10,10h45.918c5.522,0,10-4.478,10-10 S101.026,267.66,95.504,267.66z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M17.076,270.59c-1.859-1.861-4.439-2.93-7.069-2.93s-5.21,1.069-7.07,2.93c-1.86,1.861-2.93,4.44-2.93,7.07 s1.069,5.21,2.93,7.069c1.86,1.86,4.44,2.931,7.07,2.931s5.21-1.07,7.069-2.931c1.86-1.859,2.931-4.439,2.931-7.069 S18.936,272.45,17.076,270.59z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M188.673,88.988l-13.554-32.721c-2.114-5.102-7.963-7.521-13.066-5.412c-5.103,2.114-7.525,7.964-5.412,13.066 l13.554,32.721c1.596,3.851,5.319,6.176,9.243,6.176c1.275,0,2.571-0.246,3.823-0.764 C188.364,99.939,190.786,94.089,188.673,88.988z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M74.981,191.855L42.26,178.301c-5.104-2.108-10.952,0.311-13.066,5.412c-2.113,5.103,0.31,10.952,5.412,13.066 l32.721,13.554c1.252,0.517,2.548,0.764,3.823,0.764c3.924,0,7.647-2.325,9.243-6.176 C82.506,199.818,80.083,193.969,74.981,191.855z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M466.58,267.66h-45.918c-5.522,0-10,4.478-10,10s4.478,10,10,10h45.918c5.522,0,10-4.478,10-10 S472.102,267.66,466.58,267.66z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M509.062,270.59c-1.859-1.86-4.439-2.93-7.069-2.93s-5.21,1.069-7.07,2.93s-2.93,4.44-2.93,7.07s1.069,5.21,2.93,7.069 c1.86,1.86,4.44,2.931,7.07,2.931s5.21-1.07,7.069-2.931c1.86-1.859,2.931-4.439,2.931-7.069S510.923,272.45,509.062,270.59z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M453.748,79.909c-3.906-3.904-10.236-3.904-14.143,0l-49.203,49.204c-3.905,3.905-3.905,10.237,0,14.143 c1.954,1.953,4.513,2.929,7.072,2.929c2.56,0,5.118-0.977,7.071-2.929l49.203-49.204 C457.652,90.147,457.652,83.815,453.748,79.909z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M121.596,129.113L72.393,79.911c-3.906-3.904-10.236-3.904-14.143,0c-3.905,3.905-3.905,10.237,0,14.143l49.204,49.203 c1.953,1.952,4.512,2.929,7.071,2.929c2.559,0,5.118-0.977,7.071-2.929C125.501,139.351,125.501,133.019,121.596,129.113z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M349.945,50.855c-5.103-2.108-10.952,0.311-13.066,5.412l-13.554,32.721c-2.113,5.102,0.31,10.951,5.412,13.066 c1.252,0.518,2.548,0.764,3.823,0.764c3.924,0,7.647-2.325,9.243-6.176l13.554-32.721 C357.47,58.817,355.047,52.969,349.945,50.855z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M482.805,183.713c-2.114-5.103-7.963-7.522-13.066-5.412l-32.721,13.554c-5.103,2.114-7.525,7.964-5.412,13.066 c1.596,3.851,5.319,6.176,9.243,6.176c1.275,0,2.571-0.246,3.823-0.764l32.721-13.554 C482.496,194.665,484.918,188.815,482.805,183.713z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M256,209.008c-16.542,0-29.999,13.458-29.999,29.999v47.999c0,16.542,13.458,29.999,29.999,29.999 s29.999-13.458,29.999-29.999v-47.999C285.999,222.466,272.542,209.008,256,209.008z M266,287.006c0,5.514-4.486,10-10,10 s-10-4.486-10-10v-47.999c0-5.514,4.486-10,10-10s10,4.486,10,10V287.006z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g><g>
|
||||||
|
<g>
|
||||||
|
<path d="M256,337.005c-16.542,0-29.999,13.458-29.999,29.999c0,16.542,13.458,29.999,29.999,29.999s29.999-13.458,29.999-29.999 C285.999,350.462,272.542,337.005,256,337.005z M256,377.004c-5.514,0-10-4.486-10-10s4.486-10,10-10s10,4.486,10,10 S261.514,377.004,256,377.004z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g></g> </svg>
|
||||||
|
After Width: | Height: | Size: 5.6 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"
|
<g>
|
||||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
<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"/>
|
||||||
<g>
|
</g>
|
||||||
<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
|
<g>
|
||||||
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
|
<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"/>
|
||||||
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
|
</g>
|
||||||
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>
|
<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>
|
||||||
<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"/>
|
|
||||||
</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>
|
|
||||||
|
|
|
||||||
|
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 |
18
smart-hut/public/img/temperatureIcon.svg
Normal file
18
smart-hut/public/img/temperatureIcon.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<?xml version="1.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>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M234.667,53.333C234.667,23.927,210.74,0,181.333,0S128,23.927,128,53.333v332.073 c-13.615,13.958-21.333,32.625-21.333,51.927c0,41.167,33.5,74.667,74.667,74.667C222.5,512,256,478.5,256,437.333 c0-19.302-7.719-37.969-21.333-51.927V53.333z M181.333,490.667c-29.406,0-53.333-23.927-53.333-53.333 c0-15.104,6.323-29.125,17.813-39.469c2.24-2.031,3.521-4.906,3.521-7.927V53.333c0-17.646,14.354-32,32-32 c17.646,0,32,14.354,32,32v336.604c0,3.021,1.281,5.896,3.521,7.927c11.49,10.344,17.813,24.365,17.813,39.469 C234.667,466.74,210.74,490.667,181.333,490.667z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
<path d="M192,407.298V224c0-5.896-4.771-10.667-10.667-10.667c-5.896,0-10.667,4.771-10.667,10.667v183.298 c-12.389,4.418-21.333,16.147-21.333,30.035c0,17.646,14.354,32,32,32c17.646,0,32-14.354,32-32 C213.333,423.445,204.389,411.716,192,407.298z M181.333,448c-5.885,0-10.667-4.781-10.667-10.667 c0-5.885,4.781-10.667,10.667-10.667c5.885,0,10.667,4.781,10.667,10.667C192,443.219,187.219,448,181.333,448z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
<path d="M96,341.333H32c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h64 c5.896,0,10.667-4.771,10.667-10.667C106.667,346.104,101.896,341.333,96,341.333z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
<path d="M96,298.667H74.667c-5.896,0-10.667,4.771-10.667,10.667C64,315.229,68.771,320,74.667,320H96 c5.896,0,10.667-4.771,10.667-10.667C106.667,303.438,101.896,298.667,96,298.667z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
<path d="M96,256H74.667C68.771,256,64,260.771,64,266.667c0,5.896,4.771,10.667,10.667,10.667H96 c5.896,0,10.667-4.771,10.667-10.667C106.667,260.771,101.896,256,96,256z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
<path d="M32,234.667h64c5.896,0,10.667-4.771,10.667-10.667S101.896,213.333,96,213.333H32c-5.896,0-10.667,4.771-10.667,10.667 S26.104,234.667,32,234.667z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
<path d="M32,106.667h64c5.896,0,10.667-4.771,10.667-10.667S101.896,85.333,96,85.333H32c-5.896,0-10.667,4.771-10.667,10.667 S26.104,106.667,32,106.667z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
<path d="M96,170.667H74.667c-5.896,0-10.667,4.771-10.667,10.667C64,187.229,68.771,192,74.667,192H96 c5.896,0,10.667-4.771,10.667-10.667C106.667,175.438,101.896,170.667,96,170.667z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
<path d="M96,128H74.667C68.771,128,64,132.771,64,138.667c0,5.896,4.771,10.667,10.667,10.667H96 c5.896,0,10.667-4.771,10.667-10.667C106.667,132.771,101.896,128,96,128z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
<path d="M330.667,170.667H352c17.646,0,32,14.354,32,32c0,5.896,4.771,10.667,10.667,10.667s10.667-4.771,10.667-10.667 c0-29.406-23.927-53.333-53.333-53.333h-21.333c-29.406,0-53.333,23.927-53.333,53.333V288c0,29.406,23.927,53.333,53.333,53.333 H352c29.406,0,53.333-23.927,53.333-53.333c0-5.896-4.771-10.667-10.667-10.667S384,282.104,384,288c0,17.646-14.354,32-32,32 h-21.333c-17.646,0-32-14.354-32-32v-85.333C298.667,185.021,313.021,170.667,330.667,170.667z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
<path d="M458.667,149.333c-17.646,0-32,14.354-32,32c0,17.646,14.354,32,32,32s32-14.354,32-32 C490.667,163.688,476.313,149.333,458.667,149.333z M458.667,192c-5.885,0-10.667-4.781-10.667-10.667 c0-5.885,4.781-10.667,10.667-10.667s10.667,4.781,10.667,10.667C469.333,187.219,464.552,192,458.667,192z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g></g> </svg>
|
||||||
|
After Width: | Height: | Size: 4.2 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,60 +9,58 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import { iconStyle, StyledDiv } from "./styleComponents";
|
import { iconStyle, StyledDiv, BottomPanel, 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 {
|
||||||
CircularInput,
|
CircularInput,
|
||||||
CircularProgress,
|
CircularProgress,
|
||||||
CircularThumb,
|
CircularThumb,
|
||||||
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';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default class Light extends Component {
|
export default class Light extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
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"
|
||||||
|
|
||||||
this.stateCallback = (e) => {
|
|
||||||
const update = {};
|
|
||||||
if (e.kind === "dimmableLight") {
|
|
||||||
update.intensity = e.intensity;
|
|
||||||
} else {
|
|
||||||
update.turnedOn = e.on;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState(Object.assign(this.state, update));
|
|
||||||
};
|
|
||||||
|
|
||||||
call.socketSubscribe(this.props.device.id, this.stateCallback);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
call.socketUnsubscribe(this.props.device.id, this.stateCallback);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onClickDevice = () => {
|
onClickDevice = () => {
|
||||||
this.props.device.on = !this.state.turnedOn;
|
this.props.device.on = !this.state.turnedOn;
|
||||||
call.deviceUpdate(this.props.device, "regularLight").then((res) => {
|
call.deviceUpdate(this.props.device, 'regularLight')
|
||||||
if (res.status === 200) {
|
.then(res => {
|
||||||
this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
|
if (res.status === 200) {
|
||||||
}
|
this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
|
||||||
});
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
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 +74,52 @@ 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")}
|
<Settings
|
||||||
onChange={this.setIntensity}
|
deviceId={this.props.device.id}
|
||||||
style={style}
|
edit={this.props.edit}
|
||||||
>
|
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
|
||||||
<CircularTrack />
|
<CircularInput style={LightDimmerStyle}
|
||||||
<CircularProgress />
|
value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
|
||||||
<CircularThumb />
|
onChange={this.setIntensity}>
|
||||||
|
<text style={textStyle} x={100} y={120} textAnchor="middle" dy="0.3em" fontWeight="bold">
|
||||||
<text
|
{this.props.device.name}
|
||||||
style={valueStyle}
|
</text>
|
||||||
x={100}
|
<CircularProgress style={{ ...KnobProgress, opacity: this.state.intensity / 100 + 0.3 }} />
|
||||||
y={100}
|
<CircularThumb style={CircularThumbStyle} />
|
||||||
textAnchor="middle"
|
<ThumbText color={"#ffd31d"} />
|
||||||
dy="0.3em"
|
</CircularInput>
|
||||||
fontWeight="bold"
|
<Image style={knobIcon} src="/img/intensityLightIcon.svg" />
|
||||||
>
|
|
||||||
{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>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
const normalLightView = (
|
||||||
<StyledDiv>
|
<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)
|
<div onClick={this.props.edit.mode ? () => {
|
||||||
}
|
} : this.onClickDevice}>
|
||||||
/>
|
<Image src={this.getIcon()} style={iconStyle} />
|
||||||
{this.props.device.intensity >= 0
|
<BottomPanel style={{ backgroundColor: "#ffa41b" }}>
|
||||||
? intensityLightView
|
<h5 style={nameStyle}>{this.props.device.name}</h5>
|
||||||
: normalLightView}
|
</BottomPanel>
|
||||||
|
</div>
|
||||||
</StyledDiv>
|
</StyledDiv>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{
|
||||||
|
this.props.device.intensity ? (intensityLightView) : (normalLightView)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,4 @@
|
||||||
export const style = {
|
|
||||||
width: "10rem",
|
|
||||||
height: "10rem",
|
|
||||||
position: "absolute",
|
|
||||||
top: "0",
|
|
||||||
left: "0",
|
|
||||||
};
|
|
||||||
export const valueStyle = {
|
export const valueStyle = {
|
||||||
fill: "#3e99ff",
|
fill: "#3e99ff",
|
||||||
fontSize: "2.5rem",
|
fontSize: "2.5rem",
|
||||||
|
|
@ -13,17 +7,60 @@ 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",
|
||||||
top: "50%",
|
top: "30%",
|
||||||
left: "50%",
|
left: "50%",
|
||||||
transform: "translateX(-50%)",
|
transform: "translateX(-50%)",
|
||||||
color: "black",
|
color: "white",
|
||||||
|
};
|
||||||
|
|
||||||
|
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,16 +148,16 @@ export default class NewDevice extends Component {
|
||||||
image: { avatar: true, src: "/img/switchOn.svg" },
|
image: { avatar: true, src: "/img/switchOn.svg" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "buttonDimmer",
|
key: 'knobDimmer',
|
||||||
text: "Button Dimmer",
|
text: 'Knob Dimmer',
|
||||||
value: "buttonDimmer",
|
value: 'knobDimmer',
|
||||||
image: { avatar: true, src: "/img/dimmer.svg" },
|
image: { avatar: true, src: '/img/knob.svg' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "knobDimmer",
|
key: 'buttonDimmer',
|
||||||
text: "Knob Dimmer",
|
text: 'Button Dimmer',
|
||||||
value: "knobDimmer",
|
value: 'buttonDimmer',
|
||||||
image: { avatar: true, src: "/img/dimmer.svg" },
|
image: { avatar: true, src: '/img/plusMinus.svg' },
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const sensorOptions = [
|
const sensorOptions = [
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,20 @@ import {
|
||||||
CircularProgress,
|
CircularProgress,
|
||||||
CircularTrack,
|
CircularTrack,
|
||||||
} from "react-circular-input";
|
} from "react-circular-input";
|
||||||
import { sensorText, style, valueStyle } from "./SensorStyle";
|
import {
|
||||||
|
container,
|
||||||
|
sensorText,
|
||||||
|
style,
|
||||||
|
valueStyle,
|
||||||
|
motionSensorInnerCircle,
|
||||||
|
motionSensorOuterCircle,
|
||||||
|
nameMotionStyle,
|
||||||
|
motionSensorIcon,
|
||||||
|
temperatureSensorColors,
|
||||||
|
lightSensorColors,
|
||||||
|
humiditySensorColors,
|
||||||
|
iconSensorStyle
|
||||||
|
} from "./SensorStyle";
|
||||||
import Settings from "./DeviceSettings";
|
import Settings from "./DeviceSettings";
|
||||||
import { StyledDiv } from "./styleComponents";
|
import { StyledDiv } from "./styleComponents";
|
||||||
import { call } from "../../../client_server";
|
import { call } from "../../../client_server";
|
||||||
|
|
@ -45,8 +58,8 @@ export default class Sensor extends Component {
|
||||||
this.setState(Object.assign(this.state, e));
|
this.setState(Object.assign(this.state, e));
|
||||||
};
|
};
|
||||||
|
|
||||||
this.iconOn = "/img/lightOn.svg";
|
this.colors = temperatureSensorColors;
|
||||||
this.iconOff = "/img/lightOff.svg";
|
this.icon = "temperatureIcon.svg";
|
||||||
|
|
||||||
call.socketSubscribe(this.props.device.id, this.stateCallback);
|
call.socketSubscribe(this.props.device.id, this.stateCallback);
|
||||||
}
|
}
|
||||||
|
|
@ -67,12 +80,18 @@ export default class Sensor extends Component {
|
||||||
switch (this.props.device.sensor) {
|
switch (this.props.device.sensor) {
|
||||||
case "TEMPERATURE":
|
case "TEMPERATURE":
|
||||||
this.units = "ºC";
|
this.units = "ºC";
|
||||||
|
this.colors = temperatureSensorColors;
|
||||||
|
this.icon = "temperatureIcon.svg"
|
||||||
break;
|
break;
|
||||||
case "HUMIDITY":
|
case "HUMIDITY":
|
||||||
this.units = "%";
|
this.units = "%";
|
||||||
|
this.colors = humiditySensorColors;
|
||||||
|
this.icon = "humidityIcon.svg"
|
||||||
break;
|
break;
|
||||||
case "LIGHT":
|
case "LIGHT":
|
||||||
this.units = "lm";
|
this.units = "lm";
|
||||||
|
this.colors = lightSensorColors;
|
||||||
|
this.icon = "lightSensorIcon.svg"
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
this.units = "";
|
this.units = "";
|
||||||
|
|
@ -96,8 +115,26 @@ export default class Sensor extends Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
|
const MotionSensor = (props) => {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
...motionSensorOuterCircle,
|
||||||
|
backgroundColor: this.state.detected ? "#505bda" : "#00bdaa"
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
...motionSensorInnerCircle,
|
||||||
|
backgroundColor: this.state.detected ? "#fe346e" : "#00bdaa"
|
||||||
|
}}>
|
||||||
|
<Image style={motionSensorIcon} src="/img/motionSensorIcon.svg" />
|
||||||
|
<span style={nameMotionStyle}>{this.props.device.name}</span>
|
||||||
|
</div >
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledDiv>
|
<div style={container}>
|
||||||
<Settings
|
<Settings
|
||||||
deviceId={this.props.device.id}
|
deviceId={this.props.device.id}
|
||||||
edit={this.props.edit}
|
edit={this.props.edit}
|
||||||
|
|
@ -106,38 +143,42 @@ export default class Sensor extends Component {
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
{this.state.motion ? (
|
{this.state.motion ? (
|
||||||
<div onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
|
<MotionSensor />
|
||||||
<Image src={this.getIcon()} style={iconStyle} />
|
|
||||||
<h5 style={nameStyle}>Motion Sensor</h5>
|
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
<CircularInput value={this.state.value / 100} style={style}>
|
<React.Fragment>
|
||||||
<CircularTrack />
|
<CircularInput value={
|
||||||
<CircularProgress />
|
this.props.device.sensor === "LIGHT" ?
|
||||||
<text
|
this.state.value / 2000
|
||||||
style={valueStyle}
|
:
|
||||||
x={100}
|
this.state.value / 100} style={style}>
|
||||||
y={80}
|
<CircularProgress strokeWidth="2rem" stroke={this.colors.progress} fill={this.colors.circle} />
|
||||||
textAnchor="middle"
|
<text
|
||||||
dy="0.3em"
|
style={{ ...valueStyle, fill: this.colors.text }}
|
||||||
fontWeight="bold"
|
x={100}
|
||||||
>
|
y={110}
|
||||||
{+(Math.round(this.state.value + "e+2") + "e-2")}
|
textAnchor="middle"
|
||||||
{this.units}
|
dy="0.3em"
|
||||||
</text>
|
fontWeight="bold"
|
||||||
<text
|
fill={this.colors.text}
|
||||||
style={sensorText}
|
>
|
||||||
x={100}
|
{+(Math.round(this.state.value + "e+2") + "e-2")}
|
||||||
y={150}
|
{this.units}
|
||||||
textAnchor="middle"
|
</text>
|
||||||
dy="0.3em"
|
<text
|
||||||
fontWeight="bold"
|
style={{ ...sensorText, fill: this.colors.text }}
|
||||||
>
|
x={100}
|
||||||
{this.setName()}
|
y={150}
|
||||||
</text>
|
textAnchor="middle"
|
||||||
</CircularInput>
|
dy="0.4em"
|
||||||
)}
|
fontWeight="bold"
|
||||||
</StyledDiv>
|
>
|
||||||
|
{this.setName()}
|
||||||
|
</text>
|
||||||
|
</CircularInput>
|
||||||
|
<Image style={iconSensorStyle} src={`/img/${this.icon}`} />
|
||||||
|
</React.Fragment>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,18 +6,24 @@ export const style = {
|
||||||
left: "0",
|
left: "0",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const container = {
|
||||||
|
width: "10rem",
|
||||||
|
height: "10rem",
|
||||||
|
borderRadius: "100%",
|
||||||
|
border: "none",
|
||||||
|
position: "relative",
|
||||||
|
}
|
||||||
|
|
||||||
export const sensorText = {
|
export const sensorText = {
|
||||||
fill: "#3e99ff",
|
fill: "#3e99ff",
|
||||||
fontSize: "1.2rem",
|
fontSize: "1.2rem",
|
||||||
fontFamily: "Lato",
|
fontFamily: "Lato",
|
||||||
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const valueStyle = {
|
export const valueStyle = {
|
||||||
fill: "#3e99ff",
|
fill: "#3e99ff",
|
||||||
fontSize: "2.5rem",
|
fontSize: "2.4rem",
|
||||||
fontFamily: "Lato",
|
fontFamily: "Lato",
|
||||||
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const errorStyle = {
|
export const errorStyle = {
|
||||||
|
|
@ -26,3 +32,69 @@ export const errorStyle = {
|
||||||
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 motionSensorInnerCircle = {
|
||||||
|
position: "absolute",
|
||||||
|
top: "50%",
|
||||||
|
left: "50%",
|
||||||
|
transform: "translate(-50%, -50%)",
|
||||||
|
width: "8rem",
|
||||||
|
height: "8rem",
|
||||||
|
borderRadius: "100%",
|
||||||
|
border: "none",
|
||||||
|
}
|
||||||
|
|
||||||
|
export const motionSensorOuterCircle = {
|
||||||
|
textAlign: "center",
|
||||||
|
cursor: "pointer",
|
||||||
|
position: "relative",
|
||||||
|
width: "10rem",
|
||||||
|
height: "10rem",
|
||||||
|
borderRadius: "100%",
|
||||||
|
border: "none",
|
||||||
|
/*boxShadow: "3px 2px 10px 5px #ccc",*/
|
||||||
|
}
|
||||||
|
|
||||||
|
export const nameMotionStyle = {
|
||||||
|
position: "absolute",
|
||||||
|
top: "50%",
|
||||||
|
left: "50%",
|
||||||
|
transform: "translateX(-50%)",
|
||||||
|
fontSize: "1.2rem",
|
||||||
|
}
|
||||||
|
|
||||||
|
export const motionSensorIcon = {
|
||||||
|
width: "2rem",
|
||||||
|
height: "2rem",
|
||||||
|
position: "absolute",
|
||||||
|
top: "15%",
|
||||||
|
left: "50%",
|
||||||
|
transform: "translateX(-50%)",
|
||||||
|
}
|
||||||
|
export const temperatureSensorColors = {
|
||||||
|
circle: "#323232",
|
||||||
|
progress: "#ff1e56",
|
||||||
|
text: "white"
|
||||||
|
}
|
||||||
|
|
||||||
|
export const lightSensorColors = {
|
||||||
|
circle: "#000839",
|
||||||
|
progress: "#ffa41b",
|
||||||
|
text: "white"
|
||||||
|
}
|
||||||
|
|
||||||
|
export const humiditySensorColors = {
|
||||||
|
circle: "#005082",
|
||||||
|
progress: "#00a8cc",
|
||||||
|
text: "white"
|
||||||
|
}
|
||||||
|
|
||||||
|
export const iconSensorStyle = {
|
||||||
|
position: "absolute",
|
||||||
|
top: "20%",
|
||||||
|
left: "50%",
|
||||||
|
transform: "translateX(-50%)",
|
||||||
|
width: "2rem",
|
||||||
|
height: "2rem",
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -4,13 +4,14 @@
|
||||||
The smart plug also stores the total energy consumed while the plug is active, in terms of kilowatt-hours 2(kWh) .
|
The smart plug also stores the total energy consumed while the plug is active, in terms of kilowatt-hours 2(kWh) .
|
||||||
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 { 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 { energyConsumedStyle, imageStyle, nameStyle } from "./SmartPlugStyle";
|
import { energyConsumedStyle, imageStyle, kwhStyle, nameStyle } from "./SmartPlugStyle";
|
||||||
import { call } from "../../../client_server";
|
import { call } from "../../../client_server";
|
||||||
|
|
||||||
|
|
||||||
export default class SmartPlug extends Component {
|
export default class SmartPlug extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
@ -36,7 +37,6 @@ export default class SmartPlug extends Component {
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
call.socketUnsubscribe(this.props.device.id, this.stateCallback);
|
call.socketUnsubscribe(this.props.device.id, this.stateCallback);
|
||||||
}
|
}
|
||||||
|
|
||||||
onClickDevice = () => {
|
onClickDevice = () => {
|
||||||
this.props.device.on = !this.state.turnedOn;
|
this.props.device.on = !this.state.turnedOn;
|
||||||
call.deviceUpdate(this.props.device, "smartPlug").then((res) => {
|
call.deviceUpdate(this.props.device, "smartPlug").then((res) => {
|
||||||
|
|
@ -62,18 +62,19 @@ export default class SmartPlug 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} />
|
||||||
<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,11 @@
|
||||||
* 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, turnedOnStyle } from "./SwitchStyle";
|
||||||
import { call } from "../../../client_server";
|
import { call } from "../../../client_server";
|
||||||
|
|
||||||
export default class Switch extends Component {
|
export default class Switch extends Component {
|
||||||
|
|
@ -17,12 +17,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 +49,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,17 +57,22 @@ 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={turnedOnStyle}>{this.state.turnedOn ? "ON" : "OFF"}</span>
|
||||||
|
</BottomPanel>
|
||||||
</StyledDiv>
|
</StyledDiv>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,27 @@
|
||||||
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%)",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const turnedOnStyle = {
|
||||||
|
color: "white",
|
||||||
|
fontSize: "1.3rem",
|
||||||
|
position: "absolute",
|
||||||
|
top: "20%",
|
||||||
|
left: "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,23 +45,22 @@ 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 = {
|
||||||
width: "4rem",
|
width: "3.5rem",
|
||||||
height: "auto",
|
height: "auto",
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: "20%",
|
top: "10%",
|
||||||
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 = {
|
||||||
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 +82,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 +101,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