How to select only full cells in a column - Libreoffice / Openoffice Calc

Imagine having a column in a spread sheet with many lines in which not every line is full; but we want to select only the ones that are full. I'm doing this with a "Find" dialogue box and when wondering if there exists a simpler solution I only came across more complicated ones :/.

Here's is how I do it:

  1. Select the data set in the row with empty and not empty cells.
  2. Open Find & Replace dialogue box (Edit -> Find & Replace from the menu).
  3. In the "Search for" field write this regular expression: .*
  4. Click on "More options" and check "Regular expressions" and "Current selection only".
  5. Click on "Find All"
  6. Copy and Paste wherever wanted.


Hope this is clear enough.

Needless to say that with regular expressions it is possible to select various things:
- Cells containing letters only: [A-z]
- Cells containing numbers only: [0-9]

- ...

For various examples of regular expression see these examples. It's worth learning them.

Change, disable or remove Dropbox overlay emblems on icons in OS X

Dropbox has nice overlays over icons to show if files or folders are (un)synchronised, unable to be or if they are selectively synchronised. However, these overlays overrun OS X overlays.

For example, I have folders all over my file hierarchy that I want to synchronise*. Let's say I have a folder Desktop/PhD and a folder Documents/Resources. If I want to have them in Dropbox all I need to do is to create symbolic links** (shortcuts) to original folders from the Dropbox folder.

$ cd ~/Dropbox
$ ln -s ~/Desktop/PhD
$ ln -s ~/Documents/Resources

Now Dropbox folder has two symbolic links in it, but it synchronises original folders with its servers (and across other computers/devices)***. The way OS X shows these links is with an overlay black arrow symbol like in the picture below.

Dropbox draws its overlays over these arrows in the same spot. There is no way for me to tell which folders are actually in the Dropbox and which are symbolic links.

To find these pictures you need to:

1. Navigate to Applications folder and find Dropbox
2. Right click on it and select "Show package content" from the context menu.
3. In a new finder window navigate to Content/Resources and this is where Dropbox stores all the icons and images.
4. The overlays start with the "emblem" prefix.

You can simply rename them to completely disable them from showing. But I still wanted them to be shown. So I renamed the original files, made copies and edited them so the overlays are on the right side of files' and folders' icons. (You need to log off and on again or restart the computer to see the results)

This way I can see both: Dropbox and OS X overlays:


You can download these files zipped together (you need to unpack the zip first) and copy them to the Content/Resources folder and get the same result.

-----------------------

There are other services that allow to synchronise folders and files from all over the hierarchy without a special "cloud" folder. One such service is sugarsync.

** SymLinks can bee easily created without the command line fiddling with SymbolicLinker and then moved to Dropbox folder.

** Although these links do not take additional space on your hard drive (they are just shortcuts to original folder), the Dropbox folder still gets space taken by the original folder.


Crop PDF (print, split, merge) - my Latex/PDF tool set on Windows

Since I was constrained to Windows for a couple of months I had to find equivalent software to OS X Preview which handles coping, splitting and merging PDFs (among other formats). Maybe it's not the best PDF for OS X but it handles smoothly the three operations I often need.

Why I need to crop PDFs? When writing LaTex documents, tables are a nuisance. The easiest way to make tables is to make them in Calc/Excel, export them as PDF and include them in the LaTex document. I wrote about how to do it here. It is possible to include the whole PDF and crop it in LaTex but I prefer to see the visual result. So I needed to crop my PDFs. I found these:

  • Briss - a cross-platform PDF cropper
  • PDF scissors: a web based open source PDF cropper


I know it is possible to export PDFs directly from Calc/Excel, but I like to have a bit more options. For example I might have more sheets but want to save only a selection to a PDF (like printing only a selection of a spreadsheet). The old PDFCreator I used over a decade ago still exists and came in handy

  • PDF Creator - a printer that prints whatever to a PDF (or other formats)

If you already have a multipage PDF and need to split it:

  • PDFsam - a cross platform PDF split and merge tool

I use TexMaker for writing in LaTeX. It has an in-built embedded PDF viewer but since my Lenovo X61s only supports 1024x768 resolution I needed a different application for viewing PDFs. A viewer needs to update PDFs whenever I recompile the LaTex document (Adobe Reader fails at this :/).

I mentioned many of these tools already in a list of open source PDF applications but wanted to present how I used them for writing and viewing LatTeX documents.

AngularJS: show progress of a form by counting the number of disabled fields

Let say we have a survey with many questions. Some questions are enabled and some disabled at first and this keeps changing based on what is selected or entered. At any given time we want to know the count of all fields in a form, how many of them are disabled and how many still required. The number of all and required fields is easy as AngularJS keeps an array of all form elements. Disabled elements are something else.

Counting disabled fields can be a challenge if many radio buttons are used, as every radio button is counted as one element.

Lets take this code for example:

 <!doctype html>
 <html>
    <head>    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    </head>
    <body>
    
    <form>
     <input type="radio" name="typeComputer2" disabled> 1<br>
     <input type="radio" name="typeComputer2" disabled> 2<br>
     <input type="radio" name="typeComputer2" disabled> 3<br>
    </form>           
    <div id="res"></div>

    <script>
      var bla = $(':disabled').length;
      $('#res').text("Number of disabled elements: " + bla);
    </script>
    </body>
 </html>

Will produce this:

The number of disabled elements is 3. But in fact this is the same group of radio buttons and could be counted as one element (only one radio button can be selected at once).

Lets look at the solution using AngularJS.

We have this HTML document with 3 form elements.

  • First one is 3 radio buttons that are disabled and not required until the checkbox is selected
  • Second is a required radio button
  • Third is a required input field
<html ng-app>
  <head>
     <script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
     <script src="controller.js"></script>
  </head>
  <body>           
    <div ng-controller="ctrlRead">

      <form name="survey">
        <input type="radio" name="n1" value="1" ng-model="s.el1" 
                        ng-required="s.el2" ng-disabled="!s.el2"> 1<br>
        <input type="radio" name="n1" value="2" ng-model="s.el1" 
                        ng-required="s.el2" ng-disabled="!s.el2"> 2<br>
        <input type="radio" name="n1" value="3" ng-model="s.el1" 
                        ng-required="s.el2" ng-disabled="!s.el2"> 3<br><br>

        <input type="checkbox" name="n2" ng-model="s.el2" ng-required="true"> a<br><br>

        <input type="text" name="n3" ng-model="s.el3" ng-required="true">
      </form>           

      <div id="res"> 
        Disabled: {{eDisabled}} <br>
        All: {{eAll}}  <br>
        Required: {{eRequired}} <br>
        Done in %: {{eDonePercent}} <br>
        Valid: {{survey.$valid}}
      </div>

    </div>
  </body>
</html>

Now we need to write our controller.js

function ctrlRead($scope, $timeout) {

  //a variable to store our survey data
  var s = {}; 
  $scope.s = s;

  //watch for the sur variable to change
  $scope.$watch("s", function () {
     //timeout to fire events 100ms later 
     //for DOM to register the changes
     $timeout($scope.countPercentageDone, 100);
  }, true);

  $scope.countPercentageDone = function() {      
    var requiredTrue=0;
    var requiredFalse=0;
    var disabledElementNames = new Array();    
 
    if ($scope.survey) { 
      //this traverses the form elements stored in form name
      $.each($scope.survey, function(index, value) {
        //survey holds other elements ... 
        //only form elements have $error object
        if ($scope.survey[index].$error) { 
          if ($scope.survey[index].$error.required == true) {
            requiredTrue++;
          } else {
            requiredFalse++;
            //check if the form element is disabled
            if ($("[name="+$scope.survey[index].$name+"]:disabled")) {
              //if it is and it is not just element filled in 
              //element also become disabled once filled in!!
              if ($("[name="+$scope.survey[index].$name+"]:disabled").length != 0) { 
                disabledElementNames.push($scope.survey[index].$name);
              }
            }
          }
        }
      });
    }

    $scope.eDisabled = disabledElementNames.length;
    $scope.eAll = requiredTrue+requiredFalse;
    $scope.eRequired = requiredTrue;
    $scope.eDonePercent = 100-((requiredTrue*100)/(requiredTrue+requiredFalse-disabledElementNames.length));
  }

};

To summarise the code:

  • We traverse all form elements in the $scope.survey array.
  • Because this array contains other elements as well as form elements, we have to look only at those that have an $error object defined.
  • In all elements that are not required we look for those that have lenght > 0.
    We do this because elements that we fill in also become disabled by AngularJS.

This example is also available in jsfiddle.

For the progress bar we could use bootstrap:

<div class="progress">      <div class="bar" style="width: {{eDonePercent}}%"></div> </div>

or any of the solutions I wrote about here to support older browsers.

A big thanks to Tine for all the suggestions and help.

Bootstrap progress bar in 100 images for older browsers

These are assumptions taken here:

  • Bootstrap progress bars are nice
  • They do not work in IE 6-9 (I really wonder why 24% of web users don't upgrade their browsers):
    "Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox."
  • I needed a progress bar for a web form that would work in all browsers
  • I'm calculating how much of a web form is completed with AngularJS and change the progress bar on he fly.

Let's start.

1. Create 100 progress bars using a php loop and a Bootstrap progress bar code:

 <!doctype html>
 <html>
    <head>    
        <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
        <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div id="progress_bar" style="width: 500px; margin: 10px auto 0 auto">
            <?php
            for ($i=0; $i<101; $i++) { 
                echo '  <div class="progress" style="margin: 2px">
                            <div class="bar" style="width: '.$i.'%"></div>
                        </div>';
            }                    
            ?>
        </div>
    </body>
 </html>

It is possible to use other colours and stripes, etc ... but I'll use simplest progress bar. Keep in mind that my outer div is 500px wide as this is the size of a progress bar I wanted.

2. Crop the progress bars from a web page produces by the above code

The simplest way is to use Awesome screenshot extension for Chrome, Safari or Firefox. It is also good to cut down the image size with e.g. re-saving it for the web so it would be smaller in size (not resolution).

I ended up with this image (original size can be downloaded here):


This can be already the end of the story. The only thing wee need is to use this image as a background of a div and slide up or down based on the percentage we want to show.

3. Show the progress bar

3.1 Using CSS background-position and AngularJS binding

 <div style="float: left;">Progress: </div>
 <div style="width: 500px; height: 22px; float: left;
                  background-image:url('progressbar_small.png'); 
                  background-position:0px -{{Math.round(22*(percentage))}}px;">
 </div>

Each progress bar is 22px high and I multiply it with the percentage I calculate based on how much of the form is filled in. I also use the Math JS in binding for multiplication (maybe there's a better way but I'm not aware of any). To do this I had to define the Math object in my $scope this way $scope.Math = window.Math; 

For some reason the above did not work in IE 8 (which I really care about). Although it apparently works on some web sites. So i decided to slice up the above image in 100 images.

3.2 Using individual images

This is not the optimum solution as for every change there is an Ajax get call to retrieve a desired image. We did this only once in the above example.

This procedure was also explained in a previous post.

First I sliced up the image with ImageMagick using a crop flag (the second command should be in one line) using a bash one line script:

 mk@here/$ ls
 progressbar_small.png

 mk@here/$ for((i=0; i<101; i++)) ; do n=$[i*22]; \ 
          convert progressbar_small.png -crop 500x22+0+$n +repage progressbar${i}.png; \
          done

 mk@here/$ ls
 progressbar0.png    progressbar32.png  progressbar56.png  progressbar7.png
 ...
 progressbar2.png    progressbar53.png  progressbar77.png  progressbar_small.png

The -crop flag slices up images 500px wide and 22px high and starts at 0px on the X axis and goes down 22*i where i runs from 0 to 100. The end results are 100 images.

And finally the HTML bit:

 <div style="float: left;">Progress: </div>
 <div style="width: 500px; height: 22px; float: left;">
     <img src=progressbar{{Math.round(22*(percentage))}}.png">
 </div>

All  images are available in this zip file.

I hope this can help someone.

Any other suggestions greatly appreciated.

A big thank you to Tine for all the suggestions and help.