InqAnalog - Simple Real World Example

A place users can post their projects. If you have a small project and would like your own dedicated place to post and have others chat about it then this is your spot.
 Reply

User avatar

Re: While working through these...

By Jacob Major
- Wed Apr 20, 2022 11:15 am #94349
Inq720 wrote:
Jacob Major wrote:Additionally as a follow up I found a 30 minute period to go test if connecting to my router worked and while it did it was very slow and I had trouble actually viewing files in the files tabs. The other tabs also loaded very slowly. Not sure if that is my fault since I have the router in a room to my left and the sensor/esp8266 in a room to my right and I am connecting to the router that needs to connect to the board.


I just re-read this and this jumped out at me this time. Is this on the RaspPi/Chromium machine? I'm thinking it is more related to the computer being overloaded / busy doing background tasks. You see... All the tabs are loaded at start-up. There is no partial loading from the ESP8266 server. Switching from one tab to another does not cause any network traffic to/from the server. It is merely hiding one tab and showing another tab.


This was using my regular windows machine. I might have a lot happening in the background but I can't really close them to test that idea. Deadlines are ramping up this week so I haven't had much time to work on all of this much this week. I should be able to address some more of my questions next week at the earliest but I appreciate the current support you've provided so far! I started to reformat the inqhisto.js file in my free time but I haven't had time to edit it yet.
User avatar

Re: InqAnalog - Simple Real World Example

By Inq720
- Wed Apr 20, 2022 5:17 pm #94351 Uploaded a new version of the library 5.3.1 - Only change the default Serial Monitor speed is now set to 115200. A few that didn't fully read the tutorials, were assuming 115200 and getting discouraged. All references in the on-line manuals, tutorials have also been updated.
User avatar

Re: InqAnalog - Simple Real World Example

By Jacob Major
- Mon Apr 25, 2022 10:54 am #94368 I was able to get this part to work mostly I believe. I will note there are a lot of places I need to replace InqHisto with the name of my new histo class but I think I figured it out. I got it running with minimal errors at least.

Code: Select allyAxes: [{
                            display: true,
                            ticks: {
                                beginAtZero: true,
                                steps: 100,
                                stepValue: 1,
                                max: 100
                            }
                        }]

Inq720 wrote:
Jacob Major wrote:Optimially since Moist is always between 0 and 100% I would like the graph to always have a scale of 0-100. Otherwise, the Graph has little in the way of context since it just occilates between a percentage like 50.23421324 and 50. 91232213 for a while. I need to be able to analyze the trend over a long period of time.


That is a perfectly understandable need. Unfortunately, InqHisto has to be able to generically plot any range... be it -0.05 to -0.01 or something like -1.6E6 to 3.7E10. It would be impossible in most cases for users to fix the ranges of every curve on the graph.

This has nothing to do with InqPortal and is highly customizing client code for a specific case. But, lets see if we can override the default behavior. You might have noticed in one of the previous posts, the debugger will show you the actual code. Here are the steps you'll need to do to achieve this goal.

  1. Refresh with the debugger open.
  2. Under the Sources tab
  3. Click on the InqHisto.js file.
  4. In the edit box, the source for InqHisto will show up. It is minimized which is basically compressed and takes all white space out. Its main purpose it to reduce the file size being sent to the browsers.
  5. Just to the bottom of the editor window, you'll see a pair of brace { }. Hovering over this will show you "Pretty print InqHisto.js"
  6. Clicking this reformats it.
  7. Copy and paste it to an editor and save it under a new name. Obviously with a js extension.
  8. In the index.html file, change the reference InqHisto.js to your new name.
  9. After editing both files, you'll upload them back to the server
  10. Refresh you browser and the new ones will load into the browser with the new feature.

Now as far as the modifications necessary to get a fixed range on the Y-axis, you'll need to consult the https://www.chartjs.org/. However, I've found Google search like "chart.js fixed bounds y-axis" might give you a better chance of finding the results you need.

If yours reformats InqHisto the same as my browser did, you should look at the code starting at about line 29
Code: Select all                    xAxes: [{
                        type: 'linear',
                        position: 'bottom',
                        scaleLabel: {
                            display: true
                        },
                        ticks: {
                            callback: (value)=>{
                                return Math.round((this.#_L - value) * 100) / 100;
                            }
                        },
                        afterBuildTicks: InqHisto.adjustTicks
                    }],
                    yAxes: []


The X axis is defined as there is only one.
The Y axis is not define and generated dynamically depending on how many curves are in it. The parameters that make up the X and Y axes is generic, so you will need to find how to fix the boundaries. You can dig around in this code to see where the X-axis is fixed as it is obviously fixed on the History tab. Try defining the X-axis in an analogous way.
User avatar

Re: InqAnalog - Simple Real World Example

By Inq720
- Mon Apr 25, 2022 11:06 am #94369
Jacob Major wrote:I was able to get this part to work mostly I believe. I will note there are a lot of places I need to replace InqHisto with the name of my new histo class but I think I figured it out. I got it running with minimal errors at least.

Code: Select allyAxes: [{
                            display: true,
                            ticks: {
                                beginAtZero: true,
                                steps: 100,
                                stepValue: 1,
                                max: 100
                            }
                        }]



That's saying something. I am by no means an expert using chart.js... or even a JavaScript. I remember it being a challenge to get everything the way I wanted... especially the moving of the chart to the left, yet keep a zero at the right edge. I toiled with the idea of even mentioning it for end-user's charting/graphing needs. It implies I need to support it.

I'm glad you got it going... let us see the fruit of your labors when you get a chance.

VBR,
Inq
 Reply
Return to Users Projects