Textmarker, Bleistift and pressure

SyncBoard/MainPage.xaml

@@ -8,56 +8,64 @@
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <Grid Background="#FF2F333C">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
 
         <ScrollViewer x:Name="scrollViewer" ZoomMode="Enabled" MinZoomFactor="1"
                       VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Auto"
-                      HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto" Grid.Row="1" Margin="0,98,0,0">
+                      HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto" Grid.Row="1" Margin="0,103,0,0" HorizontalAlignment="Center" Width="1500" Height="897" VerticalAlignment="Top">
             <Grid x:Name="outputGrid"
-                  Height="{Binding ActualHeight, ElementName=scrollViewer}"
-                  Width="{Binding ActualWidth, ElementName=scrollViewer}">
+                  Height="892"
+                  Width="1500">
+                <Canvas x:Name="PrintCanvas" Opacity="0"/>
+                <Rectangle Stroke="#FF818181" HorizontalAlignment="Left" Width="794" Height="1123"
+                           VerticalAlignment="Top"/>
                 <InkCanvas x:Name="inkCanvas"
-                      Height="{Binding ActualHeight, ElementName=scrollViewer}"
-                      Width="{Binding ActualWidth, ElementName=scrollViewer}"/>
+                      Height="1218"
+                      Width="1843" VerticalAlignment="Top" HorizontalAlignment="Left"/>
             </Grid>
         </ScrollViewer>
+
+
         <Grid Grid.RowSpan="2" Height="54" VerticalAlignment="Top">
+            <Grid.Background>
+                <SolidColorBrush Color="{ThemeResource SystemAccentColorDark3}"/>
+            </Grid.Background>
             <Grid.FocusVisualPrimaryBrush>
                 <SolidColorBrush Color="Black" Opacity="0.6"/>
             </Grid.FocusVisualPrimaryBrush>
-            <Grid.Background>
-                <AcrylicBrush FallbackColor="{ThemeResource SystemChromeDisabledHighColor}" Opacity="0.8" TintColor="{ThemeResource SystemAccentColor}" TintOpacity="0.6" BackgroundSource="HostBackdrop" AlwaysUseFallback="False"/>
-            </Grid.Background>
             <Button Content="Neu" Margin="0,0,23,0" RenderTransformOrigin="0.99,0.473"
                     HorizontalAlignment="Right" Width="67" Click="Button_Click"/>
             <AppBarToggleButton Icon="Accept" Label="Offline-Modus"
                                 Height="49" Width="98"
                                 x:Name="offlineModeToggleButton"
-                                Checked="offlineModeToggleButton_Checked"/>
+                                Checked="offlineModeToggleButton_Checked" Margin="68,0,0,0"/>
             <TextBox Margin="0,0,213,0" Text="Raumcode"
                      TextWrapping="Wrap" VerticalAlignment="Center"
                      x:Name="roomCodeBox" TextAlignment="Center" TextChanged="roomCodeBox_TextChanged" HorizontalAlignment="Right" Width="86"/>
             <Button Content="Beitreten" Margin="0,0,120,0" RenderTransformOrigin="0.483,0.508" IsEnabled="False"
                     x:Name="connectButton" Click="connectButton_Click" HorizontalAlignment="Right" Width="76"/>
-            <Button Content="Exportieren" Margin="127,0,0,0" Click="exportBoard"/>
-            <Button Content="Laden" Margin="237,0,0,0" Click="importBoard"/>
+            <Button Content="Exportieren" Margin="207,0,0,0" Click="exportBoard"/>
+            <Button Content="Laden" Margin="318,0,0,0" Click="importBoard"/>
             <TextBlock HorizontalAlignment="Left" Margin="323,0,0,0" Text="A User joined your Board" TextWrapping="Wrap"
                        VerticalAlignment="Center" x:Name="userJoinedText" Visibility="Collapsed"/>
-            <Button Content="Vollbild" Margin="370,0,0,0" Click="Button_Click_1"/>
+            <AppBarToggleButton Icon="Accept" Label="Vollbild"
+                                Width="63"
+                                Click="Button_Click_1" x:Name="fullscreenIcon"/>
+            <Button Content="Drucken" Margin="399,0,0,0" Click="Printer_Click"/>
         </Grid>
         <InkToolbar x:Name="inkToolbar"
                     VerticalAlignment="Top"
                     TargetInkCanvas="{x:Bind Path=inkCanvas}" Grid.Row="1" Margin="0,54,0,0" Height="44" >
+            <InkToolbar.Background>
+                <SolidColorBrush Color="{ThemeResource SystemAccentColorDark3}"/>
+            </InkToolbar.Background>
             <InkToolbar.Foreground>
                 <AcrylicBrush TintOpacity="0.6" Opacity="0.6"/>
             </InkToolbar.Foreground>
-            <InkToolbar.Background>
-                <AcrylicBrush TintOpacity="0.2" TintColor="#CC000000" Opacity="0.8" AlwaysUseFallback="False" FallbackColor="{ThemeResource SystemAccentColor}"/>
-            </InkToolbar.Background>
         </InkToolbar>
     </Grid>
 </Page>

SyncBoard/MainPage.xaml.cs

@@ -1,4 +1,5 @@
-using Newtonsoft.Json.Linq;
+using Microsoft.Toolkit.Uwp.Helpers;
+using Newtonsoft.Json.Linq;
 using SocketIOClient;
 using System;
 using System.Collections;
@@ -9,6 +10,7 @@
 using System.Timers;
 using Windows.Data.Json;
 using Windows.Foundation;
+using Windows.Graphics.Printing;
 using Windows.Storage.Streams;
 using Windows.UI;
 using Windows.UI.Core;
@@ -19,6 +21,8 @@
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Input;
 using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Media.Imaging;
+using Windows.UI.Xaml.Printing;
 using Windows.UI.Xaml.Shapes;
 
 // Die Elementvorlage "Leere Seite" wird unter https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x407 dokumentiert.
@@ -44,27 +48,30 @@ public MainPage()
         {
             this.InitializeComponent();
 
+            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.FullScreen;
+
             // Set supported inking device types.
             inkCanvas.InkPresenter.InputDeviceTypes =
                 Windows.UI.Core.CoreInputDeviceTypes.Mouse |
                 Windows.UI.Core.CoreInputDeviceTypes.Pen;
 
             // Set initial ink stroke attributes.
             InkDrawingAttributes drawingAttributes = new InkDrawingAttributes();
+
             drawingAttributes.Color =
                 Application.Current.RequestedTheme == ApplicationTheme.Dark
                 ? Windows.UI.Colors.White
                 : Windows.UI.Colors.Black;
             drawingAttributes.IgnorePressure = false;
+
             drawingAttributes.FitToCurve = true;
             inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
 
             inkCanvas.InkPresenter.StrokesErased += InkPresenter_StrokesErased;
+            inkCanvas.InkPresenter.StrokesCollected += InkPresenter_Drawed;
 
             // Network and sync:
             InitSocket();
-
-            SynchronizationTask();
         }
 
         private void InkPresenter_StrokesErased(InkPresenter sender, InkStrokesErasedEventArgs args)
@@ -77,6 +84,38 @@ private void InkPresenter_StrokesErased(InkPresenter sender, InkStrokesErasedEve
             CallErasement(eraseIds);
         }
 
+        private void InkPresenter_Drawed(InkPresenter presenter, InkStrokesCollectedEventArgs args)
+        {
+            _ = Windows.ApplicationModel.Core.CoreApplication.MainView.Dispatcher.
+                   RunAsync(CoreDispatcherPriority.Normal, () =>
+                   {
+                       List<InkStroke> toSync = new List<InkStroke>();
+
+                       foreach (var stroke in args.Strokes)
+                       {
+                           foreach (var point in stroke.GetInkPoints())
+                           {
+                               if (point.Position.Y >= inkCanvas.Height - EXPAND_MARGIN)
+                               {
+                                   expandBoard(true);
+                               }
+                               else if (point.Position.X >= inkCanvas.Width - EXPAND_MARGIN)
+                               {
+                                   expandBoard(false);
+                               }
+                           }
+
+                           Guid guid = Guid.NewGuid();
+                           syncedStrokes.Add(guid, stroke);
+                           reverseStrokes.Add(stroke, guid);
+
+                           toSync.Add(stroke);
+                       }
+
+                       if (!offlineMode) SyncData(toSync, "sync");
+                   });
+        }
+
         private async void InitSocket()
         {
             socket = new SocketIO(Network.URL, new SocketIOOptions {
@@ -116,50 +155,6 @@ private async void HandleSocketConnection()
             });
         }
 
-        private async void SynchronizationTask()
-        {
-            System.Timers.Timer aTimer = new System.Timers.Timer(200);
-            aTimer.Elapsed += timerTask;
-            aTimer.AutoReset = true;
-            aTimer.Enabled = true;
-
-        }
-
-        private void timerTask(Object source, ElapsedEventArgs e)
-        {
-            _ = Windows.ApplicationModel.Core.CoreApplication.MainView.Dispatcher.
-                   RunAsync(CoreDispatcherPriority.Normal, () =>
-                   {
-                       List<InkStroke> toSync = new List<InkStroke>();
-
-                        foreach (var stroke in inkCanvas.InkPresenter.StrokeContainer.GetStrokes())
-                        {
-                            if (!syncedStrokes.Values.Contains(stroke))
-                            {
-                               foreach (var point in stroke.GetInkPoints())
-                               {
-                                   if (point.Position.Y >= inkCanvas.Height - EXPAND_MARGIN)
-                                   {
-                                       expandBoard(true);
-                                   }
-                                   else if (point.Position.X >= inkCanvas.Width - EXPAND_MARGIN)
-                                   {
-                                       expandBoard(false);
-                                   }
-                               }
-
-                               Guid guid = Guid.NewGuid();
-                               syncedStrokes.Add(guid, stroke);
-                               reverseStrokes.Add(stroke, guid);
-
-                               toSync.Add(stroke);
-                            }
-                        }
-
-                       if (!offlineMode) SyncData(toSync, "sync");
-                   });
-        }
-
         private async void ListenIncome()
         {
             socket.On("sync", (data) =>
@@ -198,7 +193,25 @@ private async void ListenIncome()
                             InkStrokeBuilder b = new InkStrokeBuilder();
 
                             InkDrawingAttributes da = new InkDrawingAttributes();
-                            da.Color = parseColor(ColorHelper.FromArgb(
+
+                            // Pressure
+                            JObject toolInfo = stroke.Value<JObject>("tool");
+                            if (toolInfo !=null)
+                            {
+                                if (toolInfo.Value<Boolean>("pencil"))
+                                {
+                                    da = InkDrawingAttributes.CreateForPencil();
+                                } else
+                                {
+                                    da.DrawAsHighlighter = toolInfo.Value<Boolean>("marker");
+                                }
+
+                                da.Size = new Size((double)toolInfo.Value<JObject>("size").GetValue("w"),
+                                    (double)toolInfo.Value<JObject>("size").GetValue("h"));
+                            }
+
+                            // Color
+                            da.Color = parseColor(Windows.UI.ColorHelper.FromArgb(
                                 (byte)stroke.Value<JObject>("color").GetValue("A"),
                                 (byte)stroke.Value<JObject>("color").GetValue("R"),
                                 (byte)stroke.Value<JObject>("color").GetValue("G"),
@@ -330,6 +343,18 @@ private void SyncData(List<InkStroke> toSync, String channel)
                 ö.Add("color", color);
                 ö.Add("guid", reverseStrokes.GetValueOrDefault(syncStroke));
 
+                // Send the tool-size
+                JObject size = new JObject();
+                size.Add("w", syncStroke.DrawingAttributes.Size.Width);
+                size.Add("h", syncStroke.DrawingAttributes.Size.Height);
+
+                JObject toolInfo = new JObject();
+                toolInfo.Add("size", size);
+                toolInfo.Add("marker", syncStroke.DrawingAttributes.DrawAsHighlighter);
+                toolInfo.Add("pencil", syncStroke.DrawingAttributes.Kind.Equals(InkDrawingAttributesKind.Pencil));
+
+                ö.Add("tool", toolInfo);
+
                 foreach (var strokePoint in syncStroke.GetInkPoints())
                 {
                     JObject o = new JObject();
@@ -558,13 +583,51 @@ private async void importBoard(object sender, RoutedEventArgs e)
         // Enter fullscreen
         private void Button_Click_1(object sender, RoutedEventArgs e)
         {
-            if (ApplicationView.GetForCurrentView().IsFullScreen)
+            if (ApplicationView.GetForCurrentView().IsFullScreenMode)
             {
                 ApplicationView.GetForCurrentView().ExitFullScreenMode();
             } else
             {
                 ApplicationView.GetForCurrentView().TryEnterFullScreenMode();
             }
+
+            fullscreenIcon.IsChecked = ApplicationView.GetForCurrentView().IsFullScreenMode;
+        }
+
+        // Print PDF
+        private async void Printer_Click(object sender, RoutedEventArgs e)
+        {
+            // Create a Bitmap from the strokes.
+            var inkStream = new InMemoryRandomAccessStream();
+            await inkCanvas.InkPresenter.StrokeContainer.SaveAsync(inkStream.GetOutputStreamAt(0));
+            var inkBitmap = new BitmapImage();
+            await inkBitmap.SetSourceAsync(inkStream);
+
+            // Adjust Margin to layout the image properly in the print-page. 
+            var inkBounds = inkCanvas.InkPresenter.StrokeContainer.BoundingRect;
+            var inkMargin = new Thickness(inkBounds.Left, inkBounds.Top, inkCanvas.ActualWidth - inkBounds.Right, inkCanvas.ActualHeight - inkBounds.Bottom);
+
+            // Prepare Viewbox+Image to be printed.
+            var inkViewbox = new Viewbox()
+            {
+                Child = new Image()
+                {
+                    Source = inkBitmap,
+                    Margin = inkMargin
+                },
+                Width = inkCanvas.ActualWidth,
+                Height = inkCanvas.ActualHeight
+            };
+
+            PrintCanvas.Children.Clear();
+            PrintCanvas.Children.Add(inkViewbox);
+
+            var _printHelper = new PrintHelper(PrintCanvas);
+            var printHelperOptions = new PrintHelperOptions();
+            printHelperOptions.AddDisplayOption(StandardPrintTaskOptions.Orientation);
+            printHelperOptions.Orientation = PrintOrientation.Portrait;
+
+            await _printHelper.ShowPrintUIAsync("printing InkPen", printHelperOptions, true);
         }
     }
 

SyncBoard/Package.appxmanifest

@@ -9,7 +9,7 @@
   <Identity
     Name="932ae293-77fa-4492-9e55-bd1c9a560396"
     Publisher="CN=Ypsilon"
-    Version="1.0.12.0" />
+    Version="1.0.19.0" />
 
   <mp:PhoneIdentity PhoneProductId="932ae293-77fa-4492-9e55-bd1c9a560396" PhonePublisherId="00000000-0000-0000-0000-000000000000"/>
 

SyncBoard/SyncBoard.csproj

@@ -24,7 +24,7 @@
     <AppxAutoIncrementPackageRevision>True</AppxAutoIncrementPackageRevision>
     <GenerateTestArtifacts>True</GenerateTestArtifacts>
     <AppxBundle>Always</AppxBundle>
-    <AppxBundlePlatforms>x64|arm64</AppxBundlePlatforms>
+    <AppxBundlePlatforms>x64</AppxBundlePlatforms>
     <HoursBetweenUpdateChecks>24</HoursBetweenUpdateChecks>
   </PropertyGroup>
   <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x86'">
@@ -206,6 +206,9 @@
     <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform">
       <Version>6.2.9</Version>
     </PackageReference>
+    <PackageReference Include="Microsoft.Toolkit.Uwp">
+      <Version>7.0.0</Version>
+    </PackageReference>
     <PackageReference Include="SocketIOClient">
       <Version>2.1.5</Version>
     </PackageReference>