PDA

Bekijk de volledige versie : Neue Farben fürs Webinterface.



Chris1993
27-08-2008, 15:48
Hallo,

ich weiß nicht, ob jemand hier daran Interesse hat, aber ich hab die Farben des
Webinterfaces einwenig geändert, weil ich sie persönnlich einwenig zu schrill fand. :eek:

Um das Webinterface zu ändern, muss /www neu gemounet werden.
Bei mir liegt es in /opt/www. Dort müssen alle in der ZIP vorhandenen Dateien reingelegt werden.
Dafür muss httpd mit "killall httpd" beendet werden. Beim Aufrufen der Webseite wird httpd dann anschließend neugestartet :)

Ein kleiner Screenshot ist am Post beigehängt.

Chris

Wessman
03-09-2008, 18:08
gern, ich habe aber leider kein plan wie ich dein Theme in mein www Ordner bekomme.

thejew
05-09-2008, 00:19
gern, ich habe aber leider kein plan wie ich dein Theme in mein www Ordner bekomme.

Am besten Du kopierst den kram wie chris schon sagt nach /opt/www wen dir das überhaupt nichts sagt würd ich mich erstmal in wengis tutorial einlesen. Danach musst Du den normalen /www übermounten. Das geht wie folgt wen deine daten in /opt/www sind:

mount /opt/www /www
dann wie chris schon geschrieben hat

killall httpd
dan sollte beim nächsten zugriff aufs webif alles funzen.
das lässt sich natürlich auch in die post-boot eintragen damit es bei jedem neustart wieder funktioniert!

Allerdings finde ich diese methode nicht 100 % elegant, aber ich fürchte man müsste die firmware mit den modifikationen neukompilieren um dem problem aus dem weg zu gehen?
Hat damit irgendwer schon erfahrung gemacht? Wär doch eigentlich ganz intresannt dann könnte man auch gleich noch ein paar modifikationen an dem webinterface vornehmen.
Aber trotzdem eine schöne modifikation Chris!!!!

thE_29
05-09-2008, 07:40
Was oder wo hast du geändert um die Farben zu setzen?
Bzw, isses einfach durch eine andere austauschbar?

Vielleicht könntest ja eine Version machen, wo start der farbe HIER_FARBE steht und man könnte es via sed replacen lassen mit jeder x-beliebigen Farbe!

Chris1993
06-09-2008, 10:54
Hey,

die Farben zu ändern ist einwenig aufwendig, weil der ganze Quelltext vom Webinterface irgendwie verpfuscht ist. Da wird der Quelltext teilweise von JavaScript noch mal überschrieben... :rolleyes:

Ich habs wie folgt gemacht:
ALLE Dateien, bis auf den /graph Ordner in Notepad++ geladen, dann nach dem Farbcode gesucht (ich glaub das war #660066) und durch einen anderen ersetzen lassen.

Ich hab schon versucht das ins post-boot Script zu schreiben, aber das brachte irgendwie nichts. Vielleicht hab ich auch einfach irgendetwas falsch gemacht.

Wenn ich genug Zeit hab, hab ich mir vorgenommen irgendwann ein komplett anderes zu machen,...

Chris

thE_29
06-09-2008, 11:43
Also müsste ein Script mit sed einfach diesen Farbcode durch einen anderen ersetzen?
Ich werds mal am Abend daheim testen.

Chris1993
06-09-2008, 12:15
Hi,

die Farbcodes sind nicht nur im Script vorgegeben, sondern auch im HTML Quelltext, deswegen hab ich den Farbcode in allen Dateien mit Notepad++ ersetzen lassen.

Ich hab mir vorhin einwenig Zeit genommen und versucht ein Layout für ein neues Webinterface zu erstellen. Das Menü ist an das von der Fritz Box angeleht, weil ich es ziemlich übersichtlich find'.

Man müsste allerdings sehen, ob es sich das Layout mit den Funktionen anfreunden würde ;)

Wenn jemand will kann ich ihm/ihr auf Anfrage auch die PhotoShop Datei schicken, dann kann er/sie damit rumspielen, falls Ideen vorhanden sind.

Chris

Chris1993
07-09-2008, 12:05
Hi,

ich hab mich gestern kurz rangesetzt und ein neues Webinterface ausprobiert.
Bisher hab ich nur eine Statusanzeige gemacht, werd aber versuchen ein komplettes fertig zu bringen.

Wer will, kann es ruhig mal ausprobieren :)
Einfach in den /opt/www Ordner schieben, so wie schon in den vorherigen Posts beschrieben

Die Statusanzeige lässt sich mit http://[IP.DES.ROU.TERS]/index2.asp anzeigen :)

Chris

Chris1993
14-09-2008, 21:09
Hi,

ich hab grade erst bemerkt, dass ich in der ZIP eine Datei vergessen hab.
Entpackt den Ordner am besten in irgendein Verzeichnis und übermountet das /www Verzeichnis.

Als Beispiel:

mkdir /opt/webinterface
killall httpd
mount /opt/webinterface /www

Beachtet, dass im Moment nur die Statusanzeige fertig ist ;)

thE_29
15-09-2008, 07:51
Na, da werde ich deine GUI doch gleich mal austesten ;)

Ist das eigentlich Versionsunabhängig oder ist das für die letzte Oleg FW?

Chris1993
15-09-2008, 13:22
Ich sag mal so: Ich habs unter der 10er Version erstellt, aber ich denke, dass es auch in den früheren Versionen funktioniert. Ich kann es ja mal irgendwann ausprobieren :)

Falls was bei den Dateien fehlen sollte, bitte bescheid sagen ;)

Chris

Chris1993
28-09-2008, 08:22
Hi,

ich hab mir wieder einwenig Zeit genommen und das GUI um ein paar Funktionen
erweitert. Ich hoffe, dass dort so wenig Fehler wie möglich drin sind. Falls ihr
welche findet (egal was für Fehler, obs ein Fehler im Quelltext ist oder nur ein kleiner Rechtschreibfehler!)
schreibt es ins Forum, schickt mir eine PM oder eine E-Mail an chris [at] visix [dot] info!

Ich hoffe es gefällt euch :)

http://img219.imageshack.us/img219/9012/bersichtaw4.th.gif (http://img219.imageshack.us/my.php?image=bersichtaw4.gif)http://img219.imageshack.us/images/thpix.gif (http://g.imageshack.us/thpix.php)

Veränderungen:
- Systemkommandos wie ifconfig / mount werden angezeigt
- Systemlog wird angezeigt
- Druckerstatus hinzugefügt

Chris1993
19-10-2008, 20:56
Das Projekt mit dem GUI ist vorzeitig auf Eis gelegt. Es gab keine Rückmeldungen und Vorschläge dazu, deshalb denke ich einfach, dass es wohl überflüssig ist das Webinterface zu erneuern und zu erweitern.

legolas
19-10-2008, 22:16
Hi chris1993,

Dein Webif sieht echt gut aus (schöner Hintergrund und übersichtlicher Aufbau). Hab es selbst noch nicht ausprobiert. Basiert es auch auf ASP oder wie läuft das?

Ich hatte auch mal darüber nachgedacht das Webif zu verschönern. Ich würde dann aber komplett auf PHP setzen, weil man da mehr Möglichkeiten hätte.

Im Grunde genommen beinhaltet das Webif von Asus alles nötige. Es sieht nur nicht schön aus. Es wirkt lieblos zusammengeschustert. Eine Überarbeitung würde ihm gut stehen.

Dein Versuch die Farben zu ändern ist ein guter Ansatz. Vielleicht könnte man noch ein schöneres Hintergrundbild einfügen und die Farben an den Hintergrund angleichen (in Anlehnung an Deinen zweiten Versuch). Dann ist zwar das Layout immer noch das selbe, nur würde es etwas angenehmer daherkommen.

Gibt es unter ASP eigentlich auch so etwas wie CSS oder kann man dort CSS benutzen? Dann wäre die Sache ja etwas einfacher. Wenn man über ein neues Webif nachdenkt, sollte man auf jeden Fall die Mehrsprachlichkeit berücksichtigen. Das wäre ein wirklicher Mehrwert.

Norbert

Nachtrag: Blöde Frage von mir, hätte mir gleich Deine Files ansehen sollen. Du benutzt also auch ASP und CSS. Könnte man dann nicht auch das bestehende Webif "einfach verschönern". Fragt sich nur, ob es ohne all zu großen Aufwand geht.

Chris1993
24-10-2008, 10:39
Hallo,

vielen Dank für deinen Post.

Ich wollte, dass das Webinterface weiterhin auf dem seltsamen kaum bis gar nicht dokumetierten ASP läuft, damit man nichts nachinstallieren muss.

Was mir dabei aufgefallen ist, dass das Webinterface nur HTML, ASP und Gif Dateien ausgibt.

Du kannst das Webinterface ja mal mit meinem neuen Übermounten.
Es zeigt Status mäßig bisschen mehr an. So kann man unteranderem auch die gemouteten Verzeichnisse einsehen....

Christian

thejew
24-10-2008, 12:01
gerade mal die letzte beta ausprobiert ... gefällt mir schon sehr gut.
Die zusätzlich funktionen sind durchaus nützlich.
Würde mich freuen wen Du Dein projekt weiter fortsetzt!

Chris1993
24-10-2008, 13:16
Vielen Dank für deine Rückmeldung.

Ich würd mich freuen wenn die User sagen würden, was sie gern auf den ersten Blick sehen.

legolas
29-10-2008, 22:09
Hi Chris,

noch mal ne Frage, willst Du das Webif komplett überarbeiten oder nur um ein paar Funktionen erweitern?

Könnte man denn das alte Webif von Asus einfach aufpeppen oder müssen alle Seiten neu geschrieben werden?

Warum nicht gleich auf einen richtigen HTTP-Server setzen, wenn der alte eh nichts kann.

Fragen über Fragen ...

Norbert

Chris1993
09-11-2008, 10:35
Hi,

ich wollte keinen neuen Server nutzen, damit man nichts nachinstallieren muss, damit auch User die nicht gern am Router rumwerkeln vom neuen Webinterface profitieren können ;D

Chris

newbiefan
10-11-2008, 20:35
Also, Chris1993 - ich finde Deine Arbeit super - wenn du einiges weiter entwickeln willst, werde ich mir deine Files aufspielen. Es geht ohnehin relativ einfach, wenn man die FW auf einen Stick spielt, auf dem Stick die Files ändert und nur die nvram Variable umschreibt: nvram set bootdev=/dev/scsi............
unter oleg.wl500g.info
(Root file system on the external USB drive) stehen die Infos wie es geht - ist schnell und einfach erledigt.
Will man normal booten, einfach den Stick rausziehen, steckt er am USB Port, bootet der Asus mit der geänderten FW direkt vom Stick.
Ich benutze diese Möglichkeit um tiefgreifende Änderungen an der FW zu testen - geht nichts mehr, einfach Stick rausziehen und alles ist wieder in Ordnung.
LG

Pay87
24-11-2008, 17:53
Kann ich das auch für die Premium Version nutzen? :confused:

Pay87
24-11-2008, 22:39
Kann ich das auch für die Premium Version nutzen? :confused:

bzw wenn ich die Datei via SSH rüberkopieren will erhalte ich immer die Fehlermeldung, dass das ganze nur read only ist.. :(

Edit:

Habs jetzt geschafft :)
Werde mich selber mal am Designen versuchen, da ich nicht weiss ob das hier auch mit der Premium Version kompatibel ist.
Einzige was nervt ist, dass ich jedes mal nach einem Neustart die Files übermounten muss.
Habe es in die post-boot eingetragen, jedoch hatte das keinen Effekt, irgendeine Idee?

Chris1993
25-11-2008, 16:07
Ehm, nur weil da im Header WL500g steht, heißt das noch lange nicht, dass das nur für das Modell geeignet ist. Ich hab selbst ein WL500g Premium ;)

newbiefan
25-11-2008, 21:39
Einzige was nervt ist, dass ich jedes mal nach einem Neustart die Files übermounten muss.
Habe es in die post-boot eingetragen, jedoch hatte das keinen Effekt, irgendeine Idee?

Wie gehabt in die post-boot eintragen und danach:
flashfs save && flashfs commit && flashfs enable && reboot

Pay87
28-11-2008, 00:40
Oh, das wusste ich nicht, das ist ja dann super :)
Die Funktionen funktionieren aber alle noch normal, oder gibt es irgendwelche "Known Bugs" bzw bekannte Fehler? Danke nochmal! :)

Edit:
Erstmal ein grosses Lob!
Sieht echt sehr schick aus :)
Unter WLAN Channels bekomme ich hinter meinen Kanal noch eine Klammer angezeigt ")" ist das gewollt?
Ist es normal das ausser dem Status noch keine anderen funktionen, funktionieren?

Chris1993
30-11-2008, 13:27
Danke für das Lob :)

Die Klammer hinter dem Channel ist wohl ein Tippfehler... Ich werde mich in nächster Zeit wieder einwenig mit dem neuen Webinterface auseinandersetzen und die Funktionen erweitern. Zur Zeit ist ja - wie schon gesagt - nur die Statusanzeige fertig :/

Christian

Pay87
01-12-2008, 00:49
Danke für das Lob :)

Die Klammer hinter dem Channel ist wohl ein Tippfehler... Ich werde mich in nächster Zeit wieder einwenig mit dem neuen Webinterface auseinandersetzen und die Funktionen erweitern. Zur Zeit ist ja - wie schon gesagt - nur die Statusanzeige fertig :/

Christian

Hi das wäre natürlich super ;)
Ich bleib auf jeden Fall dran an der Sache, ich glaube das "schwerste" nämlich das Grundlayout hast du ja schon umgesetzt, den tatsächlichen Inhalt kann man doch bestimmt teilweise im source code kopieren, was selbstverständlich auch noch ein bisschen gefrickel ist..
Vlt kannst du eine Art iFrame machen und die jeweiligen Funktions-Seiten im Hauptcontainer reinladen lassen und nach und nach die Funktionen in einem Seperaten-Layout intergrieren, sö hätte man gleich die Möglichkeit die Seiten zu nutzen, ohne das was an ihnen verändert werden müsste. :)

Chris1993
02-12-2008, 15:20
Hey,

die Idee mit der iFrame ist sicherlich nicht schlecht, aber der Quelltext von dem originalen Webinterface ist - find ich - ist totaler Mist. Deswegen wollt ich ihn zum größten Teil selbst neu schreiben

Christian

Chris1993
05-12-2008, 16:48
Hallo,

ich hab mich erstmal entschieden, dass alte Webinterface weiter zu entwickeln, weil das einwenig einfacher ist als ein komplett neues zu schreiben.
Die Reihenfolge des Menüs hab ich einwenig geändert. Als neue Funktion ist wget unter 'Status' hinzugekommen mit dem man Dateien in ein bestimmtes Verzeichnis laden kann. Im Moment ist das aber noch eine Baustelle ;)

Übersich der Änderungen (im Vergleich zur Standard Version):
- Menü Reihenfolge geändert und auf weniger Punkte reduziert
- Quicksetup entfernt
- WLAN Status in einem PopUp
- WLAN kann durchgescannt werden
- wget kann über das Webinterface bedient werden (USB Application -> WGet)

Christian

newbiefan
05-12-2008, 18:20
Werde ich morgen ausprobieren.....
LG

Chris1993
06-12-2008, 19:02
Hey,

ich hatte ein Bug in dem wget-Teil, deswegen gibts jetzt eine neue Version davon. Einfach die mit der vorhandenen ersetzen :)

Christian

Fridolin4711
30-12-2008, 21:31
ersmal grosses Lob !

kanns sein das auch wget.asp nix tut ? find den javascript wget recht häufig in den asp seiten.

Aber mein eigentliches problem: Kann sein das die Systemcmd nur in der /bin/sh (busybox originalumgebung) läuft. wenn ich einen commando der /opt/bin oder /opt/sbin ausführen mächte kommt nix, auch nicht in der Seite System Command selbst.

zb. ipkg update:
sh: ipkg: not found

Chris1993
04-01-2009, 17:11
Wie meinst das, dass die wget.asp nichts tut?
In der wget-Datei ist das Formular für den Download- und Speicherort der Datei. Die Daten werden über das JavaScript (die Funktion ist in der functions.js drin) an die apply.cgi geschickt...

(Kennt jemand vieleicht eine Seite wo die Funktionen der Apply.cgi beschrieben sind?)

Wie meinst du das mit dem 'find den javascript wget recht häufig in den asp seiten'?

Chris1993
13-01-2009, 17:53
*** Projekt beendet -> Auf DD-WRT umgestiegen :P ***

sanktis
13-07-2009, 15:33
to >> Chris1993
I am take,apply you graphic for logo and total change completely rewrite the code to the newly, used the css layout...
all hml code is precisely valid.
sorry for my english...



http://2222.php5.cz/wl500gp/files/wl500gpv2.png

http://2222.php5.cz/wl500gp/files/th_index_ipconfig.png

http://2222.php5.cz/wl500gp/files/th_index_route.png


Here you can try webui-july.2009 (http://2222.php5.cz/wl500gp/files/webui-july.2009.zip)

thE_29
20-07-2009, 09:13
@chris: DD-wrt hat ja kein USB Support oder?