Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 19 additions & 9 deletions docs/Meadow/Meadow.Foundation/Peripherals/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -218,18 +218,18 @@ External peripheral drivers can be added to Meadow projects individually and are
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Ads1015](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.ADC.Ads1015) | Ads1015 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Ads1115](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.ADC.Ads1115) | Ads1115 analog digital converter driver |

#### ICs.ADCs.Mcp3xxx
#### ICs.ADC.Mcp3xxx

| Status | Driver | Description |
|--------|--------|-------------|
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3001](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.IOExpanders.Mcp3001) | Mcp3001 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3002](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.IOExpanders.Mcp3002) | Mcp3002 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3004](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.IOExpanders.Mcp3004) | Mcp3004 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3008](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.IOExpanders.Mcp3008) | Mcp3008 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3201](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.IOExpanders.Mcp3201) | Mcp3201 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3202](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.IOExpanders.Mcp3202) | Mcp3202 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3204](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.IOExpanders.Mcp3204) | Mcp3204 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3208](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.IOExpanders.Mcp3208) | Mcp3208 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3001](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.ADC.Mcp3001) | Mcp3001 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3002](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.ADC.Mcp3002) | Mcp3002 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3004](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.ADC.Mcp3004) | Mcp3004 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3008](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.ADC.Mcp3008) | Mcp3008 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3201](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.ADC.Mcp3201) | Mcp3201 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3202](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.ADC.Mcp3202) | Mcp3202 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3204](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.ADC.Mcp3204) | Mcp3204 analog digital converter driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Mcp3208](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.ADC.Mcp3208) | Mcp3208 analog digital converter driver |

#### ICs.DAC.Mcp492x

Expand Down Expand Up @@ -313,6 +313,14 @@ External peripheral drivers can be added to Meadow projects individually and are
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Tca9535](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.IOExpanders.Tca9535) | Tca9535 IO expander driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Tca9555](/docs/api/Meadow.Foundation/Meadow.Foundation.ICs.IOExpanders.Tca9555) | Tca9555 IO expander driver |


#### IOExpanders.Temco.T3xxx

| Status | Driver | Description |
|--------|--------|-------------|
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [T322ai](/docs/api/Meadow.Foundation/Meadow.Foundation.IOExpanders.T322ai) | T322ai temco driver |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [T38i8o6do](/docs/api/Meadow.Foundation/Meadow.Foundation.IOExpanders.T38i8o6do) | T38i8o6do temco driver |

### Leds

| Status | Driver | Description |
Expand Down Expand Up @@ -343,6 +351,7 @@ External peripheral drivers can be added to Meadow projects individually and are

| Status | Driver | Description |
|--------|--------|-------------|
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [RTCs.Ab0805](/docs/api/Meadow.Foundation/Meadow.Foundation.RTCs.Ab0805) | Ab0805 I2C real time clock |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [RTCs.Ds1307](/docs/api/Meadow.Foundation/Meadow.Foundation.RTCs.Ds1307) | DS1307 I2C real time clock |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [RTCs.Pcf8523](/docs/api/Meadow.Foundation/Meadow.Foundation.RTCs.Pcf8523) | Pcf8523 I2C real time clock |

Expand Down Expand Up @@ -603,6 +612,7 @@ External peripheral drivers can be added to Meadow projects individually and are
| Status | Driver | Description |
|--------|--------|-------------|
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Sensors.Power.CurrentTransducer](/docs/api/Meadow.Foundation/Meadow.Foundation.Sensors.Power.CurrentTransducer) | Current transducer library |
| <img alt="Status badge: working" src="https://img.shields.io/badge/Working-brightgreen"/> | [Sensors.Power.Spm1x](/docs/api/Meadow.Foundation/Meadow.Foundation.Sensors.Power.Spm1x) | Temco Controls' SPM1-X Modbus Single-Phase Power Meter library |

#### Sensors.Power.Ina2xx

Expand Down
225 changes: 225 additions & 0 deletions docs/Meadow/Meadow_Desktop/Meadow_Blazor/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
---
layout: Meadow
title: Get started with Meadow.Blazor
subtitle: "To get up and running with Meadow.Blazor, follow these steps:"
---

Meadow.Blazor in combination with Meadow.Desktop offers an environment for developing Meadow applications that can run on Windows, Mac and Linux. Developing with Meadow.Blazor requires setting up your development machine with some prerequisites. Then, after connecting any external components, you can deploy and run your Meadow application.

Meadow Blazor enables you to combine a Blazor front-end using Blazor Server while accessing physical components by way of an FTDI breakout board such as FT232H that provides GPIO, SPI, and I2C.

## Prerequisites

Before you can get started with Meadow.Blazor, make sure your [development machine is set up for Meadow development](/Meadow/Getting_Started/Hello_World/).

If it is not already installed, install the .NET 8.0 SDK. You can find the latest version of the .NET SDK from the [.NET downloads](https://dotnet.microsoft.com/download/dotnet/).

### Using GPIO and SPI

With an FTDI breakout board like the [FT232H](https://www.adafruit.com/product/2264), you can add GPIO and SPI capabilities to your desktop device.

## Create your first Meadow.Blazor app

1. Create a new Blazor Server dotnet app on your development machine and navigate to the project folder.

```command
dotnet new blazorserver -n MeadowBlazorSampleApp
cd MeadowBlazorSampleApp
```

1. Add the Meadow.Blazor NuGet package to your project.

```command
dotnet add package Meadow.Blazor
```

1. Create a new file named `MeadowApplication` in your project with the following code:

```csharp
using Meadow;

internal class MeadowApplication : App<Meadow.Desktop>
{
public override Task Initialize()
{
//initialize hardware here and add to sensor service
return base.Initialize();
}

public override Task Run()
{
return base.Run();
}
}
```

1. If using external hardware, you'll need to add the relevant Meadow nuget packages and initialize the drivers in the `Initialize` method:

```csharp
using Meadow;
using Meadow.Foundation.ICs.IOExpanders;
using Meadow.Foundation.Leds;
using Meadow.Foundation.Sensors.Atmospheric;
using Meadow.Peripherals.Leds;

internal class MeadowApplication : App<Meadow.Desktop>
{
public override Task Initialize()
{
FtdiExpanderCollection.Devices.Refresh();
var ftdi = FtdiExpanderCollection.Devices[0];
var output = ftdi.Pins.D7.CreateDigitalOutputPort(false);
Resolver.Services.Add(output);

var bme680 = new Bme680(ftdi.CreateSpiBus(), ftdi.Pins.C7);
Resolver.Services.Add(bme680);

var led = new Led(ftdi.Pins.C0);
Resolver.Services.Add<ILed>(led);

return base.Initialize();
}

public override Task Run()
{
return base.Run();
}
}
```

1. Meadow.Desktop is initialized via an extension method on `WebApplication` included with Meadow.Blazor named `UseMeadow`. Call `UseMeadow` in your program.cs.

```csharp
using Meadow.Blazor;
using Meadow.Blazor.Services;

var builder = WebApplication.CreateBuilder(args);

...

var app = builder.Build();

...

app.UseMeadow<MeadowApplication>();

...

app.Run();
```

1. Build the app:

```command
dotnet build
```

1. Run the app:

```command
dotnet run
```

## Access peripherals from a Blazor Server app

When structuring your Blazor Server application, a common pattern is to create view models to support Razor pages.

Below is an example to present sensor data for a `BME680` atmospheric sensor.

![Meadow.Blazor running in a web browser](meadow_blazor.jpg)

1. Create a view model that exposes sensor data as public properties and includes a `StateChanged` `Action`. Note the use of `Resolver.Services` to access the peripherals you registered in `MeadowApplication`.

```csharp
using Meadow.Foundation.Sensors.Atmospheric;
using Meadow.Peripherals.Leds;
using Meadow.Units;

namespace Meadow.Blazor.Services
{
public class SensorViewModel : IDisposable
{
private readonly Bme680 _bme680;

public string TemperatureValue { get; private set; } = "0°C";
public string HumidityValue { get; private set; } = "0%";
public string PressureValue { get; private set; } = "0atm";

public event Action? StateChanged;

public SensorViewModel()
{
_bme680 = Resolver.Services.Get<Bme680>() ?? throw new Exception("BME680 not found");
_bme680.Updated += Bme680Updated;
_bme680.StartUpdating(TimeSpan.FromSeconds(2));
}

private void Bme680Updated(object? sender, IChangeResult<(Temperature? Temperature, RelativeHumidity? Humidity, Pressure? Pressure, Resistance? GasResistance)> e)
{
TemperatureValue = $"{e.New.Temperature?.Celsius:n0}°C";
HumidityValue = $"{e.New.Humidity?.Percent:n0}%";
PressureValue = $"{e.New.Pressure?.StandardAtmosphere:n2}atm";

StateChanged?.Invoke();
}

public void Dispose()
{
_bme680?.StopUpdating();
}
}
}
```

2. Create a razor page that uses the view model:

```csharp
@page "/"
@inject Meadow.Blazor.Services.SensorViewModel ViewModel

<div class="container">
<div class="content">
<div class="image-container">
<img src="Assets/meadow.png" alt="Meadow" />
</div>
<h1>Meadow Blazor</h1>
<h2>Atmospheric readings from a BME680</h2>

<div class="readings">
<div class="reading">
<span>Temperature:</span>
<span>@ViewModel.TemperatureValue</span>
</div>
<div class="reading">
<span>Pressure:</span>
<span>@ViewModel.PressureValue</span>
</div>
<div class="reading">
<span>Humidity:</span>
<span>@ViewModel.HumidityValue</span>
</div>
</div>
</div>
</div>

@code {
protected override void OnInitialized()
{
ViewModel.StateChanged += OnViewModelStateChanged;
}

private void OnViewModelStateChanged()
{
InvokeAsync(StateHasChanged);
}

public void Dispose()
{
ViewModel.StateChanged -= OnViewModelStateChanged;
}
}
```

## Next steps

Now that you have your Meadow.Blazor project and hardware set up and your app running, you can start working with the [Meadow.Foundation](../../../Meadow.Foundation/Getting_Started/) libraries to add additional functionality to your Meadow app. Check out the other [samples in the Meadow.Desktop.Samples](https://github.com/WildernessLabs/Meadow.Samples/tree/main/Source/).
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion docs/Meadow/Meadow_Desktop/Meadow_Linux/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ You can also find any supported boards in the [Meadow.Linux implementation pinou

## Prerequisites

Before you can get started with Meadow.Linux, make sure your [development machine is set up for Meadow development](../../Hello_World/).
Before you can get started with Meadow.Linux, make sure your [development machine is set up for Meadow development](/Meadow/Getting_Started/Hello_World/).

To get started with Meadow.Linux, you will need to install the following prerequisites on your host Linux machine.

Expand Down
Loading