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

    BOUNTY: Web GUI reprogramming

    Scheduled Pinned Locked Moved Bounties
    256 Posts 31 Posters 178.5k 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
      charlie0440
      last edited by

      RIght working template for 2.1 (tested on a nightly from 2/5/13)

      Installation Instructions:

      1. Extract the zip to a folder on your PC
      2. Backup the original files on your pfsense box

      These files will be replaced so make a copy:
      /usr/local/www/fbegin.inc
      /usr/local/www/fend.inc
      /usr/local/www/head.inc
      /usr/local/www/widgets/widgets/system_information.widget.php

      3. Copy the files to pfsense
      From within the pfmaster folder:
      scp -r * root@192.168.0.25:/usr/local/www

      replace with your ip address

      4. Open up the webGui and login to see the changes

      To revert back to the original files:

      You need to restore the files you backed up in step 1 to their original name ie:
      mv /usr/local/www/fbegin_bk.inc /usr/local/www/fbegin.inc

      etc..

      optional delete this folder:
      /usr/local/www/assets

      –--------------------------------

      Some screenshots > http://cubeupload.com/codes/38bfda

      Please provide feedback. Is it worth me making a start on all the pages? I have only edited the template and not the individual pages. I don't want to get stuck in to find its going to be obsolete as someone else is redesigning. I read on another post about a possible kickstarter project.

      Edit: If all that is needed is some tidying up as opposed to redesigning then it should be straight forward, all being time consuming. Just spend 5 mins on the arp page (again yet to style it with any css) just tidied it up a little, some screenshots (before and after) > http://cubeupload.com/codes/229c3f

      1 Reply Last reply Reply Quote 0
      • C
        charlie0440
        last edited by

        Some before and after images of an example wol page (again no css styling yet ie colouring leaving that to the end) > http://imgur.com/a/xxIzs

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

          Can't argue with that example.  :)
          Nice job.

          Steve

          1 Reply Last reply Reply Quote 0
          • C
            charlie0440
            last edited by

            and we can do some cool jquery for our phones and tablets > screenshot http://cubeupload.com/im/3bM0qR.png

            Still needs some work there's far too much padding on the left. But then I haven't even looked at any css yet.

            Edit: changed the screenshot it was showing the mobile version (we needed the desktop version as I haven't changed any mobile code, if that makes sense)

            1 Reply Last reply Reply Quote 0
            • C
              charlie0440
              last edited by

              Not had much time recently to play with this. I did notice I broke a few things with the my last code changes.

              So here is a new zip (for 2.1) > https://dl.dropboxusercontent.com/u/12367642/wip.zip

              Fixed:
              Drag and drop of widgets on the dashboard now works
              Unread messages (acknowledgements) are now shown

              Installation Instructions:

              1. Extract the zip to a folder on your PC
              2. Backup the original files on your pfsense box

              These files will be replaced so make a copy:
              /usr/local/www/fbegin.inc
              /usr/local/www/fend.inc
              /usr/local/www/head.inc
              /usr/local/www/guiconfig.inc
              /usr/local/www/widgets/widgets/system_information.widget.php
              /usr/local/www/javascript/jquery.js

              3. Copy the files to pfsense
              From within the wip folder:
              scp -r * root@192.168.0.25:/usr/local/www

              replace with your ip address

              –------------------

              I started to look at the dashboard page. I managed to split it into three columns but am struggling to make the third droppable.

              1 Reply Last reply Reply Quote 0
              • S
                snazy2000
                last edited by

                Hey guys

                I saw this post a few days ago and thought i would have ago. I still have loads of work to do to but here a start.
                Ive got few more icons to put in (at the top) im also going to change the interfaces widget and the sys info widget to match the themes of the others.

                Ive also got to do some of the other pages heres what ive done so far

                Tabs
                Boostrap text boxes
                got rid of the icon in the boxes changed all the buttons to boostrap buttons

                Untitled.png
                Untitled.png_thumb
                Untitled2.png
                Untitled2.png_thumb

                1 Reply Last reply Reply Quote 0
                • C
                  charlie0440
                  last edited by

                  @snazy2000 good work! Do you use github. There's no point two of us working on different projects. I too played with the dashboard today

                  1 Reply Last reply Reply Quote 0
                  • S
                    snazy2000
                    last edited by

                    I use BitBucket and looks good.

                    I've also now edited the login page. I am planning on starting again because im not really licking the look that i had want a better view.

                    I am now off college until September so got plenty of time to get this all done!!

                    the only issue i'm thinking of with the way we are doing this (editing the main files) is that themes will not work any more.

                    It would be better if it could be done in a theme but its just not possible because of the way the whole web GUI is coded.

                    Untitled.png
                    Untitled.png_thumb

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

                      It would probably be a good idea at this point to get some input from one of the project devs so that your efforts are most productive. At least more likely to be accepted.  :)

                      I have to commend both of you for getting stuck in where others have only offered comment. At the very least it shows what can be done.

                      Steve

                      1 Reply Last reply Reply Quote 0
                      • C
                        charlie0440
                        last edited by

                        @snazy2000:

                        the only issue i'm thinking of with the way we are doing this (editing the main files) is that themes will not work any more.

                        It would be better if it could be done in a theme but its just not possible because of the way the whole web GUI is coded.

                        I had based my design on twitter bootstrap and was planning on removing all the existing css from pfsense, and getting it all into one file "bootstrap.css", as craymore said this would be best and will make reading the code easier.

                        Another advantage being it would be easy to theme as there would only be one css file

                        1 Reply Last reply Reply Quote 0
                        • S
                          snazy2000
                          last edited by

                          I think i am going to setup a dev pfsense box and download yours and then edit from there again.

                          1 Reply Last reply Reply Quote 0
                          • S
                            snazy2000
                            last edited by

                            Just installed your code in to my dev box and im getting tonnes of errors.

                            Warning: require_once(shortcuts.inc): failed to open stream: No such file or directory in /usr/local/www/fbegin.inc on line 8 Fatal error: require_once(): Failed opening required 'shortcuts.inc' (include_path='.:/etc/inc:/usr/local/www:/usr/local/captiveportal:/usr/local/pkg') in /usr/local/www/fbegin.inc on line 8

                            also got one about set_language in the guiconfig file

                            1 Reply Last reply Reply Quote 0
                            • C
                              charlie0440
                              last edited by

                              is that on 2.0.3? I've been coding against 2.1 as I had loads of issues with JQuery in 2.0.3.

                              Edit: I can highly recommend a virtual box (or any virtual machine) install. All that is required is the latest snapshot iso load up the machine and if you screw it up just reboot the VM.  ;D

                              1 Reply Last reply Reply Quote 0
                              • S
                                snazy2000
                                last edited by

                                Thats on 2.0.2 and 2.0.3

                                1 Reply Last reply Reply Quote 0
                                • C
                                  charlie0440
                                  last edited by

                                  @snazy2000:

                                  Thats on 2.0.2 and 2.0.3

                                  I suggest you move to 2.1 as there have many commits which affected the GUI code, plus there's no point working against an old build.

                                  If you are continuing against 2.0x the only post of mine with files which should work is this one > http://forum.pfsense.org/index.php/topic,48140.msg333804.html#msg333804

                                  1 Reply Last reply Reply Quote 0
                                  • jimpJ
                                    jimp Rebel Alliance Developer Netgate
                                    last edited by

                                    Any such work should be using a 2.1 base mostly because 2.0.x was all using prototype.js, 2.1 was converted to jQuery.

                                    Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

                                    Need help fast? Netgate Global Support!

                                    Do not Chat/PM for help!

                                    1 Reply Last reply Reply Quote 0
                                    • S
                                      snazy2000
                                      last edited by

                                      Well im bit of an idiot i used to be on 2.1 but during a 1am madnas when i saw 2.0.3 was released i downgraded (thought i was upgrading)

                                      I am now upgrading to 2.1 again! Duh…

                                      1 Reply Last reply Reply Quote 0
                                      • C
                                        charlie0440
                                        last edited by

                                        So I've been busy and had put this project to rest (temporarily).

                                        I Revisited it tonight but took a different approach. I started working on it as a theme ie CSS changes as opposed to rewriting the HTML.
                                        In the process of attempting to get twiitter bootstrap implemented I ended up with a very basic full screen theme (with no fancy features) based on the pfsense_ng theme.

                                        Anyway I pushed it to pfsense master so maybe it will get merged.

                                        https://github.com/pfsense/pfsense/pull/647

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

                                          Looks good but more columns are needed, they dont have to be wider…

                                          1 Reply Last reply Reply Quote 0
                                          • C
                                            charlie0440
                                            last edited by

                                            @Supermule:

                                            Looks good but more columns are needed, they dont have to be wider…

                                            Easier said then done.

                                            I pretty much have accomplished this in my testing. I have a version which has 3 columns which are droppable but I haven't figured out how to save their state (Ajax code).

                                            Problem is this can't be implemented as a theme. It requires changes to the HTML & javascript. Which I guess as most of the existing themes are fixed width would require all the existing themes to be edited :(

                                            Edit: Does anyone know where the source code for the widescreen package is?

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