Uno Platform<\/h2>\n\n\n\n
Welcome Uno to the Linux Scene… Uno Platform is a Universal Windows Bridge which makes it possible to create UWP apps for Windows, Mac, Android, iOS and importantly Linux!<\/p>\n\n\n\n
Created by Jerome Laban<\/a>, Uno<\/a> allows developers to create pixel perfect cross platform applications. <\/p>\n\n\n\n Since Uno V3, there are preview features that allow Uno Platform apps to target Linux. Making use of Skia and GTK, C# developers can deploy apps written in XAML to devices like the Raspberry Pi.<\/p>\n\n\n\n This guide depends on the fact that you’ve installed the following dependencies;<\/p>\n\n\n\n If you don’t want to use the Single Line Setup Script, then you should also Install the Windows Dot NET Debugging package<\/a><\/p>\n\n\n\n Rather than following along with the step by Step instructions, you can simply run the single line setup script I’ve created;<\/p>\n\n\n\n Open a command prompt as Administrator, navigate to your root directory and run the following command;<\/p>\n\n\n\n Here I’ve chosen to skip the steps to setup remote deploy and debugging as I have already carried out those steps previously;<\/p>\n\n\n\n The script will automatically create a new Uno Platform project and all the necessary requirements to Remote Deploy and Debug the project on a Raspberry Pi. The project will then automatically open in VS Code.<\/p>\n\n\n\n We’re now ready to test out our Hello World Uno Platform app.<\/p>\n\n\n\n Switch to the Run tab by hitting the Run button in the toolbar on the left.<\/p>\n\n\n\n Next, from the Run drop down, select the new “.NET Core Launch (remote)<\/em><\/strong>” Task;<\/p>\n\n\n\n We’re now ready to run our application. Go ahead and either press the green run button, or press the F5 key.<\/p>\n\n\n\n Either by having a screen connected to your Pi, or using VNC, and If everything has gone according to plan, you should now have deployed and run your first Uno Application!<\/p>\n\n\n\n If you want to have a go at achieving what the single line setup script does yourself then feel free to following along!<\/p>\n\n\n\n Let’s create our first Uno Project. Open a command prompt, and run the following command to install the Uno Templates from here<\/a>;<\/p>\n\n\n\n This will download the latest dev branch of the Uno Templates for Dot NET. This will include the new Linux bits we need.<\/p>\n\n\n\n Now let’s create our Uno Project. Navigate to a suitable directory and run the following command;<\/p>\n\n\n\n We’ve disabled all but the Skia.GTK project, the Shared project and the UWP project here.<\/p>\n\n\n\n You may also notice that an errant WASM project is left, this is a bug in the template which will likely be fixed soon.<\/p>\n\n\n\n Now open the solution in Visual Studio Code with;<\/p>\n\n\n\n We’re going to do something slightly different to the previous method we’ve used to deploy and debug Dot NET applications.<\/p>\n\n\n\n Uno Applications will need access to the screen. If we were running this program directly from the pi, then we would need to make sure that the user we were running the app as could access the display.<\/p>\n\n\n\n There are a couple of things that normally need to be done to enable users access to the screen. The first is that that user needs to have the correct privileges to access the screen. The following command gives privelages to access to the screen to the specified user;<\/p>\n\n\n\n Next the system needs to know which display the user will be accessing. This is achieved by the use of the DISPLAY environment variable. This can be set using the following command;<\/p>\n\n\n\n Here we’ve specified that the current session will be using display 0. Normally, we could add this exported environment variable to the .bashrc<\/em><\/strong> file of the user profile, and this ensures that when a terminal session is started, the display is assigned correctly. <\/p>\n\n\n\n We’ll be using VS code and the SSH command to launch the application on the Pi. We’ll be launching the application as the built in “pi” user, which already has access privileges to the display… So, we don’t need to worry about using xhost<\/em><\/strong>.<\/p>\n\n\n\n However, the SSH session pays no respect to the setup of the built in session and so ignores the .bashrc file, and any associated environment exports.<\/p>\n\n\n\n This means, that when we launch the application from VS Code, the application won’t know which display to use and will fail to start.<\/p>\n\n\n\n The following instructions allow us to work around that by the use of a debugging stub script which is downloaded automatically as part of the .NET 5 setup script<\/a>.<\/p>\n\n\n\n There’s currently an incompatibility between Uno Projects and the C# Rosyln Analysers which leads to an error while building the projects.<\/p>\n\n\n\n Open up the Skia.Gtk and the Shared csproj files and add the following line to the first Project – Property Group section;<\/p>\n\n\n\n We now need to configure our project to deploy to the Raspberry Pi and begin debugging.<\/p>\n\n\n\n There are a couple of things we normally need to do here, the first is that the user must have the correct privileges to access the screen. These can be granted by running the following command<\/p>\n\n\n\n Create a folder called “.vscode<\/em><\/strong>” in the root of the solution;<\/p>\n\n\n\n Create a file called “launch.json<\/em><\/strong>“, another file called “tasks.json<\/em><\/strong>” in the new “.vscode<\/em><\/strong>” folder<\/p>\n\n\n\n So we can make use of Workspace Settings, we’ll create a new Workspace for our solution.<\/p>\n\n\n\n Go to the file menu and click the “Save Workspace As…<\/em><\/strong>” item;<\/p>\n\n\n\n Choose the default location and name for the Workspace which should be in the .vscode folder and named “workspace.code-workspace”.<\/p>\n\n\n\n Paste the following over the contents of the “workspace.code-workspace” file;<\/p>\n\n\n\n You’ll need to replace the “<Pi Host Name><\/em><\/strong>” and “<Pi Host Name><\/em><\/strong>” placeholders with the relevant values for your setup. The “<Pi User Name><\/em><\/strong>” will most likely be “pi<\/em><\/strong>“. The “<Pi Host Name><\/em><\/strong>” will be whatever you have set your Raspberry Pi Host Name as… Most likely “raspberrypi<\/em><\/strong>“.<\/p>\n\n\n\n You should now have a “.vscode<\/em><\/strong>” folder with 3 files; “launch.json<\/em><\/strong>“, “tasks.json<\/em><\/strong>” and “workspace.code-workspace<\/em><\/strong>“;<\/p>\n\n\n\n Paste the following JSON into the “launch.json<\/em><\/strong>” file;<\/p>\n\n\n\n This Launch task is slightly different to the regular launch task as it’s now making use of a .NET 5 stub debug script which is included in the .NET 5 Pi install script<\/a>.<\/p>\n\n\n\n This script automatically exports the Display environment variable and then launches the app with the parameters we pass in in the “args<\/em><\/strong>” property.<\/p>\n\n\n\n This way, the app has access to the screen and we keep the Visual Studio Debugger attached and ready to go.<\/p>\n\n\n\n Next we need to configure the Build, Publish (to Linux ARM32 binaries) and Deploy tasks. <\/p>\n\n\n\n Paste the following JSON into the “tasks.json<\/em><\/strong>” file;<\/p>\n\n\n\n You’ll again need to replace the “<Pi Host Name><\/em><\/strong>” placeholder with the Hostname of your Raspberry Pi, e.g. raspberrypi<\/p>\n\n\n\n Navigate to your project directory and to the .vscode folder and double click on the workspace.code-workspace file to open your project.<\/p>\n\n\n\n We’re now ready to test out our Hello World Uno Platform app.<\/p>\n\n\n\n Switch to the Run tab by hitting the Run button in the toolbar on the left.<\/p>\n\n\n\n Next, from the Run drop down, select the new “.NET Core Launch (remote)<\/em><\/strong>” Task;<\/p>\n\n\n\n We’re now ready to run our application. Go ahead and either press the green run button, or press the F5 key.<\/p>\n\n\n\nPreRequisites<\/h2>\n\n\n\n
Single Line Setup<\/h2>\n\n\n\n
curl --output remotedebugsetup_uno.bat https:\/\/raw.githubusercontent.com\/pjgpetecodes\/dotnet5pi\/master\/remotedebugsetup_uno.bat && remotedebugsetup_uno.bat<\/code><\/pre><\/div>\n\n\n\n![\"\"](\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2021\/02\/Uno-Setup.gif\")
<\/a><\/figure>\n\n\n\nRun and Debug the Application<\/h2>\n\n\n\n
![\"\"](\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2021\/02\/image-6.png\")
<\/a>![\"\"](\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2021\/02\/image-4-1024x498.png\")
<\/a>![\"\"](\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2021\/02\/Uno-Debug-1-2.gif\")
<\/a>
\n\n\n\nThe Step by Step Method…<\/h2>\n\n\n\n
Hello Uno World <\/h2>\n\n\n\n
dotnet new --install Uno.ProjectTemplates.Dotnet::3.5.0-dev.270<\/code><\/pre><\/div>\n\n\n\ndotnet new UnoApp -o unoapp1 -ios=false -android=false -macos=false -wasm=false -skia-wpf=false -st=false && cd unoapp1<\/code><\/pre><\/div>\n\n\n\ncode .<\/code><\/pre><\/div>\n\n\n\nAs an aside…<\/h2>\n\n\n\n
sudo xhost +si:localuser:<user><\/code><\/pre><\/div>\n\n\n\nexport DISPLAY=:0<\/code><\/pre><\/div>\n\n\n\nWork around an issue with the Roslyn Analysers<\/h2>\n\n\n\n
<UnoUIUseRoslynSourceGenerators>false<\/UnoUIUseRoslynSourceGenerators><\/code><\/pre><\/div>\n\n\n\n![\"\"](\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2021\/02\/image-7-1024x346.png\")
<\/a>Configure the Project for Debugging<\/h2>\n\n\n\n
![\"\"](\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2021\/02\/image.png\")
<\/a><\/figure>\n\n\n\nworkspace.code-workspace<\/h2>\n\n\n\n
![\"\"](\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2021\/02\/image-8.png\")
<\/a>![\"\"](\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2021\/02\/image-9-1024x612.png\")
<\/a><\/figure>\n\n\n\n{\n\t"folders": [\n\t\t{\n\t\t\t"path": ".."\n\t\t}\n\t],\n\t"settings": {\n\t\t"piUserName": "<Pi User Name>",\n \t"piHostName": "<Pi Host Name>"\n\t}\n}<\/code><\/pre><\/div>\n\n\n\n![\"\"](\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2021\/02\/image-5.png\")
<\/a>launch.json<\/h2>\n\n\n\n
{\n \/\/ Use IntelliSense to find out which attributes exist for C# debugging\n \/\/ Use hover for the description of the existing attributes\n \/\/ For further information visit https:\/\/github.com\/OmniSharp\/omnisharp-vscode\/blob\/master\/debugger-launchjson.md\n "version": "0.2.0",\n "configurations": [\n {\n "name": ".NET Core Launch (console)",\n "type": "coreclr",\n "request": "launch",\n "preLaunchTask": "build",\n \/\/ If you have changed target frameworks, make sure to update the program path.\n "program": "${workspaceFolder}\/${workspaceFolderBasename}.Skia.Gtk\/bin\/Debug\/net5.0\/${workspaceFolderBasename}.Skia.Gtk.dll",\n "args": [],\n "cwd": "${workspaceFolder}",\n \/\/ For more information about the 'console' field, see https:\/\/aka.ms\/VSCode-CS-LaunchJson-Console\n "console": "internalConsole",\n "stopAtEntry": false\n },\n {\n "name": ".NET Core Attach",\n "type": "coreclr",\n "request": "attach",\n "processId": "${command:pickProcess}"\n },\n {\n "name": ".NET Core Launch (remote)",\n "type": "coreclr",\n "request": "launch",\n "preLaunchTask": "RaspberryPiDeploy",\n "program": "~\/.\/dotnetdebug.sh",\n "args": ["dotnet \/home\/${config:piUserName}\/${workspaceFolderBasename}\/${workspaceFolderBasename}.Skia.Gtk.dll"],\n "cwd": "\/home\/pi\/${workspaceFolderBasename}",\n "stopAtEntry": false,\n "console": "internalConsole",\n "pipeTransport": {\n "pipeCwd": "${workspaceFolder}\/${workspaceFolderBasename}.Skia.Gtk",\n "pipeProgram": "ssh",\n "pipeArgs": [\n "${config:piUserName}@${config:piHostName}"\n ],\n "debuggerPath": "\/home\/pi\/vsdbg\/vsdbg"\n }\n }\n ]\n }<\/code><\/pre><\/div>\n\n\n\ntasks.json<\/h2>\n\n\n\n
{\n "version": "2.0.0",\n "tasks": [\n {\n "label": "build",\n "command": "dotnet",\n "type": "process",\n "args": [\n "build",\n "${workspaceFolder}\/${workspaceFolderBasename}.Skia.Gtk\/${workspaceFolderBasename}.Skia.Gtk.csproj",\n "\/property:GenerateFullPaths=true",\n "\/consoleloggerparameters:NoSummary"\n ],\n "problemMatcher": "$msCompile"\n },\n {\n "label": "publish",\n "command": "dotnet",\n "type": "process",\n "args": [\n "publish",\n "${workspaceFolder}\/${workspaceFolderBasename}.Skia.Gtk\/${workspaceFolderBasename}.Skia.Gtk.csproj",\n "\/property:GenerateFullPaths=true",\n "\/consoleloggerparameters:NoSummary"\n ],\n "problemMatcher": "$msCompile"\n },\n {\n "label": "watch",\n "command": "dotnet",\n "type": "process",\n "args": [\n "watch",\n "run",\n "${workspaceFolder}\/${workspaceFolderBasename}.Skia.Gtk\/${workspaceFolderBasename}.Skia.Gtk.csproj",\n "\/property:GenerateFullPaths=true",\n "\/consoleloggerparameters:NoSummary"\n ],\n "problemMatcher": "$msCompile"\n },\n {\n "label": "RaspberryPiPublish",\n "command": "sh",\n "type": "shell",\n "dependsOn": "build",\n "windows": {\n "command": "cmd",\n "args": [\n "\/c",\n "\\"dotnet publish ${workspaceFolder}\/${workspaceFolderBasename}.Skia.Gtk\/${workspaceFolderBasename}.Skia.Gtk.csproj -r linux-arm -o ${workspaceFolderBasename}.Skia.Gtk\\\\bin\\\\linux-arm\\\\publish --no-self-contained\\""\n ],\n "problemMatcher": []\n }\n \n },\n {\n "label": "RaspberryPiDeploy",\n "type": "shell",\n "dependsOn": "RaspberryPiPublish",\n "presentation": {\n "reveal": "always",\n "panel": "new"\n },\n "windows": {\n "command": "c:\\\\cwrsync\\\\rsync -rvuz --rsh=\\"c:\\\\cwrsync\\\\ssh\\" --chmod=700 ${workspaceFolderBasename}.Skia.Gtk\/bin\/linux-arm\/publish\/ ${config:piUserName}@${config:piHostName}:\/home\/${config:piUserName}\/${workspaceFolderBasename}\/"\n },\n "problemMatcher": []\n }\n ]\n}<\/code><\/pre><\/div>\n\n\n\nRun and Debug the Application<\/h2>\n\n\n\n
<\/a><\/a>