From: Umar Date: Wed, 15 Mar 2017 11:05:01 +0000 (+0000) Subject: Visuals using Custom View example X-Git-Tag: dali_1.2.31~2^2 X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git;a=commitdiff_plain;h=6a1a97d83c97a4a2aa8db20300336556a5c79cb0 Visuals using Custom View example Change-Id: I9a98c47f572cba0ddb25fc8c35538c5e88df1758 --- diff --git a/plugins/dali-swig/Makefile.am b/plugins/dali-swig/Makefile.am index 27bec6c..2ed3252 100755 --- a/plugins/dali-swig/Makefile.am +++ b/plugins/dali-swig/Makefile.am @@ -55,11 +55,15 @@ check-local: examples/dali-test.exe \ examples/user-alphafunction.exe \ examples/image-view.exe \ examples/visuals-example.exe \ + examples/visuals-using-custom-view.exe \ examples/libNDalic.so examples/NDali.dll examples/%.exe: examples/%.cs $(MCS) -nologo -target:exe -out:$@ -reference:NDali.dll $< +examples/visuals-using-custom-view.exe: examples/visuals-using-custom-view/*.cs + $(MCS) -nologo -target:exe -out:$@ -reference:NDali.dll $^ + examples/libNDalic.so: libNDalic.so cd examples && ln -sf ../libNDalic.so diff --git a/plugins/dali-swig/examples/images/gallery-small-43.jpg b/plugins/dali-swig/examples/images/gallery-small-43.jpg new file mode 100644 index 0000000..c59b841 Binary files /dev/null and b/plugins/dali-swig/examples/images/gallery-small-43.jpg differ diff --git a/plugins/dali-swig/examples/visuals-using-custom-view/ContactData.cs b/plugins/dali-swig/examples/visuals-using-custom-view/ContactData.cs new file mode 100644 index 0000000..4a1e058 --- /dev/null +++ b/plugins/dali-swig/examples/visuals-using-custom-view/ContactData.cs @@ -0,0 +1,111 @@ +/* + * Copyright (c) 2017 Samsung Electronics Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +using System; +using Dali; +using Dali.Constants; + +namespace VisualsUsingCustomView +{ + // The collection of contacts + static class ContactsList + { + public static readonly ContactItem[] s_contactData = new ContactItem[] + { + new ContactItem ("Emmett Yates", "./images/gallery-small-43.jpg", + new Color((73.0f/255.0f),(182.0f/255.0f), (245.0f/255.0f), 1.0f), + (int)PrimitiveVisualShapeType.CONE), + new ContactItem ("Leslie Wong", "./images/gallery-2.jpg", + new Color((51.0f/255.0f), (51.0f/255.0f), (102.0f/255.0f), 1.0f), + (int)PrimitiveVisualShapeType.SPHERE), + new ContactItem ("Walter Jensen", "./images/gallery-0.jpg", + new Color((151.0f/255.0f), (214.0f/255.0f), (240.0f/255.0f), 1.0f), + (int)PrimitiveVisualShapeType.CYLINDER), + new ContactItem ("Dan Haynes", "./images/gallery-1.jpg", + new Color((102.0f/255.0f), (251.0f/255.0f), (102.0f/255.0f), 1.0f), + (int)PrimitiveVisualShapeType.CONICAL_FRUSTRUM), + new ContactItem ("Mable Hodges", "./images/gallery-3.jpg", + new Color((255.0f/255.0f), (102.0f/255.0f), (102.0f/255.0f), 1.0f), + (int)PrimitiveVisualShapeType.CUBE) + }; + } + + // The information for an individual contact + class ContactItem + { + private string _name; + private string _imageURL; + private Color _color; + private int _shape; + + public ContactItem (string name, string imageURL, Color color, int shape) + { + _name = name; + _imageURL = imageURL; + _color = color; + _shape = shape; + } + + public string ImageURL + { + get + { + return _imageURL; + } + set + { + _imageURL = value; + } + } + + public string Name + { + get + { + return _name; + } + set + { + _name = value; + } + } + + public Color Color + { + get + { + return _color; + } + set + { + _color = value; + } + } + + public int Shape + { + get + { + return _shape; + } + set + { + _shape = value; + } + } + } +} \ No newline at end of file diff --git a/plugins/dali-swig/examples/visuals-using-custom-view/ContactView.cs b/plugins/dali-swig/examples/visuals-using-custom-view/ContactView.cs new file mode 100644 index 0000000..f659b70 --- /dev/null +++ b/plugins/dali-swig/examples/visuals-using-custom-view/ContactView.cs @@ -0,0 +1,195 @@ +/* + * Copyright (c) 2017 Samsung Electronics Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +using System; +using Dali; +using Dali.Constants; + +// A ContactView is a Custom View which consists of four visuals (Image, Primitive, Text and Color). +// All of these visuals can be configured via properties - ImageURL (Image), Shape (Primitive), Name (Text) and Color. +// Tap gesture is also enabled on the ContactView which changes the color visual to some random color when ContactView is tapped. + +namespace VisualsUsingCustomView +{ + public class ContactView : CustomView + { + private const int ColorVisualPropertyIndex = 0; + private const int PrimitiveVisualPropertyIndex = 1; + private const int ImageVisualPropertyIndex = 2; + private const int TextVisualPropertyIndex = 3; + private VisualBase _imageVisual; + private VisualBase _colorVisual; + private VisualBase _primitiveVisual; + private VisualBase _textVisual; + private int _shape; + private string _imageURL; + private string _name; + private Color _color; + + public ContactView() : base(typeof(ContactView).Name, ViewWrapperImpl.CustomViewBehaviour.REQUIRES_KEYBOARD_NAVIGATION_SUPPORT) + { + } + + public string ImageURL + { + get + { + return _imageURL; + } + set + { + _imageURL = value; + + // Create and Register Image Visual + Dali.Property.Map imageVisual = new Dali.Property.Map(); + imageVisual.Add( Visual.Property.Type, new Dali.Property.Value( (int)Visual.Type.Image )) + .Add( ImageVisualProperty.URL, new Dali.Property.Value( _imageURL )); + _imageVisual = VisualFactory.Get().CreateVisual( imageVisual ); + RegisterVisual( ImageVisualPropertyIndex, _imageVisual ); + + // Set the depth index for Image visual + _imageVisual.SetDepthIndex(ImageVisualPropertyIndex); + } + } + + public string Name + { + get + { + return _name; + } + set + { + _name = value; + + // Create and Register Text Visual + Dali.Property.Map textVisual = new Dali.Property.Map(); + textVisual.Add(Visual.Property.Type, new Dali.Property.Value((int)Visual.Type.Text)) + .Add(TextVisualProperty.Text, new Dali.Property.Value(_name)) + .Add(TextVisualProperty.TextColor, new Dali.Property.Value(Dali.Color.White)) + .Add(TextVisualProperty.PointSize, new Dali.Property.Value(15)) + .Add( TextVisualProperty.HorizontalAlignment, new Dali.Property.Value("CENTER")) + .Add( TextVisualProperty.VerticalAlignment, new Dali.Property.Value("CENTER")); + _textVisual = VisualFactory.Get().CreateVisual( textVisual ); + RegisterVisual( TextVisualPropertyIndex, _textVisual ); + + // Set the depth index for Text visual + _textVisual.SetDepthIndex(TextVisualPropertyIndex); + } + } + + public Color Color + { + get + { + return _color; + } + set + { + _color = value; + + // Create and Register Color Visual + Dali.Property.Map colorVisual = new Dali.Property.Map(); + colorVisual.Add( Visual.Property.Type, new Dali.Property.Value( (int)Visual.Type.Color )) + .Add( ColorVisualProperty.MixColor, new Dali.Property.Value( _color )); + _colorVisual = VisualFactory.Get().CreateVisual( colorVisual ); + RegisterVisual( ColorVisualPropertyIndex, _colorVisual ); + + // Set the depth index for Color visual + _colorVisual.SetDepthIndex(ColorVisualPropertyIndex); + } + } + + public int Shape + { + get + { + return _shape; + } + set + { + _shape = value; + + // Create and Register Primitive Visual + Dali.Property.Map primitiveVisual = new Dali.Property.Map(); + primitiveVisual.Add( Visual.Property.Type, new Dali.Property.Value( (int)Visual.Type.Primitive )) + .Add( PrimitiveVisualProperty.Shape, new Dali.Property.Value(_shape)) + .Add( PrimitiveVisualProperty.BevelPercentage, new Dali.Property.Value(0.3f)) + .Add( PrimitiveVisualProperty.BevelSmoothness, new Dali.Property.Value(0.0f)) + .Add( PrimitiveVisualProperty.ScaleDimensions, new Dali.Property.Value(new Vector3(1.0f,1.0f,0.3f))) + .Add( PrimitiveVisualProperty.MixColor, new Dali.Property.Value(new Vector4((245.0f/255.0f), (188.0f/255.0f), (73.0f/255.0f), 1.0f))); + _primitiveVisual = VisualFactory.Get().CreateVisual( primitiveVisual ); + RegisterVisual( PrimitiveVisualPropertyIndex, _primitiveVisual ); + + // Set the depth index for Primitive visual + _primitiveVisual.SetDepthIndex(PrimitiveVisualPropertyIndex); + } + } + + public override void OnInitialize() + { + // Enable Tap gesture on ContactView + EnableGestureDetection(Gesture.GestureType.Tap); + } + + public override void OnTap(TapGesture tap) + { + // Change the Color visual of ContactView with some random color + Random random = new Random(); + Color = new Color((random.Next(0, 256) / 255.0f), (random.Next(0, 256) / 255.0f), (random.Next(0, 256) / 255.0f), 1.0f); + } + + public override void OnRelayout(Vector2 size, RelayoutContainer container) + { + // Configure the transform and size of Image visual. + Dali.Property.Map imageVisualTransform = new Dali.Property.Map(); + imageVisualTransform.Add((int)VisualTransformPropertyType.OFFSET, new Dali.Property.Value(new Vector2(10.0f, 0.0f))) + .Add((int)VisualTransformPropertyType.OFFSET_SIZE_MODE, new Dali.Property.Value(new Vector4(1.0f, 1.0f, 1.0f, 1.0f))) + .Add((int)VisualTransformPropertyType.SIZE, new Dali.Property.Value(new Vector2(40.0f, 40.0f))) + .Add((int)VisualTransformPropertyType.ORIGIN, new Dali.Property.Value((int)AlignType.CENTER_BEGIN)) + .Add((int)VisualTransformPropertyType.ANCHOR_POINT, new Dali.Property.Value((int)AlignType.CENTER_BEGIN)); + _imageVisual.SetTransformAndSize(imageVisualTransform, size); + + // Configure the transform and size of Text visual. + Dali.Property.Map textVisualTransform = new Dali.Property.Map(); + textVisualTransform.Add((int)VisualTransformPropertyType.OFFSET, new Dali.Property.Value(new Vector2(0.0f, 0.0f))) + .Add((int)VisualTransformPropertyType.OFFSET_SIZE_MODE, new Dali.Property.Value(new Vector4(0.0f, 0.0f, 1.0f, 1.0f))) + .Add((int)VisualTransformPropertyType.SIZE, new Dali.Property.Value(new Vector2(size.X - 100.0f, 50.0f))) + .Add((int)VisualTransformPropertyType.ORIGIN, new Dali.Property.Value((int)Align.Type.Center)) + .Add((int)VisualTransformPropertyType.ANCHOR_POINT, new Dali.Property.Value((int)Align.Type.Center)); + _textVisual.SetTransformAndSize(textVisualTransform, size); + + // Configure the transform and size of Primitive visual. + Dali.Property.Map primitiveVisualTransform = new Dali.Property.Map(); + primitiveVisualTransform.Add((int)VisualTransformPropertyType.OFFSET, new Dali.Property.Value(new Vector2(size.X - 60.0f, 0.0f))) + .Add((int)VisualTransformPropertyType.OFFSET_SIZE_MODE, new Dali.Property.Value(new Vector4(1.0f, 1.0f, 1.0f, 1.0f))) + .Add((int)VisualTransformPropertyType.SIZE, new Dali.Property.Value(new Vector2(40.0f, 40.0f))) + .Add((int)VisualTransformPropertyType.ORIGIN, new Dali.Property.Value((int)AlignType.CENTER_BEGIN)) + .Add((int)VisualTransformPropertyType.ANCHOR_POINT, new Dali.Property.Value((int)AlignType.CENTER_BEGIN)); + _primitiveVisual.SetTransformAndSize(primitiveVisualTransform, size); + + // Configure the transform and size of Color visual. This is also the default value. + Dali.Property.Map colorVisualTransform = new Dali.Property.Map(); + colorVisualTransform.Add( (int)VisualTransformPropertyType.OFFSET, new Dali.Property.Value(new Vector2(0.0f,0.0f))) + .Add((int)VisualTransformPropertyType.OFFSET_SIZE_MODE, new Dali.Property.Value(new Vector4(0.0f, 0.0f, 0.0f, 0.0f))) + .Add( (int)VisualTransformPropertyType.SIZE, new Dali.Property.Value(new Vector2(1.0f, 1.0f)) ) + .Add( (int)VisualTransformPropertyType.ORIGIN, new Dali.Property.Value((int)AlignType.TOP_BEGIN) ) + .Add( (int)VisualTransformPropertyType.ANCHOR_POINT, new Dali.Property.Value((int)AlignType.TOP_BEGIN) ); + _colorVisual.SetTransformAndSize(colorVisualTransform, size); + } + } +} \ No newline at end of file diff --git a/plugins/dali-swig/examples/visuals-using-custom-view/visuals-using-custom-view.cs b/plugins/dali-swig/examples/visuals-using-custom-view/visuals-using-custom-view.cs new file mode 100644 index 0000000..b98a9ef --- /dev/null +++ b/plugins/dali-swig/examples/visuals-using-custom-view/visuals-using-custom-view.cs @@ -0,0 +1,82 @@ +/* + * Copyright (c) 2017 Samsung Electronics Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +using System; +using Dali; +using Dali.Constants; + +namespace VisualsUsingCustomView +{ + class VisualsExample + { + public VisualsExample(Application application) + { + application.Initialized += Initialize; + } + + private void Initialize(object source, NUIApplicationInitEventArgs e) + { + Stage stage = Stage.Instance; + stage.BackgroundColor = Color.White; + + TableView contentLayout = new TableView(14, 1); + contentLayout.Name = "ContentLayout"; + contentLayout.WidthResizePolicy = "FILL_TO_PARENT"; + contentLayout.HeightResizePolicy = "FILL_TO_PARENT"; + contentLayout.SetCellPadding(new Size(5.0f, 5.0f)); + contentLayout.BackgroundColor = new Color(0.949f, 0.949f, 0.949f, 1.0f); + + stage.GetDefaultLayer().Add(contentLayout); + + TextLabel title = new TextLabel("Contacts List with Visuals"); + title.Name = "Title"; + title.StyleName = "Title"; + title.WidthResizePolicy = "FILL_TO_PARENT"; + title.HeightResizePolicy = "USE_NATURAL_SIZE"; + title.HorizontalAlignment = "CENTER"; + contentLayout.Add(title); + contentLayout.SetFitHeight(0); + + // Create ContactView(s) from ContactItem(s) in ContactsList and add them to TableView + ContactView contactView; + foreach (ContactItem contact in ContactsList.s_contactData) + { + contactView = new ContactView(); + contactView.WidthResizePolicy = "FILL_TO_PARENT"; + contactView.HeightResizePolicy = "FILL_TO_PARENT"; + + // Configure visuals of ContactView via properties + contactView.Name = contact.Name; + contactView.ImageURL = contact.ImageURL; + contactView.Color = contact.Color; + contactView.Shape = contact.Shape; + contentLayout.Add(contactView); + } + } + + /// + /// The main entry point for the application. + /// + [STAThread] + static void Main(string[] args) + { + Application application = Application.NewApplication(); + VisualsExample visualsExample = new VisualsExample(application); + application.MainLoop(); + } + } +} \ No newline at end of file diff --git a/plugins/dali-swig/manual/csharp/CustomView.cs b/plugins/dali-swig/manual/csharp/CustomView.cs index 83540d3..a93b4f9 100644 --- a/plugins/dali-swig/manual/csharp/CustomView.cs +++ b/plugins/dali-swig/manual/csharp/CustomView.cs @@ -61,6 +61,9 @@ namespace Dali viewWrapperImpl.OnTap = new ViewWrapperImpl.OnTapDelegate(OnTap); viewWrapperImpl.OnLongPress = new ViewWrapperImpl.OnLongPressDelegate(OnLongPress); + // By default, we do not want the position to use the anchor point + this.PositionUsesAnchorPoint = false; + // Make sure CustomView is initialized. OnInitialize(); diff --git a/plugins/dali-swig/manual/csharp/ViewWrapperImpl.cs b/plugins/dali-swig/manual/csharp/ViewWrapperImpl.cs index 68fcef1..982c304 100644 --- a/plugins/dali-swig/manual/csharp/ViewWrapperImpl.cs +++ b/plugins/dali-swig/manual/csharp/ViewWrapperImpl.cs @@ -308,7 +308,10 @@ namespace Dali private void DirectorOnPropertySet(int index, global::System.IntPtr propertyValue) { - OnPropertySet(index, new Property.Value(propertyValue, true)); + if (OnPropertySet != null) + { + OnPropertySet(index, new Property.Value(propertyValue, true)); + } } private void DirectorOnSizeSet(global::System.IntPtr targetSize)