FYI: Adjust pH and temp graphs to your environment

[JFReyes]

Hi all:

These are the first modifications I made to the reef-pu GUI. It has to do with the pH and temp graphs. The reference is the Recharts library used by the authors.

First thing is the pH scale; as I keep a reef aquarium, pH measurements below 7 or over 13 mean disaster. But the default scale starts at 0 (zero) and to me it's difficult to visualize a pH value with such a compressed scale starting from zero to infinity. Therefore I decided to rescale the Y-axis between 7 and 13. Now the graph is more appropiate. To change this, edit file  frontend/src/ph/chart.jsx; in the render() method, change line 41 (may be different in your setup) from:

<YAxis  />
 to:
<YAxis type="number" domain={[7,13]} />

I live in the tropics. Therefore temperatures  (even with climate change and also my chiller cannot go below 68 Fahrenheit) below 70 degress or above 90 degrees (where my aquarium would become fish soup) are not realistic. So I changed frontend/src/temperature/reading_chart.jsx, again in the render() method line 42 (may be different in your setup) from:

<YAxis  dataKey='value' />
 to:
<YAxis dataKey='value' type="number" domain={[75,90]} />

After rebuilding the code (please refer to the development environment post) you'll see the following pH/temp graphics:

(The forum software doesn't like large, embedded pictures so I'll attach them, probably to follow up posts.)

Be aware that the changes will not only change the visualisation in the dashboard, but also in the individual pH/temp modules.

After making changes you'll need to rebuild and redeploy the code to the RPi, so follow the instructions in the software development environment guide.

Next I will attempt to modify the X-Axis so that the displayed measurement are not cramped together.

Regards,

José

---

[quote='JFReyes' pid='5843' dateline='1604105183']
Hi all:

These are the first modifications I made to the reef-pu GUI. It has to do with the pH and temp graphs. The reference is the Recharts library used by the authors.

First thing is the pH scale; as I keep a reef aquarium, pH measurements below 7 or over 13 mean disaster. But the default scale starts at 0 (zero) and to me it's difficult to visualize a pH value with such a compressed scale starting from zero to infinity. Therefore I decided to rescale the Y-axis between 7 and 13. Now the graph is more appropiate. To change this, edit file  frontend/src/ph/chart.jsx; in the render() method, change line 41 (may be different in your setup) from:

<YAxis  />
 to:
<YAxis type="number" domain={[7,13]} />

I live in the tropics. Therefore temperatures  (even with climate change and also my chiller cannot go below 68 Fahrenheit) below 70 degress or above 90 degrees (where my aquarium would become fish soup) are not realistic. So I changed frontend/src/temperature/reading_chart.jsx, again in the render() method line 42 (may be different in your setup) from:

<YAxis  dataKey='value' />
 to:
<YAxis dataKey='value' type="number" domain={[75,90]} />

After rebuilding the code (please refer to the development environment post) you'll see the following pH/temp graphics:

(The forum software doesn't like large, embedded pictures so I'll attach them, probably to follow up posts.)


Be aware that the changes will not only change the visualisation in the dashboard, but also in the individual pH/temp modules.

Next I will attempt to modify the X-Axis so that the displayed measurement are not cramped together.

Regards,

José

---

[Rob F]

Very cool, that will look better. The temperature was auto scaling but it was lost in the last update. Next update it'll probably be back to auto same with pH.

Not sure what happened with that image, haven't seen that, I removed all those characters from your post. I just increased the file sizes allowed 2mb, they were 500kb - 1mb.

[JFReyes]

I made further changes to the pH and temp graphs: 

1) adjusted the vertical scales on both to better reflect my environment (pH between 7 and 9, temp between 75 and 85 degrees)
2) changed the pH readings -- both the current and tooltip -- to display only 2 decimals

The changes in the code are:

frontend/src/temperature/readings_chart.jsx line 42

Code:

<YAxis dataKey='value' type="number" domain={[75, 85]}/>

frontend/src/ph/chart.jsx

For the pH range:

Code:

<YAxis dataKey='value' type="number" domain={[7, 9]}/>

For the pH reading value, just below this code:

Code:

const metrics = this.props.readings[this.props.type]
let current = ''
if (metrics.length >= 1) {
  current = metrics[metrics.length - 1].value
}

I added this code snippet:

Code:

// *** display only 2 decimals for current value
    if (current !== '') {
      current = parseFloat(current).toFixed(2);
    }

Also changed the tooltip component call in the return() block of the render() method, from <Tooltip /> to:

Code:

<Tooltip formatter={(value) => parseFloat(value).toFixed(2)} />    // *** display only 2 decimals

They look as follows:



I hope y'all like it.

Regards,

José

[hemiroyd]

Hey JFReys.  This is great that you're able to change the temp and PH graph making it easier to read. When i first saw the temp graph form 0-100 I asked myself "who would need to see a range like that?".   If I were to make the same changes do I have to install the developer environment
as you explained or can I just alter the ReefPi code on my Raspberry pi?  I'm not a software programmer, while I run OSX that will make it easier, I'm not too comfortable with downloading and running all the developer software just to make a few code changes.  Thanks for your post.

[JFReyes]

Hey JFReys.  This is great that you're able to change the temp and PH graph making it easier to read. When i first saw the temp graph form 0-100 I asked myself "who would need to see a range like that?".   If I were to make the same changes do I have to install the developer environment
as you explained or can I just alter the ReefPi code on my Raspberry pi?  I'm not a software programmer, while I run OSX that will make it easier, I'm not too comfortable with downloading and running all the developer software just to make a few code changes.  Thanks for your post.

Hi @hemiroyd:

Technically you could alter the reef-pi code on your RPi, but it's practically unfeasible because the released, deployable code is "minified"; this means that it has been altered to reduce the amount of characters it contains so it runs faster. One example would be a variable called "current"; it could be minified to "c1x" which is not human understandable. Another common minification is the elimination of all spaces and newlines in the code. Thus the minification process renders the code similar to binary - that is, human unreadable.

To answer your question, yes, you would have to install the development environment and adjust for changes with OSX. If you're not comfortable with software development I'm afraid you'll have to depend on others. With Rob's permission I can occasionally make available the binary release version of my changes on this forum, but there are no guarantees, and I cannot accept change requests, only suggestions.

Thanks,

José

[hemiroyd]

Hey JFReys.  This is great that you're able to change the temp and PH graph making it easier to read. When i first saw the temp graph form 0-100 I asked myself "who would need to see a range like that?".   If I were to make the same changes do I have to install the developer environment
as you explained or can I just alter the ReefPi code on my Raspberry pi?  I'm not a software programmer, while I run OSX that will make it easier, I'm not too comfortable with downloading and running all the developer software just to make a few code changes.  Thanks for your post.

Hi @hemiroyd:

Technically you could alter the reef-pi code on your RPi, but it's practically unfeasible because the released, deployable code is "minified"; this means that it has been altered to reduce the amount of characters it contains so it runs faster. One example would be a variable called "current"; it could be minified to "c1x" which is not human understandable. Another common minification is the elimination of all spaces and newlines in the code. Thus the minification process renders the code similar to binary - that is, human unreadable.

To answer your question, yes, you would have to install the development environment and adjust for changes with OSX. If you're not comfortable with software development I'm afraid you'll have to depend on others. With Rob's permission I can occasionally make available the binary release version of my changes on this forum, but there are no guarantees, and I cannot accept change requests, only suggestions.

Thanks,

José

That makes perfect sense about uploaded code being "minified".  I'll play around a little and load the developers environment and see how far i can get.  At worse if I mess something up i guess I can reload reefPi.

[JFReyes]

Hey JFReys.  This is great that you're able to change the temp and PH graph making it easier to read. When i first saw the temp graph form 0-100 I asked myself "who would need to see a range like that?".   If I were to make the same changes do I have to install the developer environment
as you explained or can I just alter the ReefPi code on my Raspberry pi?  I'm not a software programmer, while I run OSX that will make it easier, I'm not too comfortable with downloading and running all the developer software just to make a few code changes.  Thanks for your post.

Hi @hemiroyd:

Technically you could alter the reef-pi code on your RPi, but it's practically unfeasible because the released, deployable code is "minified"; this means that it has been altered to reduce the amount of characters it contains so it runs faster. One example would be a variable called "current"; it could be minified to "c1x" which is not human understandable. Another common minification is the elimination of all spaces and newlines in the code. Thus the minification process renders the code similar to binary - that is, human unreadable.

To answer your question, yes, you would have to install the development environment and adjust for changes with OSX. If you're not comfortable with software development I'm afraid you'll have to depend on others. With Rob's permission I can occasionally make available the binary release version of my changes on this forum, but there are no guarantees, and I cannot accept change requests, only suggestions.

Thanks,

José

That makes perfect sense about uploaded code being "minified".  I'll play around a little and load the developers environment and see how far i can get.  At worse if I mess something up i guess I can reload reefPi.

Yeah, go for it!

[Rob F]

With Rob's permission I can occasionally make available the binary release version of my changes on this forum, but there are no guarantees, and I cannot accept change requests, only suggestions.

Works for me. :)

[Dewd]

This is just what reef-pi needs.

Is there no way you can make this an image which we can download and update with? Like the "Upgrade" file you get on Github when reef-pip releases an update?

[JFReyes]

This is just what reef-pi needs.

Is there no way you can make this an image which we can download and update with?  Like the "Upgrade" file you get on Github when reef-pip releases an update?

Hello:

Thank you for your interest; it's coming soon, hopefully by the end of this week. Rob already checked with Ranjib and we're cleared, but the forum software requires some adjustments for file size and type (binary), as well as some sort of special section or pinned post where the image will reside. I have also been making further refinements to reef-pi. Stay tuned...

[Rob F]

Hello:

Thank you for your interest; it's coming soon, hopefully by the end of this week. Rob already checked with Ranjib and we're cleared, but the forum software requires some adjustments for file size and type (binary), as well as some sort of special section or pinned post where the image will reside. I have also been making further refinements to reef-pi. Stay tuned...

I did make the changes so you should be good to go when ready. As you plan to keep making changes I was thinking start a new thread so the download is in the first message and I'll make it a sticky.

[JFReyes]

Hi all:

I made deeper changes to the code, so now -- both for pH and temperature -- the Y axis scale is user configurable; no more hacking. Therefore I can't post the changes here but you can find them in my Github repo here, under branch uichanges. One caveat: upon installing the modified version you have to go into the configuration pages to actually enter the Min Y Scale Value & Max Y Scale Value you want (even if defaults) and save, then reload reef-pi to see the changes. This is required to insert the new attributes in an existing reef-pi.db database.

   

Please excuse the ugly GUI but I'm leaving that for last.
   

   

The modified version is reef-pi-3.5-2-g64c0799.deb. I offer no guarantees so please backup your installation. Install it over your existing version as per the development environment instructions. Either I or Rob will upload the file as soon as possible so stay tuned!

Cheers,