Thread.sleep

DokterApp/UserControlForTab.xaml

@@ -1,11 +1,13 @@
 <UserControl x:Class="DokterApp.UserControlForTab"
+             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:DokterApp"
+             xmlns:constantChanges="clr-namespace:DokterApp"
              mc:Ignorable="d" 
-             d:DesignHeight="450" d:DesignWidth="800">
+             d:DesignHeight="450" d:DesignWidth="800" d:DataContext="{d:DesignInstance constantChanges:UserControlForTab}">
     <Grid Margin="15,5,15,15">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="5*"/>
@@ -60,8 +62,31 @@
         <Button Content="Stop Session" Grid.Column="1" HorizontalAlignment="Left" Margin="187,86,0,0" Grid.Row="3" VerticalAlignment="Top" Width="97" Click="StopSession_Click"/>
         <TextBox x:Name="textBox_SetResistance" Grid.Column="1" HorizontalAlignment="Left" Margin="69,128,0,0" Grid.Row="3" TextWrapping="Wrap" VerticalAlignment="Top" Width="97"/>
         <Button Content="Set Resistance" Grid.Column="1" HorizontalAlignment="Left" Margin="187,128,0,0" Grid.Row="3" VerticalAlignment="Top" Width="97" Height="18" Click="SetResistance_Click"/>
-        <Canvas Grid.Row="3" Background="White" Margin="0,33,0,0"/>
+        <lvc:CartesianChart Grid.Row="3" AnimationsSpeed="0:0:0.5" Hoverable="False" DataTooltip="{x:Null}" Margin="-10,33,10,0">
-        <ComboBox Name="DropBox" HorizontalAlignment="Left" Margin="0,6,0,0" Grid.Row="3" VerticalAlignment="Top" Width="190"/>
+            <lvc:CartesianChart.Series>
+                <lvc:LineSeries Values="{Binding ChartValues}" 
+                                PointGeometry="{x:Null}" 
+                                LineSmoothness="1"
+                                StrokeThickness="6" 
+                                Stroke="#F34336"
+                                Fill="Transparent"/>
+            </lvc:CartesianChart.Series>
+            <lvc:CartesianChart.AxisX>
+                <lvc:Axis LabelFormatter="{Binding DateTimeFormatter}" 
+                          MaxValue="{Binding AxisMax}" 
+                          MinValue="{Binding AxisMin}"
+                          Unit="{Binding AxisUnit}">
+                    <lvc:Axis.Separator>
+                        <lvc:Separator Step="{Binding AxisStep}" />
+                    </lvc:Axis.Separator>
+                </lvc:Axis>
+            </lvc:CartesianChart.AxisX>
+        </lvc:CartesianChart>
+        <ComboBox Name="DropBox" HorizontalAlignment="Left" Margin="0,6,0,0" Grid.Row="3" VerticalAlignment="Top" Width="190" SelectionChanged="InjectStopOnClick">
+            <ComboBoxItem Content="Speed"/>
+            <ComboBoxItem Content="BPM"/>
+            <ComboBoxItem Content="Resistance"/>
+        </ComboBox>
         <Button Content="Client Info" Grid.Column="1" HorizontalAlignment="Left" Margin="207,6,0,0" VerticalAlignment="Top" Height="26" Width="82" Click="ClientInfo_Click"/>
     </Grid>
 </UserControl>

DokterApp/UserControlForTab.xaml.cs

@@ -1,6 +1,12 @@
-using System;
+using LiveCharts;
+using LiveCharts.Configurations;
+using LiveCharts.Wpf;
+using System;
 using System.Collections.Generic;
+using System.ComponentModel;
 using System.Text;
+using System.Threading;
+using System.Threading.Tasks;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Data;
@@ -16,13 +22,122 @@ namespace DokterApp
     /// <summary>
     /// Interaction logic for UserControlForTab.xaml
     /// </summary>
-    public partial class UserControlForTab : UserControl
+    public partial class UserControlForTab : UserControl, INotifyPropertyChanged
     {
+
+        private double _axisMax;
+        private double _axisMin;
+        private double _trend;
         public UserControlForTab()
         {
             InitializeComponent();
             Username_Label.Content = "Bob";
             Status_Label.Content = "Status: Dead";
+
+            //To handle live data easily, in this case we built a specialized type
+            //the MeasureModel class, it only contains 2 properties
+            //DateTime and Value
+            //We need to configure LiveCharts to handle MeasureModel class
+            //The next code configures MeasureModel  globally, this means
+            //that LiveCharts learns to plot MeasureModel and will use this config every time
+            //a IChartValues instance uses this type.
+            //this code ideally should only run once
+            //you can configure series in many ways, learn more at 
+            //http://lvcharts.net/App/examples/v1/wpf/Types%20and%20Configuration
+
+            var mapper = Mappers.Xy<MeasureModel>()
+                .X(model => model.DateTime.Ticks)   //use DateTime.Ticks as X
+                .Y(model => model.Value);           //use the value property as Y
+
+            //lets save the mapper globally.
+            Charting.For<MeasureModel>(mapper);
+
+            //the values property will store our values array
+            ChartValues = new ChartValues<MeasureModel>();
+
+            //lets set how to display the X Labels
+            DateTimeFormatter = value => new DateTime((long)value).ToString("mm:ss");
+
+            //AxisStep forces the distance between each separator in the X axis
+            AxisStep = TimeSpan.FromSeconds(1).Ticks;
+            //AxisUnit forces lets the axis know that we are plotting seconds
+            //this is not always necessary, but it can prevent wrong labeling
+            AxisUnit = TimeSpan.TicksPerSecond;
+
+            SetAxisLimits(DateTime.Now);
+
+            //The next code simulates data changes every 300 ms
+
+            IsReading = false;
+
+            DataContext = this;
+        }
+
+        public double AxisMax
+        {
+            get { return _axisMax; }
+            set
+            {
+                _axisMax = value;
+                OnPropertyChanged("AxisMax");
+            }
+        }
+        public double AxisMin
+        {
+            get { return _axisMin; }
+            set
+            {
+                _axisMin = value;
+                OnPropertyChanged("AxisMin");
+            }
+        }
+
+        public bool IsReading { get; set; }
+
+        private void Read()
+        {
+            var r = new Random();
+
+            while (IsReading)
+            {
+                Thread.Sleep(150);
+                var now = DateTime.Now;
+
+                _trend += r.Next(-8, 10);
+
+                ChartValues.Add(new MeasureModel
+                {
+                    DateTime = now,
+                    Value = _trend
+                });
+
+                SetAxisLimits(now);
+
+                //lets only use the last 150 values
+                if (ChartValues.Count > 150) ChartValues.RemoveAt(0);
+            }
+        }
+
+        private void SetAxisLimits(DateTime now)
+        {
+            AxisMax = now.Ticks + TimeSpan.FromSeconds(1).Ticks; // lets force the axis to be 1 second ahead
+            AxisMin = now.Ticks - TimeSpan.FromSeconds(8).Ticks; // and 8 seconds behind
+        }
+
+        private void InjectStopOnClick(object sender, RoutedEventArgs e)
+        {
+            IsReading = !IsReading;
+            if (IsReading) Task.Factory.StartNew(Read);
+        }
+
+
+
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        protected virtual void OnPropertyChanged(string propertyName = null)
+        {
+            if (PropertyChanged != null)
+                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
         }
 
         private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
@@ -51,9 +166,25 @@ namespace DokterApp
 
         private void ClientInfo_Click(object sender, RoutedEventArgs e)
         {
-            MessageBox.Show("firstname:\tBob\n" +
+            MessageBox.Show("Firstname:\tBob\n" +
-                "surname:\t\tde Bouwer");
+                "Lastname:\t\tde Bouwer");
         }
 
+        private void DropBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
+        {
+            //TODO
+            //Andere graph
+        }
+
+        public ChartValues<MeasureModel> ChartValues { get; set; }
+        public Func<double, string> DateTimeFormatter { get; set; }
+        public double AxisStep { get; set; }
+        public double AxisUnit { get; set; }
+    }
+
+    public class MeasureModel
+    {
+        public DateTime DateTime { get; set; }
+        public double Value { get; set; }
     }
 }

Server/Communication.cs

@@ -1,4 +1,5 @@
-using Client;
+using ClientApp;
+using ClientApp.Utils;
 using System;
 using System.Collections.Generic;
 using System.IO.Pipes;