Plankalkül

I am currently reading the Book “Artificial Intelligence, A Modern Approach” von Russell and Norvig[1]. This book is also the basis for the famous “first” MOOC AI-Course which I took about a year ago[2]. This course is awesome(!), take it!
Now, the book starts with a really nice history of AI, and the history of connected fields.

And here comes what pretty much made my day yesterday. Although I had quite a literacy in the history of computer science, and I was aware of Konrad Zuse and the Z-3, what kind of slipped trough my Fingers was that the fist really working von Neumann high level language was actually a language called “Plankalkül” [3] from Konrad Zuse which he developed in the Second World War in Germany. This was also the fist language who had floating point numbers build in. Now, it made my day because it is such a cheesy typical Natzi Germany name, isn’t it? And Zuse hat more words like that. A programme was called Rechenplan and more or less a IDE would be called Planfertigungsgerät. Images of Iron Sky actually slipped into my brain, imagining the scene where this crazy scientist calls to the iPhone “This is not a computer, THIS is a computer” and points to the skyscraper high device there. Just Imagine Germany had won, these terms might have become standard o_O. We would write Rechenpläne now! Smilie: :P

Don’t know, but I found that names just funny ^^

[1] HP of the Book
[2] Udacity AI Course
[3] Wikipedia on Plankalkül

Posted in Uncategorized

status update

Hm, there where not a lot of posts on the blog lately, although I started a series about ubiquitous computing, and just published part one.

Now, rest assured, I did plan 4 more parts, and worked on two in the background, they will be published soon.

Currently I came back to an old friend of mine: mind mapping. I was reading papers and Buzan’s Mind Mapping Book a few years ago. Currently I started doing that again. I will also mix in posts about Mind Mapping therefore.

Hope I get more active, and ppl. will find this interesting
Sincerely, Jörg

Posted in Uncategorized

What is ubiquitous computing, part 1

What is ubiquitous computing?

Since I have to work on that topic currently, I thought I will write a blog post series, letting you explore the topic with me. Wikipedia describes ubiquitous computing “as a post-desktop model of human-computer interaction in which information processing has been thoroughly integrated into everyday objects and activities”[1]. If you look up the word ubiquitous itself in a dictionary it explains is is an adjective meaning existing or being everywhere, especially at the same time; omnipresent. Examples are f.e. ubiquitous fog or ubiquitous little ants[2].

Now, Apple and Samsung claims we are in the post-desctop area, hence we also have post-desctop HCI without doubt. So, is ubiquitous computing the current reality? If you look at the verb of ubiquitous, and more clearly, what ubiquitous computing conferences talk about, we will se, the vision of ubiquitous computing is not yet reality. Ubiquitous computing means the immanent interaction with computers we do not even see, everywhere around us. We have information everywhere and without interruption. This vision is still science fiction to us, and you might grasp the idea of ubiquitous computing in movies like minority report or ghost in the shell, where a smart phone does not even exit anymore.

The next question is, is then f.e. google project glass already ubiquitous computing? I would claim no. As smartphones and tablets, this project brings the vision of ubiquitous computing nearer. However, for real ubiquitous computing at least more geo located information for static objects (ok, we might have that partially) but also geo located information for moving objects (maybe with RFID or similar) and ambient intelligence needs to be part of a fused system, which interacts with you all to time, without interrupting you, to really be ubiquitous. So far a google glass which would display the name of a person with image recognition because of his facebook images would fit well to ubiquitous computing.

Now, we already found in the article that probably a lot of research buzz words have to do with ubiquitous computing. And yes, the internet of things, ambient intelligence, smart cities, haptic computing, physical computing all belong to the vision or are integral parts of ubiquitous computing. Ah, and beside the terms which make up parts of the vision there is one term which is kind of synonym: pervasive computing.

More on what pervasive computing means, and a bit more of analysis of the current research community comes in the next blog post.

[1]Wikipedia: Ubiquitous computing

[2]Dictionary: ubiquitous

Posted in Uncategorized

git for code demos, introducing gmove

for all who can’t wait, you can find gmove here

All of us who do code demos occasionally know that very simple methods, may it be copy and paste, real typing or just presenting finished code, all have their shortcomings. For a code demo to have real value, you should have a story to tell, and let the user see a system evolve by modifying it, empowering him to do the same.

Last time, I had a very simple idea. The idea was: using git and tags for a code demo. Basically you develop your base system to show in any git repository. Them you tag that one version. I use step + stepnum as a convention. So for me that base system I want to present to the audience it step0. Then you develop the story for your demo, from simple changes to the complex one. Each change you want to demonstrate get’s a own tag until finally you finished your story.

1
2
3
4
5
6
7
8
9
10
11
git init
# .... hacking on first demo loop start
git add .
git commit -m "initial version"
git tag step0
# .... hack verst improvement
git add .
git commit -m "improvement"
git tag step1
# loop on that untill you finished
git tag #now gives you the list of your tags

On presenting you now have the nice thing that you can just go back to step0 and start showing the system. You can even type the code changes you prepared while you present your changes. If the stuff to type is too much, or you made a mistake just switch to the next tag.

1
2
3
4
5
6
git checkout step0
# present inti system
git checkout step1
# present first improvement
git checkout step2
# and so on....

Now there are some small nifty little things left here. For me f.e. I really like to type some things by hand on a demo, because I really think you get more out of it if you see the crucial things being typed, giving your brain a longer chance to understand those parts. Also some systems like XCode have the bad habit f.e that your storyboard file change in git as soon as you open it.

Now when you checkout a tag you are in detached space. Very roughly that means you are not ment to make changes. But that is actually exactly what I do and probably the system does anyway. If I then checkout the next step git will be angry and react with refusing it. What can you do than. So either you do a git checkout -- on every file discarding the changes, or simpler, you just stash your changes (and then probably throw them away).

so, you can do a

1
2
3
git stash
git checkout step1
git stash clear #or pop if you want to keep that new changes...

that works now, but actually introduces a new problem: you spend quite some time in the console, while actually you wanted to show the audience your system.

For not typing that much I wrote a python script. The actually completely ingenious gmove. Almost to small to make a github repo for that. In default gmove just makes the one above, stashing, checking out, and clearing the stash. usage is:

1
gmove -t step0

While stashing and clearing your changes with gmove works fine, I tested that, the script is a little bit alpha. Meaning while writing that post I did not test some use cases build into the script. Feel free to fork it on git and send me a pull request by the way. So what I did not try but should work is:

1
2
gmove -j -t step0
git stash pop

ok, that would keep your stash intact. You would use that if you found in the demo that you made any new changes not in your original story, and want to keep them and reapply them. just keep in mind that you might have a merge every time you do that. Also I will change gmove in the future to support that in one command I guess (maybe -p).

So, if I have time I will make a screen cast from my last cocoaheads talk, so you can see the tool in action….

Posted in professional, Uncategorized

InboxZero

Quite old, but for PPL who did not know the inbox zero methodology until now (like I did):

http://inboxzero.com/video/

A wonderful tool! Your emails life will just get way more organized!
Cheers, Joerg

Posted in knowledge management

QR-Codes and Coffe

The start was almost like a usual workday. Even if I still have holidays, Andi, my girlfriend had to work, so we woke up at 6:30, got into the car, and I drove her to work.

Being awake already I thought what to do. A short look at the homepage of the Tribeka@Gridkai revealed to me that it was open at the 26. so I decided to go there. That was perfect, because usually the Tribeka, one of the best coffee shops in Graz, is usually a very crowded place. But not at 7:30 AM in the morning, where it is already open. Those lazy bastards! (to him I belonged for very long).

Anyway, skip the rest, now back to the topic.
So I ordered a coffee and looked to the newspaper. Early as it was the Wallpaper* Magazine was still there to take. Not always the case. I like to read that magazine in the morning. If I don’t have luxury by my own, I at least like to dream about it at the morning coffee, and that magazine helps quite well with that. On the other side it fits quite well my taste of style, which is not mainly luxurious, but more modern, avangarde and playfully. So I sit here, skimming trough my dream of what I will do with a billion dollar in a beautiful designed magazine, and suddenly a QR code appeared. As a tech savy person I am I quickly had to test this. Getting out the iPhone, scan, and what happened: A wonderful, sense full movie about fashion appeared. Next side: the QR code showed me videos about cars and the future of transport.

It buffeted me: I am also reading the WIRED magazine and popular science at the iPad regularly. It is the blend of
Media which always fascinated me most with these new tablet magazines. These mixture of text, music and vide.

And here I was having the really similar feel at a traditional newspaper. Sure it did not have the fancy interactive scrolling experience of wired at the iPad, and the background did not change while reading, but it was fascinating never the less. Actually I liked it more. I had my video and music blend tailored to the text I was reading. The screen of the iPhone 4s is large enough for that, and with earphones it is a quite intimate experience even in a coffee house. But you also have the nice haptic feeling of a newspaper, I mean real paper. No display, not even e ink. You have maximum frame rate animations when changing the page, and it is more relaxing. Even if QR codes in newspapers where there for a while I think I never had such a nice experience with them. Especially since they where most of the time used for some kind of lottery alike games and commercials. But in bringing content together in non digital and digital “things” there they have there real power….

20111227-085122.jpg

Posted in hobbies, knowledge management, mobile developement, professional, Uncategorized Tagged , , ,

Android Color stuff

At one project of mine we had to play with colors quite a lot. The customer has high claims when it comes to the quality of visual appeal and user interfaces. So the things have to be shaded, animated, properly rounded, darkened lightened and so on. All this plays together with a web service witch dictated themes and so on. Now, most of the graphics was implemented by my nice college Georg Bachmann who is a real expert on that. However, currently I do some bug fixing, and so had my chance to also dig into this field of Android developement.

Parsing colors:

Ok, here is the situation: we get colors from the web, in form of a rrggbb string, which represents the hex number of the color. Goal is to convert that into a proper Android color. Our first approach was the typical stack overflow solution: find a code, and use it [I would like to coin the term stack overflow based programming here {I do that a lot too}]:

1
2
3
4
5
6
7
8
9
10
11
12
public static int stringToColor(String colorString) {
    int color = 0xffffffff;
    try {
        color = Integer.parseInt(colorString, 16);
        color = color & 0xffffff;
        color += 0xff000000;
    } catch (Exception e) {
        color = 0x00000000;
        MMLog.i(Global.MMLOG_TAG, "color string was empty");
    }
    return color;
}

now, actually, I think this code performed quite well. Lets explain it a little bit:

Android uses the Color object to represent colors in Android. A color is actually just an integer. this integer has the following form 0xAARRGGBB what means that the first two hex (4 bytes) are the alpha channel, the next are read, then green, then blue. The Alpha Channel ranges from 00 (completely opaque) to ff (completely transparent), the rgb values range too from 00 to ff with FF meaning full contribution of the color channel to the resulting color, and 00 meaning no contribution. so 0xff000000 would be black, 0xffffffff would be white and blue would be 0xff0000ff (first ff for the opaqueness of the alpha channel, and then 0000 for not using green and red, and then ff for a full blue).

So, with that knowledge, we are ready to understand the code:
in line 2: we set the color to some the default value. since we overwrite it, it wouldn’t really be necessary, but that we have a fixed start it is fine.
in line 3: We parse the hex number into a in. fortunately, Integer.parseInt(colorString, 16); already does that for us.
in line 4: We clear the first four bytes (the first two hex digits) to 00, and let the rest of the number intact, using a binary &&.
in line 5: We set the color to a complete opaque color.

in case an exception is thrown we return a completely transparent color as the default.

While this code performed quite well actually, we were not always sure, the colors were correctly parsed (I actually think it was the case, but was to busy to proof that). The easiest way is it if you use a official function from google android to parse the color, so you can claim an official implementation. Since we where not sure if the colors where right, I googled a little bit, to see if there is an utility function for that provided already. Actually, I found one:  Color.parseColor(string); or  public static int parseColor(String colorString);.

Now, my first try to implement that was:

1
2
3
4
5
6
7
8
9
10
11
12
// ATTENTION: NOT WORKING CODE
public static int stringToColor(String colorString) {
    if (colorString == null || colorString.trim().equalsIgnoreCase(""))
        return 0x00000000;
   
    // ATTENTION: NOT WORKING CODE
    if (colorString.startsWith("0x")) {
        return Color.parseColor(colorString.startsWith);
    }
   
    return Color.parseColor("0x" + colorString);
}

Now, that didn’t work. What was the problem. Actually: the hex string has to be prefixed, as I thought. But it has to be prefixed with a # like for most CSS colors in the web. So I changed the implementation to:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public static int stringToColor(String colorString) {
    if (colorString == null || colorString.trim().equalsIgnoreCase(""))
        return 0x00000000;
       
    if (colorString.startsWith("0x")) {
        String tmp = new String("#" + colorString.substring(2));
        return Color.parseColor(tmp);
    }
    if (colorString.startsWith("#")) {
        return Color.parseColor(colorString.toUpperCase()));
    }
   
    return Color.parseColor("#" + colorString.toUpperCase());
}

Now, I guess the implementation is quite straight foreword for you do read with your knowledge now. We check if we get a string with content, and if not, we return our transparent color. if we get a string, we assume it is a hex string. We just check if he starts with a wrong prefix, if yes, we change that. then we check if it starts with the right prefix, then we just parse the color. if it has no prefix, we add it, and parse the color now.

The main problem with that implementation is, that it creates a lot of temporary strings. if you have a lot of colors to parse, but they don’t vary that much, a cache would be nice for that. Currently I didn’t notice any problems with the memory in our app on that part, but it might be a room for improvement.

How to get the color back? Stefan, also a Member of our team, wrote this nice method:

1
2
3
4
public static String colorToString(int color) {
    int colorWithoutAlpha = 0x00ffffff & color;
    return String.format("%06x", colorWithoutAlpha);
}

So, I guess next post will be about shaders and shadows or so Smilie: ;) Stay tuned.

Posted in android, mobile developement, professional, Uncategorized

GWT Layout and Tables

I don’t know about you guys, but for me, modern web development also means, to not use Tables for the Layout, but just when you actually want to show … a Table! Like a Table in a Document or so.

Contrary to this google seems to think different. At least GWT 2.3 google uses a lot of tables internally, also on elements where you would expect it does not use tables, and the W3C would kill a kitten if someone else would say they do it that way.

The most brutal example: See the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public void onLoad() {
    FlowPanel panel = new FlowPanel();
    main.add(panel);

    VerticalPanel entry1 = new VerticalPanel();
    VerticalPanel entry2 = new VerticalPanel();
    VerticalPanel entry3 = new VerticalPanel();

    panel.add(entry1);
    panel.add(entry2);
    panel.add(entry3);

    HorizontalPanel hEntry1 = new HorizontalPanel();

    Label l1 = new Label(); l1.setText("bla 1");
    Label l2 = new Label(); l2.setText("bla 2");
    Label l3 = new Label(); l3.setText("bla 3");

    entry3.add(l1);
    entry3.add(l2);
    entry3.add(l3);
    entry3.add(hEntry1);
}

this does not produce, as someone would expect, a nice layout with different floating divs…. No, that would be to common… Actually: What that code produces is:

1
2
3
4
5
6
7
8
9
10
<div> <!-- ok, thats nice: the only table free layouter: the flow Panel -->
<table><tr><td> <!-- thats entry 1 --> </td></tr></table>
<table><tr><td> <!-- thats entry 2 --> </td></tr></table>
<table><tr><td> <!-- entry 3 starts -->
<table><tr>
<td>  <div class="gwtLabel">bla 1 </div> </td>
<td>  <div class="gwtLabel">bla 2 </div> </td>
<td>  <div class="gwtLabel">bla 3 </div> </td>
</tr></table>
</td></tr></table>

So, at least for me that is not what I call beautiful output of code. Actually, I would go as far as saying that is kind of unacceptable. Ok, there is a IE6, but really, we should damn that bloody browser, ignore him, and see him finally dying.

So, beside this example, actually most of the widgets in GWT make Tables. At least the following do that in 2.3:

  • VerticalPanel
  • HorizontalPanel
  • ListBox (no, it does not make an standard html options element)
  • CellList (sometimes a table might be ok here but…Smilie: ;)
  • Tree
  • CellTree
  • DatePicker (yes, the whole picker widget is designed with tables)

Ny opinion is that it makes sense in the following classes

  • FlexTable (should be a Table)
  • Cell* Calles sometimes are ok to be a Table
  • DataGrid

Of course, since this is that unacceptable, there are workarounds. One is to wait, until google reaches the post 90s area in Web Design, and doesn’t use Tables for Layout anymore. For the more impatient ones like me, you have to write your own Layouter. Since for most Layouts a vertical and Horizontal layouter + CSS Rules for their width and height will do, I guess having them making a non table tag version is most of the time sufficient.

The solution I will present is actually not my intellectual idea, but actually stolen from various sites. It is to use the FlowPanel, which already generates divs, and override the addWidget in a way it’s inner Elements get properly layouted.

This solution works quite well. There are only two gotchas: You would like to use display-inline for a vertical layout, but display-inline is not supported by IE up to 9. The second problem is, that these Layouter are still not the ones google uses, and so there own more complex ones still rely on tables. So if you want to do more complex layouts by yourself you either must compose them by your own, and also maintain it then by your own, or give in and use tables…..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public abstract class CustomFlowPanel extends FlowPanel {
    protected abstract String getFlowStyle();
    @Override
    public void add(Widget w) {
        w.getElement().getStyle().setProperty("display", getFlowStyle());
        super.add(w);
    }
}

public class HorizontalFlowPanel extends CustomFlowPanel {
    @Override
    protected String getFlowStyle() {
        return "inline"; // display-inline would be cooler
    }
}

public class VerticalFlowPanel extends CustomFlowPanel {
    @Override
    protected String getFlowStyle() {
        return "block";
    }
}

several people created solutions like that like f.e.:
http://showsort.darkhelm.org/doc/org/darkhelm/showsort/client/display/panels/VerticalFlowPanel.html
http://www.jarvana.com/jarvana/view/org/kuali/student/common/ks-common-ui/1.2-M1/ks-common-ui-1.2-M1-javadoc.jar!/org/kuali/student/common/ui/client/widgets/layout/VerticalFlowPanel.html
http://blog.sudhirj.com/2009/05/vertical-and-horizontal-flow-panels-in.html

Hope that discussion helped Smilie: ;)
Cheers, Joerg

Posted in Uncategorized, web dev

George Lucas strieks back

As beeing a huge Star Wars Fan from episode 4 – 6 I was always wondering about the new Triology. This explains it all:

Posted in hobbies, Uncategorized

Hello world!

So, finally: after trying to install wordpress on a upc server without luck quite a while ago (mysql version too old), then being loaded with work, and still tying to graduate, I am finally back in the digital web world with a new blog. Also this time I am not using proprietary blog system like the old iWeb.

I guess I will be blogging about various things. A lot of professional stuff, but also some things about me and my hobbies. Topics will be as various as my personality, but at least expect things about mobile development (using native technologies), web dev [frameworks like rails, javascript techniques] and REST, e-learning, knowledge management and agile methods. Also expect stuff about Role Playing, like the Black Eye or Vampire the Masquerade. I will keep you updated on my successes on tennis too I guess….

So, lets start again, and this time, I hope this blog will really last…..

Cheers, Joerg

Posted in Uncategorized