There are fundamental form in the user interactivity and usability of NaNoE as it currently is. That’s the reason why I’m currently upgrading and adjusting it for a second version.
As you will note, this is not quite a planned project, there are several reasons and ideas behind why I would love to make it better as a novel writing application.
First: Let’s Think About It
For starters, I’ve used NaNoE to write over 100k words, it is definitely what I would love to continue using for the future of my writing. Sure, I should totally publish my first book before I get too worried, it just wouldn’t feel complete until I also enjoy the interface.
Having spent a lot of time in 2019 on a financial system that uses WPF I figured I could definitely improve NaNoE using the systems I introduced there.
Using the WPF I can make an entirely interactive application that can go through “states” we can use it in. One flaw of NaNoE V1 would definitely be the fact that you couldn’t go to the middle of the novel and add anything there inside NaNoE.
Sure, you could export to a document and write it there, it just defeats the purpose of NaNoE. It was meant to be an easier way to write within the novel, with simple additional convenient helping options.
This leads to the idea of making a map, how I end up implementing it is most likely flawed, however you should definitely understand it.
So this definitely adds the definition of a map. This comes from the idea of structure in NaNoE V1, we need paragraphs and chapters. We should have a manageable way of mapping them.
This would allow us to use the structure to go in to the 137th element in 2513 elements to add what we want there. This is somewhat just for it to be understood. Similarly, you can understand the Map starts at a specific point and ends at one.
We could in the future allow you to move elements up, or even down with ease. This can help with that moment you write a paragraph as suddenly realize “Joe should have opened this cupboard first.” Since it is mapped we can have a way we can insert a paragraph in a specific space.
This lead to another two ideas that can help.
This way we can add our own notes into the system, and bookmark a few spots for ease of access to find them again.
This leads to the idea behind how we can structure things in the code. We can take a data oriented approach to MVVM in our application. Using a different design approach we can make it easier to handle, add features, and minimize the design of code we’d need to make it easily usable.
Second: The Slow Approach
While I have tested it a few times with slightly different approaches we now have a simple approach for ourselves.
You will note I’ve chosen to make several structures
- Models
- View
- ViewModels
- A Data Section
– DB Management
– Navigation Management
– Commands for interaction
This makes adding, or using, any code quite simple and understandable. While it could have slight flaws already, it just makes it easier to manage creating things in the novel instance.
We use SQLite here since it makes it way easier to control the structure just like we want to. Sure, I know that we will need to add new Models and Views already at this point, for instance for the plot helpers we use in NaNoE.
I just felt I should rather focus on the initial interaction first. We need to be able to write a novel, it doesn’t matter what the novel is at this point, it would just be great to have the interaction for writing first. This will lead to new thoughts and ideas for the future of NaNoE V2.
On a more in depth view of why WPF is really awesome to use for the second version, it’s definitely going to be usable in more interactive windows and styles. We’d be able to have it as large, or small, as we ever want or need.
This brought an interesting idea for the way we draw the elements. I used HTML in NaNoE V1. While it felt like a nice idea, it felt slightly off for making the web view shown interact with the code.
Using WPF we can have an interesting way to bind code to the view. Data binding is really useful, it can lead to us having a nicer interaction between the code and the view.
<!-- Item Data Templates -->
<DataTemplate x:Key="tmplElements">
<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<StackPanel Margin="5">
<StackPanel.Resources>
<!-- Chapters -->
<DataTemplate DataType="{x:Type models:ModelBase}">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Label Content="Chapter" Foreground="Blue" FontSize="22"/>
</Grid>
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="23" />
</Grid.RowDefinitions>
<Button CommandParameter="{Binding ID}" Command="{Binding RunAddChapter}" Grid.Row="0" Content="Add Ch. \/" />
<Button Grid.Row="1" Content="Add Pa. \/" />
<Button Grid.Row="2" Content="Del Item" Background="Red"/>
</Grid>
<Grid Grid.Column="3">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Edit" Background="Yellow"/>
<Button Grid.Row="1" Content="Add Note \/" Foreground="Pink"/>
<Button Grid.Row="2" Content="Add Bookmark \/" Foreground="Orange" />
</Grid>
</Grid>
</DataTemplate>
<!-- Paragraphs -->
<DataTemplate DataType="{x:Type models:ParagraphModel}">
<Grid VerticalAlignment="Stretch" Grid.ColumnSpan="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock TextWrapping="Wrap" Text="{Binding}"/>
</Grid>
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="23" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Add Ch. \/" />
<Button Grid.Row="1" Content="Add Pa. \/" />
<Button Grid.Row="2" Content="Del Item" Background="Red"/>
<Label Grid.Row="3" Content="Num: " FontSize="12"/>
</Grid>
<Grid Grid.Column="3">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Edit" Background="Yellow"/>
<Button Grid.Row="1" Content="Add Note \/" Foreground="Pink"/>
<Button Grid.Row="2" Content="Add Bookmark \/" Foreground="Orange" />
</Grid>
</Grid>
</DataTemplate>
<!-- Note -->
<DataTemplate DataType="{x:Type models:NoteModel}">
<Grid VerticalAlignment="Stretch" Grid.ColumnSpan="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Stretch" Text="{Binding}" Foreground="Pink"/>
</Grid>
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="23" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Add Ch. \/" />
<Button Grid.Row="1" Content="Add Pa. \/" />
<Button Grid.Row="2" Content="Del Item" Background="Red"/>
<Label Grid.Row="3" Content="Num: " FontSize="12"/>
</Grid>
<Grid Grid.Column="3">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Edit" Background="Yellow"/>
<Button Grid.Row="1" Content="Add Note \/" Foreground="Pink" />
<Button Grid.Row="2" Content="Add Bookmark \/" Foreground="Orange" />
</Grid>
</Grid>
</DataTemplate>
<!-- Writing -->
<DataTemplate DataType="{x:Type models:WritingModel}">
<Grid VerticalAlignment="Stretch" Grid.ColumnSpan="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<TextBox Width="400" Height="200" HorizontalScrollBarVisibility="Disabled"/>
</Grid>
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="23" />
</Grid.RowDefinitions>
<Button Grid.Row="0" CommandParameter="{Binding WhereOnMap}" Command="{Binding RunAddChapter}" Content="Add Ch. /\" />
<Label Grid.Row="3" Content="Num: " FontSize="12"/>
</Grid>
<Grid Grid.Column="3">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Button Grid.Row="1" Content="Add Note /\" Foreground="Pink"/>
<Button Grid.Row="2" Content="Add Bookmark /\" Foreground="Orange" />
</Grid>
</Grid>
</DataTemplate>
<!-- Bookmark -->
<DataTemplate DataType="{x:Type models:BookmarkModel}">
<Grid VerticalAlignment="Stretch" Grid.ColumnSpan="1" MinWidth="610">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<TextBlock TextWrapping="Wrap" Text="{Binding}" Foreground="Orange"/>
</Grid>
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="23" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Add Ch. \/" />
<Button Grid.Row="1" Content="Add Pa. \/" />
<Button Grid.Row="2" Content="Del Item" Background="Red"/>
<Label Grid.Row="3" Content="Num: " FontSize="12"/>
</Grid>
<Grid Grid.Column="3">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Edit" Background="Yellow"/>
<Button Grid.Row="1" Content="Add Note \/" Foreground="Pink" />
<Button Grid.Row="2" Content="Add Bookmark \/" Foreground="Orange" />
</Grid>
</Grid>
</DataTemplate>
</StackPanel.Resources>
<Label Content="{Binding}" />
</StackPanel>
</ListView>
</DataTemplate>Through WPF we don’t need to hardcode the view for different data types, or their commands, we can just slowly get to the point we only ever worry about how the data is used.
Now this V2 Beta 1 will only be available after a few more weeks, this is just to share the ideas, look, and thoughts I’ve got on the interaction.
