• Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Search
  • Register
  • Login
Netgate Discussion Forum
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Search
  • Register
  • Login

Creating a new dashboard widget

Scheduled Pinned Locked Moved Development
17 Posts 6 Posters 1.2k Views
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P
    provels
    last edited by provels Dec 20, 2023, 2:41 PM Dec 20, 2023, 2:39 PM

    You will need a (widget name).inc file in the /usr/local/www/widgets/include/ folder

    and a (widget name).widget.php in the /usr/local/www/widgets/widgets/ folder

    You can look at the files in those folders for direction. I use WINSCP to manage files. It's not too hard (even I did it!).
    Do a rehash at the prompt and you're done. YOU CAN DO IT!!

    Peder

    MAIN - pfSense+ 24.11-RELEASE - Adlink MXE-5401, i7, 16 GB RAM, 64 GB SSD. 500 GB HDD for SyslogNG
    BACKUP - pfSense+ 23.01-RELEASE - Hyper-V Virtual Machine, Gen 1, 2 v-CPUs, 3 GB RAM, 8GB VHDX (Dynamic)

    H 1 Reply Last reply Dec 20, 2023, 2:44 PM Reply Quote 0
    • H
      hulleyrob @provels
      last edited by Dec 20, 2023, 2:44 PM

      @provels haha thanks I’ve got the files I need just struggling to see what I need to strip out to decide which one would be easier to use.

      If I could just find a way to see what the variable data is I could then add a filter and it would be done. But thats where I’ve got stuck at the moment.

      P 1 Reply Last reply Dec 20, 2023, 2:55 PM Reply Quote 0
      • P
        provels @hulleyrob
        last edited by provels Dec 20, 2023, 2:56 PM Dec 20, 2023, 2:55 PM

        @hulleyrob
        This is a simple setup I use for a ping widget:
        For the dashboard, PingTest.inc:

        <?php
        /* File     : /usr/local/www/widgets/include/PingTest.inc
         * Author   : Zak Ghani
         * Date     : 10-03-2019
         * 
         * This software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES
         * OR CONDITIONS OF ANY KIND, either express or implied.
         * 
         */
        
        $PingTest_title = gettext("Ping - ms");
        
        ?>
        

        For the actual action, PingTest.widget.php:

        <?php
        /* File     : /usr/local/www/widgets/widgets/PingTest.widget.php
         * Author   : Zak Ghani
         * Date     : 10-03-2019
         * 
         * This software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES 
         * OR CONDITIONS OF ANY KIND, either express or implied.
         * 
         * URL Choices :    https://www.bing.com/widget/t/speedtest
         *                  https://www.measurementlab.net/p/ndt-ws.html
         *                  https://thingspeak.com/channels/738006
         */
        
        require_once("guiconfig.inc");
        
        ?> 
        
        <iframe 
            src="https://thingspeak.com/channels/738006/charts/1?bgcolor=%23313131&color=%23ff5e18&dynamic=true&results=60&type=column&xaxis=Date/Time&yaxismax=100&yaxismin=0"
            width="553"
            height="260"
            frameborder="0"
        *    width="498"
        *    height="500"
        *    frameborder="0"
        >
        </iframe>
        

        You can set the x-y labels, colors, window size, and other display attributes there. On my dashboard, looks like this:

        fdbb0a76-32e5-4618-87ac-105df9a8cc6e-image.png

        Peder

        MAIN - pfSense+ 24.11-RELEASE - Adlink MXE-5401, i7, 16 GB RAM, 64 GB SSD. 500 GB HDD for SyslogNG
        BACKUP - pfSense+ 23.01-RELEASE - Hyper-V Virtual Machine, Gen 1, 2 v-CPUs, 3 GB RAM, 8GB VHDX (Dynamic)

        H 1 Reply Last reply Dec 20, 2023, 3:18 PM Reply Quote 1
        • H
          hulleyrob @provels
          last edited by Dec 20, 2023, 3:18 PM

          @provels interesting hadn’t considered it being an iframe thanks.

          P 1 Reply Last reply Dec 20, 2023, 3:33 PM Reply Quote 0
          • P
            provels @hulleyrob
            last edited by Dec 20, 2023, 3:33 PM

            @hulleyrob said in Creating a new dashboard widget:

            @provels interesting hadn’t considered it being an iframe thanks.

            Hey, I can barely spell www, so...

            Peder

            MAIN - pfSense+ 24.11-RELEASE - Adlink MXE-5401, i7, 16 GB RAM, 64 GB SSD. 500 GB HDD for SyslogNG
            BACKUP - pfSense+ 23.01-RELEASE - Hyper-V Virtual Machine, Gen 1, 2 v-CPUs, 3 GB RAM, 8GB VHDX (Dynamic)

            1 Reply Last reply Reply Quote 0
            • H
              hulleyrob
              last edited by Dec 21, 2023, 11:33 PM

              Well it wasn't easy took way longer that it should have and I ended up trying so many ways only to come across unsolvable problems but ive finally managed to make a daily traffic total widget. Could have probably done the same in python in under 10 minutes.

              G V 2 Replies Last reply Dec 22, 2023, 7:50 AM Reply Quote 1
              • G
                Gertjan @hulleyrob
                last edited by Dec 22, 2023, 7:50 AM

                @hulleyrob said in Creating a new dashboard widget:

                .... same in python in under 10 minutes

                Because all the 'examples' (widgets already present) are written in PHP (and CSS, html, shell scripts, etc) doesn't mean you have to use PHP also.
                On the other hand : most needed pfSense GUI and system functions are written PHP .....
                Remember pfBlockerng :

                7871af69-7d42-4bb3-b969-0c1a3a24e01a-image.png

                So, Python is there. What's stopping you ?

                No "help me" PM's please. Use the forum, the community will thank you.
                Edit : and where are the logs ??

                1 Reply Last reply Reply Quote 0
                • V
                  Viper_Rus @hulleyrob
                  last edited by Viper_Rus Dec 25, 2023, 7:55 PM Dec 25, 2023, 7:53 PM

                  @hulleyrob said in Creating a new dashboard widget:

                  Well it wasn't easy took way longer that it should have and I ended up trying so many ways only to come across unsolvable problems but ive finally managed to make a daily traffic total widget. Could have probably done the same in python in under 10 minutes.

                  Can you share your widget? Thank you in advance.

                  H 1 Reply Last reply Dec 25, 2023, 10:40 PM Reply Quote 0
                  • H
                    hulleyrob @Viper_Rus
                    last edited by Dec 25, 2023, 10:40 PM

                    @Viper_Rus Hey its pretty much bespoke to my needs and still needs some work to stop the double refresh Ajax issue which came after another 5 hours today but I could share what ive got/help you mod it to your needs if your looking for something similar?

                    V 1 Reply Last reply Dec 27, 2023, 8:04 AM Reply Quote 0
                    • V
                      Viper_Rus @hulleyrob
                      last edited by Viper_Rus Dec 27, 2023, 8:07 AM Dec 27, 2023, 8:04 AM

                      @hulleyrob

                      It would be great if you showed what you got ;) I want it for myself too :) ("daily traffic total widget")

                      H 1 Reply Last reply Dec 27, 2023, 8:53 AM Reply Quote 0
                      • H
                        hulleyrob @Viper_Rus
                        last edited by Dec 27, 2023, 8:53 AM

                        @Viper_Rus Ok Let me come up with something more generic for just the WAN interface and I will share the files and what I did.
                        I doubt I will have fixed the double refresh problem by then but it doesn't seem to cause major issues anyway.

                        H 1 Reply Last reply Dec 28, 2023, 8:36 AM Reply Quote 0
                        • H
                          hulleyrob @hulleyrob
                          last edited by Dec 28, 2023, 8:36 AM

                          @Viper_Rus sent you the file and instructions in a DM. If that cut down version and instructions works we can share it with anyone else wanting the same thing. I will continue to work on another version and maybe one day if I have time it I can do a PR to the main repo.

                          1 Reply Last reply Reply Quote 0
                          • S
                            Skoony
                            last edited by Jan 25, 2024, 9:25 AM

                            @hulleyrob said in Creating a new dashboard widget:

                            Are there any tutorials for this or does someone know of a good starting point?

                            I want to create a widget that would show the current days totals from traffic totals stats page.

                            All the code should already be done in the php files but I have no idea how to go about running it to see what it already gets and what I need to do to filter out the data I want.

                            Seems like a simple thing but hopefully if I would use it other people would find it useful too.

                            Any help would be appreciated.

                            To begin building a widget that shows daily traffic totals from PHP files, you must first comprehend the PHP code that is currently in use and how the data is computed. For the widget, set up an HTML structure and apply CSS styling. Use JavaScript to asynchronously retrieve data from PHP so that the widget is updated dynamically. Verify locally that the PHP files are retrieving data properly. PHP should be modified if needed to support APIs. For a thorough overview, look for tutorials on HTML, CSS, JavaScript, and PHP. Install the widget on a server so that anyone can use it and maybe help others who are looking for a similar feature.

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post
                            Copyright 2025 Rubicon Communications LLC (Netgate). All rights reserved.
                              This community forum collects and processes your personal information.
                              consent.not_received