Sunday, August 30, 2015

Upgrading the firmware on TrendNet TEW-731BR

If you’re like me, and you tried to upgrade your router firmware, but found that you get a checksum error, you may want to try an alternate version of the firmware. After all, any newer firmware is probably better than what you have, if you have the factory default.
 
If you happen to have a TrendNet TEW-731BR, I have some specifics on how do this. The newest version (1.03b01) appears to have a flaw that prevents the router from running it. It did not matter how many times I tried to download and extract it, it failed every time. If you have this same issue, you'll need to grab the version prior to that (1.02b05), released June 26, 2014. I found it at http://download.trendnet.com/TEW-731BR/firmware/ which is the repository for all the TrendNet firmware downloads.

I was able to upgrade my TEW-731BR (1.0R) router without any issues using the 1.02b05 firmware.

Note that if you have a TEW-731BR and the router itself it does not have GREENnet written on it, you may have the TEW-731BR (2.0R). This is a different router and has a different firmware, which you can get from the TrendNet site here: http://www.trendnet.com/support/supportdetail.asp?prod=235_TEW-731BR

Updating the firmware is quite painless, simply open up the firmware admin, go to tools->firmware. Click the browse button and select the .bin file of the firmware you downloaded and extracted, and then click Update. After the processing countdown, the new firmware will be loaded, with all of your previous settings preserved.

Monday, June 29, 2015

LMT #4: A Simple Desktop Background Slideshow

Linux Mint Tips #4: A Simple Desktop Background Slideshow

Linux Mint Tips series is a list of tricks I've picked up after having switched away from Windows for good in 2013, after dabbling for years. I'll do my best to go back and edit posts that contain any erroneous information, but keep in mind that I'm a relative newcomer to the Linux scene. I wrote this tutorial running the MATE desktop environment in Mint 17.1.

The desktop background is often one of the first things I customize after installing a fresh OS, and that's no exception in Mint. I have a couple of preferences: one, I like the image to change every so often, and two, I prefer landscapes. In other operating systems, setting up this sort of thing is a built-in, point-and-click affair. In Mint, it is possible, but there's a little more legwork (but not too much).

For the example provided here, download and save the following images to your Pictures folder. Please note that the tutorial uses the 1920x1080 resolution size. If you need to choose an alternate size, you'll have to tweak the image names in the .xml file. You'll also need to copy/paste them over into Pictures from the Downloads folder if you're using the default browser settings.
https://interfacelift.com/wallpaper/details/1489/tree_and_the_mountain.html
https://interfacelift.com/wallpaper/details/2031/ageeba.html
https://interfacelift.com/wallpaper/details/2053/autumn_mill.html
https://interfacelift.com/wallpaper/details/1940/moraine_lake.html
https://interfacelift.com/wallpaper/details/1494/lonesome_house.html

Once you have those, you'll need to grab the xml file that drives the slideshow.
https://drive.google.com/file/d/0B87z1DYb0jIoZjVqSkdNeHdHdmM/view?usp=sharing

I recommend putting this in the Pictures folder as well. You'll need to edit the file and change /home/harborpirate to substitute your own home folder name instead of harborpirate.

Right click on the desktop and click Change Desktop Background. Change the dropdown setting from Images to All Files. Choose Interface.xml.

What this xml file contains is the instructions for the locations of the files, what order they should be swapped, what transition to use, how long the transition lasts, and how much time between transitions.

I've kept this example relatively simple, but with enough detail to hopefully be useful. Enjoy.

Wednesday, April 22, 2015

Light Color Icon for Gridster Resize Handle

If your site has a dark theme and it is difficult to see the dark resize icon that gridster uses, I've got a fix for you.

In the jquery.gridster.css, you'll see that .gs-resize-handle-both includes a base64 encoded image for background-image. You may think that it'll be a pain to change this, since you'll need to decode, save as a file, edit, save again, open the file in binary mode, copy the text, and then re-encode, but its actually a little simpler than that.

First, grab the base64 encoded string from the css. The master branch file is here: https://github.com/ducksboard/gridster.js/blob/master/src/jquery.gridster.css, and the following is the actual base64 encoded string of the resize handle image if you want to follow along but can't be bothered to open that file:
PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=

Next you'll need a tool to decode this string. There are numerous ones online, including the one I ended up using:
http://www.motobit.com/util/base64-decoder-encoder.asp

Paste the string into the large textbox and choose the decode radio button item. You do not need to change any other settings. Click the "convert the source data" button. You'll now end up with a second textbox containing some xml that defines the original svg image. Here's that xml:

<?xml version="1.0" standalone="no"?>
<!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="Untitled-Page%201" viewBox="0 0 6 6" style="background-color:#ffffff00" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
x="0px" y="0px" width="6px" height="6px"
>
<g opacity="0.302">
<path d="M 6 6 L 0 6 L 0 4.2 L 4 4.2 L 4.2 4.2 L 4.2 0 L 6 0 L 6 6 L 6 6 Z" fill="#000000"/>
</g>
</svg>

This seems like the point where you'll need to deal with all the complexity of saving this as a file and using an svg editor to make modifications to it, but as it turns out, the change that needs to be made is so simple that you can just edit this text by hand. The key pieces are the opacity setting and the fill color. What you'll want on a dark themed site is to up the opacity slightly, and choose a light color for the fill color. I set the opacity value to 0.85 and the fill to #dddddd, but you can tweak these however you like. Just remember that opacity is a decimal between 0.00 and 1.00 and that fill is a hex value between #000000 (black) and #ffffff (white). Be careful about setting the value to pure white (#ffffff). Since we do not see the background color at all, I'm pretty sure that the background-color is being used as the transparency color; thus using pure white for a fill color may result in not seeing anything at all. If you need to do that, you may need to experiment a little with the effects of changing the background-color value.

At this point you'll have a new xml, like this one:

<?xml version="1.0" standalone="no"?>
<!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="Untitled-Page%201" viewBox="0 0 6 6" style="background-color:#ffffff00" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
x="0px" y="0px" width="6px" height="6px"
>
<g opacity="0.85">
<path d="M 6 6 L 0 6 L 0 4.2 L 4 4.2 L 4.2 4.2 L 4.2 0 L 6 0 L 6 6 L 6 6 Z" fill="#dddddd"/>
</g>
</svg>

To translate this back into the encoded format to replace the value in the css, copy and paste this text back into the base64 tool, making sure to paste it into the bottom textarea (the input one). Change the option to encode. If you used the same values I did, you'll get the following back in the top textbox as the result after you click the "convert the source data" button:

PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIEZpcmV3b3JrcyBDUzYsIEV4cG9ydCBTVkcgRXh0ZW5zaW9uIGJ5IEFhcm9uIEJlYWxsIChodHRwOi8vZmlyZXdvcmtzLmFiZWFsbC5jb20pIC4gVmVyc2lvbjogMC42LjEgLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyBpZD0iVW50aXRsZWQtUGFnZSUyMDEiIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgdmVyc2lvbj0iMS4xIg0KeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSINCng9IjBweCIgeT0iMHB4IiB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCINCj4NCjxnIG9wYWNpdHk9IjAuMzAyIj4NCjxwYXRoIGQ9Ik0gNiA2IEwgMCA2IEwgMCA0LjIgTCA0IDQuMiBMIDQuMiA0LjIgTCA0LjIgMCBMIDYgMCBMIDYgNiBMIDYgNiBaIiBmaWxsPSIjMDAwMDAwIi8+DQo8L2c+DQo8L3N2Zz4=

You can now replace the base64 encoded image value in the jquery.gridster.css file with this one, and you'll end up with a lighter colored resize handle in gridster.

You could certainly get a lot more sophisticated and choose different images depending on the color of the consuming component, but this was as far as I needed to go since the site I was working with has a consistent theme that puts a dark color at the bottom of the widgets.