add new UI designs

This commit is contained in:
Siwat Sirichai 2022-10-26 12:45:49 +07:00
parent 437a38c5f0
commit 4d33359f51
19 changed files with 199 additions and 0 deletions

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="93" height="30" viewBox="0 0 93 30">
<text id="_AI_Drive" data-name="&quot;AI&quot; Drive" transform="translate(0 24)" fill="#fff" font-size="23" font-family="Roboto-Regular, Roboto"><tspan x="0" y="0">&quot;AI&quot; Drive</tspan></text>
</svg>

After

Width:  |  Height:  |  Size: 294 B

BIN
UIExport/Rev1/Boot Up.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 286 KiB

View File

@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="227" height="64" viewBox="0 0 227 64">
<defs>
<filter id="Rectangle_1" x="0" y="0" width="227" height="64" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur"/>
<feFlood flood-opacity="0.161"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Component_1_1" data-name="Component 1 1" transform="translate(9 6)">
<g transform="matrix(1, 0, 0, 1, -9, -6)" filter="url(#Rectangle_1)">
<g id="Rectangle_1-2" data-name="Rectangle 1" transform="translate(9 6)" fill="rgba(136,136,136,0.64)" stroke="rgba(112,112,112,0)" stroke-width="1">
<rect width="209" height="46" rx="23" stroke="none"/>
<rect x="0.5" y="0.5" width="208" height="45" rx="22.5" fill="none"/>
</g>
</g>
<text id="Booting_RPi_._._." data-name="Booting RPi . . ." transform="translate(62 31)" fill="#fff" font-size="20" font-family="Roboto-Regular, Roboto"><tspan x="0" y="0">Booting RPi . . .</tspan></text>
<image id="kisspng-raspberry-pi-clip-art-sugar-logo-computer-icons-5bf783210f3ed1.2976674215429476170625" width="31" height="31" transform="translate(18 8)" xlink:href="../../../../Users/siwat/Downloads/kisspng-raspberry-pi-clip-art-sugar-logo-computer-icons-5bf783210f3ed1.2976674215429476170625.png"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
UIExport/Rev1/Dashboard.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 KiB

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="76" height="21" viewBox="0 0 76 21">
<text id="IP_Address" data-name="IP Address" transform="translate(0 17)" fill="#fff" font-size="16" font-family="Roboto-Light, Roboto" font-weight="300"><tspan x="0" y="0">IP Address</tspan></text>
</svg>

After

Width:  |  Height:  |  Size: 291 B

View File

@ -0,0 +1,49 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="86" height="86" viewBox="0 0 86 86">
<defs>
<filter id="Shadow_3" x="9" y="10" width="68" height="68" filterUnits="userSpaceOnUse">
<feOffset dy="2" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="2" result="blur"/>
<feFlood flood-opacity="0.2"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="Shadow_2" x="0" y="0" width="86" height="86" filterUnits="userSpaceOnUse">
<feOffset dy="1" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="5" result="blur-2"/>
<feFlood flood-opacity="0.122"/>
<feComposite operator="in" in2="blur-2"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="Shadow_1" x="7.5" y="10.5" width="71" height="71" filterUnits="userSpaceOnUse">
<feOffset dy="4" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="2.5" result="blur-3"/>
<feFlood flood-opacity="0.141"/>
<feComposite operator="in" in2="blur-3"/>
<feComposite in="SourceGraphic"/>
</filter>
<clipPath id="clip-path">
<circle id="FAB_Mask" data-name="FAB Mask" cx="28" cy="28" r="28" fill="#fff"/>
</clipPath>
</defs>
<g id="Light_FAB_1._Standard" data-name="Light 🌕/ FAB / 1. Standard" transform="translate(15 14)">
<g id="Circle_Elevation_Dark_04dp" data-name="Circle Elevation/Dark 🌑/04dp" transform="translate(-109)">
<g transform="matrix(1, 0, 0, 1, 94, -14)" filter="url(#Shadow_3)">
<rect id="Shadow_3-2" data-name="Shadow 3" width="56" height="56" rx="28" transform="translate(15 14)" fill="#fff"/>
</g>
<g transform="matrix(1, 0, 0, 1, 94, -14)" filter="url(#Shadow_2)">
<rect id="Shadow_2-2" data-name="Shadow 2" width="56" height="56" rx="28" transform="translate(15 14)" fill="#fff"/>
</g>
<g transform="matrix(1, 0, 0, 1, 94, -14)" filter="url(#Shadow_1)">
<rect id="Shadow_1-2" data-name="Shadow 1" width="56" height="56" rx="28" transform="translate(15 14)" fill="#fff"/>
</g>
</g>
<g id="Fill" clip-path="url(#clip-path)">
<rect id="_FAB_Color" data-name="🎨 FAB Color" width="56" height="56" fill="#03dac5"/>
</g>
<g id="State" clip-path="url(#clip-path)">
<g id="States_Light_Primary_Container" data-name="States/Light 🌕/Primary Container">
<rect id="States_Light_Primary_Container_100_Overlay" data-name="States/Light 🌕/Primary Container 100%/Overlay" fill="rgba(255,255,255,0)"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -0,0 +1,44 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="38.5" height="29" viewBox="0 0 38.5 29">
<defs>
<filter id="Rectangle" x="0" y="0" width="29" height="29" filterUnits="userSpaceOnUse">
<feOffset dy="1" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="1.5" result="blur"/>
<feFlood flood-opacity="0.2"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="Rectangle-2" x="3" y="3.5" width="23" height="23.5" filterUnits="userSpaceOnUse">
<feOffset dy="2" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="0.5" result="blur-2"/>
<feFlood flood-opacity="0.122"/>
<feComposite operator="in" in2="blur-2"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="Rectangle-3" x="3" y="3" width="23" height="23" filterUnits="userSpaceOnUse">
<feOffset dy="1" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="0.5" result="blur-3"/>
<feFlood flood-opacity="0.141"/>
<feComposite operator="in" in2="blur-3"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Light_Selection_Controls_3._Switch_B._Off_5_States_" data-name="Light 🌕/ Selection Controls/3. Switch/B. Off/(5 States)" transform="translate(4.5 3.5)">
<g id="Light_Selection_Controls_3._Switch_2_States_" data-name="Light 🌕/ Selection Controls/3. Switch/ (2 States)">
<rect id="_Color_l_Track" data-name="🎨 Color l Track" width="34" height="14" rx="7" transform="translate(0 3)" fill="rgba(0,0,0,0.38)"/>
<g id="Light_Elevation_00dp" data-name="Light 🌕/Elevation/00dp">
<g id="Shadow" style="mix-blend-mode: multiply;isolation: isolate">
<g transform="matrix(1, 0, 0, 1, -4.5, -3.5)" filter="url(#Rectangle)">
<rect id="Rectangle-4" data-name="Rectangle" width="20" height="20" rx="10" transform="translate(4.5 3.5)" fill="#fff"/>
</g>
<g transform="matrix(1, 0, 0, 1, -4.5, -3.5)" filter="url(#Rectangle-2)">
<rect id="Rectangle-5" data-name="Rectangle" width="20" height="20" rx="10" transform="translate(4.5 3.5)" fill="#fff"/>
</g>
<g transform="matrix(1, 0, 0, 1, -4.5, -3.5)" filter="url(#Rectangle-3)">
<rect id="Rectangle-6" data-name="Rectangle" width="20" height="20" rx="10" transform="translate(4.5 3.5)" fill="#fff"/>
</g>
</g>
</g>
<circle id="_Color_l_Thumb" data-name="🎨 Color l Thumb" cx="10" cy="10" r="10" fill="#fff"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"/>

After

Width:  |  Height:  |  Size: 81 B

View File

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="260" height="4" viewBox="0 0 260 4">
<g id="Linear_Primary" data-name="Linear/Primary" transform="translate(-60 -315)">
<g id="Light_Progress_Indicators_1._Linear_B._Track_bar" data-name="Light 🌕/ Progress Indicators/1. Linear/B. Track bar" transform="translate(60 315)">
<rect id="Bar" width="260" height="4" fill="#6200ee" opacity="0.24"/>
</g>
<g id="Light_Progress_Indicators_1._Linear_A._Progress_bar" data-name="Light 🌕/ Progress Indicators/1. Linear/A. Progress bar" transform="translate(60 315)">
<rect id="Bar-2" data-name="Bar" width="160" height="4" fill="#6200ee"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 680 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="153" height="30" viewBox="0 0 153 30">
<text id="Project_KuuKar" data-name="Project KuuKar" transform="translate(0 24)" fill="#fff" font-size="23" font-family="Roboto-Regular, Roboto"><tspan x="0" y="0">Project KuuKar</tspan></text>
</svg>

After

Width:  |  Height:  |  Size: 289 B

View File

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="193" height="64" viewBox="0 0 193 64">
<defs>
<filter id="Rectangle_1" x="0" y="0" width="193" height="64" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur"/>
<feFlood flood-opacity="0.161"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Rectangle_1)">
<g id="Rectangle_1-2" data-name="Rectangle 1" transform="translate(9 6)" fill="rgba(136,136,136,0.64)" stroke="rgba(112,112,112,0)" stroke-width="1">
<rect width="175" height="46" rx="23" stroke="none"/>
<rect x="0.5" y="0.5" width="174" height="45" rx="22.5" fill="none"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 865 B

View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="480" height="49" viewBox="0 0 480 49">
<g id="Rectangle_2" data-name="Rectangle 2" fill="#6200ee" stroke="rgba(112,112,112,0)" stroke-width="1">
<rect width="480" height="49" stroke="none"/>
<rect x="0.5" y="0.5" width="479" height="48" fill="none"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 322 B

View File

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="303" height="64" viewBox="0 0 303 64">
<defs>
<filter id="Rectangle_3" x="0" y="0" width="303" height="64" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur"/>
<feFlood flood-opacity="0.161"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Rectangle_3)">
<g id="Rectangle_3-2" data-name="Rectangle 3" transform="translate(9 6)" fill="rgba(136,136,136,0.64)" stroke="rgba(112,112,112,0)" stroke-width="1">
<rect width="285" height="46" rx="23" stroke="none"/>
<rect x="0.5" y="0.5" width="284" height="45" rx="22.5" fill="none"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 865 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="132" height="30" viewBox="0 0 132 30">
<text id="Temperature" transform="translate(0 24)" fill="#fff" font-size="23" font-family="Roboto-Regular, Roboto"><tspan x="0" y="0">Temperature</tspan></text>
</svg>

After

Width:  |  Height:  |  Size: 256 B

3
UIExport/Rev1/car.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="27" viewBox="0 0 27 27">
<image id="car" width="27" height="27" xlink:href="../../../../Users/siwat/Downloads/car.png"/>
</svg>

After

Width:  |  Height:  |  Size: 232 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37" height="37" viewBox="0 0 37 37">
<image id="controller-classic" width="37" height="37" xlink:href="../../../../Users/siwat/Downloads/controller-classic.png"/>
</svg>

After

Width:  |  Height:  |  Size: 262 B

View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="480" height="306" viewBox="0 0 480 306">
<defs>
<pattern id="pattern" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 522 333">
<image width="522" height="333" xlink:href="../../Images/keke_idle.png"/>
</pattern>
</defs>
<rect id="keke_idle" width="480" height="306" fill="url(#pattern)"/>
</svg>

After

Width:  |  Height:  |  Size: 426 B

View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="486" height="272" viewBox="0 0 486 272">
<defs>
<pattern id="pattern" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 757 424">
<image width="757" height="424" xlink:href="../../Images/kuukar_title.png"/>
</pattern>
</defs>
<rect id="kuukar_title" width="486" height="272" fill="url(#pattern)"/>
</svg>

After

Width:  |  Height:  |  Size: 432 B

BIN
kuukar_soruce.xd Normal file

Binary file not shown.