This blog is not a tutorial on software / web development like I usually create. The purpose of this post is to serve as the Help page for using a site I just published called PixelDatabase.Net.
For C# Programmers
Although I stated this blog is not for programmers, most of the code used / talked about is open source:
* The source code for the website PixelDatabase.Net is not published as I plan on accepting donations and / or advertisements since open source does not pay very well and I am unemployed.
Pixel Database.Net
PixelDatabase.Net reads in a .jpg or .png and creates a Pixel Information Database, that can be manipulated in a language I invented called BQL or Bitmap Query language.
Motivation
The reason I wrote Transparency Maker is when I purchase stock photos, almost all come with a background color and often I need a transparent background. There are other tools that perform background removal, with more now than in 2012 when I started working on Transparency Maker, however I wanted a way to programmaticaly manipulate pixels.
Web Version
Fast forward to 2020 and Blazor is my new favorite development environment. Most of the features work the same in the web version as the Windows Forms version. A few things are different in the web version, with the biggest being every time the file is edited I must save the file to disc with some random characters added to the file name and reload.
How To Use PixelDatabase.Net
3.28.2020: More to come, but I need the URL so I can publish the site while I work on the documentation.
Description: This tutorial will guide you step by step through creating a complete Blazor application that includes many features that would be needed for a real world site, including:
1. Creating a Blazor project from scratch
2. Creating a SQL Server Database with two tables: Artist, Image
3. Creating some images with my open source project Random Art
4. Building the data tier with DataTier.Net and execute the generated stored procedures
5. Uploading images with DataJuggler.Blazor.FileUpload
6. Create a SignUp Component to allow new artists to join, including uploading a profile picture
7. Create a Login Component to login existing users with option to store email address and password
8. Create an Artist List Viewer component
9. Create an Image List Viewer component
10. Create an Image Button component to display and select images
11. Load and display images for an artist when selected
12. Display a larger image when selected by changing the Scale property
13. Use BlazorStyled to dynamically change CSS values
14. Use paging to display artists 1 - 5, 6 - 10, etc.
I built this project because I wanted to make sure I could build a real world application, before I started charging a client I wanted to find out what I can and cannot do.
I left out a few things that I may cover in a future tutorial, such as:
1. Forgot Password / Recovery Email
2. I didn't add paging to the Gallery; I capped it at 15 images per artist for now
3. Possibly a shopping cart and / or download image functionality
4. I didn't create any way to delete an image yet.
5. Edit Profile / Change Profile Picture
All these things will make a good Part II, but I wanted to keep version 1 simple.
What you will need:
Visual Studio Version 16.4 or higher. I am using 16.4.5 SQL Server / Express Newer the better. I am using SQL Server Express 2017
Hopefully you are familiar with C# and SQL, but if not you are in the right place to learn.
Here is a sample of the tutorial we are building:
If you want to clone the working version, it is available here:
Download the wwwrootcontent.zip file, save and extract it to a temp folder.
Copy and replace site.css with the existing file wwwroot/css/site.css.
Copy and replace favicon.ico with the existing favicon.css
Copy the Images folder to below the wwwroot folder.
The end result should look like this:
Create Components
Originally I planned creating ten files and pasting in the code for each, but to save a lot of time I created a zip file of the components. Create a new folder named Components and then download extract the contents to a temp folder. Paste the extracted files into the new Components directory. Visual Studio automatically includes the files in the project.
* The code above is part of the open source project and Nuget package: DataJuggler.Blazor.Components, a work in progress.
In the diagram for the sample project below, the Index page contains a component named Login, and the Login component has a child component named SignUp.
The Login component has an EventCallback parameter:
In this scenario I am building a sample called Blazor Image Gallery where artists can sign up and upload images for their own portfolio as part of the Gallery. My database contains an Artist table and when a user signs up or logs in, I needed a way to inform the Index page that a user (an Artist) has signed in. One option is to set a Parameter on the Index page for Artist ID or I could use the Preview Nuget package Microsoft.AspNetCore.ProtectedBrowserStorage, which this project already uses to store the users email address and password hash if a user chooses to be remembered. I didn't like either of these options because I still needed a way to send messages to the parent component or page. Interfaces Interfaces make communication between a parent page or component and child very simple. In this example my Index page and Login component both implement IBlazorComponentParent and the Login and SignUp components both implement IBlazorComponent.
Both the IBlazorComponent and IBlazorComponentParent interfaces have a ReceiveData method:
In the image below, the Login component implements IBlazorComponentParent interface, so setting the parent is as simple as Parent = "this":
The SignUp component implements IBlazorComponent, and your setter for the Parent property needs to look something like this:
In the above setter, the HasParent property is a simple test for (Parent != null). If the Parent exists, the SignUp component registers itself with the parent Login component. Registering Components Objects that implement IBlazorComponentParent must contain a Register method. The Register method will be called the first time the Parent property is set. This usually occurs when a component is rendered for the first time. IBlazorComponentParent objects contain a property named Childrenthat you may instantiate to store child components as they register. You can also store component instances as a property, as shown here the Login component is expecting the SignUp component to register.
In the picture above, NullHelper is part of DataJuggler.UltimateHelper.Core Nuget package, and it a shortcut for (component != null) && (Children != null). Once both objects are verified to exist, the component is added to the Children collection. Sending Messages A message object is a class that contains a few properties to make it easy to send information between components. Message Objects Text - A string property for any text information you want to send. For more complex data, I created an object called a NamedParameter. NamedParameter Properties: Name - An identifier so parameters can be set to distinguish items Value - An object value that can contain any type of data. Each message contains a Parameters collection that is created when you call the constructor for a Message. At some point a MessageHelper class will be created to simplify this, but for now create your NamedParameter instances and add them to your message. In the example shown below, the SignUp component is notifying the Login component that an Artist has signed up:
In the Login component I receive the message, then I call the OnLogin EventCallback which notifies the Index page.
The Index page then receives the LoginResponse object, which I get the Artist from and store in memory:
After login, my UI is updated and the Login Component changes:
The Blazor Image Gallery is almost finished, I just wanted to write this blog post as I think interfaces are the easiest way I have found for communicating between parent and child. Let me know your thoughts or if you know of a better way to communicate between components. Thanks for reading. Please visit my YouTube channel and subscribe as I make new videos as often as I can.
