Share: Tomato Firmware Mobile Status Page

Discussion in 'Tomato Firmware' started by Jacky444, Mar 14, 2013.

  1. Jacky444

    Jacky444 LI Guru Member

    Here it is finally a mobile version of Tomato Status page.

    - Displays System Info
    - WAN Info
    - Wifi Adapters
    - Connect/Disconnect/Reboot buttons
    - Fully Fluid for mobile and tablet devices (works on desktop but no point. see screen shots attached)
    - Javascript auto refreshes data every 3s
    - Easy customizable

    Please if you want more features contact me :)))

    480px width (mobile device)

    1280px width screen (tablet)

    How to install ?
    Its pretty simple. You need to upload extracted zip file into ext directory which is in www/ext/
    I use a script to download files from my main computer once router mounts CIFS.
    Like this: "cp -r /cifs1/theme/* /var/wwwext"

    If anyone has better suggestion I'd really be glad if they shared. I don't know exactly easiest way to get files on router x)

    Change Log
    - Added devices list (Dark Theme needs an update)
    - Fixed Margins on boxes for big screens
    - Added NVRAM/SWAP usage (Dark_Shadow)
    - Fixed that SWAP shows only if its used
    - Removed Auto Update of Data (Will be added in next release) - Caused serious issue
    - Some other minor optimizations for speed

    P.S.: I almost forgot, to access the mobile page just use http://routerIP/ext/mobile.asp
    P.P.S.: I'm currently working on Hide/Show toggles and adding jQuery library to the script.

    Attached Files:

  2. occamsrazor

    occamsrazor Network Guru Member

    For those who want to use it from a USB drive, put this in the "run after mounting" box of the USB page:

    cp -r /tmp/mnt/DATA/mobiletheme/* /var/wwwext
    (where DATA is the name of my usb partition, and "mobiletheme" is the folder on it where the mobile theme files that you download reside)
    anthr4x likes this.
  3. Jacky444

    Jacky444 LI Guru Member

    - added Toggle support
    - Fixed Minimum scale for smaller screens (Hope this fixes Iphone issue, if not let me know I'll try smthing else)

    Attached Files:

    Elfew likes this.
  4. occamsrazor

    occamsrazor Network Guru Member

    Toggles work fine and the new version fixes the size issue on my iPhone 4S - thanks!

  5. Jacky444

    Jacky444 LI Guru Member

    Glad to hear that :)
    Looks amazing on this screen shot :p I will fix the router name thingy also.
  6. Jacky444

    Jacky444 LI Guru Member

    Updated to 1.02, Changes:
    - Fixed Router Name on Header.
    - Changed Connect/Disconnect icons (much better now)
    - JS speed up (Removed some useless code)
    - Changed Window title
    - Removed link for Wifi Channel that resulted into 404 error.

    You will find update file in first post.

    I will add more themes soon =)
  7. leandroong

    leandroong LI Guru Member

    I don't get the application of this. I can access my tomato GUI from iphone using safari browser.
  8. Jacky444

    Jacky444 LI Guru Member

    Tomato GUI is big and its much easier to access a small page like this then full GUI.
    Also this gives most important data to single page. It resizes to browser size and makes it much easier to browse.

    Added 2 New Themes:

    Theme Dark Screen shots:

    MobileDark480.JPG MobileDark1024.JPG

    Theme Orange Screen shots:

    MobileOrange480.JPG MobileOrange1024.JPG

    Hope you like them ^^.
    Download like is on first post.

    P.S.: MiC stands for "Mobile in Control!"
  9. f1vefour

    f1vefour Serious Server Member

    What are you doing on your router that the load would be 0.1+?

    The info page should show available/free ram.
  10. Elfew

    Elfew Network Guru Member

    Good work, please add free RAM, free NVRAM etc...

    And is possible to add a swich to the corver which change mobile/normal theme?
  11. occamsrazor

    occamsrazor Network Guru Member

    Yes you can access the normal GUI on iPhone Safari, but it is hardly optimised for a small screen. This provides a quick and easy way to view essential information quickly on such a screen, and a quick way access functions like connect/disconnect/reboot, without having to scroll and zoom much in a mobile browser. The main GUI is still there if you prefer it that way.
  12. occamsrazor

    occamsrazor Network Guru Member

    (Copied from other thread)

    This seems to be a good way to go: In Administration > Admin Access you would have two sets of TTB choices - one for the main theme and one for the mobile theme. That way those that don't want the mobile theme at all can choose not to have it, and those that do have an easy way to choose different mobile themes.
    We already have a good mechanism of theme choice using the TTB website, so makes sense to use that for hosting the mobile themes, perhaps with a name prefix like "MOB_xxxxx_xxxxx".

    Thoughts? Shibby, might this be possible?
  13. occamsrazor

    occamsrazor Network Guru Member

    @Jacky444 - What info is possible to easily add to the mobile status page? Is it only information from the Overview page or can you "extract" certain info from other pages and put in on the Mobile status page? If so, I would vote for (all collapsible of course):

    1. Device List info

    2. VPN Server & Client status, for example:

    VPN Server 1: Running
    VPN Server 2: Stopped
    VPN Client 1: Running
    VPN Client 2: Connected

    That could be either in words as above (easier) or (cooler) as colored "traffic light" buttons - red=stopped, orange=running, green=connected, or something like that.

    3. Other possibilities could be QoS graphs and Bandwidth graphs. But perhaps that would be too much for one page and if possible it would be better to have on separate pages linked to from the main mobile status page.

    Just thoughts :)
  14. Jacky444

    Jacky444 LI Guru Member

    @f1vefour: I have Loads of traffic through my router (250 mbps up/down link). I host 7 web sites from home :) including radio

    @occamsrazor: I will add RAM and SWAP read today (swap shows if there is some actual in use). About other information yeah I can practically add any thing to mobile page. It uses ASP same as main GUI. Also the mobile page currently takes data from original GUI (Java Script call) I'm still working on making that better. I haven't work with pure JS before since I prefered JQuery which is much easier to use. But Tomato doensn't allow me to use jQuery cause it would require 100kb for library only.

    @Elfew: To provide link on main GUI for switching between Mobile/Normal interface would require root access to web files. I believe that is some how protected on router so we can't do it. Shibby can do it though and I'm not sure how much he will like my little project.
  15. leandroong

    leandroong LI Guru Member

    I don't have problem doing anything from iphone. It has retina that can enlarge fonts
  16. digiblur

    digiblur Networkin' Nut Member

    I have the Note2 and have no issues looking at the regular browser page ;)

    Sent from my little Note2
  17. occamsrazor

    occamsrazor Network Guru Member

    I also have a retina iPhone and of course you can view the regular page, but the fact is it is not optimal for a small screen. No-one is forcing anyone to use this, it's not intended as a replacement for the regular page so if you prefer the regular page just keep using that!
    But for those that like it, as I do, it's a very nice addition.
  18. Jacky444

    Jacky444 LI Guru Member

    retina is just marketing bull****. Even if it can enlarge etc, you don't fit whole GUI on your phone. Note 2 has huge screen so that can work. But on Iphone its less viewable.
    My mobile screen is bigger then Iphone's (Iphone has higher resolution though) and i can view GUI but its enlarged way too much. Its much cooler to have all features required like on mobile page. You should try maybe U will like it, If not well not =) I didn't say u have to use it doh :D
  19. Jacky444

    Jacky444 LI Guru Member

    New Update !

    - MiC Update to 1.03 and themes as well.
    - Fixed few bugs with toggle (Didn't work on stock android browser =/)
    - Fixed data didn't refresh automatically in some browsers
    - Updated all Themes to 1.03
    - Removed even more unnecessary code
    - Added Memory/NVRAM usage (Don't be mad, I didn't add SWAP)

    Downloads are in first post.

    This is probably last update though.

    There is a project "Advanced Tomato" which basicly does the same as this mobile page. Its responsive so there is no requirement of mod like MiC.
    I will create few themes if UI like "Advanced Tomato" will be released. I have high hopes for it.
    It will push Tomato's User Interface into new level! Much more options, different design possibilities and so on. If I knew how to compile tomato I could do the same my self.
    I also have few ideas of my own by the Tomato interface. Like Navigation being animated drop down etc :)
    AlexF likes this.
  20. occamsrazor

    occamsrazor Network Guru Member

    Cool, will check out the latest version. If there was any easy way to get the WAN RX and TX rates from the Bandwidth > Realtime page onto the mobile status page that would be cool. Being able to check up and down internet bandwidth is very useful in troubleshooting etc. I know I keep asking for more more more :)
  21. AlexF

    AlexF Serious Server Member

    Hiya, creator of AdvancedTomato here. I'd be happy to collaborate on something, and I sure as hell can show you how to setup a development environment, so you can compile your own stuff. What router do you have?

    Best regards,
  22. WRD - EasyTomato

    WRD - EasyTomato Networkin' Nut Member

    It'd be great to get a few folks working on making "AdvancedTomato" a great final product. Once it's there, maybe the other devs will roll it into their builds. This is a great way to make Tomato UX better on any device. Keep up the good work Alex (and hopefully team)!
  23. Jacky444

    Jacky444 LI Guru Member

    Yeah I'd love to do that. I got Asus RT-N66U 64k. I was also thinking some one should add firmware update notification;) auto update sadly wouldnt work cause temp file wouldnt have space to download or perhaps script would check that first ;)
  24. occamsrazor

    occamsrazor Network Guru Member

    Just a tip if you have multiple routers/APs as I do (one main router and two access points) and would like the mobile status page on all of them without the hassle of installing and maintaining 3 different sets of files. I put the mobile theme files on the USB key attached to the main router as described in post #2 above. Then on each of the APs I did the following:

    1. Enable CIFS1 client on each access point to the share of the USB key on the main router
    2. In the "Execute When Mounted" box of the CIFS1 client, enter the following:
    cp -r /cifs1/mobiletheme/* /var/wwwext

    I now have the main/regular theme "ilhm_v3_nogirl" on the main router, "darkknight_cisco" on the access points (prefer a different theme to quickly differentiate which box I am connected to, and now the mobile theme on all of them. Sweet!
  25. Dark_Shadow

    Dark_Shadow LI Guru Member

    This is great!! Looks good on a PC too. I agree ram and swap should be on this status page.
  26. Dark_Shadow

    Dark_Shadow LI Guru Member

  27. Dark_Shadow

    Dark_Shadow LI Guru Member

    I have added Memory Swap and NVRAM, don't know If OP will update First post. I just used WinSCP to overwrite the existing mobile.asp

    Will Try to add device list.

    Also Added Prev IP to WAN and LAN section

    Attached Files:

  28. Jacky444

    Jacky444 LI Guru Member

    Nice work. I will update the other themes as well and update first post. It should be relatively easy to add device list

    P.S.: Also fixed 2 small issues with boxes position on big screens.
    P.P.S.: First post updated with changes.
  29. SenorLoco

    SenorLoco Serious Server Member

    Looks nice...I've been looking for something like this.
  30. Jacky444

    Jacky444 LI Guru Member

    This project will be merged with AdvancedTomato. AT will have this built in with some extra features like change style/navi and change password.
    maple.chick, Elfew and Riddlah like this.
  31. occamsrazor

    occamsrazor Network Guru Member

    Do you plan to continue making the files available as stand-alone for those that just want to add it to other builds? Or will it become so integrated that this won't be possible? Thanks!
    eddieg likes this.
  32. Dark_Shadow

    Dark_Shadow LI Guru Member

    @Jacky, Just a FYI if you descided to continue the stand alone, it's broken in shibby 109. I haven't had time to investigate yet.
  33. Jacky444

    Jacky444 LI Guru Member

    I haven't given any thoughts to it, But once Shibby updates git to 109 I'll consider it. Fixing it to work with 109 shouldn't be an issue though. Some features might not be available standalone but otherwise I can keep it updated no problem (If I'll find time of course. AT takes loads x)).

    Waiting for git update to see changes :p
    maple.chick likes this.
  34. maple.chick

    maple.chick Networkin' Nut Member

    Thank you, Jacky. You effort is very much appreciated! Another vote for AdvancedTomato.
  35. Jacky444

    Jacky444 LI Guru Member

    I wanted to say, I've compared changes in Shibby 109 and there is nothing that could cause this add-on to stop working. So it should have work fine with Shibby's 109.
  36. Dark_Shadow

    Dark_Shadow LI Guru Member

    The integrated version works, how ever if you have regular shibby builds flashed and set up the mobile page manually as stated in this thread, that version is broken.
  37. Jacky444

    Jacky444 LI Guru Member

    Thats very weird. AT is based on same files :O. Maybe shibby moved js or jsx files? That is the only thing I can think of. I didn't see any other changes that would cause standalone mobile page to not work. I can't currently check it my self since I'm obviously running AT but maybe some time this/next week I'll flash my old router and do some tests.

    We'll see :) My bday coming up so bit busy with stuff lol :D
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice