Tag: Surface Dial

#Windows10 – Disable the #SurfaceDial global menu in a UWP App

Hello!

Today’s post is a fast one, for a specific scenario:

In a Universal Windows Platform App, we must define whether to show or hide the menus when working with a Surface Dial.

To do this, we must access the general configuration of Surface Dial using RadialControllerConfiguration.

The following class shows an example of a global service for a UWP with an operation where this value is validated from the settings of an App.

using Windows.UI.Input;
using SurfaceDialApp01.Views;
namespace SurfaceDialApp01.Services
{
public static class SurfaceDialService
{
public static async void InitSurfaceDialMenu()
{
var surfaceDialConfiguration = RadialControllerConfiguration.GetForCurrentView();
var ret = await SettingsPage.GetIsSurfaceDialMenuEnabled();
surfaceDialConfiguration.IsMenuSuppressed = !ret;
}
}
}

view raw
SurfaceDialMenuDisable.cs
hosted with ❤ by GitHub

In the GitHub example you can see the complete operation. In short, the option to use or not, the menus of Surface Dial are defined through the settings of the App.

I1

Source Code GitHub

Happy Coding !!!

Saludos @ Toronto

El Bruno

References

#Windows10 – Deshabilitar el menú de #SurfaceDial en una UWP App

 

Hola!

El post de hoy es rápido, para un escenario concreto:

En una Universal Windows Platform App, debemos definir si mostrar u ocultar los menús cuando se trabaje con un Surface Dial.

Para realizar esto, debemos acceder a la configuración general de Surface Dial utilizando RadialControllerConfiguration.

La siguiente clase muestra un ejemplo de un servicio global para una UWP con una operación donde se valida este valor a partir de las opciones de configuración (Settings) de una App.

using Windows.UI.Input;
using SurfaceDialApp01.Views;
namespace SurfaceDialApp01.Services
{
public static class SurfaceDialService
{
public static async void InitSurfaceDialMenu()
{
var surfaceDialConfiguration = RadialControllerConfiguration.GetForCurrentView();
var ret = await SettingsPage.GetIsSurfaceDialMenuEnabled();
surfaceDialConfiguration.IsMenuSuppressed = !ret;
}
}
}

view raw
SurfaceDialMenuDisable.cs
hosted with ❤ by GitHub

En el ejemplo de GitHub se puede ver el funcionamiento completo. En pocas palabras, la opción de utilizar o no, los menús de Surface Dial se definen a través de la settings de la App.

I1

Source Code en GitHub

Happy Coding !!!

Saludos @ Toronto

El Bruno

References

#Windows10 – Customizing the default menu items in #SurfaceDial

Hello!

I continue with the series of posts on work with Surface Dial. In the previous post I described how to create a menu with 3 options that are activated in the Surface Dial.

If our App needs several menus, one of the options that we may need to take into account is to disable the options that the Surface Dial defaults to. If we do not need vertical scrolling, or do not need Undo / Redo actions, it may be convenient to remove them from the radial menu.

The following image shows the default menu that is shown in the map view of the example with which we are working. In the same we can see the default options and that the 6th element is a custom menu.

I1

Using RadialControllerConfiguration we can control the menu items. The following image shows a menu with only the elements of our App.

I3

We can do this with the following code.

var controller = RadialController.CreateForCurrentView();
controller.RotationResolutionInDegrees = 0.2;
controller.UseAutomaticHapticFeedback = false;
var mapZoomItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Maps Zoom", "\xE128", "Segoe MDL2 Assets");
var mapRotationItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Map Rotation", "\xE128", "Segoe MDL2 Assets");
var disableDialItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Disable Dial", "\xE128", "Segoe MDL2 Assets");
controller.Menu.Items.Add(mapZoomItem);
controller.Menu.Items.Add(mapRotationItem);
controller.Menu.Items.Add(disableDialItem);
var surfaceDialConfiguration = RadialControllerConfiguration.GetForCurrentView();
surfaceDialConfiguration.SetDefaultMenuItems(new List<RadialControllerSystemMenuItemKind>{});
// Add 2 default system buttons
//surfaceDialConfiguration.SetDefaultMenuItems(new[] {
// RadialControllerSystemMenuItemKind.Volume,
// RadialControllerSystemMenuItemKind.NextPreviousTrack
//});

view raw
SurfaceDialMenuItemCustom.cs
hosted with ❤ by GitHub

And if we change the commented lines (15 to 19) we can leave in our menu 2 system options [Volume] and [Next Previous Track]; and the App menu items we add by code.

I2

Source Code GitHub

Happy Coding !!!

Saludos @ Toronto

El Bruno

References

#Windows10 – Personalizando los elementos del menú por defecto en #SurfaceDial

Hola!

Sigo con la serie de posts sobre trabajo con Surface Dial. En el post anterior describí como crear un menú con 3 opciones que se activan en el Surface Dial.

Si nuestra App necesita varios menús, una de las opciones que tal vez necesitemos tener en cuenta, es la de deshabilitar las opciones que por defecto muestra el Surface Dial. Si no necesitamos scroll vertical, o no necesitamos acciones de Undo/Redo, puede ser conveniente eliminar las mismas del menú radial.

La siguiente imagen muestra el menú por defecto que se muestra en la vista de mapas del ejemplo con el que estamos trabajando. En el mismo podemos ver las opciones por defecto y que el 6to elemento es un menú personalizado.

I1

Accendiendo a RadialControllerConfiguration podremos controlar los elementos del menu. La siguiente imagen muestra un menú con solo los elementos de nuestra App.

I3

Esto lo conseguimos con el siguiente código.

var controller = RadialController.CreateForCurrentView();
controller.RotationResolutionInDegrees = 0.2;
controller.UseAutomaticHapticFeedback = false;
var mapZoomItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Maps Zoom", "\xE128", "Segoe MDL2 Assets");
var mapRotationItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Map Rotation", "\xE128", "Segoe MDL2 Assets");
var disableDialItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Disable Dial", "\xE128", "Segoe MDL2 Assets");
controller.Menu.Items.Add(mapZoomItem);
controller.Menu.Items.Add(mapRotationItem);
controller.Menu.Items.Add(disableDialItem);
var surfaceDialConfiguration = RadialControllerConfiguration.GetForCurrentView();
surfaceDialConfiguration.SetDefaultMenuItems(new List<RadialControllerSystemMenuItemKind>{});
// Add 2 default system buttons
//surfaceDialConfiguration.SetDefaultMenuItems(new[] {
// RadialControllerSystemMenuItemKind.Volume,
// RadialControllerSystemMenuItemKind.NextPreviousTrack
//});

view raw
SurfaceDialMenuItemCustom.cs
hosted with ❤ by GitHub

Y si cambiamos las líneas comentadas (15 to 19) podremos dejar en nuestro menú 2 opciones de sistema [Volumen] y [Next Previous Track]; y las opciones que agregamos por código.

I2

Source Code en GitHub

Happy Coding !!!

Saludos @ Toronto

El Bruno

References

#Windows10 – Working with Multiple Menus with #SurfaceDial in a UWP View

Hello!

Today I follow the example of maps and Surface Dial in a UWP App. In today’s scenario, I will add a new functionality to the application with the map

  • Use the Surface Dial spin to control the map zoom
  • Use the Surface Dial spin to rotate the current view on the map
  • Disable Surface Dial Spin

In this case I have created 3 different menu items that can be selected using the click of the Surface Dial.

I1

Each of these elements is added to the menu items collection associated with this view in the Surface Dial. The next step is to subscribe to the Invoked() event of each menu item. In each Invoke action I’ll change the working mode of the view. The code that implements this functionality is as follows

enum ControllerMode { Zoom, Rotate, Disable };
ControllerMode _controllerMode;
public MapPagePage()
{
_locationService = new LocationService();
Center = new Geopoint(_defaultPosition);
ZoomLevel = DefaultZoomLevel;
InitializeComponent();
var controller = RadialController.CreateForCurrentView();
controller.RotationResolutionInDegrees = 0.2;
controller.UseAutomaticHapticFeedback = false;
var mapZoomItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Maps Zoom", "\xE128", "Segoe MDL2 Assets");
var mapRotationItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Map Rotation", "\xE128", "Segoe MDL2 Assets");
var disableDialItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Disable Dial", "\xE128", "Segoe MDL2 Assets");
controller.Menu.Items.Add(mapZoomItem);
controller.Menu.Items.Add(mapRotationItem);
controller.Menu.Items.Add(disableDialItem);
mapZoomItem.Invoked += MapZoomItem_Invoked;
mapRotationItem.Invoked += MapRotationItem_Invoked;
disableDialItem.Invoked += DisableDialItem_Invoked;
controller.RotationChanged += ControllerRotationChangedAsync;
}
private void DisableDialItem_Invoked(RadialControllerMenuItem sender, object args)
{
_controllerMode = ControllerMode.Disable;
}
private void MapRotationItem_Invoked(RadialControllerMenuItem sender, object args)
{
_controllerMode = ControllerMode.Rotate;
}
private void MapZoomItem_Invoked(RadialControllerMenuItem sender, object args)
{
_controllerMode = ControllerMode.Zoom;
}
private async void ControllerRotationChangedAsync(RadialController sender, RadialControllerRotationChangedEventArgs args)
{
Debug.WriteLine($"{args.RotationDeltaInDegrees}");
switch (_controllerMode)
{
case ControllerMode.Zoom:
mapControl.ZoomLevel = mapControl.ZoomLevel + args.RotationDeltaInDegrees;
break;
case ControllerMode.Rotate:
await mapControl.TryRotateAsync(args.RotationDeltaInDegrees);
break;
default:
Debug.WriteLine($"No action!");
break;
}
}

view raw
SurfaceDialMenuItems.cs
hosted with ❤ by GitHub

Happy Coding!

Source Code en GitHub

Greeting @ Toronto

El Bruno

References

#Windows10 – Trabajando con múltiples menús con #SurfaceDial en una Vista

Hola!

Hoy sigo con el ejemplo de los mapas y Surface Dial. En el caso de hoy, agregare una nueva funcionalidad a la aplicación con el mapa

  • Utilizar el spin de Surface Dial para controlar el zoom del mapa
  • Utilizar el spin de Surface Dial para rotar la vista actual en el mapa
  • Deshabilitar el spin de Surface Dial

En este caso he creado 3 elementos de menú diferentes que se pueden seleccionar utilizando el clic del Surface Dial.

I1

Cada uno de estos elementos se agrega a la colección de ítems que tiene asociada esta vista en el Surface Dial. El siguiente paso es suscribirse al evento Invoked() de cada elemento del menu para cambar el modo de trabajo de la vista. El código que implementa esta funcionalidad es el siguiente

enum ControllerMode { Zoom, Rotate, Disable };
ControllerMode _controllerMode;
public MapPagePage()
{
_locationService = new LocationService();
Center = new Geopoint(_defaultPosition);
ZoomLevel = DefaultZoomLevel;
InitializeComponent();
var controller = RadialController.CreateForCurrentView();
controller.RotationResolutionInDegrees = 0.2;
controller.UseAutomaticHapticFeedback = false;
var mapZoomItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Maps Zoom", "\xE128", "Segoe MDL2 Assets");
var mapRotationItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Map Rotation", "\xE128", "Segoe MDL2 Assets");
var disableDialItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Disable Dial", "\xE128", "Segoe MDL2 Assets");
controller.Menu.Items.Add(mapZoomItem);
controller.Menu.Items.Add(mapRotationItem);
controller.Menu.Items.Add(disableDialItem);
mapZoomItem.Invoked += MapZoomItem_Invoked;
mapRotationItem.Invoked += MapRotationItem_Invoked;
disableDialItem.Invoked += DisableDialItem_Invoked;
controller.RotationChanged += ControllerRotationChangedAsync;
}
private void DisableDialItem_Invoked(RadialControllerMenuItem sender, object args)
{
_controllerMode = ControllerMode.Disable;
}
private void MapRotationItem_Invoked(RadialControllerMenuItem sender, object args)
{
_controllerMode = ControllerMode.Rotate;
}
private void MapZoomItem_Invoked(RadialControllerMenuItem sender, object args)
{
_controllerMode = ControllerMode.Zoom;
}
private async void ControllerRotationChangedAsync(RadialController sender, RadialControllerRotationChangedEventArgs args)
{
Debug.WriteLine($"{args.RotationDeltaInDegrees}");
switch (_controllerMode)
{
case ControllerMode.Zoom:
mapControl.ZoomLevel = mapControl.ZoomLevel + args.RotationDeltaInDegrees;
break;
case ControllerMode.Rotate:
await mapControl.TryRotateAsync(args.RotationDeltaInDegrees);
break;
default:
Debug.WriteLine($"No action!");
break;
}
}

view raw
SurfaceDialMenuItems.cs
hosted with ❤ by GitHub

Happy Coding!

Source Code en GitHub

Saludos @ Toronto

El Bruno

References

#Windows10 – Rotating maps with C# and #SurfaceDial in UWP Apps

Hello!

In order to talk a little about how to create advanced menus for the Surface Dial, I will resume my view with a map and add an extra feature to this view:

  • Use the Surface Dial spin to control the map zoom
  • Use the Surface Dial spin to rotate the current view on the map

The first example I mentioned in the previous post, today I will show the 2nd functionality.

2017 10 12 SurfaceDial Maps 02.gif

The code to make this work is very simple. It is based on the following steps

  • To provide the 2 features with the Surface Dial, click on the dial, change the mode from Zoom to Rotate and again zoom
  • In the RotationChanged () event, the working mode is verified and changes are applied to the map

Very simple.

 

enum ControllerMode { zoom, rotate };
ControllerMode _controllerMode;
readonly RadialController _controller;
public MapPagePage()
{
locationService = new LocationService();
Center = new Geopoint(defaultPosition);
ZoomLevel = DefaultZoomLevel;
InitializeComponent();
_controller = RadialController.CreateForCurrentView();
_controller.RotationResolutionInDegrees = 0.2;
_controller.UseAutomaticHapticFeedback = false;
var myItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Maps", "\xE128", "Segoe MDL2 Assets");
_controller.Menu.Items.Add(myItem);
_controller.ButtonClicked += ControllerButtonClicked;
_controller.RotationChanged += ControllerRotationChangedAsync;
}
private async void ControllerRotationChangedAsync(RadialController sender, RadialControllerRotationChangedEventArgs args)
{
Debug.WriteLine($"{args.RotationDeltaInDegrees}");
if (_controllerMode == ControllerMode.zoom)
mapControl.ZoomLevel = mapControl.ZoomLevel + args.RotationDeltaInDegrees;
else
await mapControl.TryRotateAsync(args.RotationDeltaInDegrees);
}
private void ControllerButtonClicked(RadialController sender, RadialControllerButtonClickedEventArgs args)
{
if (_controllerMode == ControllerMode.rotate)
_controllerMode = ControllerMode.zoom;
else
_controllerMode = ControllerMode.rotate;
}

view raw
SurfaceDialMapRotate.cs
hosted with ❤ by GitHub

In the next post, a little about how to work with the menu offered by the Surface Dial.

Happy Coding!

Source Code GitHub

Greetings @ Toronto

El Bruno

References

#Windows10 – Girando mapas con C# y #SurfaceDial en UWP Apps

 

Hola!

De cara a hablar un poco sobre la forma de crear menús avanzados para el Surface Dial, retomare mi vista con el mapa y agregare 2 funcionalidades a la misma

  • Utilizar el spin de Surface Dial para controlar el zoom del mapa
  • Utilizar el spin de Surface Dial para rotar la vista actual en el mapa

El 1er ejemplo lo comente en el post anterior, hoy mostrare la 2da funcionalidad.

2017 10 12 SurfaceDial Maps 02.gif

El código para trabajar la misma es muy simple. Se basa en lo siguiente

  • Para brindar las 2 funcionalidades con el Surface Dial, el clic en el dial, cambia el modo de Zoom a Rotate y nuevamente a zoom
  • En el evento RotationChanged() se verifica el modo de trabajo y se aplican los cambios sobre el mapa

Muy simple.

enum ControllerMode { zoom, rotate };
ControllerMode _controllerMode;
readonly RadialController _controller;
public MapPagePage()
{
locationService = new LocationService();
Center = new Geopoint(defaultPosition);
ZoomLevel = DefaultZoomLevel;
InitializeComponent();
_controller = RadialController.CreateForCurrentView();
_controller.RotationResolutionInDegrees = 0.2;
_controller.UseAutomaticHapticFeedback = false;
var myItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Maps", "\xE128", "Segoe MDL2 Assets");
_controller.Menu.Items.Add(myItem);
_controller.ButtonClicked += ControllerButtonClicked;
_controller.RotationChanged += ControllerRotationChangedAsync;
}
private async void ControllerRotationChangedAsync(RadialController sender, RadialControllerRotationChangedEventArgs args)
{
Debug.WriteLine($"{args.RotationDeltaInDegrees}");
if (_controllerMode == ControllerMode.zoom)
mapControl.ZoomLevel = mapControl.ZoomLevel + args.RotationDeltaInDegrees;
else
await mapControl.TryRotateAsync(args.RotationDeltaInDegrees);
}
private void ControllerButtonClicked(RadialController sender, RadialControllerButtonClickedEventArgs args)
{
if (_controllerMode == ControllerMode.rotate)
_controllerMode = ControllerMode.zoom;
else
_controllerMode = ControllerMode.rotate;
}

view raw
SurfaceDialMapRotate.cs
hosted with ❤ by GitHub

En el próximo post, un poco sobre como trabajar con el menú que nos ofrece el Surface Dial.

Happy Coding!

Source Code en GitHub

Saludos @ Toronto

El Bruno

References

#Windows10 – 2 lines of C# code to handle maps using a #SurfaceDial

Hello!

Today’s post will also describe an scenario on how to use a Surface Dial in a UWP App. In this case, in a view with a Map control. The first scenario to work is simple, control the zoom of the map display with the spin of the Surface Dial. Something similar to the following animation

 

2017 10 11 SurfaceDial Maps 03

As in the previous example, to create the map menu button I used a char based on the [Segoe MDL2 Assets] font. In the RotationChanged() event, I change the zoom value of the map using the spin change of the Surface Dial

readonly RadialController _controller;
public MapPagePage()
{
locationService = new LocationService();
Center = new Geopoint(defaultPosition);
ZoomLevel = DefaultZoomLevel;
InitializeComponent();
_controller = RadialController.CreateForCurrentView();
_controller.RotationResolutionInDegrees = 0.2;
_controller.UseAutomaticHapticFeedback = false;
var myItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Maps", "\xE128", "Segoe MDL2 Assets" );
_controller.Menu.Items.Add(myItem);
_controller.ButtonClicked += ControllerButtonClicked;
_controller.RotationChanged += ControllerRotationChanged;
}
private void ControllerRotationChanged(RadialController sender, RadialControllerRotationChangedEventArgs args)
{
Debug.WriteLine($"{mapControl.ZoomLevel} – {args.RotationDeltaInDegrees}");
mapControl.ZoomLevel = mapControl.ZoomLevel + args.RotationDeltaInDegrees;
}

view raw
SurfaceDialMapControlZoom.cs
hosted with ❤ by GitHub

In the animation we can see how the Output window displays the change of the zoom value and the delta that is passed from the dial in each event. It is important to remember that if we turn the Surface Dial quickly, an event will not be triggered for each degree of rotation but an event where the delta value of the change of spin is greater.

That’s why it’s important to understand the definition in line 11, where I define that the value passed in the RotationChanged() event is 0.2. If we need another type of scale, the property RotationResolutionInDegrees is the one that will allow us to change this value.

Happy Coding!

Source Code GitHub

Greetings @ Burlington

El Bruno

References

#Windows10 – 2 líneas de C# code para controlar mapas con #SurfaceDial

Hola!

Hoy también escribo un ejemplo sobre cómo utilizar Surface Dial en UWP Apps. En este caso, en una vista que tiene un control Map. El primer escenario a trabajar es simple, controlar el zoom de visualización del map con el spin del Surface Dial. Algo similar a la siguiente animación

2017 10 11 SurfaceDial Maps 03

Como en el ejemplo anterior, el botón del menú del mapa lo he creado utilizando un char del Font [Segoe MDL2 Assets]. En el evento RotationChanged(), cambio el valor del zoom del mapa utilizando el cambio del spin del Surface Dial

readonly RadialController _controller;
public MapPagePage()
{
locationService = new LocationService();
Center = new Geopoint(defaultPosition);
ZoomLevel = DefaultZoomLevel;
InitializeComponent();
_controller = RadialController.CreateForCurrentView();
_controller.RotationResolutionInDegrees = 0.2;
_controller.UseAutomaticHapticFeedback = false;
var myItem = RadialControllerMenuItem.CreateFromFontGlyph("El Bruno – Maps", "\xE128", "Segoe MDL2 Assets" );
_controller.Menu.Items.Add(myItem);
_controller.ButtonClicked += ControllerButtonClicked;
_controller.RotationChanged += ControllerRotationChanged;
}
private void ControllerRotationChanged(RadialController sender, RadialControllerRotationChangedEventArgs args)
{
Debug.WriteLine($"{mapControl.ZoomLevel} – {args.RotationDeltaInDegrees}");
mapControl.ZoomLevel = mapControl.ZoomLevel + args.RotationDeltaInDegrees;
}

view raw
SurfaceDialMapControlZoom.cs
hosted with ❤ by GitHub

En la animación podemos ver como en la ventana de Output se ve el cambio del valor del zoom y el delta que se pasa en cada evento. Es importante recordar que si giramos rápidamente el SurfaceDial, no se disparara un evento por cada grado de giro sino un evento donde el valor delta del cambio de giro sea mayor.

En este punto, un detalle importante es el de la línea 11, donde defino que el valor que se pasara en el evento RotationChanged() es de 0.2. Si necesitamos otro tipo de escala, la propiedad RotationResolutionInDegrees es la que nos permitirá cambiar este valor.

Happy Coding!

Source Code en GitHub

Saludos @ Toronto

El Bruno

References