chart at startup, mqtt receiver receives

backend/Api/Api.csproj

@@ -22,6 +22,8 @@
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
     <PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.19.6" />
+    <PackageReference Include="MQTTnet" Version="5.0.1.1416" />
+    <PackageReference Include="MQTTnet.Extensions.TopicTemplate" Version="5.0.1.1416" />
     <PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
   </ItemGroup>
 

backend/Api/Api.sln

@@ -5,6 +5,8 @@ VisualStudioVersion = 17.9.34607.119
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Api", "Api.csproj", "{9CCF78E1-969C-420F-BE31-F8AFCE0C6827}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "test", "..\test\test.csproj", "{5ACD3275-AE0C-458C-AACD-12FE1E165621}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -15,6 +17,10 @@ Global
 		{9CCF78E1-969C-420F-BE31-F8AFCE0C6827}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{9CCF78E1-969C-420F-BE31-F8AFCE0C6827}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{9CCF78E1-969C-420F-BE31-F8AFCE0C6827}.Release|Any CPU.Build.0 = Release|Any CPU
+		{5ACD3275-AE0C-458C-AACD-12FE1E165621}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{5ACD3275-AE0C-458C-AACD-12FE1E165621}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{5ACD3275-AE0C-458C-AACD-12FE1E165621}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{5ACD3275-AE0C-458C-AACD-12FE1E165621}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

backend/Api/MQTTReciever/MQTTReciever.cs

@@ -0,0 +1,57 @@
+using Api.DBAccess;
+using MQTTnet;
+using MQTTnet.Extensions.TopicTemplate;
+using System.Text;
+
+
+namespace Api.MQTTReciever
+{
+    public class MQTTReciever
+    {
+        IMqttClient mqttClient;
+        private readonly IConfiguration _configuration;
+
+        public MQTTReciever(IConfiguration configuration)
+        {
+            _configuration = configuration;
+        }
+
+
+        public async Task Handle_Received_Application_Message()
+        {
+            var mqttFactory = new MqttClientFactory();
+
+            using (mqttClient = mqttFactory.CreateMqttClient())
+            {
+                var mqttClientOptions = new MqttClientOptionsBuilder()
+                    .WithTcpServer($"{_configuration["MQTT:host"]}", 1883)
+                    .WithCredentials($"{_configuration["MQTT:username"]}", $"{_configuration["MQTT:password"]}")
+                    .WithCleanSession()
+                    .Build();
+
+                // Setup message handling before connecting so that queued messages
+                // are also handled properly. When there is no event handler attached all
+                // received messages get lost.
+                mqttClient.ApplicationMessageReceivedAsync += e =>
+                {
+                    Console.WriteLine("Received application message.");
+
+                    return Task.CompletedTask;
+                };
+
+
+                await mqttClient.ConnectAsync(mqttClientOptions, CancellationToken.None);
+                Console.WriteLine("mqttClient");
+
+                //var mqttSubscribeOptions = mqttFactory.CreateSubscribeOptionsBuilder().WithTopicTemplate(topic).Build();
+
+                await mqttClient.SubscribeAsync("temperature");
+
+                Console.WriteLine("MQTT client subscribed to topic.");
+
+                Console.WriteLine("Press enter to exit.");
+                Console.ReadLine();
+            }
+        }
+    }
+}

backend/Api/Program.cs

@@ -1,13 +1,18 @@
 using Api;
+using Api.MQTTReciever;
 using Microsoft.AspNetCore;
 using Microsoft.EntityFrameworkCore;
+using Microsoft.Extensions.Configuration;
 
 class Program
 {
+
     public static void Main(string[] args)
     {
         var app = CreateWebHostBuilder(args).Build();
-
+        var configuration = app.Services.GetRequiredService<IConfiguration>();
+        MQTTReciever mqtt = new MQTTReciever(configuration);
+        mqtt.Handle_Received_Application_Message();
         RunMigrations(app);
 
         app.Run();

backend/test/Program.cs

@@ -0,0 +1,36 @@
+using MQTTnet;
+
+var mqttFactory = new MqttClientFactory();
+IMqttClient mqttClient;
+
+using (mqttClient = mqttFactory.CreateMqttClient())
+    {
+        var mqttClientOptions = new MqttClientOptionsBuilder()
+            .WithTcpServer($"10.135.51.116", 1883)
+            .WithCredentials($"h5", $"Merc1234")
+            .WithCleanSession()
+            .Build();
+
+    // Setup message handling before connecting so that queued messages
+    // are also handled properly. When there is no event handler attached all
+    // received messages get lost.
+    mqttClient.ApplicationMessageReceivedAsync += e =>
+        {
+            Console.WriteLine("Received application message.");
+
+            return Task.CompletedTask;
+        };
+
+
+    await mqttClient.ConnectAsync(mqttClientOptions, CancellationToken.None);
+    Console.WriteLine("mqttClient");
+
+    //var mqttSubscribeOptions = mqttFactory.CreateSubscribeOptionsBuilder().WithTopicTemplate(topic).Build();
+
+    await mqttClient.SubscribeAsync("temperature");
+
+        Console.WriteLine("MQTT client subscribed to topic.");
+
+        Console.WriteLine("Press enter to exit.");
+        Console.ReadLine();
+}

backend/test/test.csproj

@@ -0,0 +1,14 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <OutputType>Exe</OutputType>
+    <TargetFramework>net8.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="MQTTnet" Version="5.0.1.1416" />
+  </ItemGroup>
+
+</Project>

frontend/home/index.html

@@ -10,17 +10,11 @@
   <body>
     <div id="container">
       <div class="topnav">
-        <a class="active" href="#home">Home</a>
+        <a class="active" href="/home/index.html">Home</a>
-        <a href="#news" id="myBtn">View Chart</a>
       </div>
-
+      <div class="chartContainer">
-      <div id="chartModal" class="modal">
+        <canvas id="myChart" style="width: 49%; height: 49%;"></canvas>
-        <div class="modal-content">
-          <span class="close">&times;</span>
-          <canvas id="myChart" style="width: 80%; width: 80%"></canvas>
-        </div>
       </div>
-
       <table>
         <tr>
           <th>Name</th>

frontend/styles/home.css

@@ -74,40 +74,6 @@ tr:nth-child(even) {
   width: 20px;
 }
 
-/* The Modal (background) */
+.chartContainer{
-.modal {
+  margin: 20px;
-  display: none; /* Hidden by default */
-  position: fixed; /* Stay in place */
-  z-index: 1; /* Sit on top */
-  left: 0;
-  top: 0;
-  width: 100%; /* Full width */
-  height: 100%; /* Full height */
-  background-color: rgb(0, 0, 0); /* Fallback color */
-  background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
-}
-
-/* Modal Content/Box */
-.modal-content {
-  border-radius: 20px;
-  background-color: #fefefe;
-  margin: 15% auto; /* 15% from the top and centered */
-  padding: 20px;
-  border: 1px solid #888;
-  width: 80%; /* Could be more or less, depending on screen size */
-}
-
-/* The Close Button */
-.close {
-  color: #aaa;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-  color: black;
-  text-decoration: none;
-  cursor: pointer;
 }