Deep Dive: “Why can’t I see ink from other views on the current view?”

Users have asked this question a couple of times. If you have ink on a day in the month view, then switch over to the week view, shouldn’t you be able to see what is written on the month view? Currently there is no mixing between views and this was a design decision but also a technical/UX roadblock.

Design Decision

The way I use Ink Calendar drove the way I designed the app. Year view represents my long term planning. When will I be traveling, when holidays land and how I’m going to use my vacation time. I use month views for daily tracking, jumping quickly between months and looking at what’s coming up in a couple weeks.

Week view is for hour by hour planning of the work week or weekend. When to expect things to come and go. Day view is used when I need to nail down a specific agenda for a day. Like there is a lot going on and I need to know where people are going to be and what is going on.

By these standards I have no need to see all of the different views overlapping each other. Generally I view Ink Calendar as a way to organize my thoughts and plans quickly and easily. When I need to share an event with someone or let it span views, then I add an appointment to my calendar.

Distraction and clutter free planning has always been a core design intent of Ink Calendar. I want to make it easy to jot down timelines and move them around. Overlapping ink from all different views on to a single view would not mesh with this design. Views would become extremely crowded and busy.

Technical and UX Roadblocks

Currently Ink Calendar relates one view to one ink file. Each ink file is loaded into an InkCanvas control. If I were to show week view ink on top of month view ink then any new ink would be added to the week view ink file. Parsing user intent on where they expect the ink to save and load gets complicated and nearly impossible to disentangle.

If the InkCanvas views were not overlapping, but laid out in some sort of side by side arrangement then there would need to be an InkCanvas control for each view. This could work, but it would make for a confusing user experience where a single pen stroke could not span the different views.

Ink Calendar currently can use a lot of RAM from loading views to the right and left of the current view. If one view contained the ink of four different views, then the RAM needs would be much larger. Since I typically use Ink Calendar on a Surface Go, I have no expectation that it would preform well, especially if there is a lot of ink.

It may be possible to have a merged view which shows all of the different views for a particular day. I have been looking into how to render views out as .jpg files. This could help the performance problem and give a unified view to show what is going on at every level for a single date.

Continuous Improvement

If you are reading this and believe I have completely missed something or have a novel idea on how to solve this tricky situation then please let me know. I am going to experiment with adding ink between different views in different ways to see how it feels and looks, however I do not know how it will turn out.

Finally, throughout the development process decisions get made at every fork:

  • Should the ink be editable in a different InkCanvas or just view only?
  • Should year view ink be shown in the day view calendar?
  • Should I add a truncated week to the top of the week view?
  • What about the partial weeks at the end of a month, merge or overlap them?
  • Show the view-only ink as transparent?
  • Could users ink over the view-only ink?
  • Should that ink get shown on the month view?

All things considered this is a tricky problem where every users might have unique expectations. I’m not ruling this out as a possiblity, but I do not want to spend hours and hours on this feature which is only important to a small set of users. My time will probably be better used working on a cloud sync service or some other more broad appeal feature.

Please let me know what you think about all of this, and as always thanks for using Ink Calendar!

Joe

History, Calendar Fill, Month Ink Mixing in .24

The latest version of Ink Calendar is out and it is packed with new features, bug fixes, and very little else! Customize the fill of your calendars with the color of your choice. A new history pane now lists the most recent views which have been visited. Finally a new beta setting enables month ink to mix from previous and upcoming months.

Ink Calendar is all about customization! In this theme 1.24 brings the ability to change the background fill however you choose. Adjust the transparency, color, and it’s intensity to get a background fill which looks perfect! Also there is now a preview which shows you what your options will look like as you pick them.

Sometimes when I’m using Ink Calendar I find myself switching between a few different views frequently. The previous view button is nice, but sometimes I want to see where I’ve been so I can get back to it. Now a button next to the view change button shows a pane of recent history! This pane will continue to evolve into the home for a few new features which I’m personally very excited for!

I had a user leave a review where they requested the ability to show the previous month’s ink where the days overlap. This is a natural way to get a heads up when the days are show, why not also show the ink? Well now there’s an options to see the previous and upcoming month’s ink overlain onto the current month. This ties the different months together and gives continuity in the ink.

Finally I have improved the stability of Ink Calendar in a few different ways. The addition of AppCenter crash data has opened a window into the crash reports; what is causing crashes and where. hopefully Ink Calendar 1.24 is more stable than ever before. There are still a few bugs which I’m taking care of but they are within my sights!

As always, thanks for using Ink Calendar and I do hope you send me an email at support [at] inkcalendar [dot] com to let me know how you use Ink Calendar and how it could work better for you!

Joe

UNDO

In update 1.22.1 Ink Calendar will gain the ability to UNDO with the undo button and by pressing ctrl + z. There is not much more to say on this, most programs have this ability and now Ink Calendar does too!

Also you can highlight working hours on the Week and Day view. These can be turned off or adjusted to reflect your specific working hours. Let me know what you think!

I’ve been investegating an issues with quick drags freezing Ink Calendar, but the bug is hard to pin down. If you have experienced this please email support (at) inkcalendar (dot) com.

Joe

Day view improvements and more

Ink Calendar 1.21 is rolling out now with a few different features in tow. As I used the day view I found myself wishing that there was a current time indicator on the agenda, and now there is!

Also the month view appointment layout engine has been reworked to better display appointments which span more than one day. This design is similar to the built in Windows Calendar app. Hopefully it is more obvious when multi-day events begin and end.

Show or hide calendars

Finally now you can filter which calendars show up in each view. Currently Windows only gives a minimal amount of information about the origin of the calendar, but hopefully the color coding helps. Now you can reduce the number of calendars shown on month view or set aside day view for work only. Totally up to you!

Let me know what you think of 1.21 on twitter I’m @TheJoeFin or email support [at] inkcalendar [dot com] for issues, suggestions, or anything else.


-Joe

Day View Agenda and Better Settings

Work is coming along quite nicely on the next version of Ink Calendar. This next update has two major features.

1. Day View Agenda

The Day View has been reworked to be more useful and powerful. Now every day see a break down of what is on your calendar for today. Use the agenda to organize time over the day and plan your time well. There is a customizable hour by hour area, a place for all day appointments, and a bottom area for notes.

If you prefer a standard dot grid, that is still an option. This new view will be the default, but the setting is there to change it back to the dot grid if you prefer.

2. Better Settings

The advanced settings area is now more intelligent and works better. But more noticable are the new background options available to everyone! Pick from a gallary of new choices. Mostly landscape and nature shots, with all custom backgrounds included as well.

Background Image Options
Background Image Options

If none of these suit your needs then feel free to add your own background as always. These images were chose for their diverse and rich color pallet which should make a great background behind the acrylic calendars.

That is it for now, thanks again for using Ink Calendar.

Joe

Swiping Coming Soon!

Update 1.19 is rolling out to the Microsoft Store now. This update brings a highly requested features: natural swiping between views. Now you can change the view by swiping or by clicking the next/previous buttons as always.

This change introduced a fairly major change to the way Ink Calendar handles the different sets of ink + calendars. I have done lots of testing for performance and found it to be acceptable. However it is impossible for me to test every device. I’ll be watching the crash statistics and will continue to optimize Ink Calendar with future updates.

Hopefully this update makes Ink Calendar more natural and easier to use. If you have suggestions, comments, or feedback then please reach out by email (support@inkcalendar.com) or twitter (@thejoefin).

Thanks again for using Ink Calendar.

Joe

P.S. If you are a digital artist using Ink Calendar and are interested in being paid for some promotional artwork please reach out and we can work something out.

Current Time and Bug Fixes in 1.18

Current Time and Textures

In the latest update there are two visible features added to the Week View. The first is a line showing the current time (of the current week). The other visible change is a texture given to calendar appointments to distinguish between different states of ‘busy.’ These textures mirror the ones provided by Windows for continuity and clarity. 

The current time indicator for the month view looks the same, but now will move to the next day if Ink Calendar is left open over night. In the same way the Week View current time indicator will move to indicate the current time when the app is left open. This makes it easy to locate where “NOW” is when glancing at a week view. 

Other than these changes I have made improvements to the way the Week View displays appointments. There was some odd behavior happening when there were several overlapping appointments. Also appointments sometimes not showing the correct end time when the appointment crosses over between weeks has also been fixed.

Thanks for using Ink Calendar. Let me know what you think and what you’d like to see improved.

Joe

The Custom Pen Gallery: part 3

Adding a new pen

Saving the pen gallery was not very complicated, but there were some unfortunate complexities. The major complexity was how to initiate a change to the pen gallery. The standard UWP InkToolbar does not provide any events relevant to if or when the user changes any of the tool’s drawing attributes.

When to save

Obviously Ink Calendar should save the Pen Gallery when the users adds a new pen, deletes a pen, or moves the location of a pen. However it is also important that changes to the pen’s properties get saved when they are changed.

The way I decided to trigger this save was on ink saving. This means when the user navigates or inks the SaveInk method runs and that would trigger the SaveCustomPens method to fire.

To keep Ink Calendar from saving the custom pen file every time ink was saved the beginning of the SaveCustomPens method checks to make sure there are changes to save. If there are changes then the current InkToolbar is converted into an array and saved to a .XML file.

Convert the InkToolbar into an array

Before the pen gallery can be saved to a file it is converted to a simple List<string[]>. This is done by iterating through each button and saving an entry in a new string array for the type of pen (ballpoint, highlighter, or pencil), the selected brush index, and the stroke width, and a Pen ID.

There is another method which takes the data from this type of array and adds InkToolbarCustomPen to the InkToolbar.

Saving the List to .XML

The next step was simple, pass the List<string[]> to a method which saves it to the app’s directory. DotNET has some very easy APIs for serializing data and saving it to a file.

public static async Task SaveCustomButtons(List<string[]> listToSave)
{
    StorageFile file = await ApplicationData.Current.LocalFolder.CreateFileAsync("CustomToolButtons.xml", CreationCollisionOption.ReplaceExisting);
    XmlSerializer serializer = new XmlSerializer(typeof(List<string[]>));
    using (Stream fs = await file.OpenStreamForWriteAsync())
    {
        TextWriter textWriter = new StreamWriter(fs);
        serializer.Serialize(textWriter, listToSave);
    }
}

This is a sample method of how I save data throughout Ink Calendar. Right now the data generated by the app is fairly simple and low volume. Eventually Ink Calendar could grow to a point where it needs a SQLite database but for now .XML does the trick.

Thanks for reading and let me know if you have any questions or comments. Next I’ll talk about how I enabled the pen gallery to be edited on all form factors.

 

Joe

The Custom Pen Gallery: part 2

Adding a pen gallery was simple at first but I decided to add some more to the custom tool button. In my initial attempt I would initialize a new InktoolbarCustomPenButton and set its properties in code then add it to the Inktoolbar.

While this did work it left the issue of having two pens of the same type and color but different size and not being able to differentiate between them. So I decided to make a custom XAML control for custom pens, custom highlighters, and custom pens.

I started with a user control, but then just made a custom control of type InkToolbarCustomPenButton. I could customize the content of each of these controls to match the default inktoolbar buttons. To find these symbols I used the awesome app Character Map UWP by Edi Wang (Store Link HERE). I needed the tool outline, the tip and top color, and the background fill.

I bound the fill of the tip and top color to the SelectedBrush property of the InkToolbarCustomPenButton. Then I bound the background fill to the background of the InkToolbarCustomPenButton. This is so when the size shape is big enough it won’t make the tool icon look transparent.

17 Resize Pens

For the size representation, pen and pencil use an ellipse and highlighter uses a rectangle which the fill is bound to the SelectedBrush property and the height and width both bound to SelectedStrokeWidth. With oneway binding the shape would change color and size as the user adjusted the pen options.

Now when the users clicks “New Pen” an instance of my custom control is created and added to the inktoolbar. Simple. Users could add as many pens as they wish. They are in a scrollviewer so they can all be seen with a quick flick.

Next is the challenge of saving and loading this custom gallery each time the app loads.

Joe

The Custom Pen Gallery: Part 1

In UWP there is a control called the InkToolbar. This is a control which binds to an InkCanvas and is an easy way for users to change the type, size, and color of their inking. Ink Calendar has used this control from day one but now it is getting some attention.

The UWP version of OneNote has a pen gallery instead of the standard InkToolbar control. This enables users to set several pens and easily switch between them, without tediously changing each attribute every time. I wanted to bring the same experience to Ink Calendar because I found myself using a only few different pens while planning my time. One was a medium thickness gray pen for crossing out days. One was a thin blue pen for writing down appointments. And finally one was a highlighter for blocking out chunks of days.

There where four key elements to making my custom pen gallery in the InkToolbar.

  1. Custom Pens
  2. Custom Pen Button
  3. Saving the gallery
  4. Editing the gallery

To make this control I had to create custom pens for the Ballpoint Pen, Highlighter, and Pencil. You cannot add more than one standard tool to the InkToolbar, you must make them InkToolbarCustomToolButtons. Each type of InkToolbarCustomToolButton requires its own InkToolbarCustomPen to define how the ink will display when that tool is active.

protected override InkDrawingAttributes CreateInkDrawingAttributesCore(Brush brush, double strokeWidth)
{
      InkDrawingAttributes inkDrawingAttributes = new InkDrawingAttributes
      {
          PenTip = PenTipShape.Circle
      };
      SolidColorBrush solidColorBrush = brush as SolidColorBrush;
      inkDrawingAttributes.Color = solidColorBrush?.Color ?? Colors.Red;
      inkDrawingAttributes.DrawAsHighlighter = false;
      inkDrawingAttributes.Size = new Windows.Foundation.Size(strokeWidth * 0.5, strokeWidth * 0.5);
      return inkDrawingAttributes;
}

I made three custom pens: ballpoint pen, highlighter, and pencil. I could have chosen to make the highlighter tip shape round instead of rectangular like the standard InkToolbar highlighter, but I decided to keep it consistent to how it has been. I could still add a new pen like a highlighter but more of a marker with a round tip.

Once I had all the custom pens I needed I started working on the InkToolbarCustomToolButtons. These controls inherit from InkToolbarCustomPenButton which enables them to be added into an InkToolbar. These buttons started simple but I made them a little more complex than the standard.

Up next… the InkToolbarCustomPenButton XAML.

Joe