BOUNTY: Web GUI reprogramming

[JeGr]

I have to agree with Clear-Pixel here, if the theme is awesome on it's own (and can easily be customized in terms of an e.g. own logo and a color scheme), why want another? The screens from Kelsen's ans Charlie's efforts seem like such is the case, so I fully agree to perhaps deliver that as a package that - on uninstall - reverts back to the original theme files and structure.

I can remember at least one or two packages, that were built the same way in 1.2.x times. If you installed it, it would knowingly "break" another feature (more or less it replaces it) and on uninstall recovers the old feature. AFAIK the TinyDNS package works that way (or worked) and in the old times before there was the dashboard, you could install the dashboard "over" the status page and it was replaced by that. You even had to reinstall if you wanted the old status back. And with all the capabilities of scripting now, making a backup of certain files should be possible - as long as other packages don't break them.

That's another point: Kelsen/Charlie do you know if your theme(s) work with additional packages that bring their own config pages?

Greets
Jens

[charlie0440]

ok I see. I should be able to make the changes tonight. I'll make a PR to kelsen repo and he can update the zip.

I'll also list some other files he should try adding from master to the zip which might improve the theme (work already committed to master which didn't make it into 2.1, but will be in 2.2)

[charlie0440]

ok so this should have been a 5 minute job, but I cannot get this to work. Not sure if it is caused by some changes you (Kelsen) has made. I'm gonna leave it for you to investigate.

The index.php file you have inside your zip is from pfsense2.1 not master, therefore is needs some changes for this to work. loader.js, the other file required for multiple columns is already good to go.

The changes to index.php you can see in this commit: https://github.com/CharlieMarshall/pfsense/commit/cafb7dfe782cf9677ea5e24ba8dd8f9c014c2f91 & this one https://github.com/pfsense/pfsense/commit/bb38e8e5f970456e3430cb3a888a1abba5aa2b3b

the entire PR for your reference is here: https://github.com/pfsense/pfsense/pull/682

at this point it should be working, but it is not. The buttons are displayed fine but the columns are not connected together ie you can't drag and drop (jQueryui).  I'm not sure if its because there seems to be multiple jquery imports which may be conflicting:

I suspect this a jquery, jqueryUI issue that you'll have to hunt down.

–---------
On another note, I guess unrelated but you never know: there are prototype errors on the console:

Uncaught TypeError: Object [object Object] has no method 'dispatchEvent' prototype.js:5734
fire prototype.js:5734
_methodized prototype.js:438
fireContentLoadedEvent prototype.js:5820

You may have better performance if you add this commit: https://github.com/CharlieMarshall/pfsense/commit/5fa152f6f6b47054e7a04e9d79b94eab2916594c which fixes a conflict between bootstrap & prototype. This fixed some wierd behaviour on my theme.

Also you might want to try this commit which changes the progress bars on the system information widget: https://github.com/pfsense/pfsense/pull/772

Kelsen if you have time you could try applying your changes to this base https://github.com/CharlieMarshall/pfsense/commits/newTheme you would also have to take the index.php from there as well then you could find out what breaks the columns as you apply your code bit by bit.

–-------------
Finally your script to install, You need to cp the theme folder first and then apply the theme before copying the rest of the files, or at least thats the only way it worked for me.

[kelsen]

I managed to make the columns work but, somehow it's not saving the preference, may you (charlie0440) know why?!
https://github.com/kelsen/pfsense/commit/4cd4376bc90058c8830c9e406ca26e156b035fc4

You may have better performance if you add this commit: https://github.com/CharlieMarshall/pfsense/commit/5fa152f6f6b47054e7a04e9d79b94eab2916594c which fixes a conflict between bootstrap & prototype. This fixed some wierd behaviour on my theme.

There is no /usr/local/www/javascript/bootstrap.js

Finally your script to install, You need to cp the theme folder first and then apply the theme before copying the rest of the files, or at least thats the only way it worked for me.

That's right, I'm sorry if I have broke someone's pfSense.

[charlie0440]

@kelsen:

There is no /usr/local/www/javascript/bootstrap.js

I mean try making those changes to the bootstrap file in your case:
/usr/local/www/themes/twitter_bootstrap_fs/assets/bootstrap/js/bootstrap.min.js

[kelsen]

fine, but there is no line like yours in bootstrap.min.js
About the problem of saving the columns, do you have any clue what may be?

[charlie0440]

@kelsen, Ok think I found it. You'll using a too old version of jQueryUI, you need to update it. I tried it with 1.9.2 download here: http://jqueryui.com/download/#!version=1.9.2

–---------

On another note, Kelsen if you have based this on my previous work here is a more up to date version. There's quite a few files in there but a lot of the cosmetic changes have already been commited into pfsense master so I have included those. And for anyone else wanting to try this just unzip to your pc and copy the files to pfsense root "/" folder. The files are in the correct subfolders so a simple:

download zip > https://dl.dropboxusercontent.com/u/12367642/myTheme.tar.gz
tar -xvzf myTheme.tar.gz
cd myTheme/
scp -r * root@pfsenseIPaddress:/

#example:  scp -r * root@192.168.1.1:/

Then apply the theme "twitter_bootstrap_fs" in the general settings page. I recommend you test this on a virtual machine, boot the 2.1 live CD, login and enable SSH then perform the above steps.

Edit: some eyecandy: http://imgur.com/a/WK6re

Edit 2: Its not perfect but you get the idea.

Edit 3 (final one): Updated zip - Added my other theme "pfsense_ng_fs" (its not responsive but fullscreen with multiples columns on the dashboard)

Edit 4 (grr): Updated zip - Added fix to display "Diagnostics: Authentication" page (commit: https://github.com/pfsense/pfsense/commit/8ad84ebb49f86e791427110233382bd5e804d503)

[JeGr]

As it seems to me: you two (Kelsen/Charlie) should definetly work together and join forces on this, not only to prevent new themes from breaking old ones (if possible), but also to perhaps deliver a new default one or at least a framework/the groundwork for a theme infrastructure so other themes may be done without breaking others so they can be installed as packages :) Thumbs up!

[c0urier]

How can I fix, so that I can use the columns. I can't add any widget except in the first row.

[kelsen]

@charlie0440:

@kelsen, Ok think I found it. You'll using a too old version of jQueryUI, you need to update it. I tried it with 1.9.2 download here: http://jqueryui.com/download/#!version=1.9.2

You mean jquery.ui.1.9.2-custom.min.js instead of jquery.ui-custom.min.js in head.inc? I tried it, and I have updated fend.inc jquery.ui.1.9.2-custom.min.js too, but It didn't worked. Have you tested with my metrolab theme ?

On another note, Kelsen if you have based this on my previous work here is a more up to date version.

I just used the twitter_bootstrap_fs css nothing else, everything else are original files from pfSense 2.1
It seems that we are working on two different things, and as I am not a developer, it is difficult for me to solve this problem, I may have to leave the widescreen out of the theme.

[charlie0440]

@courier I don't understand, what have you done? I saw early you posted to say you deleted some files. That zip is good to go from a fresh install

@kelsen just spend 5 minutes trying to make your theme widescreen no joy so far. I will revisit another night when I have more time. It must be something you've changed somewhere, as when I go from one of my themes and overwrite with your files, I can no longer drag and drop the columns.

[kelsen]

You cant drag and drop because the jQuery is looking for widgetheader, actually it should be widget-title (index.php and loader.js).
I think it's working now, I just downloaded your zip and started over your index.php. Now I can drag & drop and save.
https://github.com/kelsen/pfsense/commit/2040797a679c08c57dafd821d2a0f6d5c926eb00
There is a issue with mine and yours, it's not possible to drag and drop with default 1 or 2 columns, at least for me. Before I changed the index.php, keeping these lines I was able to drag and drop.

jQuery('#col1').sortable({connectWith: '#col2', dropOnEmpty: true, handle: '.widget-title', change: showSa
ve});
jQuery('#col2').sortable({connectWith: '#col1', dropOnEmpty: true, handle: '.widget-title', change: showSa
ve});

[charlie0440]

dragging with 2 columns works for me

[kelsen]

@charlie0440:

dragging with 2 columns works for me

Well, i'm testing right now, it seems to work when you add or delete a column but, before that, I can't drag.
Can you confirm? Also, squid3 realtime tab is working for you? my don't show any log, just the static page.

Ps.: Testing the metrolab theme with my widescreen display, looks great! yet, some things to fix.

[c0urier]

@charlie0440 - I did the following:

fetch > https://dl.dropboxusercontent.com/u/12367642/myTheme.tar.gz
tar -xvzf myTheme.tar.gz
cd myTheme/
cp -r * /

When I use the twitter_bootstrap_fs theme, non of the menu's are working - When I switch to pfSense_ng_fs the menu's are working again but I still can't use the other columns.

Index.php - http://pastebin.com/4dNZi3J2

[charlie0440]

@courier try cp instead of a scp if your local:

cp -r * /

your index.php is missing column2 for a start thats why you can't drag and drop to it, there is not a columns there.

Look at lines: 647, 655, 666 in the index.php in your unzipped myTheme folder they should match the once on github: https://github.com/pfsense/pfsense/blob/master/usr/local/www/index.php

That line is never printed on your setup, which to me means its not in your index.php. Have you tried this on a new install, Again you posted earlier saying you deleted a lot of files what exactly have you done. Either that or your not copying the tar correctly.

[c0urier]

I did use cp ofcourse I mistyped haha - Sorry!

I deleted the www folder and recovered from a previous backup, but it was an RC and not the final release. Though I did a recover and upgraded to 2.1-RELEASE again. Hope you understand.

[c0urier]

My index.php file is identical to the one you posted.

I tried flashing the upgrade package for pfSense 2.1 to get fresh files in, but for some reason I am still not able to use any other columns.
Any hints would be greatly appreciated, else a reinstall might be the only solution.

[c0urier]

A small update after a Fresh install.

I recovered my config.xml file and the GUI broke again, I then decided to take a config from earlier and recovered it and the GUI worked perfectly again.

Result of test now:
pfsense_ng_fs - Works perfect
twitter_bootstrap_fs - Menu's are not working.

[charlie0440]

So I spend some time working on my widescreen dashboard script today. I really like what I have done  ;) I've made it responsive, ie if you resize the screen it will only display the number of columns which will fit nicely. A video speaks a 1000 word: http://www.youtube.com/watch?v=KmQGiIfEJy0&feature=youtu.be

You can try it out by following these instructions (pfsense 2.1 only):

download the zip: https://dl.dropboxusercontent.com/u/12367642/myTheme.tar.gz

wget https://dl.dropboxusercontent.com/u/12367642/myTheme.tar.gz
tar -xvzf myTheme.tar.gz 
cd myTheme/
scp -r * root@pfsenseIPaddress:/

Then apply the theme "pfsense_ng_fs" OR "twitter_bootstrap_fs" in the general settings page. I recommend you test this on a virtual machine, boot the 2.1 live CD, login and enable SSH then perform the above steps.

It works by ideally setting your preferred dashboard layout ie number of columns when in full screen mode, then clicking save (this is now your saved state), if you now resize the screen if will move the widgets from the last columns to the previous one etc etc and vice versa. If you move widgets around after clicking save the changes will be overwritten on a screen resize (back to your last saved state).

It works really well for mobile phones ie you can have 5 columns on your 1080p screen, open up your mobile (request the desktop version of the site) and it will resize it automatically to 2 columns will all your widgets provided your mobile has a big enough screen, otherwise it will be 1 columns.

I would like some feedback to check if it causes any issues before I request to send it upstream @courier @kelsen (you can just update the loader.js file from the zip its the only file which has been amended). Kelsen feel free to use it.