Creating wifi layout scaffold
authorKamil Stepaniuk/IoT K.stepaniuk UI Sample (PLT) /SRPOL/Designer/Samsung Electronics <k.stepaniuk@samsung.com>
Wed, 18 Mar 2020 08:54:45 +0000 (09:54 +0100)
committerLukasz Stanislawski/IoT & UI Sample (PLT) /SRPOL/Engineer/Samsung Electronics <l.stanislaws@samsung.com>
Fri, 20 Mar 2020 09:22:38 +0000 (10:22 +0100)
Signed-off-by: Kamil Stepaniuk/IoT K.stepaniuk UI Sample (PLT) /SRPOL/Designer/Samsung Electronics <k.stepaniuk@samsung.com>
Oobe/OobeCommon/Styles/FontStyles.cs
Oobe/OobeWifi/Controls/ListView.cs
Oobe/OobeWifi/Controls/WifiView.cs
Oobe/OobeWifi/WifiStep.cs
Oobe/OobeWifi/res/12_icon_addnetwork.svg [new file with mode: 0644]
Oobe/OobeWifi/res/12_icon_wifi.svg [new file with mode: 0644]
Oobe/OobeWifi/res/Line_94.svg [new file with mode: 0644]
Oobe/OobeWifi/res/Rectangle_918.png [new file with mode: 0644]
Oobe/OobeWifi/res/Rectangle_918.svg [new file with mode: 0644]

index 9cfdf1c..38febd4 100644 (file)
@@ -15,5 +15,15 @@ namespace Oobe.Common.Styles
             }
             return light;
         }
+
+        public static PropertyMap Regular()
+        {
+            if (light == null)
+            {
+                light = new PropertyMap();
+                light.Add("weight", new PropertyValue("regular"));
+            }
+            return light;
+        }
     }
 }
\ No newline at end of file
index 12b589e..8ab66eb 100644 (file)
@@ -10,6 +10,14 @@ namespace Oobe.Wifi.Controls
     {
         private ObservableCollection<View> items;
         private ScrollableBase scrollableBase = null;
+        private int width;
+        private int height;
+
+        public ListView(int width, int height)
+        {
+            this.width = width;
+            this.height = height;
+        }
 
         public ScrollableBase View
         {
@@ -17,9 +25,11 @@ namespace Oobe.Wifi.Controls
             {
                 if (scrollableBase == null)
                 {
-                    scrollableBase = new ScrollableBase();
-                    scrollableBase.ScrollingDirection = ScrollableBase.Direction.Vertical;
-                    scrollableBase.Size = new Size(360, 360);
+                    scrollableBase = new ScrollableBase()
+                    {
+                        Size = new Size(width, height),
+                        ScrollingDirection = ScrollableBase.Direction.Vertical,
+                    };
                 }
                 return scrollableBase;
             }
@@ -38,7 +48,6 @@ namespace Oobe.Wifi.Controls
                             LinearOrientation = LinearLayout.Orientation.Vertical,
                             LinearAlignment = LinearLayout.Alignment.Center,
                         },
-                        BackgroundColor = new Color(0.7f, 0.7f, 0.7f, 1f),
                         WidthResizePolicy = ResizePolicyType.FillToParent,
                         HeightResizePolicy = ResizePolicyType.FitToChildren,
                     });
index 8fa1666..73c7310 100644 (file)
@@ -1,3 +1,4 @@
+using Oobe.Common.Styles;
 using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
@@ -5,6 +6,7 @@ using System.Linq;
 using System.Threading.Tasks;
 using Tizen.NUI;
 using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Components;
 
 namespace Oobe.Wifi.Controls
 {
@@ -14,34 +16,12 @@ namespace Oobe.Wifi.Controls
         private ObservableCollection<View> items;
         private int counter = 0;
 
-        private View CreateViewAbsolute(string s)
+        private static IEnumerable<View> CreateViews(string pattern)
         {
-            View mainView = new View()
+            yield return CreateManualWifiView(460, 89);
+            foreach (var item in Enumerable.Range(1, 10))
             {
-                BackgroundColor = Color.Green,
-                Layout = new AbsoluteLayout(),
-                WidthResizePolicy = ResizePolicyType.FillToParent,
-            };
-            TextLabel text = new TextLabel(s);
-            text.WidthResizePolicy = ResizePolicyType.FillToParent;
-            text.HorizontalAlignment = HorizontalAlignment.Begin;
-            text.VerticalAlignment = VerticalAlignment.Center;
-            text.TextColor = new Color(0.4f, 1 / (float)((s.GetHashCode() % 10) + 1), 1 / (float)((s.GetHashCode() % 20) + 1), 1);
-            text.PointSize = 88.0f;
-            text.BackgroundColor = Color.Yellow;
-            text.PivotPoint = new Position(0.0f, 0.5f);
-            text.PositionUsesPivotPoint = true;
-            text.ParentOrigin = new Position(0.0f, 0.5f);
-
-            mainView.Add(text);
-            return mainView;
-        }
-
-        private IEnumerable<View> CreateViews(string pattern)
-        {
-            foreach (var item in Enumerable.Range(1, 20))
-            {
-                yield return CreateViewAbsolute($"{pattern}{item}");
+                yield return CreateWifiView(460, 89, $"Wi-Fi_{item}");
             }
         }
 
@@ -57,13 +37,26 @@ namespace Oobe.Wifi.Controls
                         {
                             LinearOrientation = LinearLayout.Orientation.Vertical,
                         },
+                        //BackgroundColor = Color.White,
+                        BackgroundImage = System.IO.Path.Combine(NUIApplication.Current.DirectoryInfo.Resource, "Rectangle_918.png"),
+                        //Size = new Size(480, 401),
+                        //BackgroundImage = System.IO.Path.Combine(NUIApplication.Current.DirectoryInfo.Resource, "Rectangle_918.svg"),
                     };
-                    view.Add(CreateText("Header"));
+                    view.Add(CreateHeader(480, 80));
+
+                    view.Add(new View() // separator doesn't display
+                    {
+                        Size2D = new Size(400, 1),
+                        BackgroundImage = System.IO.Path.Combine(NUIApplication.Current.DirectoryInfo.Resource, "Line_94.svg"),
+                        Margin = new Extents(40, 0, 0, 0),
+                    });
+
                     items = new ObservableCollection<View>(CreateViews($"{counter} "));
-                    view.Add(new ListView()
+                    view.Add(new ListView(480, 328)//480, 335
                     {
                         Items = items
                     }.View);
+
                     ForVerify();
                 }
                 return view;
@@ -73,7 +66,7 @@ namespace Oobe.Wifi.Controls
         private async void ForVerify()
         {
             counter++;
-            if (counter > 10)
+            if (counter > 4)
                 return;
             if (view != null)
             {
@@ -84,13 +77,98 @@ namespace Oobe.Wifi.Controls
             }
         }
 
-        private static TextLabel CreateText(string text)
+        private static View CreateManualWifiView(int width, int height)
         {
-            TextLabel text2 = new TextLabel(text);
-            text2.BackgroundColor = Color.Green;
-            text2.TextColor = Color.Black;
-            text2.PointSize = 51.0f;
-            return text2;
+            var manualWifi = new View()
+            {
+                Size = new Size(width, height),
+                Layout = new AbsoluteLayout(),
+            };
+
+            manualWifi.Add(new View() // icon displays wrongly
+            {
+                Position = new Position(29, 20),
+                BackgroundImage = System.IO.Path.Combine(NUIApplication.Current.DirectoryInfo.Resource, "12_icon_addnetwork.svg"),
+            });
+
+            manualWifi.Add(new TextLabel("Add new...")
+            {
+                Position = new Position(87, 29),
+                PixelSize = 20f,
+                TextColor = new Color(0, 0x0Cf / 255f, 0x2Bf / 255f, 1.0f),
+                FontFamily = "BreezeSans",
+                FontStyle = FontsStyles.Regular(),
+            });
+            return manualWifi;
+        }
+
+        private static View CreateWifiView(int width, int height, string name)
+        {
+            var wifi = new View()
+            {
+                Size = new Size(width, height),
+                Layout = new AbsoluteLayout(),
+            };
+
+            wifi.Add(new View()
+            {
+                //Size = new Size(21, 15),
+                Position = new Position(39, 32),
+                BackgroundImage = System.IO.Path.Combine(NUIApplication.Current.DirectoryInfo.Resource, "12_icon_wifi.svg"),
+            });
+
+            wifi.Add(new TextLabel(name)
+            {
+                Position = new Position(78, 28),
+                PixelSize = 20f,
+                TextColor = new Color(0, 0x0Cf / 255f, 0x2Bf / 255f, 1.0f),
+                FontFamily = "BreezeSans",
+                FontStyle = FontsStyles.Light(),
+            });
+
+            wifi.Add(new TextLabel("detail")
+            {
+                Position = new Position(79, 56),
+                PixelSize = 14f,
+                TextColor = new Color(0, 0x0Cf / 255f, 0x2Bf / 255f, 1.0f),
+                FontFamily = "BreezeSans",
+                FontStyle = FontsStyles.Regular(),
+            });
+            return wifi;
+        }
+
+        private static View CreateHeader(int width, int height)
+        {
+            var header = new View()
+            {
+                Size = new Size(width, height),
+                Layout = new AbsoluteLayout(),
+            };
+
+            header.Add(new TextLabel("Wi-Fi")
+            {
+                Size = new Size(49, 24),
+                Position = new Position(40, 43),
+                PixelSize = 19f,
+                TextColor = new Color(0, 14.0f / 255.0f, 47.0f / 255.0f, 1.0f),
+                FontFamily = "BreezeSans",
+                FontStyle = FontsStyles.Regular(),
+            });
+
+            header.Add(new Button()
+            {
+                Text = "Scan",
+                Size = new Size(72, 32),
+                Position = new Position(276, 39),
+            });
+
+            header.Add(new Button()
+            {
+                Text = "Off",
+                Size = new Size(72, 32),
+                Position = new Position(369, 39),
+            });
+            return header;
         }
 
         public void Dispose()
index 4724421..95f98de 100644 (file)
@@ -1,4 +1,5 @@
 using Oobe.Common.Interfaces;
+using Oobe.Common.Styles;
 using Oobe.Wifi.Controls;
 using Tizen.NUI;
 using Tizen.NUI.BaseComponents;
@@ -15,13 +16,72 @@ namespace Oobe.Wifi
             {
                 Layout = new LinearLayout()
                 {
-                    LinearOrientation = LinearLayout.Orientation.Horizontal,
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
                 },
             };
-            view.Add(CreateText("left"));
+
+            view.Add(new TextLabel("Choose Wi-Fi Network")
+            {
+                Size = new Size(0, 58),
+                WidthResizePolicy = ResizePolicyType.FillToParent,
+                Margin = new Extents(0, 0, 20, 8),
+                PixelSize = 48.0f,
+                TextColor = new Color(0, 14.0f / 255.0f, 47.0f / 255.0f, 1.0f),
+                FontFamily = "BreezeSans",
+                FontStyle = FontsStyles.Light(),
+                HorizontalAlignment = HorizontalAlignment.Center,
+            });
+
             wifiView = new WifiView();
+            wifiView.View.Size = new Size(480, 416);
+            wifiView.View.PositionUsesPivotPoint = true;
+            wifiView.View.PivotPoint = new Position(0.5f, 0);
+            wifiView.View.ParentOrigin = new Position(0.5f, 0);
             view.Add(wifiView.View);
-            view.Add(CreateText("right"));
+
+            view.Add(CreateBottomView(nav));
+            return view;
+        }
+
+        private View CreateBottomView(IProcessNavigation nav)
+        {
+            var view = new View()
+            {
+                Size = new Size(1184, 122),
+                Layout = new AbsoluteLayout(),
+            };
+
+            TextLabel prev = new TextLabel("Previous")
+            {
+                PixelSize = 28.0f,
+                TextColor = new Color(0, 14.0f / 255.0f, 47.0f / 255.0f, 1.0f),
+                FontFamily = "BreezeSans",
+                FontStyle = FontsStyles.Light(),
+                HorizontalAlignment = HorizontalAlignment.Center,
+                Position = new Position(121, 33),
+            };
+            //var prev = new Button(ButtonStyles.Previous)
+            //{
+            //    Position = new Position(121, 33),
+            //};
+            //prev.ClickEvent += (s, e) => nav.Previous();
+            view.Add(prev);
+
+            TextLabel next = new TextLabel("Skip")
+            {
+                PixelSize = 28.0f,
+                TextColor = new Color(0, 14.0f / 255.0f, 47.0f / 255.0f, 1.0f),
+                FontFamily = "BreezeSans",
+                FontStyle = FontsStyles.Light(),
+                HorizontalAlignment = HorizontalAlignment.Center,
+                Position = new Position(888, 10),
+            };
+            //var next = new Button(ButtonStyles.Next) //skip
+            //{
+            //    Position = new Position(888, 10),
+            //};
+            //next.ClickEvent += (s, e) => nav.Next();
+            view.Add(next);
             return view;
         }
 
@@ -31,14 +91,5 @@ namespace Oobe.Wifi
             wifiView?.Dispose();
             wifiView = null;
         }
-
-        private static TextLabel CreateText(string text)
-        {
-            TextLabel text2 = new TextLabel(text);
-            text2.BackgroundColor = Color.Green;
-            text2.TextColor = Color.Black;
-            text2.PointSize = 51.0f;
-            return text2;
-        }
     }
 }
diff --git a/Oobe/OobeWifi/res/12_icon_addnetwork.svg b/Oobe/OobeWifi/res/12_icon_addnetwork.svg
new file mode 100644 (file)
index 0000000..e34390a
--- /dev/null
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42"><defs><style>.a,.b,.d{fill:none;}.a,.b{stroke:#205247;stroke-width:3px;}.b{stroke-linecap:round;}.c{stroke:none;}</style></defs><g class="a"><circle class="c" cx="21" cy="21" r="21"/><circle class="d" cx="21" cy="21" r="19.5"/></g><line class="b" y2="18" transform="translate(21.5 12.5)"/><line class="b" x2="18" transform="translate(12.5 21.5)"/></svg>
\ No newline at end of file
diff --git a/Oobe/OobeWifi/res/12_icon_wifi.svg b/Oobe/OobeWifi/res/12_icon_wifi.svg
new file mode 100644 (file)
index 0000000..c77a16d
--- /dev/null
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.692" height="15.388" viewBox="0 0 20.692 15.388"><defs><style>.a{fill:#707070;}</style></defs><path class="a" d="M67.741,327.155a.747.747,0,0,1-.443-.145,15.723,15.723,0,0,0-18.316-.187.75.75,0,0,1-.863-1.226,17.222,17.222,0,0,1,20.068.2.75.75,0,0,1-.446,1.354Z" transform="translate(-47.801 -322.473)"/><g transform="translate(2.388 3.694)"><path class="a" d="M50.939,330.071a.75.75,0,0,1-.446-1.353,13.1,13.1,0,0,1,15.358-.129.75.75,0,0,1-.872,1.221,11.6,11.6,0,0,0-13.595.115A.752.752,0,0,1,50.939,330.071Z" transform="translate(-50.188 -326.167)"/></g><g transform="translate(5.008 7.054)"><path class="a" d="M63.025,332.547a.748.748,0,0,1-.434-.139,7.6,7.6,0,0,0-8.6-.041.75.75,0,1,1-.859-1.23,8.983,8.983,0,0,1,10.333.049.75.75,0,0,1-.437,1.361Z" transform="translate(-52.808 -329.527)"/></g><g transform="translate(8.571 11.388)"><circle class="a" cx="2" cy="2" r="2"/></g></svg>
\ No newline at end of file
diff --git a/Oobe/OobeWifi/res/Line_94.svg b/Oobe/OobeWifi/res/Line_94.svg
new file mode 100644 (file)
index 0000000..6fd7132
--- /dev/null
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="1" viewBox="0 0 400 1"><defs><style>.a{fill:none;stroke:#c3cad2;}</style></defs><line class="a" x2="400" transform="translate(0 0.5)"/></svg>
\ No newline at end of file
diff --git a/Oobe/OobeWifi/res/Rectangle_918.png b/Oobe/OobeWifi/res/Rectangle_918.png
new file mode 100644 (file)
index 0000000..50b03e9
Binary files /dev/null and b/Oobe/OobeWifi/res/Rectangle_918.png differ
diff --git a/Oobe/OobeWifi/res/Rectangle_918.svg b/Oobe/OobeWifi/res/Rectangle_918.svg
new file mode 100644 (file)
index 0000000..64e2b00
--- /dev/null
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="495" height="431" viewBox="0 0 495 431"><defs><style>.a{fill:#fff;}.b{filter:url(#a);}</style><filter id="a" x="0" y="0" width="495" height="431" filterUnits="userSpaceOnUse"><feOffset dx="1" dy="1" input="SourceAlpha"/><feGaussianBlur stdDeviation="2.5" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g class="b" transform="matrix(1, 0, 0, 1, 0, 0)"><rect class="a" width="480" height="416" rx="8" transform="translate(6.5 6.5)"/></g></svg>
\ No newline at end of file