Helios

Worked to improve user experience.
The main idea behind this was cloud saving, so a user wouldn’t have to worry about ever losing their data as long as they were signed in.

• Used Supabank to set up the cloud database (tbh I’m not to sure how this works, I had to use youtube and friends alot to help with this)
  • Users can login, create an account, reset their password, manually cloud save
• Will auto save every 30 seconds, when closing a node and when closing the app

Keyboard shortcuts! For all of you speedy freaks that use fast shortcuts to save seconds of your day I have catered to you
Shortcuts for:

• Open settings – Cmd/Ctrl + ,
• Toggle side panel – Cmd/Ctrl + B
• Quick add todo modal – Cmd/Ctrl + Shift + A
• Open Todo node – Cmd/Ctrl + Shift + T
• Open node by position – Cmd/Ctrl + 1-6
• Close modal/panel/node – Esc
• Search todos – Cmd/Ctrl + F

Added some basic starter items for users to get a rough idea on how to use the app:

• Example todos
• Example focus tracker subjects
• Example timetable blocks

Also did a bunch of bug fixing, code cleaning, general bug fixes (I didn’t even know really existed till I had a user let me know about it)
A couple off the top of my head:

• App would load before taking the cloud save data (now waits for cloud)
• App theme preference wasn’t saved in cloud save data (now fixed)
• A bunch of grey screen errors

Probably last devlog before shipping, wish me luck in getting a flipper!

Worked on user feedback today.

• Timetable now has every hour of the day
• Timetable now can be swapped between 24hour and 12hour time
• Timetable has priority blocks, these blocks are indicated with a small star in the top right corner and the user can receive an email the day before and the morning of this event.
  • Done through a gmail account, was a bunch of work to set up because I also added verification so users can’t just add a random persons email
• Added a devlog button so users can see what has been added (currently just links to the github, I’m lazy :P)

Ahh, I once again forgot to devlog…
I mainly worked on feedback I had gotten, since I want to make this app the most user-friendly as I can.

• The node movement looked really janky before, so I spent a bunch of time completely reworking the system, so that instead of shuffling through a grid with a set order, it will swap with the node in that position
  • I also changed the animation of it, before it would just clip to the new position, but now it kinda glides over
• A friend was using the app, but forgot to start a focus tracker seesion at the start of his study, so he said it would be useful if you can add a ‘log’
  • At first I considered how this would be used, since ‘cheating’ can occur. But it is pretty easy to ‘cheat’ in other ways as well, and you are only cheating yourself.
• A bunch of small things, like fixing contrast on buttons so they can be seen in dark mode

Here is the big one:
Complete optimisation for mobile, because I knew a screen that just said mobile isn’t compatible is a crap ‘fix’.
Now is a device that won’t work, the Nest Hub, but thb I don’t even know what it is, so it couldn’t be that popular right?

• Changed scaling for nodes,text,icons, etc when on a mobile device
• Made it so on mobile devices (tall than they are wide) the grid of nodes will be 3 rows of 2 instead of 2 rows of 3
  • This fixed alot of issues, but in alot of cases the text and icons would still squish together
• A whole load of testing, removing bad tests, and testing some more, then bug fix…

Yet another devlog full of stuff because I forgot to do one 3 hours ago, sorry guys.
Here is what has been added/changed!

• UI
  • The main piece of feedback I got was to improve my UI and make it more fun, so I added some shakes and waves that move around
  • I also added a palette setting in the settings which allows the user to change the main colour scheme of the app
  • Nodes now tilt on hover to add more character
  • Also, as the day goes on, the app will get warmer. In the morning it will have cooler toned colours, and in the afternoon/night the tones will be warmer (meant to help with blue light before you go to sleep)
• As the app has been published to a domain, it needed some constrictions to ensure it wouldn’t break
  • The main issue I have is with sizing and mobile and windows
    • Mobile: the screen is too small so the nodes would squish and it would be a mess
    • Sizing: if a window was too small it would squish
    • Windows: if the device wasn’t Apple it would load the SF symbols since it is an Apple exclusive font
  • To fix this I added a screen where if the window is too small it will say it is too small and too increase window size, I also used new symbols for windows users
• Peaceful display QOL: added tutorial to know that you can click on the clock for more options, also made it so clicking anywhere off the options would close it for QOL and ease of use
• Reset tutorial button in settings
• Settings cog on hover will do a 180˚ rotation for style and UI feedback improvements
• Confetti on todo completion

It doesn’t sound like alot here, but trust me, it was alot of work…

Just did fixes today.
Here is the list of bugs/fixes I made:

• In timetable, saturday was half cut off

• Added a highlight yo the time that the timetable is on for clarity

• Timetable blocks now fit the whole width of the column

• Made the timetable a bit bigger

• Small blocks now work in the timetable

• In the reflections node, if a journal log isn’t recorded it will now show all other dates, not just say none exist

  • The system now shows all of the dates in the calendar, but if a journal log or questions were answered on that day it will appear with a tick

• UI changes to todo to make it clearer and more aesthetic

Alot has happened since my last log and I’m sorry for leaving it so long. The problem I found was that I was in between coding alot of stuff and a bunch of things wouldn’t work until it was done.
Here is a simple list of what I added/changed:

• The focus tracker
  • Can add ‘subjects’ and record time spent on them
  • After pausing a ‘subject’ it will keep the time spent on it (for easy to use and clarity), and when the day ends it will reset
  • Stats! It will remember how much time you spent doing work on each ‘subject’ for different time frames: Daily, weekly, monthly and yearly. This information will be displayed in a pie chart.
  • Links to pomodoro, in the pomodoro node you can choose a subject to add time to and it successfully links to the timer and stats
• Changes the grid (removed the calendar and goals node), i realised the calendar node wouldnt have much use with a already working timetable node and the goals node would be too hard to track automatically for custom goals
• Consistent UI, changed almost all close icons/symbols to a similar one, it still needs work though
• Lots and lots and lots of bug fixing :(

But after all of this work, it works pretty well.

Debugged a bunch of stuff and tried to streamline alot of stuff as well.

Example: When opening the timetable tool it would always show the earliest time (5:00am) but now it will center to the current time so it is easy to navigate to what is on next and after that.

The reflections tab turned out great!

What was added for the reflections tab:

• Little information icon
  • Warns about bad mental health, and that if someone is relying on this tool they should also seek proper help since bad mental health is a serious issue.
• Questions
  • 5 daily questions to gauge your general mood
  • Once completed they will disappear
• Journal
  • Can write a journal log with a title and body text
  • Text will stay, and any changes will result in edits in the archive tab
• Archive
  • Can search any day you have completed a journal log or questions and navigate ot them to see your past logs
  • Can delete past logs or questions

Thats it!

Alot has happened since my last log, and I’m sorry for not splitting this up. But the timetable required alot of work.
List of additions:

• New icons, I always intended to change the emoji’s (they were placeholders) so I did that here.
  • I used SF symbols for the new icons, it is a mac app and it has a bunch. Definitely check it out.
• Working timetable
  • Weekly, fortnightly, and monthly scheduling
  • Easy to set up blocks
    That is the very basic run down of what was added. I had to do alot of debugging with the sidebar. As it was, it would shift the whole container when pressed and squish the whole screen and nodes so I essentially redid it.

I didn’t like context tab name (as I mentioned) so it has been changed to “on now”, and instead of extra context it will display what is next.

I also though the todo area could be improved. Since in the todo node you can chose dates and subheadings. If the tab couldnt do those things then there was no point in it being easier/faster. So I added those things.

Added:

• Context tab (I have to think of a new name XD)
  Basically, you press the tab on the side and it will open up when you have now and what you have next, some information on it (if there is any) and the option to add a todo task
  When this window is open, only four apps will be visible and the user can scroll up/down to see the others. Apps cant be re-ordered in this orientation and there is no back button (because it became too cluttered).

Thats it for now!

This session I added:

• more of a framework for the new nodes
• nodes can now be re-arranged (extra user customisation)
• node move is triggered by a button that appears when hovering over a node
• completely rethought the design mainly the fonts, I realised that I was using like 5 different fonts and it just wasn’t cohesive. So in sticking with the apple theme I made them all similar

I doesn’t sound like much for almost 2 hours of work, but alot of time was me trying to find a good way for everything look. I also wanted to set up a solid framework for the new nodes.

I decided that for this project to really stand out for the user, especially when Notion and other apps are an option it needs to have better/unique features.
So I chose to add 4 new nodes:

1. Calendar
   Will sync to the timetable. Work block can be linked to the pomodoro app so that when clicked on will take the user to the pomodoro node.

2. Focus Tracker
   See how on task you are in a few categories, as of now these categories are how much work is completed before deadlines and pomodoro usage.

3. Reflections
   Can reflection on how the day was, how the weather was, how the people are you made you feel and journal. A wellbeing node. Will think about more things for the user to reflect on.

4. Goals
   User can set goals and see how they are tracking with them. E.g. might be “I want to always complete my work before the date it is due.” and the node will try to track that.

With these the user can do alot more on this app.

Of the new nodes, my favourite is the reflections. With a large workload and pressure, I think good wellbeing is the most important thing to consistency deliver good work and still enjoy yourself. Journalling is regarded as one of the best ways to help with wellbeing so I decided to include that in the app too.

Right now it is a bit buggy, and for now this work has been done to scaffold these new features.

I realised that when completing a task, it wound’t actually do anything, so I fixed it up.

When completing a task, it will slowly fade away, if the box is unchecked in that period it won’t delete (it will cancel the completion). Also, the other tasks will move up to take its spot.

This session I just about finished the todo node.
A list of things I added/considered when designing and making the todo node:

• I wanted it to be easy to see what work the user had coming up.
• Work could be listed under ‘subheadings’ if wanted, in a schooling context these subheadings could be the subjects like seen in the photos.
• Dates to stay on top of deadlines
• Can remove todos and subheadings
• Can mark them as completed
• I wanted the left side to have the ‘subheadings’ (as can be seen) because that would allow the rest of the screen to show the todo’s which would increase readability

It still has a little refining to happen in order for it to be of an acceptable standard.

**Side thing I changed. I wasn’t happy with how the windows/nodes would open, so I changed it to an instaneous open ‘animation’ rather than a slide or fade effect.

Alot has happened since my last devlog (and I’m sorry for leaving it this long).
A little list of what has been added/changed:

• Pomodoro looks better now (I still think I’ll want to change it a bit to look more Apple-esque)

• Added light/dark to automatically match the devices choice

• Planned and executed on a very basic ‘Peaceful Display’, 2 modes, winter and summer.
  In winter: Snow falling, snowy hills
  In summer/autumn/spring: leaves falling, sun, grassy hills

• If the user clicks on the clock on the ‘Peaceful Display’ it will bring up a bunch of options for the clock and background. E.g. you can change the clock font, font color, 24hr time or 12hr time, and what season you want it to be.

A bit of context around the ‘Peaceful Display’…
When studying or trying to do work, there are so many distraction all around us (phones, laptop, etc…), so this display is an attempt to remove one of these distractions so that when someone is working, they can flip on this display and it will show them the time rather than lure them to distractions.

That’s it for now, time to work on the todo node!

I worked on alot of stuff in this session so I’ll try not to yap alot.
Here is a list:

• Fixed the dark mode
• Added basic node infrastructure
• Made it so node hover glow was based off the option in settings
• Pomodoro basic function (needs improvement in regards to UI)
• Debugged, alot 😭
  That’s about it.

The main thing that took me a while here was fixing issues I had accidentally made while coding at the beginning. For example, the MainScreen app container actually went from the left wall of the app container to the left wall of the screen which was bugging alot the UI.

I want to add more personalisation, please let me know if you think anything should be added 🙏🏻

When testing my app, my friend commented on how he hates the sound that the StartupScreen makes, at first I was just going to dismiss the thought but I realised that it would be a real let down if an app I liked played an annoying sound all the time. So I made a setting that allows for the noise on startup to not happen.
Also, I wanted there to be a way for users to go back to the StartupScreen, so I introduced a back button. (It also changes with dark mode).

This session was finalising the settings window for now and embracing my perfectionist self.

For the settings tab, I wanted a feature that made it a bit more personal to the user and to add a little flair, for this I decided on a glow effect (idea sparked from the shadows of the app container), this glow effect would essentially just be a coloured shadow around the main screen app container. I give the user a few options for colours: none, blue, red, orange, green, purple, and pink.

As for the second part in this session, I wasn’t 100% happy with the way the app felt. I really want this project to do well so I spent a good amount of time fiddling with margins, padding, the dark and light mode as well as some other things to truely make the app feel alot cleaner and I think I’ve managed to achieve that.

Lastly, for this log, I’d like to know if you guys have any settings suggestions for me that you like to see added.

After creating the main screen I realised I much preferred the app container look, and that I wasn’t vibing the the ‘Bump.wav’ sound effect. So I did what any reasonable person would and changed it.

It wasn’t exactly a difficult change but it contributed alot to the design imo.

After adding the app container I made changes so that the Helios title and logo reminded in the middle of the page (since after adding the container it shifted them to the right for some reason).

The new sound plays a little earlier and I also made the screen fade a bit longer so the sound wasn’t getting cut off. It sound more like a synth which suits it better.

Also, since both pages are now on app containers of the same size, it fades alot cleaner.

After finishing the startup screen, the next obvious step was to do the ‘MainScreen’ which is where everything will be. I was at a bit of a loss for what I wanted to add first, but after a bit of time I managed to organise my thoughts, i wanted a Chrome-ish aesthetic, this can been seen in the top bar.

The ‘Type something…’ area was a random addition I decided to make to learn a bit more, it has a 50 character limit, and it will show you make many characters are left as you type (then it will disappear). This is just an area where someone can write a short message for themself, not extremely useful but it adds to the looks.

Next I add the settings cog, I had alot of problems with this where it wouldn’t load on the page and I spent alot of time trying to fix it. In the end I just did a 140px offset from the right side which works for now. It has hover effects and will later be used for the settings options.

One of the bigger aesthetic choices I made was to do the app container, especially with the shadows, it adds a nicer look to it and grounds the layout. I also made sure to add a Helios name at the bottom which fades in and out.

For this session I just worked on the startup page. I wanted the startup screen to have the name “Helios” obviously, but also the app icon and a click to start guide. To make this feel authentic I made it so that the Helios title has a small fade it as the app opens, and the prompt to “click to start” is on a slow cycle of fading in and out which makes this screen look really nice.

As for the transition to the main page, I wanted the logo to move around or do something. I decided on a little jump, so that as the logo lands the startup screen will fade onto the main screen. For this I did a simple transition and animation.

But I found when I played it back it lacked something, there wasn’t a good feel to it. So I decided to add a little Thump sound effect as the logo landed back down and thus it would also signal the page to fade away. I did this and it all came together really well.

My friend recommended I use electron + vite + react.

The set up took me a while. I forgot to do the Gitignore and so the Github file was too large to push and so I just reset XD.

Now it’s time to get into it, I can’t wait!