The shape of space: November 2012

Tuesday, November 27, 2012

MinGW / Java / JNI

File: Test.java

public class Test {
public native void displayMessage();

static {
System.loadLibrary("teste");
}

public static void main(String args[]) {
new Test().displayMessage();
}
}

File: TestImp.c

#include <jni.h>
#include "Test.h"
#include <stdio.h>

JNIEXPORT void JNICALL Java_Test_displayMessage(JNIEnv *env, jobject obj)
{
printf("Testing 1 2 3...\n");

return;
}

File: Makefile

JAVA_DIR=/c/Program\ Files/Java/jdk1.7.0_07

all:
@echo
@echo "Compiling Java source"

${JAVA_DIR}/bin/javac.exe Test.java

@echo
@echo "Generating header file"

${JAVA_DIR}/bin/javah.exe -jni Test

@echo
@echo "Creating DLL file"

gcc -Wall -D_JNI_IMPLEMENTATION_ -Wl,--kill-at -I \
${JAVA_DIR}/include -I ${JAVA_DIR}/include/win32 \
-shared -o teste.dll TestImp.c

@echo
@echo "Executing..."

${JAVA_DIR}/bin/java.exe Test

clean:
rm -f Test.class
rm -f Test.h
rm -f Test.exe
rm -f teste.dll

Thursday, November 15, 2012

Insights / Scrollbar / JavaScript / CSS

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style>
      * {
        padding: 0;
        border: 0;
      }

      .scrollable_area {
        clear: both;
        width: 500px;
        height: 400px;
      }

      .content {
        float: left;
        background-color: #f1f1f1;
        color: #000;
        opacity: 0.8;
      }

      .scrollbar {
        float:left;
        background-color: #c0c0c0;
        opacity: 0.5;
        position: relative;
      }

      .bar {
        background-color: green;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>

    <script type="text/javascript" language="JavaScript">
      /** Scroll bar object implementation. */

      function ScrollBar(element) {
        console.log('ScrollBar()');

        this.element = element;

        this.init();
      }

      ScrollBar.prototype = {
        element: null,
        height: 0,
        width: 0,

        contentElement: null,
        paddingContent: 5,
        contentWidth: 0,

        scrollElement: null,
        scrollBarWidth: 10,

        thumbElement: null,
        thumbWidth: 0,
        thumbHeight: 50,
      };

      ScrollBar.prototype.init = function() {
        console.log('ScrollBar.init()');

        // Content element

        this.contentElement = this.element.getElementsByClassName('content')[0];

        // Scroll bar element

        this.scrollElement = this.element.getElementsByClassName('scrollbar')[0];

        // Scroll bar element

        if (this.scrollElement) {
          this.thumbElement = this.scrollElement.getElementsByClassName('bar')[0];
        }

        // Layout

        this.layout();

        // Event listeners

        this.enableListeners();

        this.updateThumbFromContent();
      };

      ScrollBar.prototype.layout = function() {
        console.log('ScrollBar.layout()');

        this.calculate();

        this.layoutContent();

        this.layoutBar();
      };

      ScrollBar.prototype.calculate = function() {
        console.log('ScrollBar.calculate()');

        //this.borderWidth = this.element.style.borderWidth;

        console.log('this.element.style.borderWidth = ' + this.element.style.borderWidth);

        // Scroll area width

        this.width = this.element.offsetWidth;

        // Content area width

        this.contentWidth = this.width - this.scrollBarWidth - this.paddingContent * 2;

        this.height = this.element.offsetHeight;

        // Thumb dimensions

        this.thumbWidth = this.scrollBarWidth;
      };

      ScrollBar.prototype.layoutContent = function() {
        console.log('ScrollBar.layoutContent()');

        this.contentElement.style.overflow = 'hidden';

        this.contentElement.style.height = (this.height - this.paddingContent * 2) + 'px';

        this.contentElement.style.padding = this.paddingContent + 'px';

        this.contentElement.style.width = this.contentWidth + 'px';

        //this.contentElement.style.height = this.height + 'px';
      };

      ScrollBar.prototype.layoutBar = function() {
        console.log('ScrollBar.layoutBar()');

        // Scroll area dimensions

        this.scrollElement.style.height = this.height + 'px';

        this.scrollElement.style.width = this.scrollBarWidth + 'px';

        // Thumb layout

        this.thumbElement.style.width = this.thumbWidth + 'px';
        this.thumbElement.style.height = this.thumbHeight + 'px';
      };

      ScrollBar.prototype.setContent = function(str) {
        if (typeof(str) == 'string') {
          this.contentElement.innerHTML = str;

          this.updateThumbFromContent();
        }
      };


      ScrollBar.prototype.enableContentListener = function() {
        console.log('enableContentListener()');

        //if IE (and Opera depending on user setting)
        if (document.attachEvent) {
          console.log('attachEvent');

          var that = this;

          document.attachEvent("on" + mousewheelevt, that.onMouseWheelEventCall);
        }

        //WC3 browsers
        else if (document.addEventListener) {
          console.log('addEventListener');

          //FF doesn't recognize mousewheel as of FF3.x
          var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";

          var that = this;

          document.addEventListener(mousewheelevt, that.onMouseWheelEventCall, false)
        }
      }

      ScrollBar.prototype.disableContentListener = function() {
        console.log('disableContentListener()');

        var that = this;

        // if IE (and Opera depending on user setting)
        if (document.dettachEvent) {
          console.log('dettachEvent');

          var that = this;

          document.dettachEvent("on" + mousewheelevt, that.onMouseWheelEventCall);
        }

        //WC3 browsers
        else if (document.removeEventListener) {
          console.log('removeEventListener');

          //FF doesn't recognize mousewheel as of FF3.x
          var mousewheelevt = (/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"

          var that = this;

          document.removeEventListener(mousewheelevt, that.onMouseWheelEventCall, false);
        }
      }

      ScrollBar.prototype.onMouseWheelEvent = function(e) {
        console.log('onMouseWheelEvent()');

        var e = window.event || e; // old IE support

        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        console.log('delta = ' + delta);

        if (delta == 1) {
          this.contentElement.scrollTop -= 5;
        }
        else {
          this.contentElement.scrollTop += 5;
        }

        this.updateThumbFromContent();
      }

      ScrollBar.prototype.enableListeners = function(str) {
        var that = this;

        var handler = this.onMouseWheelEvent;

        this.onMouseWheelEventCall = handler.bind(that);

        // Mouse event for content

        this.contentElement.onmouseover = function() {
          console.log('onmouseover');

          // Enable event listener

          that.enableContentListener();
        };

        this.contentElement.onmouseout = function() {
          console.log('onmouseout');

          // Disable event listener

          that.disableContentListener();
        };


        // Mouse event for scroll

        this.scrollElement.onmouseover = function() {
          console.log('onmouseover');

          that.scrollElement.style.opacity = '1.0';
        };

        this.scrollElement.onmouseout = function() {
          console.log('onmouseout');

          that.scrollElement.style.opacity = '0.5';
        };

        this.scrollElement.onmousedown = function(e) {
          // Thumb positioning

          var x = e.pageX - that.scrollElement.offsetLeft;
          var y = e.pageY - that.scrollElement.offsetTop;

          if (y > (that.scrollElement.offsetHeight - that.thumbHeight))
            y = that.scrollElement.offsetHeight - that.thumbHeight;

          that.thumbElement.style.top = y + 'px';

          that.updateContentFromThumb();
        };
      };

      ScrollBar.prototype.updateContentFromThumb = function() {
        // Content positioning

        var thumbPercent = this.thumbElement.offsetTop / (this.scrollElement.offsetHeight - this.thumbHeight);

        console.log('this.thumbElement.offsetTop = ' + this.thumbElement.offsetTop);
        console.log('thumbPercent = ' + thumbPercent);

        this.contentElement.scrollTop = (this.contentElement.scrollHeight * thumbPercent);
      };

      ScrollBar.prototype.updateThumbFromContent = function() {
        console.log('updateThumbFromContent');

        console.log('this.contentElement.scrollTop = ' + this.contentElement.scrollTop);

        var contentPercent = 0;

        if (this.contentElement.scrollHeight -

            this.contentElement.offsetHeight > 0)
          contentPercent = this.contentElement.scrollTop /

                           (this.contentElement.scrollHeight -

                            this.contentElement.offsetHeight);

        console.log('contentPercent = ' + contentPercent);

        this.thumbElement.style.top = ((this.scrollElement.offsetHeight -

                                        this.thumbHeight) *

                                       contentPercent) + 'px';
      };


    </script>

  </head>
  <body onload="init();">
    abcdef
    <div class="scrollable_area">
      <div class="content">content</div>
      <div class="scrollbar">
        <div class="bar"></div>
      </div>
      <div style="clear: both;"></div>
    </div>
    <br>
    ghijkl
  </body>
</html>
<script type="text/javascript" language="JavaScript">
  function init() {
    // Initialize scrolls

    var scrollElement = document.getElementsByClassName('scrollable_area')[0];

    var scroll = new ScrollBar(scrollElement);

    var content = "\"A Imaginação\" Jean-Paul Sartre<br><br>" +
        "Olho esta folha branca posta sobre minha mesa; percebo sua forma, sua" +
        "cor, sua posição. Essas diferentes qualidades têm características" +
        "comuns: em primeiro lugar, elas se dão a meu olhar como existências" +
        "que apenas posso constatar e cujo ser não depende de forma alguma do" +
        "meu capricho. Elas são para mim, não são eu. Mas também não são" +
        "outrem, isto é, não dependem de nenhuma espontaneidade, nem da minha," +
        "nem da de outra consciência.<br>" +
        "<br>" +
        "São, ao mesmo tempo, presentes e inertes. Essa inércia do conteúdo" +
        "sensível, freqüentemente descrita, é a existência em si. De nada serve" +
        "discutir se esta folha se reduz a um conjunto de representações ou se" +
        "é ou deve ser mais do que isso. O certo é que o branco que constato" +
        "não pode ser produzido por minha espontaneidade. Esta forma inerte," +
        "que está aquém de todas as espontaneidades conscientes, que devemos" +
        "observar, conhecer pouco a pouco, é o que chamamos uma coisa.<br>" +
        "<br>" +
        "Em hipótese alguma minha consciência seria capaz de ser uma coisa," +
        "porque seu modo de ser em si é precisamente um ser para si. Existir, para" +
        "ela, é ter consciência de sua existência. Ela aparece como uma pura" +
        "espontaneidade em face do mundo das coisas que é pura inércia. Podemos," +
        "pois, colocar desde a origem dois tipos de existência: é, com efeito," +
        "na medida em que são inertes que as coisas escapam ao domínio da" +
        "consciência; é sua inércia que as salvaguarda e que conserva sua" +
        "autonomia.<br>" +
        "<br>" +
        "Mas eis que agora desvio a cabeça. Não vejo mais a folha de papel. Agora" +
        "vejo o papel cinzento da parede. A folha não está mais presente, não" +
        "está mais aí. Sei, entretanto, muito bem, que ela não se aniquilou:" +
        "sua inércia a preserva disso. Ela cessou, simplesmente, de ser para" +
        "mim. No entanto, ei-la de novo. Não virei a cabeça, meu olhar continua" +
        "dirigido para o papel cinzento; nada se mexeu no quarto.<br>" +
        "<br>" +
        "Entretanto, a folha me aparece de novo com sua forma, sua cor e sua" +
        "posição; e sei muito bem, no momento em que ela me aparece, que é" +
        "precisamente a folha que eu via há pouco. É ela, verdadeiramente," +
        "em pessoa? Sim e não. Afirmo, sem dúvida, que é a mesma folha com as" +
        "mesmas qualidades. Mas não ignoro que esta folha ficou lá no seu lugar;" +
        "sei que não desfruto de sua presença; se quero vê-Ia realmente é" +
        "preciso que me volte para minha escrivaninha, que concentre meus olhares" +
        "sobre o mata-borrão em que a folha está colocada.<br>" +
        "<br>" +
        "A folha que me aparece neste momento tem uma identidade de essência com" +
        "a folha que eu via há pouco. E, por essência, não entendo somente" +
        "a estrutura, mas, ainda, a individualidade mesma. Essa identidade" +
        "de essência, porém, não está acompanhada por uma identidade de" +
        "existência.<br>" +
        "<br>" +
        "É bem a mesma folha, a folha que está presentemente sobre minha" +
        "escrivaninha, mas ela existe de outro modo. Eu não a vejo, ela não" +
        "se impõe como um limite à minha espontaneidade; tampouco é um inerte" +
        "existindo em si.<br>" +
        "<br>" +
        "Em uma palavra, ela não existe de fato, existe em imagem.<br><br>" +

        "Do Prefácio de \"A Imaginação\", de Jean-Paul Sartre.";

    scroll.setContent(content);
  }
</script>

Wednesday, November 14, 2012

Config / Database / wxWidgets

Adding support to SQLite database, in this way the application usage / configuration is simplified and is added the possibility to use application in standalone mode, if required.

Implementando suporte a banco de dados SQLite, assim será possível utilizar o software em modo stand-alone, com instalação simplificada.

Sunday, November 11, 2012

Linux / Fedora / wxWidgets / PostgreSQL

Friday, November 02, 2012

Insights / Dropdown menu / HTML / JavaScript / CSS


<!DOCTYPE html>
<html>
  <head>
    <style>
      .menu-item {
        width: 100px;
        height: 50px;
        background-color: #f1f1f1;
        border: #ccc 1px solid;
        float: left;
      }

      .menu-item td {
        text-align: center;
        vertical-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #444;
        text-shadow: #ccc 1px 1px;
      }

      .menu-item:hover {
        background-color: #eee;
      }

      .menu-item:hover td {
        color: #000;
        text-shadow: #ccc 1px 1px;
      }

      .menu-clear {
        width: 0px;
        height: 0px;
        clear: both;
      }

      #menuPopup {
        position: absolute;
        width: 200px;
        height: 200px;
        border: #ccc 1px solid;
        background-color: #f1f1f1;
        visibility: hidden;
      }
    </style>

    <script type="text/javascript">
      var Menu = {
        closePopupHandler: null
      };

      Menu.closeMenuTimer = function() {
        console.log('Menu.closeMenuTimer');

        this.stopCloseMenuTimer();

        var obj = this;

        this.closePopupHandler = setTimeout(function() {
            console.log('Closing menu popup');

            obj.popupHide();
        }, 1000);
      };

      Menu.stopCloseMenuTimer = function() {
        console.log('Menu.stopCloseMenuTimer');

        if (this.closePopupHandler)  {
          clearTimeout(this.closePopupHandler);

          this.closePopupHandler = null;
        }
      };

      Menu.popupShow = function() {
        document.getElementById('menuPopup').style.visibility = 'visible';

        document.getElementById('menuPopup').style.display = 'block';
      };

      Menu.popupHide = function() {
        document.getElementById('menuPopup').style.visibility = 'hidden';

        document.getElementById('menuPopup').style.display = 'none';
      };

      Menu.init = function() {
        for (var i = 0; i < document.getElementsByClassName('menu-item').length; i++) {
          document.getElementsByClassName('menu-item')[i].xyz = 'testando';

          var obj = this;

          document.getElementsByClassName('menu-item')[i].onmouseover = function() {
            console.log('onmouseover menu item');

            var x = this.offsetLeft;
            var y = this.offsetTop;
            var width = this.offsetWidth;
            var height = this.offsetHeight;

            console.log('x=' + x + ' y=' + y + ' width=' + width + ' height=' + height);

            Menu.stopCloseMenuTimer();

            document.getElementById('menuPopup').style.top = (y + height - 1) + 'px';
            document.getElementById('menuPopup').style.left = x + 'px';

            obj.popupShow();
          }

          document.getElementsByClassName('menu-item')[i].onmouseout = function() {
            console.log('onmouseout menu item');

            Menu.closeMenuTimer();
          }

          document.getElementById('menuPopup').onmouseover = function() {
            console.log('onmouseover menu popup');

            Menu.stopCloseMenuTimer();
          }

          document.getElementById('menuPopup').onmouseout = function() {
            console.log('onmouseout menu popup');

            Menu.closeMenuTimer();
          }
        }
      };
    </script>
  </head>
  <body>  
    <div class="menu-item">
      <table width="100%" height="100%">
        <tr>
          <td>
            Teste
          </td>
        </tr>
      </table>
    </div>
    <div class="menu-item">
      <table width="100%" height="100%">
        <tr>
          <td>
            Teste
          </td>
        </tr>
      </table>
    </div>
    <div class="menu-item">
      <table width="100%" height="100%">
        <tr>
          <td>
            Teste
          </td>
        </tr>
      </table>
    </div>
    <div class="menu-item">
      <table width="100%" height="100%">
        <tr>
          <td>
            Teste
          </td>
        </tr>
      </table>
    </div>
    <div class="menu-clear"></div>
    <div id="menuPopup"></div>
  </body>
</html>
<script type="text/javascript">
  Menu.init();
</script>

Insights / Collapsible List / HTML / JavaScript / CSS

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
      #menuContainer {
        width: 250px;
        height: 350px;
        overflow: auto;
      }

      #menuContainer * {
        color: #fff;
        text-shadow: #000 1px 1px 1px;
      }

      #menuContainer table tr td {
        vertical-align: middle;
        text-align: center;
        padding: 5px;
      }

      .menuItem {
      }

      .menuTitle {
        font-weight: bold;
      }
    </style>

    <script type="text/javascript">
      function menuUpdate() {
        for (var i = 0; i < document.getElementsByClassName('menuItem').length; i++) {
          var element = document.getElementsByClassName('menuItem')[i];

          //alert(element.innerHTML);

          if (i == 0) {
            element.style.height = '50%';
          }
          else {
            element.style.height = '25%';
          }
        }
      }

      function onMenuItemSelect(elementSelected) {
        console.log('onMenuItemSelect');

        //console.log(elementSelected.innerHTML);

        console.log('menuContainer height: ' + document.getElementById('menuContainer').offsetHeight);

        var itemsCount = document.getElementsByClassName('menuItem').length;

        console.log("document.getElementsByClassName('menuItem').length: " + itemsCount);

        var itemHeightUnselected = 30;

        console.log('itemHeightUnselected: ' + itemHeightUnselected);

        for (var i = 0; i < itemsCount; i++) {
          var element = document.getElementsByClassName('menuItem')[i];

          //console.log(element.innerHTML);

          if (element.id == elementSelected.id) {
            console.log('ELEMENT "' + element.id + '" FOUND ***');

            element.style.height = (document.getElementById('menuContainer').offsetHeight -

                                    itemsCount * itemHeightUnselected) + 'px';
            
            element.innerHTML = boxExpanded('<span class="menuTitle">' + element.getAttribute('title') + '</span>' +
                                '<br>' + element.getAttribute('brief'));
          }
          else {
            element.style.height = itemHeightUnselected + 'px';

            element.innerHTML = boxExpanded(element.getAttribute('title'));
          }
        }
      }

      function boxExpanded(str, align, valign) {
        return '<table width="100%" height="100%">' +
                 '<tr>' +
                   '<td align="' + (align ? align : 'center') + '" valign="' + (valign ? valign : 'middle') + '">' +
                     str +
                   '</td>' +
                 '</tr>' +
                 '</table>';
      }

    </script>
  </head>

  <body>
    <div id="menuContainer">
      <div id="menuItem01" class="menuItem" style="background-color: #006699;"
        onclick="onMenuItemSelect(this);" onmouseenter="onMenuItemSelect(this);"
        title="Item 01" brief="Conteúdo do item 01">
      </div>
      <div id="menuItem02" class="menuItem" style="background-color: orange;"
        onclick="onMenuItemSelect(this);" onmouseenter="onMenuItemSelect(this);"
        title="Item 02" brief="Conteúdo do item 02">
      </div>
      <div id="menuItem03" class="menuItem" style="background-color: #555;"
        onclick="onMenuItemSelect(this);" onmouseenter="onMenuItemSelect(this);"
        title="Item 03" brief="Conteúdo do item 03">
      </div>
    </div>
  </body>
</html>

<script type="text/javascript">
  menuUpdate();

  onMenuItemSelect(document.getElementById('menuItem01'));
</script>

Insights / Notebook control / HTML / JavaScript / CSS

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        font-family: Monaco, Arial, Verdana;
        font-size: 12px;
        padding: 0;
      }
      body {
        margin: 0;
      }
      #box {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 500px;
        height: 400px;
        background-color: green;
      }
      .notebook {
        list-style: none;
      }
      .notebook li {
        float: left;
      }
      .notebook .tab {
        background-color:#f1f1f1;
        color: #000;
        border: #ccc 1px solid;
        cursor: pointer;
        padding: 2px 10px 2px 10px;
      }
      .notebook .tab-selected {
        background-color: #ccc;
        color: #000;
        border: #ccc 1px solid;
        font-weight: bold;
        cursor: pointer;
        padding: 2px 10px 2px 10px;
      }
      .notebook .content {
        clear: both;
        width: 99%;
        height: 300px;
        background-color: #ccc;
        border: #ccc 1px solid;
      }
    </style>
    <script type="text/javascript">

      var Notebook = {
        elementId: '',

        tabIndex: 0,

        tabs: new Array()
      };

      Notebook.setElementId = function(id) {
        this.elementId = id;

        for (var i = 0; i < document.getElementById(this.elementId).getElementsByTagName('li').length; i++) {
          var tabElement = document.getElementById(this.elementId).getElementsByTagName('li')[i];

          if (tabElement.className == 'content') {
            continue;
          }

          tabElement.index = i;

          var obj = this;

          tabElement.onclick = function() {
            obj.onTabClick(this);
          };


          this.tabs.push(tabElement);
        }

        this.onTabClick(this.tabs[this.tabIndex]);
      };

      Notebook.onTabClick = function(element) {
        this.tabIndex = element.index;

        for (var i = 0; i < this.tabs.length; i++) {
          if (this.tabs[i].className == 'content') {
            continue;
          }

          if (i == this.tabIndex) {
            this.tabs[i].className = "tab-selected";
          }
          else {
            this.tabs[i].className = "tab";
          }
        }

        document.getElementById(this.elementId).getElementsByClassName('content')[0].innerHTML = \

               element.getAttribute('content');
      };
    </script>
  </head>
  <body>
    <div id="box">
      <ul class="notebook" id="notebook">
        <li class="tab" id="tab1" content="Testando 1 2 3">Tab 1</li>
        <li class="tab" id="tab2" content="Testando 4 5 6">Tab 2</li>
        <li class="tab" id="tab3" content="Testando 7 8 9">Tab 3</li>
        <li class="content">xxx</li>
      </ul>
    </div>
  </body>
</html>
<script type="text/javascript">
  Notebook.setElementId('notebook');
</script>

SW / Insight / Integrated system / Br. Portuguese / Minimalistic thoughts / wxWidgets

Trying to develop something minimalistic to clean-up the system interface. Use windows on tabs instead of modal windows.

Tentando criar algo minimalista e funcional para finança / contabilidade pessoal. Atalhos de teclado para acessibilidade.

The shape of space

Pages

Tuesday, November 27, 2012

MinGW / Java / JNI

Thursday, November 15, 2012

Insights / Scrollbar / JavaScript / CSS

Wednesday, November 14, 2012

Config / Database / wxWidgets

Sunday, November 11, 2012

Linux / Fedora / wxWidgets / PostgreSQL

Friday, November 02, 2012

Insights / Dropdown menu / HTML / JavaScript / CSS

Insights / Collapsible List / HTML / JavaScript / CSS

Insights / Notebook control / HTML / JavaScript / CSS

SW / Insight / Integrated system / Br. Portuguese / Minimalistic thoughts / wxWidgets

SW / Estudos / Minimalism / Monet

Blog Archive

Links

Pages

Tuesday, November 27, 2012

Thursday, November 15, 2012

Wednesday, November 14, 2012

Sunday, November 11, 2012

Friday, November 02, 2012

Blog Archive

Links

Subscribe To