Blog

Finally, Custom Views

From the first prototypes of Ink Calendar over two years ago I have wanted to add the ability to create arbitrary views representing specific projects or seasons. Now that time has come with version 1.25 of Ink Calendar.

Why use Custom Views?

Planning long term projects is never easy. Looking forward and plotting out when and how to get work done seems like it should be easy. Hopefully with Custom Views Ink Calendar can become a tool which makes long term planning easy and pain free.

At work I have a few long term projects which span several months. Being able to start a new view dedicated to this project enables me to see where I am and where I need to go. Not flipping through months but one unified view for everything.

Planning for a marathon? Planning travel schedules? Use a Custom View to see the schedule. Keep it as organized as you need. Be flexible and ink the way which feels natural.

How to use Custom Views

  1. Click the “All Views” button which opens a pane on the right side of the app
  2. Switch to the “Custom” section of the pane
  3. Click “+New Custom View” at the bottom of the pane
  4. Set all of the details as you want them and click “Done”
  5. Now the view you created will open and now be visible in the All Views Pane

This is the beginning of this feature and I plan to add more details and features to custom views over the coming weeks and months. Please let me know what you are most interested in seeing what is not working.

Joe

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