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

    BOUNTY: Web GUI reprogramming

    Scheduled Pinned Locked Moved Bounties
    256 Posts 31 Posters 173.0k 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.
    • C
      Clear-Pixel
      last edited by

      Twitter Bootstrap might would be the best route ….. Twitter has established common ground among developers concerning general css layout design in desktop, tablets and mobile phones. It was designed to be adaptable.

      The sample link I gave ..... I can think of some really cool stuff that could be used with the (Regional Stats) display shown on the admin template ...... example: Pfblocker and Snort displaying gsp location on the global map of the blocked ip would be really cool.

      Some might say that would be to much overhead, but hey when you have a full fledged desktop computer running a firewall, who cares?

      HP EliteBook 2530p Laptop - Core2 Duo SL9600 @ 2.13Ghz - 4 GB Ram -128GB SSD
      Atheros Mini PCI-E as Access Point (AR5BXB63H/AR5007EG/AR2425)
      Single Ethernet Port - VLAN
      Cisco SG300 10-port Gigabit Managed Switch
      Cisco DPC3008 Cable Modem  30/4 Mbps
      Pfsense 2.1-RELEASE (amd64)
      –------------------------------------------------------------
      Total Network Power Consumption - 29 Watts

      1 Reply Last reply Reply Quote 0
      • S
        Supermule Banned
        last edited by

        Does it have security vulnerabilities? Is it like adding a layer on top of freebsd?

        1 Reply Last reply Reply Quote 0
        • C
          Clear-Pixel
          last edited by

          Its simply a CSS framework …... I have not designed a website yet with Twitter Bootstrap, it does have some jquery dependency's but I have not personally looked at any of the jquery code nor am I a security expert.

          My best guess would be No.

          Pfsense does utilizes jquery for the backend browser administrator GUI. If you look at the source files you will see....there are many many files and templates.

          http://en.wikipedia.org/wiki/Twitter_Bootstrap

          HP EliteBook 2530p Laptop - Core2 Duo SL9600 @ 2.13Ghz - 4 GB Ram -128GB SSD
          Atheros Mini PCI-E as Access Point (AR5BXB63H/AR5007EG/AR2425)
          Single Ethernet Port - VLAN
          Cisco SG300 10-port Gigabit Managed Switch
          Cisco DPC3008 Cable Modem  30/4 Mbps
          Pfsense 2.1-RELEASE (amd64)
          –------------------------------------------------------------
          Total Network Power Consumption - 29 Watts

          1 Reply Last reply Reply Quote 0
          • stephenw10S
            stephenw10 Netgate Administrator
            last edited by

            @Clear-Pixel:

            when you have a full fledged desktop computer running a firewall, who cares?

            People running an Alix? People running a Pentium 2?  ;)

            Steve

            1 Reply Last reply Reply Quote 0
            • C
              Clear-Pixel
              last edited by

              People running an Alix? People running a Pentium 2?

              Give the option to turn it off….or the ability to adjust the scale if needed depending on processing power available.

              I do agree 100% that application bug squashing is far more important than the appearance of the application. And adding new features should be the last item on the list, as I'm sure there are swarms of bugs to squash.

              But if you have forum users which have no Unix talent, they may have website design talents to contribute. It would be foolish not to utilize these talents to improve the GUI of Pfsense. This is where you should create a GUI developer leg to collaborate and work toward a common goal in the GUI development for the application engineers. If the GUI code is to get reworked, a responsive design would be a fantastic direction to head in.

              HP EliteBook 2530p Laptop - Core2 Duo SL9600 @ 2.13Ghz - 4 GB Ram -128GB SSD
              Atheros Mini PCI-E as Access Point (AR5BXB63H/AR5007EG/AR2425)
              Single Ethernet Port - VLAN
              Cisco SG300 10-port Gigabit Managed Switch
              Cisco DPC3008 Cable Modem  30/4 Mbps
              Pfsense 2.1-RELEASE (amd64)
              –------------------------------------------------------------
              Total Network Power Consumption - 29 Watts

              1 Reply Last reply Reply Quote 0
              • I
                iFloris
                last edited by

                There is also helium, which is much lighter than bootstrap and foundation but offers a lot of the same advantages .

                In my view, a possible secondary advantage of a redesign would be that we can present information in a friendlier, more concise way.

                This of course means a form of responsive design, but also an interface design that adheres to a ABC design philosophy wherein information is displayed in the order of importance, eg. A = primary information, B = secondary information and C = details.
                C is usually either hidden or very discreet until C is requested. This method is employed throughout visual cueing and can be seen in film, graphic design, interior design, architecture and crossovers such as museums.

                When using pfsense, there seems to be little to no distinction between the three classes of information urgency. If we are able to propose a redesign for the gui, this could be taken into consideration.

                This might seem somewhat contrary to what Ermal and stephenw10 said:

                @stephenw10:

                I completely agree with @ermal:

                While it would be nice to have some improvements on usability do not over-engineer it.
                Its just a webGUI for a firewall which needs to scale across different resources of system.

                The original intent of this bounty/thread was to improve the quality of the code, re-writing parts of the webgui to be better standards compliant rather than adding any features.
                http://forum.pfsense.org/index.php/topic,48107.0.html

                Steve

                However, a redesign of code might present an opportunity to redesign the visual aspect of the firewall as well.
                The way that we present information visually might even improve the scaling if fallback techniques are employed.

                What do you guys think?

                one layer of information
                removed

                1 Reply Last reply Reply Quote 0
                • S
                  Supermule Banned
                  last edited by

                  Damn nice idea! The thing is that there is a lot of switching between menus all the time.

                  In ISA server, when you make a rule it pops up an all inclusive box that has ALL what needs to be set to make it work. You dont have to go a little here and a little there and if you are serious then you also needs to go somewhere else…

                  It will make changes and daily tasks very quick and simple. One can easily see that the GUI is made by "nerds" for technical people.

                  In ISA you have a right side menubar that has related things to the page you are at....so you only have to click once to get there instead of going through several menus.

                  Its brilliant!

                  1 Reply Last reply Reply Quote 0
                  • C
                    Clear-Pixel
                    last edited by

                    A collapsible sidebar menu would be the best direction for Pfsense …. if you test drive the custom website admin side bar menu, you can get a feel of how it would improve the user experience in navigation.

                    If it gets reworked a full width responsive GUI is the only direction to head in. It would give the necessary screen real estate to display a ABC design philosophy as iFloris defined. The feedback from the dash board could evolve into a very productive sophisticated visual tool.

                    There are many admin template examples on themeforest.com this is just one I selected as a example.

                    http://keenthemes.com/preview/metronic/index.html

                    P.S.
                    I would be willing to contribute some of my free time to a GUI development project. But only if the team was allowed the freedom to develop and create sophisticated visual GUI tools that Steve Jobs would be proud of.

                    HP EliteBook 2530p Laptop - Core2 Duo SL9600 @ 2.13Ghz - 4 GB Ram -128GB SSD
                    Atheros Mini PCI-E as Access Point (AR5BXB63H/AR5007EG/AR2425)
                    Single Ethernet Port - VLAN
                    Cisco SG300 10-port Gigabit Managed Switch
                    Cisco DPC3008 Cable Modem  30/4 Mbps
                    Pfsense 2.1-RELEASE (amd64)
                    –------------------------------------------------------------
                    Total Network Power Consumption - 29 Watts

                    1 Reply Last reply Reply Quote 0
                    • S
                      Supermule Banned
                      last edited by

                      I agree!

                      1 Reply Last reply Reply Quote 0
                      • stephenw10S
                        stephenw10 Netgate Administrator
                        last edited by

                        As long as it doesn't end up like Watchguard's more recent web gui, constructed entirely in flash!, then I'm all for it.
                        Honestly I don't have a problem with the current gui though. I'm probably not the right person to ask.  ;)

                        Steve

                        1 Reply Last reply Reply Quote 0
                        • C
                          Clear-Pixel
                          last edited by

                          Its about how you present the data. Its about assembling bits and piece of a puzzle to form the best visual representation of the data.

                          There is obviously more data that could be displayed to the user to get a better picture of the status of whats going on. Some things would be a feature request, but the GUI would be designed to adapt to known future improvements to expand the visual representation and organization of the data.

                          I'm not a security expert by no means, but I'm sure you can think of many data points which would be very helpful in completing the puzzle, or at less attempting to.

                          A full width responsive GUI would give Pfsense the screen real estate to display more data to the user but in a creative way as a attempt to simplify the assembling of the puzzle.

                          HP EliteBook 2530p Laptop - Core2 Duo SL9600 @ 2.13Ghz - 4 GB Ram -128GB SSD
                          Atheros Mini PCI-E as Access Point (AR5BXB63H/AR5007EG/AR2425)
                          Single Ethernet Port - VLAN
                          Cisco SG300 10-port Gigabit Managed Switch
                          Cisco DPC3008 Cable Modem  30/4 Mbps
                          Pfsense 2.1-RELEASE (amd64)
                          –------------------------------------------------------------
                          Total Network Power Consumption - 29 Watts

                          1 Reply Last reply Reply Quote 0
                          • C
                            Clear-Pixel
                            last edited by

                            Another nice example

                            Login and password
                            admin

                            http://photonui.orangehilldev.com/dashboard.php

                            HP EliteBook 2530p Laptop - Core2 Duo SL9600 @ 2.13Ghz - 4 GB Ram -128GB SSD
                            Atheros Mini PCI-E as Access Point (AR5BXB63H/AR5007EG/AR2425)
                            Single Ethernet Port - VLAN
                            Cisco SG300 10-port Gigabit Managed Switch
                            Cisco DPC3008 Cable Modem  30/4 Mbps
                            Pfsense 2.1-RELEASE (amd64)
                            –------------------------------------------------------------
                            Total Network Power Consumption - 29 Watts

                            1 Reply Last reply Reply Quote 0
                            • S
                              Supermule Banned
                              last edited by

                              Best so far!

                              Could end up beeing very nice!

                              @Clear-Pixel:

                              Another nice example

                              Login and password
                              admin

                              http://photonui.orangehilldev.com/dashboard.php

                              1 Reply Last reply Reply Quote 0
                              • E
                                eri--
                                last edited by

                                Should this be moved to general topics?

                                1 Reply Last reply Reply Quote 0
                                • C
                                  Clear-Pixel
                                  last edited by

                                  Last Example

                                  http://mosaicpro.biz/adminplus/php/

                                  HP EliteBook 2530p Laptop - Core2 Duo SL9600 @ 2.13Ghz - 4 GB Ram -128GB SSD
                                  Atheros Mini PCI-E as Access Point (AR5BXB63H/AR5007EG/AR2425)
                                  Single Ethernet Port - VLAN
                                  Cisco SG300 10-port Gigabit Managed Switch
                                  Cisco DPC3008 Cable Modem  30/4 Mbps
                                  Pfsense 2.1-RELEASE (amd64)
                                  –------------------------------------------------------------
                                  Total Network Power Consumption - 29 Watts

                                  1 Reply Last reply Reply Quote 0
                                  • D
                                    ddggttff3
                                    last edited by

                                    @Clear-Pixel:

                                    Last Example

                                    http://mosaicpro.biz/adminplus/php/

                                    Im sorry, but that is just beautiful… id kill for a nice GUI like that.

                                    1 Reply Last reply Reply Quote 0
                                    • S
                                      Supermule Banned
                                      last edited by

                                      Imagine how nice it would be at a 100% width…!

                                      1 Reply Last reply Reply Quote 0
                                      • K
                                        kindle
                                        last edited by

                                        @Supermule:

                                        Inspired by this thread http://forum.pfsense.org/index.php/topic,48107.msg253688.html#msg253688

                                        I will start with contributing with 50$.

                                        This is partly aimed at Craymore….:) Now we will see if he wants to.

                                        I would donate to this wonderful cause  ;D

                                        @ermal:

                                        Should this be moved to general topics?

                                        I would think so, since it would definitely get more attention. Probably removing BOUNTY from the subject line would also be appropriate.

                                        @Supermule:

                                        Imagine how nice it would be at a 100% width…!

                                        If you select fluid layout at the bottom of that page it will show a full screen layout.

                                        Can't really complain about the pfsense webui since it's better than most I've seen. Although something like what is being suggested would be mind blowing.

                                        1 Reply Last reply Reply Quote 0
                                        • C
                                          Clear-Pixel
                                          last edited by

                                          I have to say I like the last example best http://mosaicpro.biz/adminplus/php/ it's based on tweeter boot strap … and fully responsive ... if the cash would flow it could be reality.

                                          HP EliteBook 2530p Laptop - Core2 Duo SL9600 @ 2.13Ghz - 4 GB Ram -128GB SSD
                                          Atheros Mini PCI-E as Access Point (AR5BXB63H/AR5007EG/AR2425)
                                          Single Ethernet Port - VLAN
                                          Cisco SG300 10-port Gigabit Managed Switch
                                          Cisco DPC3008 Cable Modem  30/4 Mbps
                                          Pfsense 2.1-RELEASE (amd64)
                                          –------------------------------------------------------------
                                          Total Network Power Consumption - 29 Watts

                                          1 Reply Last reply Reply Quote 0
                                          • C
                                            Clear-Pixel
                                            last edited by

                                            @jimp, cmb, ermal
                                            Is it possible based on the way pfsense is coded/structured that GUI modifications could be distributed as a plugin?

                                            If so, I would consider looking a bit deeper into the existing GUI structure to get a better idea of what would be required.

                                            HP EliteBook 2530p Laptop - Core2 Duo SL9600 @ 2.13Ghz - 4 GB Ram -128GB SSD
                                            Atheros Mini PCI-E as Access Point (AR5BXB63H/AR5007EG/AR2425)
                                            Single Ethernet Port - VLAN
                                            Cisco SG300 10-port Gigabit Managed Switch
                                            Cisco DPC3008 Cable Modem  30/4 Mbps
                                            Pfsense 2.1-RELEASE (amd64)
                                            –------------------------------------------------------------
                                            Total Network Power Consumption - 29 Watts

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post
                                            Copyright 2025 Rubicon Communications LLC (Netgate). All rights reserved.