Aanpassingen Gargoyle webinterface

Status
Niet open voor verdere reacties.
R

rayholland

Gebruiker
Lid geworden
13 okt 2009
Berichten
7
Hallo,

Ik heb een terrarium met 2 slangen, die zeer gevoelig zijn voor schommelingen in temperatuur en luchtvochtigheid. Nu zullen jullie wel denken wat heeft dat nou te maken met javascript ;-)

Nou, om het klimaat beter onder controlle te houden heeft een vriend van mij een klimaat controller gemaakt die verschillende relays aanstuurd. Als hart van deze controller dient een Fonera 2100 router met een custom firmware (openwrt).

De controller werkt perfect, alleen mis ik een mooie webinterface. Nu heb ik op internet een webinterface voor openwrt gevonden die er erg mooi uit ziet (zie www.gargoyle-router).

Deze webinterface maakt gebruik van javascript en als backend haserl.
Echter standaard is deze webinterface te bulky en zou ik graag zien dat er verschillende dingen eruit gesloopt zouden kunnen worden.

Helaas is mijn javascript kennis niet voldoende om dit voor elkaar te krijgen.
Wie o wie, zou me kunnen helpen om de gui te kunnen aanpassen?

Groetjes,
Raymond
 
Heh, wat een origineel idee weer :D

Het uitslopen van dingen kan altijd! Het enige probleem is dat als je het verkeerde eruit sloopt, niets meer wekt.

Ik, en ik neem aan anderen, zouden graag helpen, maar ik weet niet hoe je/we makkelijk dit kunnen doen. Hoe zit deze gargoyle javascritp code precies in elkaar? Is het een los file, of meerdere? Of javascript code IN de html?



:thumb:
 
Hallo Vegras,

Toppie dat ik al zo snel een reactie op mijn projectje krijg.

Het is een soort Framework die gebruikt wordt. Combinatie van HTML/haserl/CSS/javascript.

Ik heb alvast de code van de 'network' pagina op mijn servertje gezet. Zie http://raptor666.shacknet.nu/network.sh en
http://raptor666.shacknet.nu/network.js

screenshot van de 'network' pagina:
http://raptor666.shacknet.nu/network.rtf

Wat nou de bedoeling is van de network-pagina dat de device configuration en wireless eruit gesloopt wordt (het wireless gedeelte moet later in een aparte pagina komen te staan). ZIe http://raptor666.shacknet.nu/network-new.rtf als voorbeeld voor de aangepaste network pagina.

Gr.
Raymond
 
Laatst bewerkt:
Nou, als het goed is kan je gewoon direct in je HTML (in dit geval, de sh-bestand) dingen gaan knippen en plakken.

Voordat je verder gaat is het erg belangrijk dat je een backup maakt! Je wil niet alles opnieuw moeten doen omdat er iets fout gaat.

Het veranderen gaat zo: je network.js bestand heeft een functie genaamd saveChanges(). Deze leest alle velden uit en saved deze waardes. Als je een stuk van je html eruit haalt (bijvoorbeeld device config) dan zul je ook uit de Javascript saveChanges()-functie die waardes moeten halen.

Al met al best een opgave! Het gaat ook zeker niet 1 2 3 lukken.

Wat je eerst maar eens moet gaan bedenken is hoe je precies wilt dat het eruit ziet.

Kan je al htm, of een beetje Javascript? En dat haserl?


:thumb:
 
backup is net gemaakt.

html en haserl is geen probleem. alleen het javascript gedeelte gaat boven mijn pet ;-)
ik ga effe zoeken waar de savechanges functie staat (welk js bestand).

de network pagina zou er zo moeten komen uit te zien:
http://raptor666.shacknet.nu/network-new.rtf

tja, ik was al bang dat het niet zo 123 aan te passen zou zijn :-)
 
Laatst bewerkt:
effe een vraagje. ik heb de network.js pagina eens bekeken en ik zie er alleen functies in staan. maar wat wordt nu eigenlijk als eerste aangeroepen wanneer de network.sh pagina wordt opgestart?
 
rayholland zei:
effe een vraagje. ik heb de network.js pagina eens bekeken en ik zie er alleen functies in staan. maar wat wordt nu eigenlijk als eerste aangeroepen wanneer de network.sh pagina wordt opgestart?
Klik om te vergroten...
Nou, eigenlijk (in principe!) niets. Functies worden alleen aangeroepen na een actie. Uiteraard kan dit ook de page-load zijn.

Er zit wel wat dynamische js in je .hs bestand, alles tussen de <script> en </script> tags, ergens in het begin (r 12 - r 79).

Om mooie user interactie te hebben, hebben veel text-velden ook een 'onkeydown' attribuut. Dat betekent dat on-key-down in dat veld een functie wordt aangeroepen, bijvoorbeeld proofreadIp(). Deze staat, denk ik, ergens in je network.js en checkt of je een goede ip hebt ingevuld.

:thumb:
 
ok, ik heb de network.sh aangepast naar mijn wensen:

#!/usr/bin/haserl
<?
# This program is copyright © 2008 Eric Bishop and is distributed under the terms of the GNU GPL
# version 2.0 with a special clarification/exception that permits adapting the program to
# configure proprietary "back end" software provided that all modifications to the web interface
# itself remain covered by the GPL.
# See http://gargoyle-router.com/faq.html#qfoss for more information
eval $( gargoyle_session_validator -c "$COOKIE_hash" -e "$COOKIE_exp" -a "$HTTP_USER_AGENT" -i "$REMOTE_ADDR" -r "login.sh" -t $(uci get gargoyle.global.session_timeout) -b "$COOKIE_browser_time" )
gargoyle_header_footer -h -s "system" -p "network" -c "internal.css" -j "network.js table.js" -i network
?>


<form>
<fieldset id="bridge_fieldset">
<legend class="sectionheader">Network</legend>
<div id='bridge_ip_container'>
<label class='leftcolumn' for='bridge_ip' id='bridge_ip_label'>IP:</label>
<input type='text' class='rightcolumn' name='bridge_ip' id='bridge_ip' onkeyup='proofreadIp(this)' size='20' maxlength='15' />
<em>(must be in AP subnet)</em>
</div>
<div id='bridge_mask_container'>
<label class='leftcolumn' for='bridge_mask' id='bridge_mask_label'>Subnet Mask:</label>
<input type='text' class='rightcolumn' name='bridge_mask' id='bridge_mask' onkeyup='proofreadMask(this)' size='20' maxlength='15' />
<em>(same as AP mask)</em>

</div>
<div id='bridge_gateway_container'>
<label class='leftcolumn' for='bridge_gateway' id='bridge_gateway_label'>Gateway IP:</label>
<input type='text' class='rightcolumn' name='bridge_gateway' id='bridge_gateway' onkeyup='proofreadIp(this)' size='20' maxlength='15' />
</div>

<div id="bridge_dns_container">
<span class="leftcolumn">
<label id='bridge_use_dns_label' for='bridge_use_dns'>Custom DNS:</label>
</span>
<span class='rightcolumn'>
<input type='checkbox' id='bridge_use_dns' onclick='setDnsEnabled(this)'/>&nbsp;&nbsp;
<input type='text' id='add_bridge_dns' onkeyup='proofreadIp(this)' size='20' maxlength='17' />
<input type="button" class="default_button" id="add_bridge_dns_button" value="Add" onclick='addDns("bridge")' />
</span>
<div class="rightcolumnonly"><div id="bridge_dns_table_container"></div></div>
</div>
</fieldset>
<div id="bottom_button_container">
<input type='button' value='Save Changes' id="save_button" class="bottom_button" onclick='saveChanges()' />
<input type='button' value='Reset' id="reset_button" class="bottom_button" onclick='resetData()'/>
</div>
<iframe id="reboot_test" onload="reloadPage()" style="display:none" ></iframe>
</form>


<!-- <br /><textarea style="margin-left:20px;" rows=30 cols=60 id='output'></textarea> -->


<script>
<!--
resetData();
//-->
</script>


<?
gargoyle_header_footer -f -s "system" -p "network"
?>



Maar ik krijg nu natuurlijk javascript errors en de waardes worden niet ingevult.
zie http://raptor666.shacknet.nu/network-new.rtf

kun jij misschien de network.js aanpassen zodat ik geen java-errors krijg en de waardes /check /reset werkt? heb al wat geprobeerd, maar helaas.
 
Laatst bewerkt:
misschien ook wel handig is de source-code van de pagina uit IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gargoyle Router Management Utility</title>
<link rel="stylesheet" href="/themes/default/common.css" type="text/css" />
<link rel="stylesheet" href="/themes/default/internal.css" type="text/css" />
<script language="javascript" type="text/javascript" src="/js/common.js"></script>
<script language="javascript" type="text/javascript" src="/js/network.js"></script>
<script language="javascript" type="text/javascript" src="/js/table.js"></script>
</head>
<body>
<div id="darken" ><iframe id="d_iframe" class="select_free"></iframe></div>
<div id="wait_msg">
<div id="wait_txt">
Please Wait While Settings Are Applied
</div>
<div id="wait_icon">
<img src="/themes/default/images/wait_icon.gif" />
</div>
<iframe id="m_iframe" class="select_free"></iframe>
</div>
<div id="outer_logo">
<div id="inner_logo">
<div id="garg_title">Gargoyle</div>
<div id="garg_desc">Router<br />Management<br />Utility</div>
<div id="garg_host">Device Name: OpenWrt</div>
</div>
</div>
<div id="outer_header"></div>
<div id="outer_container">
<div id="main_external_container">
<div id="main_top"></div>
<div id="main_internal_container">


<script>
<!--
var gargoyleBinRoot = "/www/.";
var wirelessIf = "ath0";
var uciWireless = "wifi0";
var currentWirelessMac = "00:18:84:1B:90:61";
var defaultLanIf = "eth0";
var currentLanIf = "br-lan";
var currentLanMac = "00:18:84:1B:90:60";
var currentLanIp = "192.168.1.16";
var currentLanMask = "255.255.255.0";
var defaultWanIf = "";
var defaultWanMac = "00:11:22:33:44:55";
var currentWanIf = "";
var currentWanMac = "";
var currentWanIp = "";
var currentWanMask = "";
var currentWanGateway = "";
var uciOriginal = new UCIContainer();
uciOriginal.set('network', 'loopback', '', "interface");
uciOriginal.set('network', 'loopback', 'ifname', "lo");
uciOriginal.set('network', 'loopback', 'proto', "static");
uciOriginal.set('network', 'loopback', 'ipaddr', "127.0.0.1");
uciOriginal.set('network', 'loopback', 'netmask', "255.0.0.0");
uciOriginal.set('network', 'lan', '', "interface");
uciOriginal.set('network', 'lan', 'ifname', "eth0");
uciOriginal.set('network', 'lan', 'type', "bridge");
uciOriginal.set('network', 'lan', 'proto', "static");
uciOriginal.set('network', 'lan', 'netmask', "255.255.255.0");
uciOriginal.set('network', 'lan', 'gateway', "192.168.1.254");
uciOriginal.set('network', 'lan', 'dns', "192.168.1.254");
uciOriginal.set('network', 'lan', 'ipaddr', "192.168.1.16");

setBrowserTimeCookie();

var testAjax = getRequestObj();
if(!testAjax) { window.location = "no_ajax.sh"; }
//-->
</script>





<form>
<fieldset id="bridge_fieldset">
<legend class="sectionheader">Network</legend>
<div id='bridge_ip_container'>
<label class='leftcolumn' for='bridge_ip' id='bridge_ip_label'>IP:</label>
<input type='text' class='rightcolumn' name='bridge_ip' id='bridge_ip' onkeyup='proofreadIp(this)' size='20' maxlength='15' />
<em>(must be in AP subnet)</em>
</div>
<div id='bridge_mask_container'>
<label class='leftcolumn' for='bridge_mask' id='bridge_mask_label'>Subnet Mask:</label>
<input type='text' class='rightcolumn' name='bridge_mask' id='bridge_mask' onkeyup='proofreadMask(this)' size='20' maxlength='15' />
<em>(same as AP mask)</em>

</div>
<div id='bridge_gateway_container'>
<label class='leftcolumn' for='bridge_gateway' id='bridge_gateway_label'>Gateway IP:</label>
<input type='text' class='rightcolumn' name='bridge_gateway' id='bridge_gateway' onkeyup='proofreadIp(this)' size='20' maxlength='15' />
</div>

<div id="bridge_dns_container">
<span class="leftcolumn">
<label id='bridge_use_dns_label' for='bridge_use_dns'>Custom DNS:</label>
</span>
<span class='rightcolumn'>
<input type='checkbox' id='bridge_use_dns' onclick='setDnsEnabled(this)'/>&nbsp;&nbsp;
<input type='text' id='add_bridge_dns' onkeyup='proofreadIp(this)' size='20' maxlength='17' />
<input type="button" class="default_button" id="add_bridge_dns_button" value="Add" onclick='addDns("bridge")' />
</span>
<div class="rightcolumnonly"><div id="bridge_dns_table_container"></div></div>
</div>


<div id="bottom_button_container">
<input type='button' value='Save Changes' id="save_button" class="bottom_button" onclick='saveChanges()' />
<input type='button' value='Reset' id="reset_button" class="bottom_button" onclick='resetData()'/>
</div>
<iframe id="reboot_test" onload="reloadPage()" style="display:none" ></iframe>
</form>


<!-- <br /><textarea style="margin-left:20px;" rows=30 cols=60 id='output'></textarea> -->


<script>
<!--
resetData();
//-->
</script>


</div>
<div id="main_bottom"></div>
</div>
<div id="nav_external_container">
<div id="nav_top"></div>
<div id="nav_internal_container1">
<div id="nav_internal_container2">
<div class="nav_internal_end1"></div>
<div class="nav_unselected_divider_end1"></div>
<div class="nav_unselected_end1">
<a href="/./overview.sh">Status</a>
</div>
<div class="nav_unselected_divider"></div>
<div class="nav_unselected">
<a href="/./schedule.sh">Schedule</a>
</div>
<div class="nav_selected_divider1"></div>
<div class="nav_selected">
<div class="nav_selected_container">
<div class="selected_header">System</div>
<div id="submenu_container">
<div class="submenu_selected">Network</div>
<a href="/./wireless.sh">Wireless</a>
<a href="/./access.sh">Access</a>
<a href="/./time.sh">Time</a>
<a href="/./backup.sh">Backup / Restore</a>
<a href="/./update.sh">Update Firmware</a>
<a href="/./reboot.sh">Reboot</a>
</div>
</div>
</div>
<div class="nav_selected_divider2"></div>
<div class="nav_unselected">
<a href="/./logout.sh">Logout</a>
</div>
<div class="nav_unselected_divider_end2"></div>
<div class="nav_internal_end2"></div>
</div>
</div>
<div id="nav_bottom"></div>
</div>
</div>
<div id="outer_footer"></div>
</body>
</html>
 
Mokay....


Nou, ik heb 'even' gekeken. En na 100 regels code bedacht ik me dat dit zo niet gaat werken. Behalve dat de check-functie (de saveChanges() func) al meer dan 600 regels is, gebruikt het allemaal globale dingen (zoals UCIContainer) die in andere bestanden dan de network.js staan. Ik kom er zo ook niet uit!

Ik weet zeker dat het kan, maar het gaat uren tijd kosten. Ik dacht dat de check functie een wat makkelijkere veld-checker was, maar dit valt erg tegen.



:confused:
 
Daar was ik al bang voor. Ik ben zelf ook erin gedoken, maar na een tijdje zie je het bos door de bomen niet meer.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan