BOUNTY: Web GUI reprogramming

xbipin

It would be a page who will integrate the current items, no more.

But made in a modern design that allows for adaptation to different resolutions and widths.

+1, all resolutions and widths is what every1 needs and a better looking design with not so much red color ;D

stephenw10

If you wanted to do something like this as a package I would imagine it running along side the existing interface rather than replacing it. In the OpenWRT project a similar thing happened some years ago when a small group of developers wanted more GUI control. They created the WebIF² package. It no longer exists because the main webgui caught up with them (it was merged? :-).
http://www.x-wrt.org/

Steve

charlie0440

I read this thread today and learnt about stuff I had never heard of ie Twitter bootstrap. This intrigued me…

I am NOT a web developer but after 10 mins on the simplest looking pfsense page I managed to make a responsive arp page. Its not much to look at but I was able to pretty much copy and paste the existing php code into the bootstrap copy template I had made to make it work ie no amendments were made to the code (just removed the menus, themes etc).

Screenshots > http://imgur.com/a/s8jKs#1

So the page title is being pulled from pfsense, as is the arp table but I haven't looked at importing the menu yet!

I'm gonna have a play tomorrow night and see what I can do.

Edit: figured out the menus they are imported and working fine

Clear-Pixel

Not to bad charlie0440

Menu would be a great starting point but would require some jquery modifications for the menu controls. Most likely it would run into much more work than it seems to make everything work in harmony.

Take a look at the http://mosaicpro.biz/adminplus/php/ template if you haven't already ….. very sweet side menu layout. Be sure to check out the layout options in left bottom corner.

The standard Pfsense Theme option under System: General Setup might be the best one suited since it's already setup as a side menu.

Need some help give me a ring...

Here is one example method of a truly responsive table. There are other ways of doing it, but this is just a popular way of handling tables.

![responsive table.jpg](/public/imported_attachments/1/responsive table.jpg)
![responsive table.jpg_thumb](/public/imported_attachments/1/responsive table.jpg_thumb)

charlie0440

Maybe I missed something but the menu works with minimal changes made (sorted it after my screenshots).

Im gonna start afresh tonight and make a decent attempt.

Do you have some links to good examples (source code) not images. I'm more of a hack some code together then write from scratch.

Clear-Pixel

The link to the admin template is a very good example 99% of code is open source. If you need more examples just go to themeforest.net and codecanyon.net

Help solving coding problems stackoverflow.com is the best place to go on the web. They have other sights that are tailored to other technical computer related stuff.

You should highly consider using mosaicpro.biz/adminplus/php/ as a design reference. He is using some of the most productive methods in backend production.

There are some things you can do in CSS3 for collapsing, expanding and hiding divs for a sidebar menu, but sometimes you need jquery. Some browsers still have issues with CSS3 but by using jquery you eliminate all issues. You could use CSS3 and specify Chrome or Firefox which is supporting the majority of all of the CSS3 specifications.

charlie0440

So a little update. Getting the menu integration was quite straightforward and the way pfsense webGUI is written means that it works for all pages.

There seems to be some bugs (probably in my code) which messes some pages up. But it looks ok on most pages.

Note I have not touched any code per page ie all tables and forms are exactly how they are coded in stock pfsense. I have only edited the head.inc and fbegin.inc (a bit like editing all the frames except the mainframe). This has resulted in a responsive website on most pages.

Im not sure if this is something I can really run with, without some guidance/help from someone who knows pfsense and web development. I feel it wouldn't be such a huge job to a web developer, it only really needs one good template then someone/myself would have to go through each page and just amend the class names of each div, form, table etc

I would be keen to know what people think of the images so far?

screenshots > http://cubeupload.com/codes/56151b

PS I did make a new menu > Logout which I think is kinda cool

stephenw10

Looks good. :)
I appreciate the fact that you've actually gone and done something as opposed to just talking about it. Keep it up!

Steve

Supermule

Very good! Its not so much for the windows with config that needs redesign, but the dashboard to use the entire width of the screen. But I get where your going and it looks really good.

charlie0440

@Supermule:

Very good! Its not so much for the windows with config that needs redesign, but the dashboard to use the entire width of the screen. But I get where your going and it looks really good.

Well with the changes I have done all pages are now full width

Supermule

What about doing 80%-90% width in the CSS to leave a small edge around everything to make it nicer! ;)

Its more like the number of columns than the actual width of the widget.

charlie0440

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

charlie0440

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

charlie0440

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

marcelloc

Charlie, did you kept autosize/scroll menu?

xbipin

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

charlie0440

@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

charlie0440

~~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!

marcelloc

@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.

charlie0440

~~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