Linux-FS Watcher for The Fascinator Desktop (Updated)

Firefox, The Fascinator Desktop, Ubuntu/Linux, eResearch, xhtml, xml No Comments

Recently I am involved in The Fascinator Desktop project. Peter Sefton is updated the detail workflow of this project: Desktop Repositories: Smashing up Power point. Part of my involvement is to develop filesystem watcher (Linux and Mac OS watcher).

The Linux FS watcher can be checked-out from http://fascinator.usq.edu.au/svn-auth/code/watcher/tags/0.1. This is a standalone program, thus you can use it directly to monitory your filesystem. The whole application is developed in python.

Dependencies before you run the Linux FS watcher:

  • pyinotify: Note for Ubuntu users: Try to download the pyinotify directly from http://trac.dbzteam.org/pyinotify instead of using ubuntu pyinotify package. And if you have any issue with this library, you can ask for help directly from the website, the support teams are very helpful. I had the issue with renaming a directory once, and their responses are quick! Refer to: http://trac.dbzteam.org/pyinotify/ticket/20.
  • sqlite: This library should be pre-shipped with your ubuntu, if not, you can directly get the package from the package manager. sqlite is used to store all the events happened within the watched directory. The table for the event consists of filePath, event (file deletion or modification), and timestamp when the event is invoked.
  • foresite: (Won’t be needed anymore since it return JSON file instead of atom feed) Download from http://code.google.com/p/foresite-toolkit/. This library is used to generate atom feed requested through web service to provide the list of events stored in the sqlite.

To run the program, go to the watcher directory after you checked-out the code:

  • Modify the config.json configuration file, change the watchDirs to the directory you want to watch. Make sure it’s exist, and try not to watch your home directory. (I have not developed any code to ignore the python object file, thus, when you watch your home directory, your watcher program object file will be added to the database).
    [html]
        "watchDirs" : ["/home/octalina/workspace/watcher/someDir", "/home/octalina/workspace/watcher/modeDir"],

    If you want to run the watcher as a daemon, change the daemon value to True.

    [html]
           "daemon" : "True"
  • Change to app directory and run watcher:
    [html]
           python watcher.py
  • To run the webservice, open another terminal tab and run:
    [html]
           python jsonWebservice.py

To try get the the list of file changes can be done using curl/wget:

[html]
curl localhost:9000

or if date range is specified:

[html]
curl localhost:9000 -H "Last-Modified: Wed, 17 Jun 2009 18:38:12 GMT"

Get button hover behaviour work in IE

Firefox, IE, Opera, Safari No Comments

I have been trying to fix the consistency problem found in IE and Firefox. Same as Opera and Safari, Firefox is able to accept button hover behavior and work perfectly fine. However, this button:hover is not working in IE 6 and IE 7, in fact in both IE button:hover behavior not existed at all.
Yeah, another alternative is I can use image hover bla bla bla, but that’s not the case. It’s just feel not satisfied to know this button:hover not working in IE.

Being honest, I did not invent the code myself to fix this issue. Thanks to Pseudo-Classes Fix for Internet Explorer!!! By implementing some jScript code in htc file, and includes this htc file in the css, the hover behavior for any html elements including button work in IE.

Test Result:

Button hover:
Manage

Publish

Advanced

Span hover:
Hide comments

The code is:
IEFixes.htc

[html]
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="RestoreHover()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
<PUBLIC:ATTACH EVENT="onmouseup"   ONEVENT="RestoreActive()" />
<SCRIPT LANGUAGE="JScript">
function DoHover()
  { element.className += ' hover';
  }

function DoActive()
  { element.className += ' active';
  }

function RestoreHover()
  { element.className = element.className.replace(/\bhover\b/,'');
  }

function RestoreActive()
  { element.className = element.className.replace(/\bactive\b/,'');
  }
</SCRIPT>

My test code is: (Note: put the .htc file in the same directory)

[html]
<html>
<head><title></title>
<style>
      button, span.tab-inactive, .tab-whitespace span.command {
        behavior: url('IEFixes.htc');
     }
 
     .tab {
       display: block;
       cursor: auto;
       padding: 2px;
       width: 6em;
       font-size: 2em;
     }
   
     .tab-spacer{
       display: block;
       cursor: auto;
       padding-bottom: 3px;
     }
   
     span.tab-inactive {
       padding-top: 4px;
       padding-bottom: 4px;
       background-color: #d9d9d9;
       color: #0d2474;
       background: none;
       background-color: none;
       text-align: center;
       font-size: 2em;
       cursor: pointer;
     }
   
     span.tab-inactive:hover, span.tab-inactive.hover {
       font-weight: normal;
       padding-top: 4px;
       padding-bottom: 4px;
       color: #0d2474;
       background: none;
       background-color: #c0d0ff;
       text-align: center;
       font-size: 2em;
       cursor: pointer;
     }
   
     .tab-whitespace span.command:hover, .tab-whitespace span.command.hover {
       text-decoration: underline;
       background-color: transparent;
       cursor: pointer;
     }
</style>
</head>
<body>
    <div class="tabs">
        <table border="0" cellpadding="2" cellspacing="2" id="new">
            <tr>
                <td>Button hover:</td>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td class="tab-spacer"></td>
                <td>
                    <span title="Manage content files" class="tab-inactive" id="tab-manage">Manage</span>              
                </td>
                <td class="tab-spacer"></td>
                <td>
                    <span title="Publish the content" class="tab-inactive" id="tab-publish">Publish</span>      
                </td>
                <td class="tab-spacer"></td>
                <td>
                    <span title="Advanced options" class="tab-inactive" id="tab-advanced">Advanced</span>
                </td>
            </tr>
            <tr>
                <td colspan="6" class="tab-spacer"></td>
            </tr>
        </table>
        <p/><p/>
        <table border="0" cellpadding="0" cellspacing="0" id="new1">
            <tr>
                <td>Span hover:</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td class="tab-whitespace">
                    <span style="color:#000080;" class="command">Hide comments</span>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Browser incompatible issue in table rendition

Firefox, IE, Opera, Safari, Window No Comments

Refer to: my blog on Playing with CSS and xhtml document and Browser and Known Issues

I solved the problem to render table in Firefox and IE, as our ICE user increased, some of the uses Opera and Safari (both running in Window). Bugs that I found in Safari is that if border is lesser than 1 px, the border will not be displayed at all. And if border-collapse: collapse style is not used for the table, the line of the border in between the cell will be inconsistent (some think and some thin). Different from Safari, Opera can support border that is lesser than 1 px, but the border-collapse: collapse; still need to be used.

In my “Playing with CSS and xthml document” post, I mention that when Firefox uses border-collapse: collapse; style the result is different again that’s why I have:

[html]
    <!--[if gt IE 5]>
        <style>
            .body table { border-collapse: collapse;}
        </style>
    <![endif]-->

So in order to let all the browser to display the same result, use border beyond 1px and use border-collapse:collapse; (Firefox will behave if beyond 1px)
Solved displaying table in different browsers but same Operating System, now I need to do testing on different Operating System ;) . At least I managed to close one ticket today. Cheers…

Firebug is known to make Gmail slow

Firefox No Comments

After installing Firebug so I can use it create my website easily, I realized that when I open my gmail, it just taking forever to load the page or will lead to a page asking me to view gmail in normal html format. Today, at work, I happened to see a big error message in my gmail.

gmail

By following the instruction from google, I disable the firebug just for gmail. But everytime after I log out and close my gmail tab, my firefox browser just crashed.

Browser display wrongly when handling empty element

Firefox, IE, Safari, xhtml No Comments

I have funny result when try to displaying below html file. The browser like Firefox, Safari and IE (so far that I have tested) give me wrong result. Be careful when use <htmlElement /> when you need to define empty element, it is safer when you do it with <htmlElement></htmlElement>. Your browser may interpret differently :D
This is my simple html file.

[html]

<table>
    <tr><td>
        <div id="table1">
            <table border="1" summary="This table should be empty"/>here some text
        </div>
    </td></tr>
    <tr><td>Some text</td></tr>
    <tr><td>
        <div id="table2">
            <table border="1" summary="This is correct"></table>
            <p>here some text</p>
        </div>
    </td></tr>
    <tr><td>Some text2</td></tr>
    <tr><td>
        <div id="table1">
            <table border="1" summary="This is correct because this table is empty"/>here some text
        </div>
    </td></tr>
</table>

Output captured from firebug-Firefox extension

[html]
<div id="table1">here some text
     <table border="1" summary="This table should be empty">
       <tbody>
          <tr><td>Some text</td></tr>
          <tr><td>
                 <div id="table2">
              <table border="1" summary="This is correct"/>here some text
                 </div>
          </td></tr>
          <tr><td><Some text2</td></tr>
          <tr><td>
                 <div id="table1">here some text
                      <table border="1" summary="This is correct because this table is empty"></table>
                 </div>
          </td></tr>
       </tbody>
     </table>
</div>

Playing with CSS and xhtml document

Firefox, IE, Safari, css, xhtml 2 Comments

Displaying unicode character in different OS, add below code to your css since different OS have their own default font:

Displaying unicode generated from Open Office

.spCh {
    font-family: "Lucida Grande","Arial Unicode MS", sans-serif; font-size: 1.2em;
}

Supporting website:

Problem still existed:

I am not sure why Firefox in MacOs still display the unicode character differently although Lucida Grande is applied to font-family, this problem not existed when Safari, is used for the same Mac.

Border is displayed differently in IE and Firefox.

Style for each td:

style=”vertical-align: top; border-bottom:0.05pt solid #000000; border-left:0.05pt solid #000000; border-right:none; border-top:none; border-style: none none solid solid; border-color: -moz-use-text-color -moz-use-text-color rgb(0, 0, 0) rgb(0, 0, 0); border-width: medium medium 0.05pt 0.05pt; padding: 2.75pt; vertical-align: top;”

Result shown in IE: Result shown in Firefox:
IE result Firefox result

In order to get the same result as Firefox (this is the excepted result), wrap below code in head of html document (not, if you have style coded in html already, put below code separately):

[html]
<!--[if gt IE 5]>
    <style>
        .body table { border-collapse: collapse;}
    </style>
<!--[endif]-->

Why do checking? Because Firefox and Safari will display the table without border ;)

Happy trying :D