aMule Forum
English => Skins & GUI => Topic started by: woutermense on March 14, 2010, 05:46:41 PM
-
Been playing with this idea for quite some time now. As it is now this skin is just a proof-of-concept and nowhere near anything that can replace other skins.
How it works: The page requests a php script with ajax, this generates an xml file, which is transformed into html by an xslt stylesheet.
There is a problem with the default amuleweb that prevents it from working and a patch is needed which enables it to serve files with some other extensions as well.
Then there are some more problems: amuleweb php doesn't support the header() function, so this won't work in IE. Also in Opera there is another problem traversing DOM that I haven't figured out yet.
Actually, I only got it to work in Firefox.
Attached are the skin and a patch for amuleweb file src/webserver/src/WebServer.cpp
Please try it out :D
Also: Try clicking the column headers. There is some javascript that changes the stylesheet to modify the sort order.
-
Webserver patch committed (10049).
-
If the webserver can now deliver every type of file, the skins could offer to download completed files aswell. Or incomplete ones for preview.
-
If the webserver can now deliver every type of file, the skins could offer to download completed files aswell. Or incomplete ones for preview.
That would introduce quite a number of security issues. Please note, that the webserver is not necessarily run under the same user account as amule(d), and might aswell be run on another computer. For example you might run amule on your home computer, amuleweb on the router...
-
Right, so the daemon has to send the file via ec to amuleweb which resends it to the user. Or amuleweb can just check if it is run on the same machine, or if it was started from a core on startup and deactivate the download otherwise.
-
If the webserver can now deliver every type of file
I added only 3 XML types.
-
That would introduce quite a number of security issues. Please note, that the webserver is not necessarily run under the same user account as amule(d), and might aswell be run on another computer. For example you might run amule on your home computer, amuleweb on the router...
That's quite unusual circumstances. If someone succeed in such setup (left alone the mere idea of "run something on router"), he gotta understand security implications.
-
And that guy just writes a howto after his success that just explains how to get it running, Someone else follows it and open his net to attackers.
And after all it's our fault.
-
That would introduce quite a number of security issues. Please note, that the webserver is not necessarily run under the same user account as amule(d), and might aswell be run on another computer. For example you might run amule on your home computer, amuleweb on the router...
That's quite unusual circumstances. If someone succeed in such setup (left alone the mere idea of "run something on router"), he gotta understand security implications.
Yes, I wanted an unusual example to show what difficulties might occur with Vollstrecker's idea. The security issues I was thinking of arise in normal conditions, i.e. webserver ran under the same user account as amule(d). I'm sure you know what I mean.
-
And that guy just writes a howto after his success
No, I won't ;)
-
And after all it's our fault.
It's all your fault
you called me beautiful
you turned me inside out and now I can't turn back
I held my breath
because you were perfect
but I'm running out of air
and it's not fair...
Man, I love that song. :-*
-
I never knew the webserver could be on another machine than the daemon. But it seems logical, they connect via EC. Learned something :)
Anyway, I found out that .getElementsByTagName("xsl:sort") doesn't work on Opera, but .getElementsByTagName("sort") does. Strange. But nothing a little if statement can't fix. When I find the time I'll build some more functionality in the skin other than just displaying what is currently downloading.
Many thanks to Stu for applying my patch, and I hope there are some people running the newest SVN webserver to try out the skin. Or maybe just read the code ;)
-
So, I think I'm ready to show some screenshots :)
Right now, the skin can show what is up & downloading.
Made a colour theme loosely based on the colours of the amule logo.
Note: column headers/footers with totals :D
-
a.) Yay for Opera Users!
b.) Looks really good, my congratulations.
-
Thanks wuischke
And finally, something more than just showing downloads & uploads.
New:
- Coloured category headers in front of every row
- Rounded progressbars, yay css3
- Click on a download to filter by its category, again to turn filtering off
- Click on a file's status to toggle pause/resume
- Click on a file's priority to increase it (wraps around, thanks amuleweb)
And all is ajaxified so no waiting for loading pages.
No screenshots this time :)
-
I'm getting only text with firefox. :(
-
I only styled the transfers page. The other two are without css and much more basic. I created those to test and learn about xslt. The links to downloads & uploads will be gone soon :D
-
I'm getting only text with firefox on the transfers page.
-
Hmm well I normally never use Firefox and especially downloaded it for testing & developing this skin because it is a browser many people use. I try to have the skin working on both Firefox and Opera. As a sideeffect I do have the newest version of Firefox installed but I don't know how important that is. If the css isn't loaded then effectively you would have only text so I think that's where things go wrong. Maybe you could try removing every line containing border-radius fom transfers.css . Those are css3 and are only used to get rounded corners on the progress bars.
The webserver does tend to not serve files if it isn't pampered enough it seems. I also noticed frequent crashes of it with this skin. Sometimes it just sits there and doesn't respond. (I'm using 2.2.6 with the xml-types patch btw.)
Anyway, here's a new version that can also cancel your downloads. Just tested on FF 3.6 and Opera 10.51
-
Stu, could you further explain what you see on the page?
Only the title? --> xslt didn't work
Only title and table headers? --> xml/php didn't work
Only plain text without colours and progressbars? --> css wasn't loaded
-
With your latest files I get it running.
But it displays only, I can't do anything.
And I'm getting a lot of /**
* This is to generate an xml file which contains the output of
* amule_load_vars("downloads"). Also including an xml scheme and stylesheet if
* possible. Otherwise, javascript can handle it in a separate page with ajax.
PHP Error: Function [ header ] is not definedin the console.
-
Okay, this is an odd one for me too. Javascript obviously works, otherwise the page wouldn't load at all. What I can think of is that maybe you have a longer mouse-down than me. If the page refreshes during a click it gets lost. I'll change all the onclick events to onmouseup later. For now maybe could you test by changing the refresh rate of the page? It is done by editing line 259 (near the end of the file) of transfers.html. var timeout = 5 should set it to 5 seconds time between loads.
I'll also edit the skin to remove the noise in console.
-
OK, that was a quick edit. Updated so mouse clicks can't get lost anymore. Also no more chatter in console.
-
I can click on the headers to sort the columns (it is confusing that there is no indication what is clickable and what isn't), but I have to hold down the button for more than a second sometimes for it to work.
I didn't find anything else to do, except for canceling a download (which could use a confirmation).
(installing update)
With your update click reaction has become worse actually. Before it worked by long holding clicked, now it's random. Sometimes it works, more often not. Chatter in console remains unchanged.
-
Ok that puzzles me. For me, long/slow clicks were guaranteed to fail every time using the old method (onclick). Short ones had a higher chance. Using the new method (onmouseup), they work every time both in FF and Opera. Short clicks, long clicks, dragging clicks. (Even right clicks, will fix that later)
However, I did manage to indicate the control surfaces a little more obvious. How does a hand pointer and underline on hover work for you? I also added a confirmation to the delete control.
-
Just checked out Google Chrome and Safari. Seems they both can't do math (rounding errors in speed display). This gives a very jumpy display going from 10 to 9.9999999999 and stuff.
I hope all these browsers won't start to bite eachother though, never had this many installed :)
-edit-
Fixed rounding.
-
Just a quick question here. I edited the amuleweb-php (http://wiki.amule.org/index.php/AMuleWeb_PHP#amule_load_vars) wiki page a little but I'm not sure if my statements there are 100%. When you do amuleweb_load_vars("downloads"),
file->status: Indicates the status of the file, where 0 = ready, 1 = empty (?), 2 and 3 = hashing the file, 4 = an error occured, 5 = insufficient disk space, 6 = unknown, never happens, 7 = stopped or paused, 8 = completing (copying the file), 9 = download complete, 10 = allocating full disk space needed for the file. When status = 0, evaluate src_count_xfer, to determine whether the file is currently downloading or waiting. When status = 7, evaluate src_count to distinguish between stopped and paused. A stopped file has 0 sources. A file which has 0 known sources can also be paused but the effect is the same.
Correct? (also what does PS_EMPTY mean in the sourcecode?)
-
Apparently PS_EMPTY means no complete parts downloaded yet. I think... :)
Sorry for the ultra-multipost but my modify button seems to be missing. Sometimes
-
Updates yay :)
- Did a lot of code cleanup, preparations for reusing code in other pages of the skin mostly.
- Made a start of the search page, its not functional yet, just design.
- Removed "completed (MB)" column of downloads table in favour of a sources column.
- Attempt to better handle mouse events.
Stu Redman, could you please test if this version works better for you? I made a modification where refreshing of the page is stopped after an onmousedown event for a little while. Then when the click is completed the original function is called. Holding down the mouse button < 1 second works best. Longer clicks may work, but I'm not sure of all browsers on all platforms.
-
On first run it got stuck quickly and didn't update anymore.
After I restarted the webserver it keeps updating, but I can't click anything anymore.
Mouse cursor keeps changing between arrow, hand and text cursor in a way I don't understand.
Still a lot of /**
* This is to generate an xml file which contains the output of
* amule_load_vars("uploads").
PHP Error: Function [ header ] is not defined in the console.
It is looking very nice (except for the progress bars which aren't supposed to show just a percent value) and will sure be great when it works.
Edit was disabled after a timeout (15min iirc) as protection against spam.
-
Pointer shape
I studied the behaviour of the pointer-shape a little on my machine.
On Firefox:
The mouse pointer changing to a hand over areas that have a function when clicked is defined by css. Somehow on firefox after refreshing the contents of the table CSS isn't applied again so the cursor changes into what Firefox thinks it should be. A text-cursor when hovering over text and a normal pointer when not hovering over text. However, the css for highlighting a table row when hovering over it, does seem to hold after refreshing the contents.
On Opera:
The code used for Opera is the same as Firefox's, but: the pointer stays a hand after refreshing if so defined by css, but the row highlight does not stay when refreshing. This is opposite to the behaviour in Firefox where the pointer doesn't work, but the highlight does.
On Safari and Chrome:
Both the shape of the mousepointer and the row-highlighting work, but there's some blinking when refreshing.
Click behaviour
How it's possible that you can totally not click on anything I don't understand. I'm at a loss, really. I checked on every browser I can think of and can't reproduce what you are experiencing in any way. Over here it's working perfectly. Where just using onclick or just using onmouseup would fail I understood that and I could recreate the situations where it would go wrong, but this I can't.
However, just in case this is something that is OS related or driver related ( or maybe you are using a wacom or something :) ), please tell me something more about your OS, mouse, drivers. It's really the only thing I can think of right now and I would also really hate it if this is what makes a difference.
Progress bars
There is no way to send the data for the progress bar images via xml right now, since there is no base64encode in amuleweb. If I would just pass the filenames then the images would not update. I could add a random tag to the filenames, but then all the images will retransmit every refresh. I think that's not very bandwidth efficient. Transferring the images on first load takes about 5 to 10 seconds for me, and that's on LAN. Don't know exactly what the bottleneck is, but it just isn't fast enough to refresh often. As far as I can see, there is no way to just retransmit those pictures that are updated, so I chose to just have bars that fill from left to right that are drawn by some css.
Console
Ok ok, so the bug was in two places :) It should be gone when I release the next update.
-
There is no way to send the data for the progress bar images via xml right now
Granted, I'm in no way web developer, but - why would you?
but then all the images will retransmit every refresh
This is progress bar. Either you update it (and retransmit the whole image) or leave it alone.
I think that's not very bandwidth efficient.
Unless you have hundreds of them, it doesn't matter.
Transferring the images on first load takes about 5 to 10 seconds for me, and that's on LAN
You can't have _that_ slow LAN. 5 seconds enough for about 50*5=250Mb, or about 30MB. Most probably, delay caused by amule core itself, since amuleweb have to query status data. If amule working thread holding mutex, amuleweb won't get reply.
As far as I can see, there is no way to just retransmit those pictures that are updated
Actually, if download speed = 0, you can skip progress bar update. Otherwise - reload them. What's a problem again?
-
There is no way to send the data for the progress bar images via xml right now
Granted, I'm in no way web developer, but - why would you?
Transmitting them separately means 1 more request per file in the queue. Thus having a lot of files means a lot of requests and much longer loading time.
I think that's not very bandwidth efficient.
Unless you have hundreds of them, it doesn't matter.
I live in a house of 6 students and have to manage all services, including dsl. They do like to download whole series of files, so 200 or more downloads at a time isn't a rare occurrence. But I agree for most people it's probably <50 downloads in queue most of the time.
You can't have _that_ slow LAN. 5 seconds enough for about 50*5=250Mb, or about 30MB. Most probably, delay caused by amule core itself, since amuleweb have to query status data. If amule working thread holding mutex, amuleweb won't get reply.
I think the problem is negotiating the transfer of 100's of small image files with the server. About the inner workings of amule and linux threading I don't know much (anything).
As far as I can see, there is no way to just retransmit those pictures that are updated
Actually, if download speed = 0, you can skip progress bar update. Otherwise - reload them. What's a problem again?
Sources can change as well, so you'd have to keep track of that too.
-
They do like to download whole series of files, so 200 or more downloads at a time isn't a rare occurrence
Let's take this example, and consider each image 1K. So, 200 x 1K = 200K = 1600Kb. Over 100Mbps LAN it will take about 2msec (0.02 sec). Since amuleweb doesn't support keep-alive connection, so add some TCP overhead here, but in any event overall network latency will be less than 1 (one!) second.
Sources can change as well, so you'd have to keep track of that too
Correct.
I think the problem is negotiating the transfer of 100's of small image files with the server
Unless bug is found in amuleweb code that affect performance in that drastic way - I disagree. Requesting images doesn't require round-trip to core, only internal processing (since images are generated on-the-fly). Of cause, if you have slow or overloaded machine - expect delay.
-
Sources can change as well, so you'd have to keep track of that too
Correct.
lfroen, thank you for these comments, it made me think of an easier way to keep track of changed images.
This code does it really simple, just make a string of parameters as a "random" tag. Each time one parameter changes the image gets refreshed.
echo "<progress>dyn_" . $file->hash . ".png?" . $file->size_xfer . $file->src_count . $file->src_count_not_curr . $file->src_count_a4af . $file->src_count_xfer . "</progress>";
-
Windows 7 64, Firefox 3.6 with NoScript (all Scripts allowed for localhost of course) and AdBlockPlus (nothing blocked). Plain mouse, no special driver installed, no mouse problems I'm aware of.
I know the EC side of amuleweb quite well, but nothing of the webserver/php side, or the stuff you are doing, so you are on your own here. I'll try it on Linux and see what happens there. (But I have no time tonight.)
Could anybody else try it out?
-
Well I'm also running Win7-64, just added NoScript and ABP to FireFox, and also plain mouse nothing special. Tried today to make Windows Virtual Machine run a Linux distro but had no luck.
I tried my laptop which has a touchpad (all other stuff the same), no problems as well. Neither with buttons nor tapping the pad. My keyboard on my desktop also has a touchpad (which is horribly insensitive) but no problems here too.
Like you said: it would really help if anyone else could check this out.
-
Are you guys hinting at anything? I can't really tell.
-
Hi all,
a quick test on Linux Fedora 11 amd64:
Firefox 3.5.8
aMule-SVN 10051
Transfers:
- shows ok
- sort by name ok
- clicking on file name does nothing (shows hand pointer, so it seems to have a function)
- delete works ok (asks for confirmation)
at some point firebug console shows:
[Exception... "update.locale file doesn't exist in either the XCurProcD or GreD directories" nsresult: "0x80520012 (NS_ERROR_FILE_NOT_FOUND)" location: "JS frame :: file:///usr/lib64/xulrunner-1.9.1/components/nsUpdateService.js :: getLocale :: line 549" data: no]
[Break on this error] " directories", Cr.NS_ERROR_FILE_NOT_FOUND);
nsUpda...vice.js (línea 549)
-
a quick test on Linux Fedora 11 amd64:
Firefox 3.5.8
aMule-SVN 10051
Ah, thanks for testing wires :)
clicking on file name does nothing (shows hand pointer, so it seems to have a function)
Do you use categories? It should filter by the category of the file you click on. If all files are in the same category, then effectively nothing happens.
at some point firebug console shows:
[Exception... "update.locale file doesn't exist in either the XCurProcD or GreD directories" nsresult: "0x80520012 (NS_ERROR_FILE_NOT_FOUND)" location: "JS frame :: file:///usr/lib64/xulrunner-1.9.1/components/nsUpdateService.js :: getLocale :: line 549" data: no]
[Break on this error] " directories", Cr.NS_ERROR_FILE_NOT_FOUND);
nsUpda...vice.js (línea 549)
Anything wrong with the "last seen complete" column? It should show dates and times formatted in your (the browser's) locale.
-
Category filter works ok (clicking on file name).
Last seen complete seems to work.
Hope this helps
-
Seems the error message is a known (https://bugzilla.redhat.com/show_bug.cgi?id=529853) error for Firefox, and there is a workaround also posted there.
Thanks for your reports.
-
Today I've seen this error :
Propiedad desconocida 'border-radius'. Declaración rechazada.
http://localhost:4711/skin.css
Line 80
Sorry for language. It states: Unknown property 'border-radius'. I suppose it is related to progress bars as they have squared corners, although global progress bars are rounded
I've found this link : http://www.the-art-of-web.com/css/border-radius/ (http://www.the-art-of-web.com/css/border-radius/) to make it work on mozilla, safari and chrome, but my firefox keeps showing squared corners for the provided examples...
By the way: I've made a test with Chrome : google-chrome-beta-5.0.342.7-42476.x86_64 (Linux) and it is working. Rounded global progress bars and squared file progress bars.
bye!
-
Rounded corners (css3) are supported in Firefox since version 3.6.1 I think. But there is the issue of Firefox wanting it to say -moz- in front of the property and webkit based browsers want -webkit- in front. So what to do? I just added all three and the browser will find it's way in the options of the css.
There have been versions of this skin that had all progress bars like the 'global' progress bars, so they had all rounded corners. But then I switched them over to the images that are in most other skins as well. They are square and it would seem right to keep them that way, but I could experiment with cutting corners, making an overlay maybe and other stuff.
See how you like this one... :)
-
Now they all are rounded :) and it keeps working. Actually I'm not an amule-web user, but got interested in your idea (ajax + amule) so I decided to do a test as you asked for. For border-radius it was just a guess about the error, so feel free to apply the style you like. Web design may be one of my worst skills ;)
-
New version 0.1 :o
- favicon yay
- created a search page
Hint: click on a filename to download it, green files are in your share or you just clicked them, files that are downloading already are filtered out.
notes for the amuleweb devs:
- amule_do_download_cmd() has no effect when applying it immediately after adding a download with amule_do_search_download_cmd().
- break; breaks one level of loops too much. Also when using break n;
-
New version 0.2
- Works in Internet Explorer
Had to jump through some hoops to get IE to parse strings into an XML tree :)
No rounded borders however, since IE doesn't support them.
note for the amuleweb devs:
- When a file in the download queue has downloaded at least 1 complete part it is added to the shares. $file->present is set to 1. (see code snippet) This is not reset to 0 when the file is removed (canceled/deleted) from the download queue. Or maybe I misunderstood the meaning of $file->present?
$searchresult = amule_load_vars("searchresult");
foreach ($searchresult as $file) {
echo $file->present;
}
-
Clicking works fine now. I tried IE, FF/Linux and FF/Windows.
I'm not sure we have an active amuleweb dev at the moment. I know only the EC part, not the PHP part.
Patches are welcome. :)
-
That's great! I was waiting for someone able to make an ajax skin real for ages, thankyou very very much! Best wishes for your skin, i'll try it asap ;)
-
udtuyt
Patches are welcome. :)
So I fixed the behaviour of 'break' and 'continue' while I was at it, that was actually quite a lot of searching and puzzling before I could get started.
Before:
- break and break n would end all loops.
- continue too (probably, untested)
Solution:
- update curr_exec_result after breaking or continuing a loop or switch
-
Committed in rev. 10250. You've just become our new amuleweb dev :P
-
I noticed an entry for aMuleWeb in the Visual Studio, and it does seem to compile and run. Does it actually work? Tried to run it, but failed on not having a template. Where should I put that?
-
Committed in rev. 10250. You've just become our new amuleweb dev :P
Nice to see someone fixing things in amuleweb while I don't have time to. BTW, you can run php part standalone, if you want to debug interpreter part, without actual amule data.
-
Does it actually work? Tried to run it, but failed on not having a template. Where should I put that?
Should work. If you run it with the -v (--verbose) switch, it'll show you debug messages, for instance where it tries to find the template.
-
I noticed an entry for aMuleWeb in the Visual Studio, and it does seem to compile and run. Does it actually work?
Only if you compile it with wxWidgets SVN. It won't work at all with 2.8. Just like amuled. It's only in the 2.8 project for compilation tests.
Setting it up is a bitch, but that's another story...
-
hopi, I like this skin very much, its my favourite too. Very clear and compact
Cheers ,
Mauri.