📜 ⬆️ ⬇️

Network Storage "WD My Book Live" and its refinement

Surely most of us love gadgets not only for their functionality, but also for the fact that their standard capabilities can be expanded to one degree or another. When there is an opportunity to sharpen the device exactly for your actual needs - you buy it, and with anticipation roll up your sleeves, estimate the range of further improvements.

The piece of iron also concerns this category about which here earlier it has already been written , but without some nuances of use and needs of the user. Now , having a subjective experience - I want to share with him with the habrasoobshchestvom, filling this small gap. This post should be considered only as an addition to already existing reviews and, perhaps, as some guide to optional modernization:

image
')
The reasons for the purchase were as follows:

Wishlist - a lot, and what is most pleasant - everything, absolutely all these tasks are performed by a single device, about which just this story.

First meeting


Out of the box, the piece of hardware is able to create users, differentiate access to files, works “with a bang” from iOS, is on the network, has FTP access, rather successfully (but often with noticeable “brakes”) turns movies on a tablet and iPad through DLNA and ... basically everything. There is still quite a curve access to your files via the Internet and clients for Andriod and iPhone, but since the dampness of these solutions was noticeable, they immediately went into the furnace.
What we have in fact is a full-fledged Linux machine of the Debian family with considerable space on the hdd and the only (but gigabit) RJ-45 connector for connecting to the network. Embedded software solves a minimum of tasks from the hoteles, so if you are the owner of at least basic knowledge in Linux, you will understand that all the descriptions from the list above are implemented literally during the evening of work. Well, maximum two.

Cooling


The first and not very pleasant (but solvable) moment. Cooling is only passive. Although she (the piece of iron) knows what a sleep mode is, it warmed up to 60 degrees and a little more. In principle, this is not critical, but during the tests it was not a peak load (flooded about 400 GB), plus residents of middle and southern latitudes should be very familiar with what a “hot” summer is.
The solution is to add active cooling powered to the hard drive. In addition, a resistor is “planted” on the cooler (the nominal is better selected based on the cooler itself), a window is cut in the case, all ventilation holes are sealed on its side, a cooler is glued in the window (there is no room inside it,) In the photo below:


(image is clickable)

This is what I thought was necessary in the refinement regarding the device itself - is over. I will note that this condition is not at all mandatory.

Torrent


First of all, the Transmission torrent client was installed, the paths and speeds were set up. The way is prescribed, where to pick up the .torrent files - you can read about all this in the topic on iXBT .

File sharing through the browser


The second task that has arisen is to implement file sharing between all gadgets, including Khrombuk (as is known, the latter does not differ in communicability). Since any additional clients and applications are not an option, it was decided to share access via http (good, the browser is now in almost every portable device). The criteria for finding a solution for outputting the contents of directories in a convenient form are the following:


And based on them, the choice fell on h5ai - a very convenient, customizable and affordable project that copes with this task on a solid top five (for more details, see the project page).

But before you put it - you need to decide - how, and where to do it. Having opened the web interface of our piece of iron in the browser, it was noticed that with http: //% IP_ADDR% / there is a redirect to http: //% IP_ADDR% / UI / - we will use this feature. Having opened /var/www/ find out that in the directory there is only a page “index.html” with the redirect code a little deeper - on ./UI/ (where the inside of the native web interface is located). You don’t even need to invent anything:

  1. Download h5ai version 0.24.0 and place the contents of the archive along the path /var/www/ (I got the full path /var/www/_h5ai );
  2. We give rights: chmod -R 755 /var/www/_h5ai/; chmod -R 777 /var/www/_h5ai/cache/ chmod -R 755 /var/www/_h5ai/; chmod -R 777 /var/www/_h5ai/cache/
  3. In /var/www we create the “shared” directory and in it we create a symlink to the Public directory (by going to it we run ln -s /shares/Public/ ) and other directories to which you need to open access;
  4. Edit the /etc/apache2/sites-enabled/000-wdnas by adding the /etc/apache2/sites-enabled/000-wdnas to it in front of the # block application folders from being served :
     # h5ai <Directory /var/www/shared/> DirectoryIndex index.html index.php /_h5ai/server/php/index.php </Directory> 
  5. Restart Apache: /etc/init.d/apache2 restart ;
  6. We check the performance by opening the htt://%IP_ADDR%/shared/ ;

On this we can assume that with the opening of access to files via http is finished:


Status monitoring and “three buttons”


The next step was to monitor the temperature and load of the gland. I did not want to invent something tricky - with notifications and whistles - and it’s not necessary. As you remember, we just redirected the root of the web interface - it means that nothing prevents us from rewriting its contents, adding to it the ability to monitor the temperature and other indicators + provide a choice in further navigation. To get the status, the sysinfo.php file was created in the root of /var/www/ , which displays the information we are interested in (you will have to add hddtemp - sudo apt-get install hddtemp):
sysinfo.php
 <?php error_reporting(0); ?><!DOCTYPE html> <html lang="ru-RU"> <title>System Info</title> <style type="text/css"> html, body {margin:40px;padding:0;text-align:center;font-family:Tahoma,Verdana,Arial;font-size:40px;color:#333} </style> <head> </head> <body> <div id="data"> FreeMemory: <strong><?php echo exec("sudo awk '/MemFree/ {printf( \"%.2f\n\", $2 / 1024 )}' /proc/meminfo"); ?></strong>Mb <small>of <?php echo exec("sudo awk '/MemTotal/ {printf( \"%.2f\n\", $2 / 1024 )}' /proc/meminfo"); ?>Mb</small> <br /> CPU Usage: <strong><?php echo exec("cat /proc/loadavg | awk '{print $1}'"); ?></strong>% for last minute <br /> HDD Temperature: <strong><?php echo exec("sudo hddtemp -n /dev/sda"); ?></strong> ÂşC </div> </body> </html> 

After that, the index page was rewritten to look like 3 buttons:

And added
 ,    JavaScript (   ""    )   N ,    : 
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ru-RU"> <title>Follow The White Rabbit</title> <style type="text/css"> html,body{text-align:center;font-family:Tahoma,Verdana,Arial;color:#666} #sysinfo{position:fixed;top:10px;width:300px;height:auto;margin-left:-150px;left:50%; font-size:11px;color:#666;-moz-opacity:0;-khtml-opacity:0;opacity:0; -webkit-transition:all 150ms ease-out;-moz-transition:all 150ms ease-out; transition:all 150ms ease-out} .trans{-moz-opacity:0.2!important;-khtml-opacity:0.2!important;opacity:0.2!important} #sysinfo:hover{-moz-opacity:1!important;-khtml-opacity:1!important;opacity:1!important} .center{position:absolute;width:530px;height:25px;top:50%;left:50%;margin-left:-265px;margin-top:30px;color:#ccc} .center a{padding:80px 20px 0;color:#222;text-decoration:none} .center a.web{ background:url(http://cdn1.iconfinder.com/data/icons/windows-8-metro-style/64/services.png) no-repeat top center;} .center a.torrent{ background:url(http://cdn1.iconfinder.com/data/icons/windows-8-metro-style/64/utorrent.png) no-repeat top center;} .center a.filez{ background:url(http://cdn1.iconfinder.com/data/icons/jolly-icons-free/64/folder_64.png) no-repeat top center;} </style> <link rel="icon" type="image/png" href="http://www.freefavicon.com/freefavicons/openclipart/loading-wheel-modern-icon-152-191739.png" /> <head> </head> <body> <div id="sysinfo"></div> <div class="center"> <a href="/UI" class="web">WD Web Interface</a> | <script type="text/javascript"> var d=document, wl=window.location, port_num = '9091', client_url = 'transmission/web/', link_label = 'Torrent Client'; d.write('<a href="'+wl.protocol+'//'+wl.hostname+':'+port_num+'/'+client_url+'" class="torrent">'+link_label+'</a>'); </script> | <a href="/shared/Public/" class="filez">Files Storage</a> </div> <iframe id="loader" name="loader" src="/sysinfo.php" style="display:none;"></iframe> <script type="text/javascript"> var readyStateCheckInterval=setInterval(function(){if(document.readyState==='complete'){ function update_data(){ var d = document, f = d.getElementById('loader'), s = d.getElementById('sysinfo'); f.src = f.src; if(!s.className.match(/(?:^|\s)MyClass(?!\S)/)) s.className+=' trans'; try { s.innerHTML = window.frames['loader'].document.getElementById('data').innerHTML; }catch(e){ s.innerHTML = '<span style="color:#e00;font-weight:bold;">Get data error</span>'; } } update_data(); setInterval(function(){ update_data(); }, 4000); clearInterval(readyStateCheckInterval); }},50); </script> </body> </html>
, JavaScript ( "" ) N , :
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ru-RU"> <title>Follow The White Rabbit</title> <style type="text/css"> html,body{text-align:center;font-family:Tahoma,Verdana,Arial;color:#666} #sysinfo{position:fixed;top:10px;width:300px;height:auto;margin-left:-150px;left:50%; font-size:11px;color:#666;-moz-opacity:0;-khtml-opacity:0;opacity:0; -webkit-transition:all 150ms ease-out;-moz-transition:all 150ms ease-out; transition:all 150ms ease-out} .trans{-moz-opacity:0.2!important;-khtml-opacity:0.2!important;opacity:0.2!important} #sysinfo:hover{-moz-opacity:1!important;-khtml-opacity:1!important;opacity:1!important} .center{position:absolute;width:530px;height:25px;top:50%;left:50%;margin-left:-265px;margin-top:30px;color:#ccc} .center a{padding:80px 20px 0;color:#222;text-decoration:none} .center a.web{ background:url(http://cdn1.iconfinder.com/data/icons/windows-8-metro-style/64/services.png) no-repeat top center;} .center a.torrent{ background:url(http://cdn1.iconfinder.com/data/icons/windows-8-metro-style/64/utorrent.png) no-repeat top center;} .center a.filez{ background:url(http://cdn1.iconfinder.com/data/icons/jolly-icons-free/64/folder_64.png) no-repeat top center;} </style> <link rel="icon" type="image/png" href="http://www.freefavicon.com/freefavicons/openclipart/loading-wheel-modern-icon-152-191739.png" /> <head> </head> <body> <div id="sysinfo"></div> <div class="center"> <a href="/UI" class="web">WD Web Interface</a> | <script type="text/javascript"> var d=document, wl=window.location, port_num = '9091', client_url = 'transmission/web/', link_label = 'Torrent Client'; d.write('<a href="'+wl.protocol+'//'+wl.hostname+':'+port_num+'/'+client_url+'" class="torrent">'+link_label+'</a>'); </script> | <a href="/shared/Public/" class="filez">Files Storage</a> </div> <iframe id="loader" name="loader" src="/sysinfo.php" style="display:none;"></iframe> <script type="text/javascript"> var readyStateCheckInterval=setInterval(function(){if(document.readyState==='complete'){ function update_data(){ var d = document, f = d.getElementById('loader'), s = d.getElementById('sysinfo'); f.src = f.src; if(!s.className.match(/(?:^|\s)MyClass(?!\S)/)) s.className+=' trans'; try { s.innerHTML = window.frames['loader'].document.getElementById('data').innerHTML; }catch(e){ s.innerHTML = '<span style="color:#e00;font-weight:bold;">Get data error</span>'; } } update_data(); setInterval(function(){ update_data(); }, 4000); clearInterval(readyStateCheckInterval); }},50); </script> </body> </html>
, JavaScript ( "" ) N , :
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ru-RU"> <title>Follow The White Rabbit</title> <style type="text/css"> html,body{text-align:center;font-family:Tahoma,Verdana,Arial;color:#666} #sysinfo{position:fixed;top:10px;width:300px;height:auto;margin-left:-150px;left:50%; font-size:11px;color:#666;-moz-opacity:0;-khtml-opacity:0;opacity:0; -webkit-transition:all 150ms ease-out;-moz-transition:all 150ms ease-out; transition:all 150ms ease-out} .trans{-moz-opacity:0.2!important;-khtml-opacity:0.2!important;opacity:0.2!important} #sysinfo:hover{-moz-opacity:1!important;-khtml-opacity:1!important;opacity:1!important} .center{position:absolute;width:530px;height:25px;top:50%;left:50%;margin-left:-265px;margin-top:30px;color:#ccc} .center a{padding:80px 20px 0;color:#222;text-decoration:none} .center a.web{ background:url(http://cdn1.iconfinder.com/data/icons/windows-8-metro-style/64/services.png) no-repeat top center;} .center a.torrent{ background:url(http://cdn1.iconfinder.com/data/icons/windows-8-metro-style/64/utorrent.png) no-repeat top center;} .center a.filez{ background:url(http://cdn1.iconfinder.com/data/icons/jolly-icons-free/64/folder_64.png) no-repeat top center;} </style> <link rel="icon" type="image/png" href="http://www.freefavicon.com/freefavicons/openclipart/loading-wheel-modern-icon-152-191739.png" /> <head> </head> <body> <div id="sysinfo"></div> <div class="center"> <a href="/UI" class="web">WD Web Interface</a> | <script type="text/javascript"> var d=document, wl=window.location, port_num = '9091', client_url = 'transmission/web/', link_label = 'Torrent Client'; d.write('<a href="'+wl.protocol+'//'+wl.hostname+':'+port_num+'/'+client_url+'" class="torrent">'+link_label+'</a>'); </script> | <a href="/shared/Public/" class="filez">Files Storage</a> </div> <iframe id="loader" name="loader" src="/sysinfo.php" style="display:none;"></iframe> <script type="text/javascript"> var readyStateCheckInterval=setInterval(function(){if(document.readyState==='complete'){ function update_data(){ var d = document, f = d.getElementById('loader'), s = d.getElementById('sysinfo'); f.src = f.src; if(!s.className.match(/(?:^|\s)MyClass(?!\S)/)) s.className+=' trans'; try { s.innerHTML = window.frames['loader'].document.getElementById('data').innerHTML; }catch(e){ s.innerHTML = '<span style="color:#e00;font-weight:bold;">Get data error</span>'; } } update_data(); setInterval(function(){ update_data(); }, 4000); clearInterval(readyStateCheckInterval); }},50); </script> </body> </html>

Source: https://habr.com/ru/post/229113/


All Articles