软件工程课程设计之XMAL

Posted IQOverflow

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了软件工程课程设计之XMAL相关的知识,希望对你有一定的参考价值。

前言

  最近做软件工程课设,因为需要用到可视化界面,经过仔细考察,在小组成员的建议下,最后决定使用XMAL做前台。

题目分析

  题目:物理环境包括温度、湿度、大气压力、光照等参量。软件能够以图形化方式,实时显示各参量的状态,比如,显示温度的实时曲线图。具有参量报警功能,能够提供出行意见,具有历史数据查询功能。假设数据以存放在数据库中或文件中。

  题目要求用图形化方式实时显示各参量状态,所以前台程序务必足够美观,选用XAML设计窗口界面,C#构建后台。这里主要总结一下XMAL。(我用到的,其实很少很水,主要是对一个构件的总结)。

代码以及注释:

  我主要负责生成图表部分,这里主要用了XMAL的一个控件 beto-rodriguez/Live-Charts https://github.com/beto-rodriguez/Live-Charts

<Page
    x:Class="物理环境感知数据可视化工具.Views.BlankPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:lvc="using:LiveCharts.Uwp"
    mc:Ignorable="d">
    <Grid
        x:Name="ContentArea"
        Margin="{StaticResource MediumLeftRightMargin}">

        <Grid.RowDefinitions>
            <RowDefinition x:Name="TitleRow" Height="48"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <TextBlock
            x:Name="TitlePage"
            x:Uid="Blank_Title"
            Text="Navigation Item 2"
            Style="{StaticResource PageTitleStyle}" />

        <Grid 
            Grid.Row="1" 
            Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}">
            <!--The SystemControlPageBackgroundChromeLowBrush background represents where you should place your content. 
                Place your content here.-->

            <Grid.RowDefinitions>
                <RowDefinition Height="2*"></RowDefinition>
                <RowDefinition Height="12*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="8*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <lvc:CartesianChart Grid.Row="1" Grid.Column="1" Loaded="CartesianChart_Loaded">
                <lvc:CartesianChart.Series>
                <!--
                StrokeDashArray="2" 虚线的疏密程度
                StrokeThickness="4" 曲线粗细度
                Stroke="#1C8FC5" 曲线颜色
                Fill="Transparent" 填充为透明
                LineSmoothness="2" 曲线平滑度
                PointGeometry="{x:Null} 关闭坐标点
                PointGeometrySize="10" 坐标点大小
                -->
                    <lvc:LineSeries x:Name="myLine"
                                Title="Humidity" 
                                Values="{Binding Values1}" 
                                StrokeThickness="2.5" 
                                Stroke="#1C8FC5" 
                                Fill="Transparent"
                                LineSmoothness="2" 
                                PointGeometrySize="16" 
                                PointForeround="#222E31"/>
                </lvc:CartesianChart.Series>
                <!--对X轴进行调整-->
                <lvc:CartesianChart.AxisX>
                    <lvc:Axis x:Name="myAxis" IsEnabled="False" Labels="{Binding Labels}">
                        <!--调节单元格框线的宽度,StrokeThickness分隔每行的线(列线)的宽度,StrokeDashArray分割线宽度-->
                        <lvc:Axis.Separator>
                            <lvc:Separator />
                        </lvc:Axis.Separator>
                    </lvc:Axis>
                </lvc:CartesianChart.AxisX>
                <lvc:CartesianChart.AxisY>
                    <!--最外部框线是否合并-->
                    <lvc:Axis IsMerged="False">
                        <!--调节单元格框线的宽度,StrokeThickness分隔每列的线(行线)的宽度,StrokeDashArray分割线宽度-->
                        <lvc:Axis.Separator>
                            <lvc:Separator 
                            StrokeThickness="1"
                            StrokeDashArray="4"
                            Stroke="#404F56" />
                        </lvc:Axis.Separator>
                    </lvc:Axis>
                </lvc:CartesianChart.AxisY>
            </lvc:CartesianChart>
            <Button Grid.Row="0" Grid.Column="1" Content="T" VerticalAlignment="Bottom" Click="Button_Click_Temperature" FontFamily="SimSun" Background="{x:Null}" FontSize="30" Margin="840,30,0,0"/>
            <Button Grid.Row="0" Grid.Column="1" Content="H" VerticalAlignment="Bottom" Click="Button_Click_Humidity" FontFamily="SimSun" Background="{x:Null}" FontSize="30" Margin="890,30,0,0"/>
            <Button Grid.Row="0" Grid.Column="1" Content="L" VerticalAlignment="Bottom" Click="Button_Click_Light" FontFamily="SimSun" Background="{x:Null}" FontSize="30" Margin="940,30,0,0"/>
            <Button Grid.Row="0" Grid.Column="1" Content="P" VerticalAlignment="Bottom" Click="Button_Click_Pressure" FontFamily="SimSun" Background="{x:Null}" FontSize="30" Margin="990,30,0,0"/>
            <TextBlock Grid.Row="0" Grid.Column="1" Name="myTitle" HorizontalAlignment="Center" Text="温度" VerticalAlignment="Center" FontSize="35"  FontWeight="Normal"/>
            <TextBlock Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Text="平均高温" FontSize="25"  Foreground="#FF706666"/>
            <TextBlock Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="历史最高" FontSize="25"  Foreground="#FF706666"/>
            <TextBlock Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Text="平均湿度" FontSize="25"  Foreground="#FF706666"/>
            <TextBlock Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Text="17℃" FontSize="25" FontWeight="Normal" />
            <TextBlock Grid.Row="3" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="38℃" FontSize="25" Width="95" FontWeight="Normal" />
            <TextBlock Grid.Row="3" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Text="71%" FontSize="25" Width="95" FontWeight="Normal" />
            <TextBlock Grid.Row="4" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Text="平均低温" FontSize="25"  Foreground="#FF706666"/>
            <TextBlock Grid.Row="4" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="历史最低" FontSize="25"  Foreground="#FF706666"/>
            <TextBlock Grid.Row="4" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Text="平均光照" FontSize="25"  Foreground="#FF706666"/>
            <TextBlock Grid.Row="5" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Text="13℃" FontSize="25" FontWeight="Normal" />
            <TextBlock Grid.Row="5" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="-13℃" FontSize="25" Width="95" FontWeight="Normal" />
            <TextBlock Grid.Row="5" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Text="16800Lx" FontSize="23" Width="95" FontWeight="Normal" />

        </Grid>
    
        <!--  Adaptive triggers  -->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="WindowStates">
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="640"/>
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="NarrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="TitlePage.Margin" Value="48,0,12,7"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>

 

  1 using SQLite.Net;
  2 using SQLite.Net.Platform.WinRT;
  3 using LiveCharts;
  4 using Windows.Storage;
  5 using Windows.UI.Xaml;
  6 using Windows.UI.Xaml.Controls;
  7 using System.IO;
  8 using System.ComponentModel;
  9 using System.Runtime.CompilerServices;
 10 
 11 namespace 物理环境感知数据可视化工具.Views
 12 {
 13     public sealed partial class BlankPage : Page, INotifyPropertyChanged
 14     {
 15         ChartValues<double> temperatureValues;
 16 
 17         public BlankPage()
 18         {
 19             InitializeComponent();
 20 
 21             //创建数据
 22             //CreataData();
 23             temperatureValues = GetTemperatureValues();
 24         }
 25 
 26         public event PropertyChangedEventHandler PropertyChanged;
 27 
 28         private void Set<T>(ref T storage, T value, [CallerMemberName]string propertyName = null)
 29         {
 30             if (Equals(storage, value))
 31             {
 32                 return;
 33             }
 34 
 35             storage = value;
 36             OnPropertyChanged(propertyName);
 37         }
 38 
 39         private void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
 40 
 41 
 42         public void CreataData()
 43         {
 44             double[] valuesOfTemperature = new double[] { 1, 3, 7, 13, 18, 22, 26, 26, 22, 17, 10, 3 };
 45             double[] valuesOfHumidity = new double[] { 66, 64, 62, 67, 72, 80, 84, 78, 72, 70, 68, 68 };
 46             int[] valuesOfLight = new int[] { 120000, 150000, 180000, 200000, 210000, 230000, 220000, 200000, 170000, 140000, 120000, 110000 };
 47             double[] valuesOfPressure = new double[] { 99.83, 99.79, 99.72, 99.65, 99.63, 99.61, 99.60, 99.62, 99.70, 99.71, 99.76, 99.80 };
 48             using (var conn = AppDatabase.GetDbConnection())
 49             {
 50                 //需要添加的对象
 51                 for (int i = 0; i < valuesOfTemperature.Length; ++i)
 52                 {
 53                     var addMyData = new HistoricalDataOfTemperature { Id = i + 1, Values = valuesOfTemperature[i] };
 54                     conn.Insert(addMyData);
 55                 }
 56                 for (int i = 0; i < valuesOfHumidity.Length; ++i)
 57                 {
 58                     var addMyData = new HistoricalDataOfHumidity { Id = i + 1, Values = valuesOfHumidity[i] };
 59                     conn.Insert(addMyData);
 60                 }
 61                 for (int i = 0; i < valuesOfLight.Length; ++i)
 62                 {
 63                     var addMyData = new HistoricalDataOfLight { Id = i + 1, Values = valuesOfLight[i] };
 64                     conn.Insert(addMyData);
 65                 }
 66                 for (int i = 0; i < valuesOfPressure.Length; ++i)
 67                 {
 68                     var addMyData = new HistoricalDataOfPressure { Id = i + 1, Values = valuesOfPressure[i] };
 69                     conn.Insert(addMyData);
 70                 }
 71             }
 72         }
 73 
 74         private void CartesianChart_Loaded(object sender, RoutedEventArgs e)
 75         {
 76             myLine.Values = temperatureValues;
 77             myAxis.Labels = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
 78         }
 79         private void Button_Click_Temperature(object sender, RoutedEventArgs e)
 80         {
 81             myLine.Values = temperatureValues;
 82             myTitle.Text = "温度";
 83         }
 84         private void Button_Click_Humidity(object sender, RoutedEventArgs e)
 85         {
 86             myLine.Values = GetHumidityValues();
 87             myTitle.Text = "湿度";
 88         }
 89         private void Button_Click_Light(object sender, RoutedEventArgs e)
 90         {
 91             myLine.Values = GetLightValues();
 92             myTitle.Text = "光照";
 93         }
 94         private void Button_Click_Pressure(object sender, RoutedEventArgs e)
 95         {
 96             myLine.Values = GetPressureValues();
 97             myTitle.Text = "气压";
 98         }
 99 
100         //返回从数据库读取的数据
101         private static ChartValues<double> GetTemperatureValues()
102         {
103 
104             using (var conn = AppDatabase.GetDbConnection())
105             {
106                 var dbData = conn.Table<HistoricalDataOfTemperature>();
107                 double[] T = new double[12];
108                 foreach (var data in dbData)
109                 {
110                     T[data.Id - 1] = data.Values;
111                 }
112                 return new ChartValues<double> { T[0], T[1], T[2], T[3], T[4], T[5], T[6], T[7], T[8], T[9], T[10], T[11] };
113             }
114         }
115         private static ChartValues<double> GetHumidityValues()
116         {
117 
118             using (var conn = AppDatabase.GetDbConnection())
119             {
120                 var dbData = conn.Table<HistoricalDataOfHumidity>();
121                 double[] H = new double[12];
122                 foreach (var data in dbData)
123                 {
124                     H[data.Id - 1] = data.Values;
125                 }
126                 return new ChartValues<double> { H[0], H[1], H[2], H[3], H[4], H[5], H[6], H[7], H[8], H[9], H[10], H[11] };
127             }
128         }
129         private static ChartValues<double> GetLightValues()
130         {
131 
132             using (var conn = AppDatabase.GetDbConnection())
133             {
134                 var dbData = conn.Table<HistoricalDataOfLight>();
135                 double[] L = new double[12];
136                 foreach (var data in dbData)
137                 {
138                     L[data.Id - 1] = data.Values;
139                 }
140                 return new ChartValues<double> { L[0], L[1], L[2], L[3], L[4], L[5], L[6], L[7], L[8], L[9], L[10], L[11] };
141             }
142         }
143         private static ChartValues<double> GetPressureValues()
144         {
145 
146             using (var conn = AppDatabase.GetDbConnection())
147             {
148                 var dbData = conn.Table<HistoricalDataOfPressure>();
149                 double[] P = new double[12];
150                 foreach (var data in dbData)
151                 {
152                     P[data.Id - 1] = data.Values;
153                 }
154                 return new ChartValues<double> { P[0], P[1], P[2], P[3], P[4], P[5], P[6], P[7], P[8], P[9], P[10], P[11] };
155             }
156         }
157     }
158 
159     public static class AppDatabase
160     {
161         public readonly static string DbPath = Path.Combine(ApplicationData.Current.LocalCacheFolder.Path, "historicalData.db");
162 
163         public static SQLiteConnection GetDbConnection()
164         {
165             // 连接数据库,如果数据库文件不存在则创建一个空数据库。
166             var conn = new SQLiteConnection(new SQLitePlatformWinRT(), DbPath);
167             // 创建 Person 模型对应的表,如果已存在,则忽略该操作。
168             conn.CreateTable<HistoricalDataOfTemperature>();
169             conn.CreateTable<HistoricalDataOfHumidity>();
170             conn.CreateTable<HistoricalDataOfLight>();
171             conn.CreateTable<HistoricalDataOfPressure>();
172             return conn;
173         }
174     }
175     //温度、湿度、光照、压力数据的定义
176     public class HistoricalDataOfTemperature
177     {
178         public int Id
179         {
180             get;
181             set;
182         }
183         public double Values
184         {
185             get;
186             set;
187         }
188     }
189     public class HistoricalDataOfHumidity
190     {
191         public int Id
192         {
193             get;
194             set;
195         }
196         public double Values
197         {
198             get;
199             set;
200         }
201     }
202     public class HistoricalDataOfLight
203     {
204         public int Id
205         {
206             get;
207             set;
208         }
209         public double Values
210         {
211             get;
212             set;
213         }
214     }
215     public class HistoricalDataOfPressure
216     {
217         public int Id
218         {
219             get;
220             set;
221         }
222         public double Values
223         {
224             get;
225             set;
226         }
227     }
228 }

 

 

 

小结:

  感觉自己的这次课设并没有取得理想的成果,尽管付出了很多时间,但是缺乏思考,收获远没有想象的多,希望以后能吸取教训。

以上是关于软件工程课程设计之XMAL的主要内容,如果未能解决你的问题,请参考以下文章

C#课程设计之学生教务管理系统

HTML5期末大作业:餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段

软件设计七大原则之开闭原则

# "做中学"之“极客时间”课程学习指导

“构建之法”阅读体会 and 软件工程课程总结

课程设计必备之数据库操作代码模板