Goal

To allow the user to reset tasks via the UI in the Taskmaster App.

Notes

Kicked off today by drawing an arrow in Inkscape. I want to use my own Icons, mainly because I want to be able to animate the SVG outputs to animate them with CSS to improve the UX when using the app.

The first thing I did in inkscape was head to

File/Document Properties

To change the document to have a size of 32x32. Since one of the key value adds of SVGs are that they are infinitely scalable, we can keep file sizes very small and still get clear and crisp icons.

Next I created a circle using the E or Ellipse tool, holding Shift to make sure that the circle retained its shape. I cleared the center of the circle by right clicking the circle and adjusting its Fill and Stroke settings to have a transparent fill and increased the width of the Stroke (Inkscape's name for the object's border).

Then I created a triangle for the head of the arrow using the polygon tool and rounded its corners to give it a smoother look. I positioned this at the top right of the icon space which served nicely as the arrowhead.

Then I just needed to negative select a small piece out of the circle so that the arrowhead could be more clearly seen.

I created a rectangle using the rectangle R tool and placed it near the arrowhead. Then I chose the Path/Cut Path option (CTRL + ALT + /) to remove that small section of the circle. This left me with a nice little arrow I could play around with for the user to refresh their page. I saved this SVG to my common staticfiles as

C:/Users/Billy/Desktop/DIMMiN/app/dimmin/static_common/img/reverse_arrow_icon.svg

The HTML code for this simple SVG seemed too complex, so I decided it might be fun to use Inkscape's drawing instructions to try and re-create the arrow in fewer lines of code. I was able to approximate it with the following code:

<svg width="32" height="32" version="1.1" xmlns="http://www.w3.org/2000/svg">

              <g id="layer 1">

                <path d="M 4.9355802,4.3653335 C 4.8219767,4.4635852 3.4719867,3.9590647 3.3300964,3.9098069 3.1882061,3.8605492 1.8159918,3.4200471 1.7877051,3.2725376 1.7594184,3.1250282 2.871341,2.2081629 2.9849446,2.1099111 3.0985482,2.0116594 4.1661414,1.043538 4.3080317,1.0927957 c 0.1418902,0.049258 0.3799576,1.4706437 0.4082443,1.6181531 0.028287,0.1475094 0.3329078,1.556133 0.2193042,1.6543847 z">

                <title id="arrow-head">arrowhead</title>

                </path>

              </g>

              <g id="layer 2">

                <path

                style="display:inline;opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.361;stroke-dasharray:none;stroke-opacity:1"

                  d="M 7.7822758,4.0633377 C 8.0234587,6.6418986 4.9721102,8.6625998 2.6917369,7.434492 0.37697266,6.441157 -0.01762615,2.9389893 2.0180641,1.4554759 3.5023633,0.2137942 5.9231766,0.51304526 7.0598168,2.0804556">

                <title id="arrow-tail">arrowtail</title>

                </path>

              </g>

            </svg>

But the positioning wasn't quite right (and the arrow appears to be quite small). I decided to just reference the asset and load the svg file in from the common Static Files via the following HTML:

<object
    type="image/svg+xml"
    id="refresh-arrow"
    data="{% static 'img/reverse_arrow_icon.svg' %}">
</object>

This made the arrow much larger and easier to see. ChatGPT helped me animate it too with the following lines of CSS:

/* Arrow Refresh Animation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
      to {
        transform: rotate(720deg);
      }
      to {
        transform: rotate(1080);
      }
}

#refresh-arrow {
    animation: rotate 500ms ease-in-out 1;
}

This animation makes the arrow spin around 3 times before it stops. I'd like to couple this with fading the background of a card back to its original white background. Now I just need to change the state when the arrow is clicked using a Javascript command.

I was having problems accessing the file so I had ChatGPT simplify the in-line SVG code to the absolute basics that were required. This inline SVG code was much easier to access and move around using Javascript. I could even alter / adjust the individual components of the arrow including the arrowhead and the tail. At first I could only click the arrow once to get the animation to play, but then I learned that I could clone the arrow, remove the original arrow element, then add the css animation class to the cloned element to simulate the animation every time the element was clicked. Overall though I now have full taskmaster functionality, yay! I pushed my changes to Production and of course the Static Files wouldn't load properly.

I found out that I could actually access the files used in my app via the following command:

heroku run bash --app dimmin

Then deleted the current static directory:

rm -rf static

and re-created the staticfiles via

python manage.py collectstatic.

The issue is that no matter what I do the staticfile doesn't seem to update. Even changing the style.css and script names to include versions doesn't change anything...

I think I finally found the root of all my staticfile issues when I was exploring the file structure through Bash. When I was looking at the static folder of my django project I saw a couple of old looking js/css files. Turns out that I had never removed those files from my github either, and they sat in the static folder. Even when running collectstatic, it wasn't going to replace those files in the static folder. I think that's why I've been having so many problems with the Task App and its ability to refresh staticfiles. I deleted the static folder form my project (which reduced total app size by about 25%, from ~68 mb to ~54 mb) and locally and ran python manage.py collectstatic

to re-compile the static files into my new static folder. I also forgot to update the relative paths to the scripts in the HTML so I got hit with the MIME Error that was another issue there whoops hahahaha. NOW IT WORKS AYYYYYYY!!!

That is a huge help, truly understanding how Static Files actually work. And would have thought?

The fact that I have a better understanding of how to control the Static Files on the DIMMiN App gives me a strong incentive to re-implement Floaty Notes... I might have to work on that after I finish this auto-refresh feature on my Taskmaster App

Results

• Created my arrow Icons using Inkscape
• Loaded those icons as objects into my HTML code and made sure they were correctly positioned in the Taskmaster App cards
• Created a CSS animation for the SVG so that it rotates when called
• Linked this animation to a Javascript event handler to allow the user to change the state of a task when the SVG is clicked
• Pushed to the DIMMiN App
• Figured out why the Taskmaster App was giving so many issues with Static Files.

Next Time

• Sort tasks so that checked in tasks are top ranked, unchecked tasks are in the middle, and completed tasks are put at the bottom of the page.
• Prevent users from resetting tasks that are already in the ready state
• Implement auto-reset on tasks based on timezone
• Add functionality to alter other parts of an individual task (whether it's private or public, whether it has been retired, etc.)
• Add ability to create new tasks to the UI
• Add ability for user to download their tasks from the site