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.
Log in to leave a comment
The reflections tab turned out great!
What was added for the reflections tab:
Thats it!
Log in to leave a comment
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:
Log in to leave a comment
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.
Log in to leave a comment
Added:
Thats it for now!
Log in to leave a comment
This session I added:
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.
Log in to leave a comment
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:
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.
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.
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.
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.
Log in to leave a comment
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.
Log in to leave a comment
This session I just about finished the todo node.
A list of things I added/considered when designing and making the todo node:
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.
Log in to leave a comment
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!
Log in to leave a comment
tried to replace photo’s but it wouldn’t let me…
I worked on alot of stuff in this session so I’ll try not to yap alot.
Here is a list:
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 🙏🏻
Log in to leave a comment
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).
Log in to leave a comment
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.
Log in to leave a comment
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.
Log in to leave a comment
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.
Log in to leave a comment
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.
Log in to leave a comment
My friend recommended I use electron + vite + react. That lead me to do a little research on what it is, and what some of my other option were. In the end I decided to go along with it.
The set up was quite confusing and took me a while. I even got to the point where a Github file was too large to push and I didn’t know how to change it so I just reset my code. The second time around it didn’t take anywhere near as long.
Now it’s time to get into it, I can’t wait!
Log in to leave a comment
