Enhancement: Full Scheduling

[Enteleform]

This UI is perfect for figuring out daily routine schedules. The app would just need a few extra features to make it work.

For example, I recently started a biphasic schedule, which I entered into Google Calendar. Throughout the day, I receive notifications at the start of each event via the Android app, which helps me to stay on schedule.

The problems with creating the schedule in Google Calendar are:

• it's harder to visualize time intervals & relationships
• totals aren't calculated, so you have to figure them out manually
• its UI isn't optimized for iteration & experimentation

NapChart's UI handles all of those issues outstandingly.

 

Required Features

 

Individual Segment Labels

Each segment should have its own text label. EG: "Work", "Gym", "Eat", etc.

 

Supplementary Features

 

Export To Calendar

Ideally, this would export as an independent calendar with daily repeating events. This would allow the user's default calendar to remain isolated & unaffected.

An option for which days to repeat would be useful. EG: Schedule 1 @ "Mon - Fri", Schedule 2 @ "Sat - Sun"

 

Lane Rotation

The ability to rotate lanes independently would be very useful for syncing up sleep patterns to schedule events.

For example, I noticed that I get tired about halfway between each waking cycle of the aforementioned biphasic schedule. I'm now thinking about shortening the primary sleep cycle & adding in some naps to recharge mid-way through. A problem I ran into is that I had to figure out the optimal time to go to the gym (avoid traffic, avoid scheduled classes) while also keeping the rest of my waking hours somewhat compatible with the rest of the world. To solve this, I manually dragged the sleep schedule around as shown in the following screenshot:

 

More Colors

This would allow users to better organize the schedule.

Also, if the calendar API allows colors, it might be useful to allow users to manually define the colors so that they can control the visual appearance of the calendar.

[larskarbo]

This is a great issue, let me break it down into points

Individual Segment Labels

This is actuallly supported (in a hidden and unoptimized way). If you start typing when an element is already selected text will appear and follow the element. You will require a keyboard for this, we should have a better way to handle it.

Lane rotation

This is also supported! It might not be very intuitive though. You need to lock the lane

More colors and email export

Definetely features we should have! Especially email export is a feature that many users have requested and could be very useful.

As a time visualization tool, Napchart should definetely and ideally be more useful for scheduling weeks and months too. I have thought a good bit on how to do this, but it requires a good deal of development and thinking as it introduces some complexities.

[Enteleform]

Awesome, seems like a good amount of the required functionality already exists.

Here are some of my thoughts & expectations as a frequent user of many apps:

• The segment labels would be editable via double-click, which enters into an edit mode. However, being able to just type while they are selected is also convenient, just less expected & not as intuitive/apparent since it isn't as prevalent of a UI pattern. An edit dialog might come in handy if multiple segment properties are implemented at some point.

• The lock feature would simply prevent a lane from being edited. It's great that it actually freezes relative distance & allows rotation as mentioned in the OP though. Maybe there's a better way to communicate its effects? An alternative that comes to mind would be to have lock prevent the lane from being edited, and have some kind of rotation handle that is visible when a lane is selected.
  

 

---

 

I just finished putting together a new schedule using NapChart, and noticed a few issues caused by the volume of events in a full schedule.

As you can see, many of the labels & timestamps are overlapping and/or positioned in ways that obfuscates their relative context. It also makes it difficult to reposition segments at times.

Potential Fixes

• allow per-lane & per-segment control of label properties (font size, inside/on-segment/outside position, offset distance, visibility, etc.)

  • font/label related settings should be exposed for the interval length, start/end time, and title
  • the position property might pair well with empty lanes for padding

• a List view

Side Notes:

• a toggleable option to display time intervals would be a nice supplemental feature for the list view
  

• I edited a screenshot of NapChart's legend in the list view mockup. I think centering the colors in the legend will give a more streamlined & legible appearance
  

 

---

 

I ended up writing a script that I can throw into Chrome DevTools to get CSV exports. I tried to keep it organized and modular in case you want to extract any of it to implement it on the site.

gist.github.com/Enteleform/80974dddef78f931d081fe2ffd0714a6/ac158936f51a7bdabbad0b208b1bc00cf14cfd90

Currently not super familiar with the structure & frameworks of client-server web apps, I'm just starting to get comfortable with static web apps w/ Vue + Nuxt. Also have a few projects I'm in the middle of. Otherwise I'd try to dig into the codebase a bit more & submit some proper PRs. Might make some contributions down the line. Have some ideas for a native mobile app that would allow notifications to be fired directly from a NapChart schedule. I think that setup would be much more convenient than exporting events to some external calendar since you'd have fine-grained control of notifications & schedule manipulation, without the extra work of managing imports & exports every time you make changes.

Anyway, for now there's at least a workable solution to the exporting issue.

Features

• exports to Google Calendar's CSV specifications
• saves a zip file with a CSV file for all lanes, along with CSV files for each individual lane
  • zip file is automatically named with the convention:
    NapChart [yyyy-mm-dd@hh-mm-ss] ${napchart.data.metaInfo.title}
  • CSV files are named All Lanes.csv, Lane 1.csv, Lane 2.csv, etc.
  • all files are contained within a folder of the same name as the zip file to avoid naming collisions when unzipped
• events in each CSV file are ordered chronologically

Handled Edge Cases

• get accurate end-dates for segments that roll over midnight into the next day
• replace invalid file-name characters (from user-defined chart title) with _
• fallback title for unsaved & unnamed NapCharts
• escape segment titles that contain commas or quotes (otherwise results in a broken CSV file)
• do not export empty lanes

Drawbacks

Google's CSV import doesn't allow color, notifications, or repeatable events.

My current workflow is to prepare an empty calendar for each lane, then assign them a color & default notification of 0 minutes. I then import each of the generated individual lane CSVs to their corresponding calendar. Finally, I double click each imported event and set the repeat option to daily. The whole process took a little under 5 minutes for 32 events. Ideally it would be a one-click situation, but 5 minutes is still way better than the 30+ minutes I spent drafting a schedule manually before I came across NapChart.

Once the schedule is set up, it's not very easy to edit. Drag events do not affect repeated instances. If you want to make changes to all repeated instances, you have to double click the entry to enter the Edit view, make your changes, and then click All Events at the Edit Recurring Event dialog. It's probably more efficient to make your changes in NapChart, and then just delete the previously imported calendars & repeat the import process from scratch.

Notes

I'm pretty sure the get_Lanes function that generates the formatted data for the CSV output could also be used to provide data to the list view I mentioned above. At most it would maybe need some slight refactoring to allow a formatting provider parameter.

Also, another supplemental feature that I noticed would be very useful while making this is the ability to name lanes. This could be tied into the file naming of the exports, and also would provide additional context in the proposed list view.

[larskarbo]

Nice work!

To break it down:

The segment labels would be editable via double-click, which enters into an edit mode. However, being able to just type while they are selected is also convenient, just less expected & not as intuitive/apparent since it isn't as prevalent of a UI pattern. An edit dialog might come in handy if multiple segment properties are implemented at some point.

I agree that we need an intuitive way to edit the text (or other props, color?) of a single segment, however I am not sure if double click is a good way. Think mobile, it wouldn't work there.

The lock feature would simply prevent a lane from being edited. It's great that it actually freezes relative distance & allows rotation as mentioned in the OP though. Maybe there's a better way to communicate its effects? An alternative that comes to mind would be to have lock prevent the lane from being edited, and have some kind of rotation handle that is visible when a lane is selected.

This is interesting, I never thought of the fact that people might think that lock means 'can not be edited'. I think the solution here is visual aid to communicate the effects. A feature to prevent lane to be edited (non-interactable) wouldn't be useful anyways, would it?

As you can see, many of the labels & timestamps are overlapping and/or positioned in ways that obfuscates their relative context. It also makes it difficult to reposition segments at times.

allow per-lane & per-segment control of label properties (font size, inside/on-segment/outside position, offset distance, visibility, etc.)

• font/label related settings should be exposed for the interval length, start/end time, and title
• the position property might pair well with empty lanes for padding

The problem with labels overlapping and getting chaotic is a real problem. It prevents Napchart from being useful on bigger and more complicated schedules. However, I think the solution is not to make the user sit and manually edit font sizes and placements, but rather develop an algorithm to position things perfectly automatically. It is not easy, but I think its the only reasonable thing to aim for

a List view

This is actually a great idea, and something that is very achievable (much easier than drawing curves and paths).

CSV export

Your solution works really well for exporting csv. I am sure there are more user friendly ways to export directly to google calendar for example (with Calendar API) but we can think of that for the future

I put your work into napchart-website and added a button in the share tab.

Commit: https://github.com/larskarbo/napchart-website/commit/5d7f8eafabbf89bb56a41b45349e9c357f0f0fae

---

It is super cool if you want to contribute. This project is written using React and not Vue, but they share many principles. Also, native app would be nice. Let me know if you want to talk more ✨✨

[Enteleform]

I ended up updating the script to generate the CSV for a year, starting from the current date. I initially wanted to preserve the Edit Recurring Event functionality of Google Calendar, but both the process of setting up the recurring events manually & the editing of said events are time consuming & inefficient.

gist.github.com/Enteleform/80974dddef78f931d081fe2ffd0714a6/47d77c77202fd0cac36275af4c99ec1e2817a71e

If you decide to include the update, you should know that the process is no longer instantaneous. For my current schedule, which has 32 entries, it takes about 22 seconds to generate the zip file (i7 6700k @ 4.6 GHz, 64GB RAM). All Lanes.csv contains about 11.5k entries. That same volume of entries is being calculated a second time to get the individual lane CSVs. That could maybe be optimized to cut the calculations in half, but the way that the entries are processed would have to be restructured since the relevant data is currently generated transiently within map functions.

11.5k isn't a huge number, and all values aside from the start & end dates are already defined by the time the CSV generation loops are called, so I suspect that the performance speed is related to the creation of a ton of Date objects in _get_Lane_CSV_String and its calls to _get_EndDate. They're all transient though, so I'm not sure how that could be further optimized.

I guess if you decide to implement this, maybe include a progress indicator? IMO its much better than the first version, despite performance issues, considering that users can just import the CSV & have a ready-to-go calendar without having to do any additional work.

[Enteleform]

I agree that we need an intuitive way to edit the text (or other props, color?) of a single segment, however I am not sure if double click is a good way. Think mobile, it wouldn't work there.

IMO a double-click makes sense for desktop. It's pretty much the same in Google Calendar. Single click selects, click + drag changes the position, and double-click opens the edit dialog. Maybe long-press would be better for mobile?

 

A feature to prevent lane to be edited (non-interactable) wouldn't be useful anyways, would it?

¯\(ツ)/¯

 

I think the solution is not to make the user sit and manually edit font sizes and placements, but rather develop an algorithm to position things perfectly automatically.

👍

 

I am sure there are more user friendly ways to export directly to google calendar for example (with Calendar API) but we can think of that for the future

Agreed. I checked out the API briefly but it seemed like a bit of an undertaking, so wasn't the right choice to get something up & running quickly. Also, I noticed that there are some limitations, although I'm not sure what counts as a query or how likely NapChart would be to surpass the limit.

[larskarbo]

Hmm, I think I will keep the script as is for now. There should be a way to export recurring events. Maybe look into another format like the iCal format? (maybe gcal has support for it)

IMO a double-click makes sense for desktop. It's pretty much the same in Google Calendar. Single click selects, click + drag changes the position, and double-click opens the edit dialog. Maybe long-press would be better for mobile?

You might be right, we could even maybe differentiate between a single click/tap and a drag, where only clicking without dragging will show a context menu.

I spent some time and made a little consept sketch of a line view.

With some inspiration from Google Calendar. We could make Napchart feel more like a calendar (at least in line view) while still preserving the way it works now.

One question I don't yet know the answer of is the lanes vs colors question. Should people organize based on lanes or colors? It doesn't make sense to create a seperate lane for sleep and activities if the elements never collide (or does it?).

I do like the idea of categorizing events based on color (and show the text beside the color/duration), but do we want people to make a descriptive name for both a lane and a color? (in the example named only lanes)

---

I also really want to implement user accounts in Napchart where you can save your schedules and tweak them when you need it. This way you can keep track of your different schedules and use them as you want.

Another idea: Right now Napchart is all about the 24 hours routine. What if you could make different 24 hour schedules like now, but you could also go into a week view, or a real calendar view and apply your different 24 hour schedules and plan for a longer time. This way you could also account and include one-time events

[Enteleform]

I spent some time and made a little consept sketch of a line view.

Looks good!

 

I also really want to implement user accounts in Napchart where you can save your schedules and tweak them when you need it. This way you can keep track of your different schedules and use them as you want.

This sounds awesome. I currently have a manually managed folder of NapChart bookmarks, so that would be a huge improvement.

 

Another idea: Right now Napchart is all about the 24 hours routine. What if you could make different 24 hour schedules like now, but you could also go into a week view, or a real calendar view and apply your different 24 hour schedules and plan for a longer time. This way you could also account and include one-time events.

Sounds like a major overhaul, but definitely could be very useful. The overall design depends on whether this is meant to be a full replacement for something like Google Calendar, or if it's meant to be more of a rapid-schedule-designer which can export to 3rd party scheduling applications.

I think some features to consider would be:

@ both scenarios, also applicable to current app

• the ability to rotate selected items only
  • This could replace the current implementation, paired with a way to select the entire lane
  • this should also work across multiple lanes (both single event selection & entire lane selection)
• a toggle-able way to visualize conflicts/intersections across lanes
• when exactly two events are selected, show the interval of time between them

@ full scheduler scenario:

• two classes of events
  • relative: can be rotated
  • absolute: fixed time, cannot be rotated
  • should absolute & relative events be able to coexist on a single lane, or should lanes also have relative & absolute classes?
• 24-hour cycles can be saved as templates, which can be assigned to days
  • templates are stored & edited in their own section of the app, not in the active schedule view
  • each day, the displayed schedule would be a copy of the assigned template
  • if the active template is changed, the changes will automatically be reflected in the schedule view (along with a notification to warn of the pending changes)
  • If the schedule view is altered, it will only affect events for that day, and the template will remain unchanged. This will be useful if, for example, you need to shift the schedule to make room for an unexpected event.
• weekly/monthly templates
  • same as above, but for entire weeks/months
  • Would be useful for doing something like 4 weeks @ high-intensity schedule, 1 week @ recovery schedule. Might be nice to be able to draw that out manually on a full-year schedule, and/or have an option to repeat the 4-week/1-week cycle indefinitely.
• the ability to insert an event and shift all items on [current lane, all lanes] forward
• the ability to delete an event and shift all items on [current lane, all lanes] backward
• TTS notifications that read the event title

 

Maybe look into another format like the iCal format? (maybe gcal has support for it)

Just looked into the iCal spec & it does support recurring events. This works out well since GCal allows iCal import. I can refactor the script to defer output generation to ical-generator.

Unfortunately, it does not have a color field, which leaves us with a limitation that I'll revisit below.

 

One question I don't yet know the answer of is the lanes vs colors question. Should people organize based on lanes or colors? It doesn't make sense to create a seperate lane for sleep and activities if the elements never collide (or does it?).

I do like the idea of categorizing events based on color (and show the text beside the color/duration), but do we want people to make a descriptive name for both a lane and a color? (in the example named only lanes)

With the current color export limitation, your options are:

• Import the All Lanes schedule into a single calendar. All events will share the same color, regardless of assigned colors in NapChart. The imported iCal can potentially be edited to update the colors of individual recurring events.

• Import each individual lane into a separate calendar. This allows each calendar to have a unique color, which will be automatically applied to all of its events.

Additional Factors:

• The color grouping in NapChart provides time totals, which is very useful for creating balanced schedules.

• Limiting particular events to a single lane gives the benefit of being able to see the interval in between two events. For example, the schedule I posted has a dedicated Eat lane, which allows me to gauge the durations of my intermittent fasting cycles.

• In the individual-lane-export scenario, lane names would streamline the importing process so that users don't have to cross-reference Lane ${lane.number}.ical with NapChart to see what the contents are. We can instead generate ${lane.name}.ical.

• Even if the individual event color issue was handled at some point, perhaps by the GCal API, individual lane exports will still be useful. For example, you can hide or disable notifications for a particular subset of your schedule.

Considering the current limitations & variance in user-to-user usage, I'd say that both color & lane organization are useful for different situations.

[Enteleform]

I'd like to update the code to implement the iCal exporting.

The original intent of the code I posted was to be a paste-and-run DevTools script. I didn't anticipate that you'd implement it so quickly. As such, I can remove the one-file limitation, organize the code a bit more nicely, and create some proper data classes to be used during the conversion so the code is easier to reason about.

As I mentioned, I'm not quite familiar with the client-server paradigm. How can I run a local version of NapChart if I clone the repo?

 

Update

Remembered that you're using React & checked the NPM scripts. Tried running dev, but got the following error:

ERROR in
./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js??ref--1-2!./client/styles/index.scssModule

build failed:
Error: Node Sass does not yet support your current environment:
Windows 64-bit with Unsupported runtime (64)

Checked the sass-loader issues & they said it's an issue with node-sass.

Not sure where to go from here.

Also, are there any packages that I'd have to install with the -g flag?

[larskarbo]

Ok, we need to figure out the way this should be.

Here are my thoughts:

Napchart should be able to export to iCal or csv to be added to a calendar. But it shouldn't be the main workflow for the user. Let's not design this app around that, but rather try to prevent the user from going there in the first place. Ok, so the user needs notifications. Let's build an app! The user wants to get a bigger picture and have some more views (week, month, year), see me next point ↓↓↓↓

Full scheduler. We don't need to compete against gmail, Napchart would be a tool with a whole new mindset about how to organize time. We could experiment with beautiful and intuitive ways to plan your time and visualize it.

We could also expand usefulness to include more usecases than only polyphasic sleepers. People with complex schedules, people with different timezones wanting to sync, people making bread in the evening and need to know when it finishes or people that only want to visualize their time in a fun way.

24-hour cycles can be saved as templates

Would be cool

I also aggree on your points about colors and lanes. Being able to see distances between elements is one of the key functionalities with Napchart IMO so we should always keep that in mind

[larskarbo]

As with running Napchart locally, it should work, but probably doesn't because you use windows (and I don't).

I am not sure why node-sass doesn't work in Windows, but it is probably because it needs to be built from source.

My tip: Start using WSL with ubuntu inside windows for development! I did that myself when I had a PC, and never had to deal with sad windows dev problems again

That being said, we need to make the onboarding easier to prevent things like that for happening, but it will take some effort (probably drop sass in the long run)

[Enteleform]

I agree with your points about the direction of the app. 👍

It might also be useful to provide some sort of compatibility with existing calendars. An example: You subscribe to some event (EventBrite / MeetUp / some work event / etc.). You want to track the event along with all of your time management stuff, and the event should also reflect any updates made by the maintainer.

On the topic of creating a new mindset for time management: the planning of non-24-Hour schedules would also be interesting to try out. I'm currently working on syncing up to a 24-hour cycle just to establish some consistency with the rest of the world, but for the last few years I had a fluctuating schedule that weaved in & out of day/night cycles.

 

We could also expand usefulness to include more usecases than only polyphasic sleepers.

I think the app is already there, it's just a matter of making it easier for users to incorporate the schedules in their day-to-day lives. I've already found the circular layout immensely useful for planning out my entire sleep/diet/fitness/productivity schedule. People who are into intermittent fasting would definitely find this very useful, since they're usually aiming to keep their eating restricted to a certain time window, and NapChart already provides a way to visualize that.

 

Another idea - the ability to view intervals between selected items. I imagine a scenario where you can make multiple selections (individual elements, entire color groups, etc.), and then you click on a Show Intervals button, and the selected elements animate into a single transient lane which displays the intervals. This would be useful for items that live in separate lanes, or that have other events in between them.

[Enteleform]

I think I managed to resolve the node-sass issue by installing some build tools

I can't figure out how to access the app though. Tried localhost:3000, but no luck.

[larskarbo]

I can't figure out how to access the app though. Tried localhost:3000, but no luck.

I am in the process of simplifying the dependencies and build process by using create-react-app so I hope your issues will be solved then. You can try running npm run build:dev:watch and node server/server in two different windows

[Enteleform]

Just tried node server/server & nodemon --watch server server/server, both result in the following error:

No SERVER_URI env present
internal/modules/cjs/loader.js:718
  return process.dlopen(module, path.toNamespacedPath(filename));
                 ^

Error: The specified procedure could not be found.
\\?\D:\Temp\napchart-website-master\node_modules\canvas\build\Release\canvas.node
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:718:18)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (D:\Temp\napchart-website-master\node_modules\canvas\lib\bindings.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (D:\Temp\napchart-website-master\node_modules\canvas\lib\canvas.js:13:18)
    at Module._compile (internal/modules/cjs/loader.js:689:30)

[larskarbo]

Ok, so I am in the middle of a process of redesigning the project structure of napchart. I want to make it simpler, and remove all the server/api/db logic from the client logic. Try to keep dependencies down and make onboarding easier. napchart-website might be split and merged into napchart and napchart-api or something.

Check out branch v8 of this project. It uses create-react-app and firebase as database.

Edit: The csv export feature isn't there at all, but all other features are synced. Feel free to add that code and play around

[Enteleform]

Just tried out the v8 branch. Made it further than before (localhost:3000 is accessible), but got the following error:

Failed to compile
./src/components/Editor/Chart.jsx
Module not found: Can't resolve '../../draw' in 'D:\Temp\napchart-website-8\src\components\Editor'

Seems like there's nothing in the draw directory. You mentioned that you're still in the middle of refactoring though, so I'm assuming it's that. Let me know when it's ready to go & I'll give the iCal export feature a shot.

[larskarbo]

My bad! I used a symbolic link there, should be working now 🎉