2

Estoy programando en C# .NET y realice el diseño de un gráfico en Adobe XD y no logro pasar el mismo a visual studio, conservando el estilo. Utilice nuget LiveCharts en WinForm (https://lvcharts.net/App/examples/v1/wf/Solid%20Gauge). Intente generar el grafico similar al diseño realizado en Adobe pero no lo consigo (segunda imagen). Necesito que alguien me guie para realizar el mismo grafico correspondiente a la primer imagen introducir la descripción de la imagen aquí.

Tengo problemas para armar el gráfico de la imagen 1; cambiar el color de los dígitos donde se visualiza el valor actual, tick etc.

introducir la descripción de la imagen aquí

Aprovecho para consultar, una vez que realizo la depuración y cargo el .dll se pone la imagen "negra" como se ve en la imagen. Es mi primer proyecto con C#. Este componente luego lo cargo desde WinCC que es un software SCADA y ahi se muestra con fondo negro y si cambio el valor muestra la barra pero el fondo permanece negro (imagen 4 y 5).

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Adjunto codigo

using System;
using System.Collections.Generic;
using System.ComponentModel;

using System.Windows;
using System.Windows.Forms;
using System.Windows.Media;
using LiveCharts.Wpf;
using Brushes = System.Windows.Media.Brushes;

namespace temperaturaRodamientos
{
public partial class UserControl1: UserControl
{
//[Description("evento")]
private double _valor = -10.0;
public double valorNormal = 55.0;
public double valorPrecaucion = 80.0;
public double valorPeligro = 90.0;
public double valorMaximoSensor = 127.0;

[Description("Valor actual temperatura"), Category("Data")]
public double valor{
get { return _valor; } 
set
{
_valor = value;
solidGauge2.Value = _valor;
solidGauge2.BackColorTransparent = true;

if (_valor<=valorNormal) //verde
{ 
solidGauge2.ToColor = Color.FromRgb(11, 211, 1);
solidGauge2.FromColor = Color.FromRgb(11, 211, 1);
} else if (_valor >= valorNormal && _valor <= valorPeligro) //amarillo
{ 
solidGauge2.ToColor = Color.FromRgb(255, 250, 101);
solidGauge2.FromColor = Color.FromRgb(255, 250, 101);
}
else //rojo
{

solidGauge2.ToColor = Color.FromRgb(252, 141, 141);
solidGauge2.FromColor = Color.FromRgb(252, 141, 141);
} //fin if-else                
} //fin set
}

public UserControl1(){
InitializeComponent();
solidGauge2.Value = valor;
solidGauge2.From = valor;            
solidGauge2.To = valorMaximoSensor;
solidGauge2.Base.LabelsVisibility = Visibility.Hidden; //no muestra los valores min/max
solidGauge2.ToColor = Color.FromRgb(11, 211, 1);
solidGauge2.FromColor = Color.FromRgb(11, 211, 1);           

} //fin contructor


} //fin clase

} //fin proyecto
2
  • 1
    Seria bueno que coloques parte del codigo que utilizas para armar. Asi podemos ver como ayudarte mejor. Incluso si lo puedes publicar asi lo ejecutamos. Ademas tambien el enlace al componente que utilizas, ¿es este LiveCharts? Ademas lo quieres utilizar en Winform, WPF, UWP, Web? Commented el 6 jul. 2019 a las 22:44
  • Tendrias que editar tu pregunta añadiendo el codigo y el enlace. Asi queda lo mas completa posible y no como una respuesta Commented el 6 jul. 2019 a las 23:17

1 respuesta 1

2

Arme un ejemplo para probar el componente, y logre llegar con tu mismo código (similar) al la imagen que envias como segunda opcion. Asi que la pregunta es...

  • ¿podrias indicar cual es exactamente el problema? Es armar el grafico identico a la opcion 2?
  • Tienes problemas con el usercontrol en tiempo de diseño?

Comentanos exactamente el problema para ayudarte.

Mira, la animacion del ejemplo que tengo (que luego te podre subir a un repositorio pero mas abajo lo dejo al codigo del un solo formulario) En la imagen animada puedes ver que se logra igual a la segunda imagen que necesitas.

introducir la descripción de la imagen aquí

El codigo

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Forms;

namespace WindowsFormsApp1
{
public partial class Form1 : Form
{
    private double _valor = -10.0;
    public double valorNormal = 55.0;
    public double valorPrecaucion = 80.0;
    public double valorPeligro = 90.0;
    public double valorMaximoSensor = 127.0;

    public Form1()
    {
        InitializeComponent();

        txtValue.Text = _valor.ToString();
        Build();
    }

    private void Build()
    {
        solidGauge1.Value = _valor;
        solidGauge1.From = _valor;
        solidGauge1.To = valorMaximoSensor;
        solidGauge1.Base.LabelsVisibility = Visibility.Hidden;
        solidGauge1.ToColor = System.Windows.Media.Color.FromRgb(11, 211, 1);
        solidGauge1.FromColor = System.Windows.Media.Color.FromRgb(11, 211, 1);
    }

    private void SetValue(int value) {
        _valor = value;
        solidGauge1.Value = _valor;
        solidGauge1.BackColorTransparent = true;

        if (_valor <= valorNormal) //verde
        {
            solidGauge1.ToColor = System.Windows.Media.Color.FromRgb(11, 211, 1);
            solidGauge1.FromColor = System.Windows.Media.Color.FromRgb(11, 211, 1);
        }
        else if (_valor >= valorNormal && _valor <= valorPeligro) //amarillo
        {
            solidGauge1.ToColor = System.Windows.Media.Color.FromRgb(255, 250, 101);
            solidGauge1.FromColor = System.Windows.Media.Color.FromRgb(255, 250, 101);
        }
        else //rojo
        {

            solidGauge1.ToColor = System.Windows.Media.Color.FromRgb(252, 141, 141);
            solidGauge1.FromColor = System.Windows.Media.Color.FromRgb(252, 141, 141);
        } //fin if-else      
    }

    private void TxtValue_TextChanged(object sender, EventArgs e)
    {
        Int32 value;
        if (!string.IsNullOrEmpty(txtValue.Text)
            && Int32.TryParse(txtValue.Text, out value))
        {
            SetValue(value);
        }
        else
        {
            SetValue(0);
        }


    }
}
}

Espero que te sirva de ayuda o guia

NOTA: Que bueno esta el componente de gráficos y simple! Ademas lo estoy probando con winforms con .NETCORE 3.0 y funciona

1
  • Estimado, inicie la simulación en WinCC y logro ver el componente correctamente! Ahora lo que me falta es pasar el diseño de la imagen, cambiando color de letra, tipografía, agregado de TicksStep y TicksSpacing, etc. Agradecería que pudiera indicarme como realizarlo. Gracias. Commented el 7 jul. 2019 a las 17:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.