User Reports and iFrame

[AndyKF650]

Hi Hans

As you are aware I have been working on UserReports over the last couple of days and am fairly satisfied with the mix of data I have collected. Since this is essentially "slow" data I think the need for realtime feeds is limited, afterall the rest of CUtils does a great job in presenting the "fast" data and the long term trends and records.

My issue is getting the layout to look good, at the moment I have the UserReport feeding into an iFrame which is located on by main tabs header but despite trying I am unable to get the iFrame to work with a border. Is there something in the report process that defines the layout of the report for example the text is centralised with no obvious way of change. I have proved to myself that the iFrame is working as it should but when I run the UserReport the iFrame layout disappears. I have attached before and after pics showing the iFrame and its coding together with the final run version.

Do you have any thoughts on this ? Looking at the SystemReport, this seems to have similar formatting with no border.

I hope you and your family have a happy New Year

[Mapantz]

Have you tried via css rather than styling it inside of the <iframe> itself?

Code: Select all

div iframe {
  border-radius: 15px;
  overflow: hidden;
  scrolling: auto;
}

Modern browsers seem to be finicky with iframes these days..

[HansR]

Hi Andy,

As you are aware I have been working on UserReports over the last couple of days and am fairly satisfied with the mix of data I have collected. Since this is essentially "slow" data I think the need for realtime feeds is limited, afterall the rest of CUtils does a great job in presenting the "fast" data and the long term trends and records.

I fully agree with this.

My issue is getting the layout to look good, at the moment I have the UserReport feeding into an iFrame which is located on by main tabs header but despite trying I am unable to get the iFrame to work with a border. Is there something in the report process that defines the layout of the report for example the text is centralised with no obvious way of change. I have proved to myself that the iFrame is working as it should but when I run the UserReport the iFrame layout disappears. I have attached before and after pics showing the iFrame and its coding together with the final run version.

Ok, I will think about a guide line (for the wiki) for the formatting of the user reports.
In general: iframe is not required. Plaine html is good enough.
We will discuss this no doubt in the next year

You and your family have a great and happy new year as well.

Regards,

[HansR]

Have you tried via css rather than styling it inside of the <iframe> itself?

Code: Select all

div iframe {
  border-radius: 15px;
  overflow: hidden;
  scrolling: auto;
}

Modern browsers seem to be finicky with iframes these days..

@Mapantz: thanks for the advise but as you see in my previous reaction iframe is not the way to go within the context of the userreports. I don't know if you tried CUtils, but I think that would be a good idea before starting advising. And also a happy new year of course

Regards,

[AndyKF650]

Thanks for the help but I tried and failed I am afraid. My lack of knowledge is letting me down.

I set up a iframe.css file using the suggested script into my website and put the following link to it in the TestUserReport.txt file
linkref= "stylesheet" type="text/css" media="screen" href="iframe.css"

This gave a completely blank iframe on my website.

Strangely other iframes on the website behave as expected without using .css.

Looking at Hans reply it might be that we are trying to over egg the problem, but thanks anyway.

[HansR]

Over egging a problem

My english is improving

[AndyKF650]

Hans

Your English is soooo... much better than my non existent Dutch.

I forget that you are not a native English speaker, and you will see odd phrases like over egging a problem from time to time.

I assume that there is a Dutch equivalent.

[HansR]

I made an effort in the UserReports Wiki page to sum up some important things for using the UserReports, notably the formatting if you wish to display it in the ReportView section of the website. Let me know if there are more questions and more description required!

[AndyKF650]

Hi Hans

I can see you have been busy recently with a new version and notes on UserReports.

I can confirm that the new version behaves well and has been loaded and tested fully with a both overwrite of the existing files and a clean install of CMX and CUtils, all with no issues.

Turning to the UserReport I am struggling to get this to work as you suggest, my work around is an iframe which looks for the UserReport.txt file. The iframe is collected in the CUsermenu.txt. As you mentioned the UserReport is plain text with no formatting as yet so it does look fairly plain but similar to your system info page.

One thing that I noticed this morning was the first data appearing on the YADR reports looking very odd with only one day of the year being reported, this of course is to be expected but having looked at a building year all last year it did look different.

I am looking forward/thinking about the next enhancement to the system and website to be seen this year.

[HansR]

I can see you have been busy recently with a new version and notes on UserReports.

I can confirm that the new version behaves well and has been loaded and tested fully with a both overwrite of the existing files and a clean install of CMX and CUtils, all with no issues.

Thanks

Turning to the UserReport I am struggling to get this to work as you suggest, my work around is an iframe which looks for the UserReport.txt file. The iframe is collected in the CUsermenu.txt. As you mentioned the UserReport is plain text with no formatting as yet so it does look fairly plain but similar to your system info page.

OK, if it works for you it works. iframe is just as well legal HTML.
But whatever you choose: formatting, colours, alignment and lists will require (simple) HTML.

One thing that I noticed this morning was the first data appearing on the YADR reports looking very odd with only one day of the year being reported, this of course is to be expected but having looked at a building year all last year it did look different.

I am looking forward/thinking about the next enhancement to the system and website to be seen this year.

Haha... yes, empty grey boring lists.
Looking forward to suggestions and ideas (but at a certain moment it will be finished, no?)

[AndyKF650]

Hi Hans

I knew it would not be too long before I fiddled around again.

This time I have reworked my UserReport to get the formatting consistent with the general CUtils web style. Of course it was not a simple fix but a new .html file linked through a iframe and onto the CUsermenu. The update of the UserReport is via the CMX extra web files so that is done very 15 mins

I am quite happy with it now and have attached the various files together with a screen shot of the web page for information

[HansR]

Hi Andy,

Thanks for this effort which I think looks good. However you still use an iframe and that is a superfluous step. I will show you what I had in mind - with one line of your report - for a HTML UserReport. I will explain below in steps and then explain what I do in the report itself.

1. First i make the text report (which deviates somewhat from yours, I will explain later). Point here is that it is a txt file and not a HTML. This is relevant in avoiding an iframe.

   Code: Select all

   <style>
       #UserReport{
         text-align: left;
         font-family: arial;
         border-radius: 15px;
         border-spacing: 0;
         border: 1px solid #b0b0b0;
         background-color: transparent;
       }
   </style>
   
   <div id="UserReport" style="width: 80%; margin: auto;">
       <table style="width: 80%; margin: auto;  border: 1px solid black;">
           <tbody>
               <tr> 
                   <td colspan="2" style="color: red; font-size: 17px";>L'ALOUETTE GOREY WEATHER CUMULUSUTILS USER REPORT</td>
               </tr>
       
               <tr>
                   <td>Time UTC: </td>
                   <td><#timeUTC></td>
               </tr>
           </tbody>
       </table>
       <br/>
   </div>
   

2. The code above is stored in the file CURPTAndyTest.txt and translated by CumulusUtils to AndyTest.txt. It is now part of your website
3. The only thing you need to do now is call it from the menu. To do so you use the runtime:

   Code: Select all

   <span class='nav-link' onclick="LoadUtilsReport('Andytest.txt');">Andytest</span>

   This is where the iframe step is skipped. Because if you call an iframe you need to have an iframe file which calls the report as HTML. It is an extra file making a superfluous step.
4. Choose the AndyTest from the test menu (where I put it on my v4 test site) and look at the result.

So above are the steps. On the HTML code in the report the following (in order of appearance); [See CSS tutorial if you need to catch up on CSS]:

1. #report: this is a definition with several CSS items which you can use when referred to by id, i think the items speak for themselves. Unless overridden they are valid for the whole <div> (or other unit). You could also use classes of course;
2. The width and margin specifiers (for div and table) specify the space they take and an auto margin centres them within the parent;
3. Border specification see the tutorial.
4. The table specification is the simplest possible. Don't make things more complex than necessary
5. The number of columns in a table is as many as the maximum number of Table Data (<td>) you specify. In this case 2. If you wish to have a row which goes over the width of the table, you specify colspan in the <td> and give the number of columns it should span.
6. The <br/> tag after the table close gives a blank line. Take my advise: use HTML formatting and avoid &nbsp;.

So a UserReport just is some HTML which is placed into an existing <div>. Yes, if you want to make use of a USerReport you will need some HTML. But only little and very limited although you can make your life as difficult as you wish of course. And then it is only a few steps from creating your own stuff You can do anything here, create a map if you like or make your own chart with HighCharts (which is why I pointed to all libraries in the wiki) or even make your own javascript procedures. But it is in essence meant for just plain HTML as I showed here.

Your HTML should also work without the iframe. Try that first and then start refining.
Hope this helps.

Regards,

[AndyKF650]

Thanks for that I will investigate in awhile and let you know how I get on

[AndyKF650]

Hi Hans

I have worked out just what was needed, your hints got me started and now I have something that I like the look off and it does not involve the use of an iframe.

Seems like I have done a crash course in html and css this afternoon but the end file looks a lot smarter than my initial effort. Having set up the style settings it is much easier to change fonts, sizes and colour.

The current screen shot and .txt files are attached.

[HansR]

Hi Andy, that's quick and not too bad at all. This is how it goes.

Just be careful: <tr><th> .... </th></tr> is not well done. But apparently it is accepted so I leave you to it. You might want to look at all table related tags though
(I don't think you need the th-tag in this situation)
Also important will be to understand the boxmodel: margin, border, padding and content.

So, continue the crash course and remember that the most important thing is that you know what you want to see and how you want to see it.
Then search the least effort techniques required to do it.

Let me know how you get on.

Regards,