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

BOUNTY: Web GUI reprogramming

Scheduled Pinned Locked Moved Bounties
256 Posts 31 Posters 177.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 May 1, 2013, 9:17 AM

    Can't remember what they are set to, but if you look at the screenshots they are not 100%

    1 Reply Last reply Reply Quote 0
    • C
      charlie0440
      last edited by May 1, 2013, 8:23 PM May 1, 2013, 3:25 PM

      Ok so I only have one issue with this template. It seems a single line of code is messing up the CPU / memory % boxes on the dashoard. Otherwise it looks good

      The culprit line:

      This line is one of the most important lines for the template so I can't remove it. Not sure why its causing an issue, any ideas?, it makes the boxes really big. It might just need some changes to the index.php file to fix this.

      Anyway if anyone wants to have a play / look at what I have so far, download link > https://dl.dropboxusercontent.com/u/12367642/pfsenseGUI.zip I would only try it on 2.0.2/3 not a nightly as I was building against the stable and am sure some changes since will probably have broken it.

      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

      I find it easiest to ssh in and just do a cp command ie:
      cp /usr/local/www/fbegin.inc /usr/local/www/fbegin_bk.inc

      If your on a read only build dont forget to run this command first:
      /etc/rc.conf_mount_rw

      3. Copy the files to pfsense

      Easiest way is via scp on linux, you could copy and paste via the edit file on the webGUI

      linux:
      replace with your ip address (here I am copying the contents of the pfsenseGUI folder from the zip)

      scp pfsenseGUI -r * root@192.168.1.1:/usr/local/www

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

      To revert back to the original files:

      To revert to the original files you need to restore the backed up files 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

      Please provide feedback (im looking at stephen here, he loves getting his hands dirty)

      Edit: you can change the theme in the general settings but it will only effect the background color :(

      Edit 2: had a thought the dashboard issue may just be a conflicting class name. I'll investigate it tonight

      1 Reply Last reply Reply Quote 0
      • C
        charlie0440
        last edited by May 1, 2013, 9:03 PM May 1, 2013, 7:46 PM

        Another update, solved the dashboard problem, I had to implement new progress bars (they are blue unless you go over 90% then they are red).

        They all work, although the CPU progress bar causes some of the dashboard to hang 1-2secs before rendering

        Updated zip file available here: https://dl.dropboxusercontent.com/u/12367642/pfsenseGUI.zip.

        Screenshots here: http://cubeupload.com/codes/38b032

        1 Reply Last reply Reply Quote 0
        • M
          marcelloc
          last edited by May 2, 2013, 2:24 AM

          Charlie, did you kept autosize/scroll menu?

          Treinamentos de Elite: http://sys-squad.com

          Help a community developer! ;D

          1 Reply Last reply Reply Quote 0
          • X
            xbipin
            last edited by May 2, 2013, 5:05 AM

            y not change the table header background to blue as well, it would flow better with the layout and color change

            1 Reply Last reply Reply Quote 0
            • C
              charlie0440
              last edited by May 2, 2013, 6:52 AM

              @marcelloc:

              Charlie, did you kept autosize/scroll menu?

              Not aware I have touched or come across any scrollbar functions. Are you having an issue? If so please describe, provide a screenshot

              @xbipin:

              y not change the table header background to blue as well, it would flow better with the layout and color change

              I haven't really begun to style this yet  ;) I didn't intend to redo the progress bars, but they were broken with my template so I had to fix them.

              My plan is to get a 100% working full screen template by editing as little code as possible. Once that is complete, I can move on to changing colors, styles and maybe create some themes. I can also look at styling/changing on a per page basis which would then allow some for cool features.

              This brings me on to what I hope is the only existing issue, which unfortunately is a big one! I need some help as I don't know where to begin fixing this. I've noticed in its currently state the menus work great but its broken the csrf checks. You can see this by going to Diagnostics > System Activity. Now this can be fixed by removing the import of the jquery file I have been using (downloaded from the jquery website), remove this line and the csrf works:

              BUT it then breaks the menu, they are no longer dropdown!

              This is stuff I know nothing about, if I am correct pfsense 2.0.x uses "scriptaculous" instead of jquery? In pfsense master it has a custom jquery found here:
              / usr / local / www / javascript / jquery

              I tried importing that custom jquery instead but the menus still don't work.

              Can anyone help here? Its key, if I can get over this it will open the door to a possible complete redeisgn

              1 Reply Last reply Reply Quote 0
              • C
                charlie0440
                last edited by May 2, 2013, 10:56 AM May 2, 2013, 9:49 AM

                another update. Got the csrf working :), just the table is not being displayed  :(

                ^^ that causes the interfaces pages not to render properly. Again jquery related I assume? As it only shows the enable interface box and not all the info. This is a function show_allcfg inside a javascript tag on the interfaces.php page.

                its either have a working csrf code, or lose some of the gui, dependent on the placement of the import jquery line.

                I'm guessing the jquery file needs amending, I can't figure it out

                I'm outta my depth here!

                1 Reply Last reply Reply Quote 0
                • M
                  marcelloc
                  last edited by May 2, 2013, 11:47 AM

                  @charlie0440:

                  Not aware I have touched or come across any scrollbar functions. Are you having an issue? If so please describe, provide a screenshot

                  Not at all, it's just a feature on 2.1 that was a long time issue.

                  Treinamentos de Elite: http://sys-squad.com

                  Help a community developer! ;D

                  1 Reply Last reply Reply Quote 0
                  • C
                    charlie0440
                    last edited by May 2, 2013, 5:58 PM May 2, 2013, 3:18 PM

                    ahh i give up. I restored the original files so I was back at a stock looking pfsense. By adding this single line to either the head.inc or the fbegin.inc its breaking loads:

                    http://cubeupload.com/im/2ZSreG.png

                    Do you notice anything odd? enable interface is ticked but nothing is displayed. Also the csrf breaks with this one line. It must be conflicting with another js file but I don't know where to begin. Are there no devs readings this thread, who can at least point me in a direction? The plan was a twitter bootstrap template which requires jquery. I have no idea if this is a big issue to fix or a newbie oversight on my behalf.

                    Edit: Drama over, I ditched 2.0.x and have moved to building against a 2.1 nightly its all seems to be working fine ;D

                    1 Reply Last reply Reply Quote 0
                    • C
                      charlie0440
                      last edited by May 2, 2013, 10:53 PM May 2, 2013, 9:34 PM

                      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 May 3, 2013, 9:54 AM

                        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
                        • S
                          stephenw10 Netgate Administrator
                          last edited by May 3, 2013, 1:09 PM

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

                          Steve

                          1 Reply Last reply Reply Quote 0
                          • C
                            charlie0440
                            last edited by May 3, 2013, 2:24 PM May 3, 2013, 2:16 PM

                            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 May 5, 2013, 10:07 PM May 5, 2013, 9:57 PM

                              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 May 6, 2013, 1:28 PM

                                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 May 6, 2013, 4:56 PM

                                  @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 May 7, 2013, 5:11 PM

                                    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
                                    • S
                                      stephenw10 Netgate Administrator
                                      last edited by May 7, 2013, 5:56 PM

                                      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 May 7, 2013, 6:21 PM

                                        @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 May 7, 2013, 7:49 PM

                                          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
                                          91 out of 256
                                          • First post
                                            91/256
                                            Last post
                                          Copyright 2025 Rubicon Communications LLC (Netgate). All rights reserved.
                                            This community forum collects and processes your personal information.
                                            consent.not_received