Spanish version: https://medium.com/@rretamal.dev/usando-midjourney-con-net-maui-dbb7d441de2c
It’s clear that as developers we can be really good, but being able to design attractive applications is a completely different story.
In my case, I like to create applications and software in general, but when it comes to the interface, they are either ugly or I start taking ideas from different sites until I come up with something that could be considered somewhat acceptable.
With all the AI boom, I wanted to test Midjourney and see how far they could go, so why not?
The first thing you need to know is that it is available through a bot on Discord where you interact with it. In case you want to delve deeper into Midjourney, I leave you the following link:
How to use Midjourney: Sign up process, prompts, and moreMidjourney is one of the most popular AI-art generator programs out there. However, you can only access it through…www.windowscentral.com
In this case, I wanted to design an app for camera viewing, yes, I know, again, so as quick as lightning, I asked for the first thing that came to my mind, my request was the following:
“/imagine ip camera viewer, mobile app,user interface, highly detailed, hq, one main section to view camera, with small options to add a new one, alerts option, clean ui, figma”
The result was the following:
It didn’t look like something I had in mind, so I refined the search a bit more:
/imagine https://s.mj.run/kpnL-LUJn2g ip camera viewer, mobile app,user interface, highly detailed, hq, one main section to view camera, with small options to add a new one, alerts option, clean ui, figma
In this case, I indicated a URL for it to base on a previous design, following the same line, I wanted an app oriented towards IP camera viewing.
The result was the following:
I started to like this more, so with the aim of presenting a demo, I went for the first option. Midjourney allows you to continue iterating and generating variations on a particular design, but in this case it was not necessary.
Once the design was chosen, the next step was to create the project with .Net MAUI. For this, in Visual Studio 2022, you create a new project by selecting .Net MAUI App.
The structure of the solution should be as follows:
Based on the image, we have four main sections: a search panel, the camera view, a section with a message, and a tab panel at the bottom.
For the main layout, I chose an AbsoluteLayout that allows me to place elements over the camera view, this way it can create that effect of viewing images while displaying messages, options, etc.
Each section will be formed by a Grid that will have sub-elements, and for those circular controls, I used frames.
For the tab, I needed a control that would allow me to customize the visual part more, so I chose Sharpnado Tabs for MAUI:
GitHub — roubachof/Sharpnado.Tabs: Pure MAUI and Xamarin.Forms Tabs, including fixed tabs…Pure MAUI and Xamarin.Forms Tabs, including fixed tabs, scrollable tabs, bottom tabs, badge, segmented control, custom…github.com
For the icons, I integrated FontAwesome into the solution.
To extract the hexadecimal codes from the image and work with the same color scale in the app, I used the following tool:
👍 Color Picker online | HEX Color Picker | HTML Color PickerColor Picker:Color Picker: With this online tool you can upload an image or provide a website URL and get the RGB…imagecolorpicker.com
It allows you to upload an image and obtain the color codes from any area.
The initial XAML looks like this, with the main sections defined:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:tabs="http://sharpnado.com"
x:Class="MidjourneyCameraApp.MainPage" NavigationPage.HasNavigationBar="False">
<ContentPage.Resources>
<ResourceDictionary>
<Color x:Key="Gray900">#212121</Color>
<Color x:Key="White">#fefefe</Color>
<Color x:Key="MenuGray">#4b4b51</Color>
<Color x:Key="Orange">#ff7052</Color>
</ResourceDictionary>
</ContentPage.Resources>
<AbsoluteLayout>
<Image Source="living2.png" Aspect="Fill" Margin="0"/>
<Grid HorizontalOptions="FillAndExpand" AbsoluteLayout.LayoutBounds="0.1,0,1,.9" AbsoluteLayout.LayoutFlags="All">
// Search Box
</Grid>
<Label Text="Living room" TextColor="White" FontSize="20" FontAttributes="Bold" AbsoluteLayout.LayoutBounds="0.1,5.7,0.8,.9" AbsoluteLayout.LayoutFlags="All"></Label>
<Frame CornerRadius="0" Padding="0" BackgroundColor="#60000000" BorderColor="Transparent" HorizontalOptions="FillAndExpand" AbsoluteLayout.LayoutBounds="0.5,0.9,400,250" AbsoluteLayout.LayoutFlags="PositionProportional">
// Messages section
</Frame>
<Grid AbsoluteLayout.LayoutBounds="0.5,1,390,160"
AbsoluteLayout.LayoutFlags="PositionProportional">
// Tab panel section
</Grid>
</AbsoluteLayout>
</ContentPage>Next, we will work on the tab panel, this section is composed of the menu and a panel at the top.
<Grid AbsoluteLayout.LayoutBounds="0.5,1,390,160"
AbsoluteLayout.LayoutFlags="PositionProportional">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame Grid.Row="0" HasShadow="True" BackgroundColor="{StaticResource White}" HeightRequest="60" Margin="15,0,15,-10" CornerRadius="15" BorderColor="Transparent">
<Frame.Shadow>
<Shadow Brush="Black"
Offset="60,60"
Radius="80"
Opacity="0.8" />
</Frame.Shadow>
<Label Text="Current Status: Streaming cam" TextColor="{StaticResource MenuGray}"/>
</Frame>
<Frame HasShadow="True" Grid.Row="1" Padding="0" BackgroundColor="{StaticResource White}" BorderColor="#fbefea" HeightRequest="120">
<Frame.Shadow>
<Shadow Brush="Black"
Offset="60,60"
Radius="80"
Opacity="0.8" />
</Frame.Shadow>
<tabs:TabHostView Padding="0" x:Name="TabHost" VerticalOptions="CenterAndExpand">
<tabs:MaterialUnderlinedTabItem Style="{StaticResource MaterialTabStyle}"
IconImageSource="house_96.png"
IconOptions="TopIcon"
IconTextSpacing="5"
IconSize="35"
UnselectedLabelColor="{StaticResource MenuGray}"
Label="Live View" />
<tabs:MaterialUnderlinedTabItem Style="{StaticResource MaterialTabStyle}"
IconImageSource="house_96.png"
IconSize="35"
IconOptions="TopIcon"
IconTextSpacing="5"
UnselectedLabelColor="{StaticResource MenuGray}"
Label="Alerts" />
<tabs:MaterialUnderlinedTabItem Style="{StaticResource MaterialTabStyle}"
IconImageSource="house_96.png"
IconOptions="TopIcon"
IconTextSpacing="5"
IconSize="35"
UnselectedLabelColor="{StaticResource MenuGray}"
Label="Configuration" />
</tabs:TabHostView>
</Frame>
</Grid>Once the panel is working, we can focus on the rest of the sections, the resulting XAML would be the following:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:tabs="http://sharpnado.com"
x:Class="MidjourneyCameraApp.MainPage" NavigationPage.HasNavigationBar="False">
<ContentPage.Resources>
<ResourceDictionary>
<Color x:Key="Gray900">#212121</Color>
<Color x:Key="White">#fefefe</Color>
<Color x:Key="MenuGray">#4b4b51</Color>
<Color x:Key="Orange">#ff7052</Color>
<Style x:Key="MaterialTabStyle" TargetType="tabs:MaterialUnderlinedTabItem">
<Setter Property="SelectedTabColor" Value="{StaticResource Primary}" />
<Setter Property="IconSize" Value="24" />
<Setter Property="FontFamily" Value="OpenSansRegular" />
<Setter Property="LabelSize" Value="14" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<AbsoluteLayout>
<Image Source="living2.png" Aspect="Fill" Margin="0"/>
<Grid HorizontalOptions="FillAndExpand" AbsoluteLayout.LayoutBounds="0.1,0,1,.9" AbsoluteLayout.LayoutFlags="All">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Text="My Camera Viewer" TextColor="White" Margin="20,20,0,0" FontSize="20" FontAttributes="Bold"></Label>
<Frame x:Name="frame" Grid.Row="1" Padding="0" Margin="10,20,10,0" CornerRadius="20" HeightRequest="60" BackgroundColor="#80000000">
<StackLayout Orientation="Horizontal" VerticalOptions="FillAndExpand">
<Label Text="Type your Search" TextColor="White" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" Margin="20,0,0,0" FontSize="15"></Label>
<Frame HorizontalOptions="EndAndExpand" BackgroundColor="{StaticResource Orange}" BorderColor="Transparent" CornerRadius="40" HeightRequest="40" WidthRequest="40" Margin="0,0,20,0" Padding="0">
<Image HorizontalOptions="Center" VerticalOptions="Center">
<Image.Source>
<FontImageSource
FontFamily="FASolid"
Glyph="{StaticResource search}"
Color="White"
Size="15"/>
</Image.Source>
</Image>
</Frame>
</StackLayout>
</Frame>
</Grid>
<Label Text="Living room" TextColor="White" FontSize="20" FontAttributes="Bold" AbsoluteLayout.LayoutBounds="0.1,5.7,0.8,.9" AbsoluteLayout.LayoutFlags="All"></Label>
<Frame CornerRadius="0" Padding="0" BackgroundColor="#60000000" BorderColor="Transparent" HorizontalOptions="FillAndExpand" AbsoluteLayout.LayoutBounds="0.5,0.9,400,250" AbsoluteLayout.LayoutFlags="PositionProportional">
<Frame x:Name="messageFrame" Padding="0" CornerRadius="5" BackgroundColor="#2c2932" BorderColor="Transparent" HeightRequest="110" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand" Margin="0,20,0,0">
<StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand" >
<Frame HorizontalOptions="Start" VerticalOptions="CenterAndExpand" BackgroundColor="{StaticResource Orange}" BorderColor="Transparent" CornerRadius="40" HeightRequest="80" WidthRequest="80" Margin="20,0,0,0">
<Image>
<Image.Source>
<FontImageSource
FontFamily="FASolid"
Glyph="{StaticResource exclamation}"
Color="White"
Size="24"/>
</Image.Source>
</Image>
</Frame>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" Margin="10,0,0,0" VerticalOptions="Center">
<Label Text="Warning Title" TextColor="{StaticResource Orange}" FontSize="20" />
<Label Text="Detail of the message indicating the error" TextColor="#72727a" FontSize="13" />
</StackLayout>
</StackLayout>
</Frame>
</Frame>
<Grid AbsoluteLayout.LayoutBounds="0.5,1,390,160"
AbsoluteLayout.LayoutFlags="PositionProportional">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame Grid.Row="0" HasShadow="True" BackgroundColor="{StaticResource White}" HeightRequest="60" Margin="15,0,15,-10" CornerRadius="15" BorderColor="Transparent">
<Frame.Shadow>
<Shadow Brush="Black"
Offset="60,60"
Radius="80"
Opacity="0.8" />
</Frame.Shadow>
<Label Text="Current Status: Streaming cam" TextColor="{StaticResource MenuGray}"/>
</Frame>
<Frame HasShadow="True" Grid.Row="1" Padding="0" BackgroundColor="{StaticResource White}" BorderColor="#fbefea" HeightRequest="120">
<Frame.Shadow>
<Shadow Brush="Black"
Offset="60,60"
Radius="80"
Opacity="0.8" />
</Frame.Shadow>
<tabs:TabHostView Padding="0" x:Name="TabHost" VerticalOptions="CenterAndExpand">
<tabs:MaterialUnderlinedTabItem Style="{StaticResource MaterialTabStyle}"
IconImageSource="house_96.png"
IconOptions="TopIcon"
IconTextSpacing="5"
IconSize="35"
UnselectedLabelColor="{StaticResource MenuGray}"
Label="Live View" />
<tabs:MaterialUnderlinedTabItem Style="{StaticResource MaterialTabStyle}"
IconImageSource="house_96.png"
IconSize="35"
IconOptions="TopIcon"
IconTextSpacing="5"
UnselectedLabelColor="{StaticResource MenuGray}"
Label="Alerts" />
<tabs:MaterialUnderlinedTabItem Style="{StaticResource MaterialTabStyle}"
IconImageSource="house_96.png"
IconOptions="TopIcon"
IconTextSpacing="5"
IconSize="35"
UnselectedLabelColor="{StaticResource MenuGray}"
Label="Configuration" />
</tabs:TabHostView>
</Frame>
</Grid>
</AbsoluteLayout>
</ContentPage>The result starts to look like this:
You can get the code here:
rretamal/MidjourneyCameraApp (github.com)
By the way, the initial image with the cameras was also generated by Midjourney!
If you want to see the design in use, you can download the example from here:
ReCam Viewer — Apps on Google Play
Happy Coding!