Docs custom styling, Index docs and git buttons

[GeoDerp]

Docs

custom.css

Index

style.css & index.html

[GeoDerp]

@davidusb-geek , work in progress. It here if you wanted to check it out and add some input.

Index icon buttons are from: feather-icons - MIT license

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 87.63%. Comparing base (9d85851) to head (ef25551). Report is 26 commits behind head on master.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## master #211 +/- ## ======================================= Coverage 87.63% 87.63% ======================================= Files 6 6 Lines 1707 1707 ======================================= Hits 1496 1496 Misses 211 211 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[GeoDerp]

I'm probably pretty happy with the Docs side on things. I would like to spend some more time tweaking the buttons on the Index to be nicer.

[purcell-lab]

Might be useful to have a discussion about the index; purpose and target audience.

For a lot of advanced users with shell command and rest commands setup running MPC optimisation they tend not to use the index unless it is to check on the 24 results. Myself, I like to force an additional MPC run after I have changed some settings and want to see the effects quickly. The current index doesn't perform this role for me.

For a lot of initial users after installing and working through the configuration the index use the next thing they access, they press each of the buttons and don't understand the results as it's not clear when you push which button and indeed if you push all the buttons in sequence it doesn't do what you would expect. The new feedback and error messages being displayed on the index is fantastic so the more we can do in that regard the better. I think the initial users are the target for the index and so it should be optimised for their onboarding experience, everything else not required for onboarding should be hidden behind an "advanced" button so they don't press every button in sequence.

So assuming this is the main function of the index (certainly worth a discussion), what is the first step we want an new user to perform after they have completed the configuration?

The first button should have a descriptive text describing what will happen when you press the button and then give the user feed back when it occurs.

I suspect the first button we want the user to press after configuration is day ahead optimisation. The descriptive text could say something like "the day ahead optimisation button will run the optimisation once based on the values entered into the configuration page, after a few seconds the charts and table below should be updated to reflect the optimisation plan for your house for the next 24 hours".

I really like what you have done with the charts auto updating in the index after optimisation. So I think the publish data button is redundant and could be hidden under the advanced button. I also think the perfect optimisation is not something we want initial users to select so hide that also under the Advanced button. Similarly the input runtime parameters is definitely an advanced feature so hide that under "advanced"

So my ideal index for initial users has two buttons "day ahead optimisation" with a description of what it does and "advanced ", to help the onboarding experience for initial users.

[GeoDerp]

Might be useful to have a discussion about the index; purpose and target audience.

For a lot of advanced users with shell command and rest commands setup running MPC optimisation they tend not to use the index unless it is to check on the 24 results. Myself, I like to force an additional MPC run after I have changed some settings and want to see the effects quickly. The current index doesn't perform this role for me.

For a lot of initial users after installing and working through the configuration the index use the next thing they access, they press each of the buttons and don't understand the results as it's not clear when you push which button and indeed if you push all the buttons in sequence it doesn't do what you would expect. The new feedback and error messages being displayed on the index is fantastic so the more we can do in that regard the better. I think the initial users are the target for the index and so it should be optimised for their onboarding experience, everything else not required for onboarding should be hidden behind an "advanced" button so they don't press every button in sequence.

So assuming this is the main function of the index (certainly worth a discussion), what is the first step we want an new user to perform after they have completed the configuration?

The first button should have a descriptive text describing what will happen when you press the button and then give the user feed back when it occurs.

I suspect the first button we want the user to press after configuration is day ahead optimisation. The descriptive text could say something like "the day ahead optimisation button will run the optimisation once based on the values entered into the configuration page, after a few seconds the charts and table below should be updated to reflect the optimisation plan for your house for the next 24 hours".

I really like what you have done with the charts auto updating in the index after optimisation. So I think the publish data button is redundant and could be hidden under the advanced button. I also think the perfect optimisation is not something we want initial users to select so hide that also under the Advanced button. Similarly the input runtime parameters is definitely an advanced feature so hide that under "advanced"

So my ideal index for initial users has two buttons "day ahead optimisation" with a description of what it does and "advanced ", to help the onboarding experience for initial users.

Some good ideas. A tutorial implementation of index would be a great addition.

In terms of placing the buttons into a advance section. Defiantly can be done. Would have to see @davidusb-geek thoughts on the matter.

Myself, I like to force an additional MPC run after I have changed some settings and want to see the effects quickly. The current index doesn't perform this role for me.

Does the MPC optimization generate a graph displayed on the page? If so you could call the GET /template/table-template after the optimization action to get the html of the newly generated graphs.

Example:

      - type: iframe
        url: <EXTERNAL>:5000/template/table-template
        aspect_ratio: 50%
        title: EMHASS Graphs

Problem is this looks ugly without the styling

[purcell-lab]

In terms of placing the buttons into a advance section. Defiantly can be done. Would have to see @davidusb-geek thoughts on the matter.

Certainly want @davidusb-geek as well as other input as mine is just one viewpoint.

Myself, I like to force an additional MPC run after I have changed some settings and want to see the effects quickly. The current index doesn't perform this role for me.

Does the MPC optimization generate a graph displayed on the page? If so you could call the GET /template/table-template after the optimization action to get the html of the newly generated graphs.

MPC produces the same outputs as the other methods, just the inputs are very specific to your site.

I use Apex charts, which update in realtime to visualise what is going on.

I have a very kludgy MPC button on my dashboard, which serves the purpose. I could always change this over to a script button, which seems a lot nicer. I see HA 2023.3.beta has some interesting features, allowing user input for scripts at runtime, so that could also be useful for control.

Here is another site I helped setup, which is a lot nicer with the RUN scripts buttons, which I think I will adopt locally.

[GeoDerp]

Your setups always looks great. I have added the style sheet to the template.html for those who wish to go the iframe route.

[GeoDerp]

Last commit:

• Index.html diagrams are now dark with a invert filter
• Index.html tables are now rounded in dark mode

Will start finishing up the doc styling now

[GeoDerp]

@purcell-lab , I would recommend setting those ideas as git issues so they can be tagged as feature requests.

[GeoDerp]

Ill likely finish the rest of the styling tomorrow.

[davidusb-geek]

I suspect the first button we want the user to press after configuration is day ahead optimisation. The descriptive text could say something like "the day ahead optimisation button will run the optimisation once based on the values entered into the configuration page, after a few seconds the charts and table below should be updated to reflect the optimisation plan for your house for the next 24 hours".

I really like what you have done with the charts auto updating in the index after optimisation. So I think the publish data button is redundant and could be hidden under the advanced button. I also think the perfect optimisation is not something we want initial users to select so hide that also under the Advanced button. Similarly the input runtime parameters is definitely an advanced feature so hide that under "advanced"

Yes totally agree with these remarks. The best will be keep only the day-ahead optim button and hide the rest as advanced testing. I like those new buttons for accessing the docs and git. Adding the ideas as issues would be nice yes, this way they can also be added automatically to the github project space.

[GeoDerp]

@davidusb-geek , this PR is good enough to go. Will focus on @purcell-lab's recommendations to see how mutch I can complete for the rest of today.

[GeoDerp]

Closed due to duplicate in #212