BOUNTY: Web GUI reprogramming

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

[Clear-Pixel]

I hate the horizontal menu….

[charlie0440]

@Clear-Pixel:

I hate the horizontal menu….

Thanks for the constructive/unrelated feedback!

If it bothers you that much why don't you do something about it. People have different opinions on what they want for the GUI, can't keep everyone happy. Personally I like the horizontal menu.

[c0urier]

Hi Charlie0440:

The save button is stuck: http://prntscr.com/1x47i7

Else it's working perfectly.

[charlie0440]

@courier can you elaborate other then a screenshot of a button.

[c0urier]

When you click "Save settings" it reloads the page, and the "Save settings" button is still here. Need the index.php source or?

[stephenw10]

@Clear-Pixel:

I hate the horizontal menu….

You mean the main menu across the top?
Any particular reason?

Steve