Blender 2.7x - 3D Models out of unicode symbols and icon font entities

What its about:

I wondered how to use unicode symbols in Blender e.g.  ♳☀︎☺︎☤ ... to create 3D Objects from them that later on can be added to existing Models. This will help to reduces the amount of time spent on recreating of thought through iconography.

Motivation:

I know it's some sort of overkill to use blender as a tool for modelling things for 3D-Printing. But the build in tools to automate certain tasks, as well as good support in importing all kinds of formats made me choose Blender ... and essentially write off some Tutorials and Findings on my way.
My final task is to mark every 3D-Model that I'm going to print with a sign that indicates the plastic-type the print is made of, in order to help sorting and recycling of mis-printed or not-of-use things.
Plastic types are internationally marked with these symbols:
 

Fonts, Icons, Unicode, Vector-Graphics

This Tutorial will cover importing and handling of Symbols from Fonts - but you can use most of the hints for SVG / AI / Inkskape files as well.
Fonttypes, Font-Icons and Unicode-Characters are scalable, image-like graphical items. While Vector-Graphics such as SVG-Graphics can have multiple layers and can have other attributes like transparency or color, Fonts, Font-Icons and Unicode-Characters are basically all of the same kind and be monochromatic. These Symbols can be used in writing Texts once you have a font installed or delivered along with the text. Lots of fonts are available free of charge, but your Operating System provides quite some right away. 

Blender and Fonts

You might have already used the Texttool in Blender and with extrusion of Texts, 3D Objects can be created quite easily. Adding the right font or knowing where to find the special characters or fonticons is basically the rest of the tutorial.
I try to describe the usage of these symbols on the example of a PET-Recycling Symbol.
In this example I like to work with this unicode symbol that I want to „emboss“ into an object:  ♳ 

Finding the right symbol

1. google by looking for „unicode symbol PET"
2. browsing the special character table on your computer
   • Mac:
     
     
   • Windows:
     
     
   • If you're using blender version ~2.4, the documentation suggests, that you can use the "Char Tab" during text-editing to add special characters from the char-tabCopy & Paste symbols into Blender, however in 2.7 The i didnt find the chartab
     

Unfortunately, copy and pasting Text / Symbols is only working within blender, but not from other programs into blender, so here's the workaround:

1. copy your unicode character of choice to the clipboard
2. create a text-object in blender
3. select a font:
   if you want to keep the text editable, and you wnat to share your blender file you might want to provide the used font along with your file, so using a system font helps to share your file within same OS-Family/Version
   • Mac: you can go to /System/Library/Fonts/ and pick Apple Symbols.ttc
     
   • Window: [TBD]
4. in 3D-View menu 
• —> Edit —> Text select „Paste Clipboard"
  
  

Troubleshooting

Lucky you :) if you see your copied symbol...
However if instead of your unicode symbol you see nothing or a square thingy, the font you have selected does not support your symbol - in this case check another font...

Extrude and adjust bevel

Since the Extrusion and styling is applied by using text/font-properties the text is still editable.

Only you cannot execute boolean operations on this object e.g. to combine it with other objects - for that turn your extruded chars into a mesh:

• Select the text-object then ALT+C
  
  

Ressources

• The Font containing the OS-Icons
  from „zocial“-Font from http://weloveiconfonts.com/
  

Now - GO - Create!

Oh and now back to the beginning of the Tutorial the ♳ symbol. 3D Printers use resin or plastic filament, but since their main purpose is prototyping - a many iterations will just create plastic waste. But there are helpful tools to bring sorted ressources back into the printing process.
For my part I decided to mark all my 3D printings, telling the material they are made from, so eventually the waste can be reused:
♳ PET ♴ PE-HD ♵ PVC ♶ PE-LD ♷ PP ♸ PS ♹ o(ther) ♹ ABS ♹ PLA ♺ ?
I like to encourage you to do this as well. And if its not for the sake of planned recycling at least it looks bad-ass professional :D

Tools and ressources used in this tutorial

• Blender v2.72 on MacOS
• Evernote & Sublime to collect ressources and write together this tutorial.

Read More

Fingerprinting as a technique to distinguish and track clients or create client IDs using Javascript

What is it about

I'm currently on a task to create a client's fingerprint on a website to recognize if he's comming back or a first-timer on my page. The whole thing shall be done with clients side Javascript only.
Some people are on this task for some time now:

• https://panopticlick.eff.org/
• http://www.heise.de/newsticker/meldung/EFF-demonstriert-den-Fingerabdruck-des-Browsers-918262.html (german)
• 
  

There is even an approach to  try Cross-Browser User Identification:

• http://fingerprint.pet-portal.eu/

And the new kid on the block - canvas fingerprinting

• http://en.wikipedia.org/wiki/Canvas_fingerprinting
• http://mobil.pcwelt.de/ratgeber/Cookies_2.0__Tracking_per_Canvas-Fingerprint-Internet-8938465.html (german)

These attempts to identify each browser / computer uniquely are depending on the browsers user-agent information as well as on infos about plugins, system-fonts, screen size, timezone etc...

Some might have heard of  the "Evercookie" or "Supercookie" a practice that places very sticky identification information in various places and via different browser accessible technology to makes it really hard to get rid of it.

An example how to get a client fingerprint:

For the impatient: find a working gist here: https://gist.github.com/splosch/eaacc83f245372ae98fe [*credits to corephp]
Executing the script will create a object "fingerprint" on the global "window" object of your browser. 

Let's try it out

Open your browser console and view the hash and the information used to create this hash by calling:

> window.fingerprint



Thats what you get:

> window.fingerprint.md5hash: "0c7dd26fd7c7d99751cb735519eaa226"

display: "{"orientation":{"onchange":null,"type":"landscape-primary","angle":0},"availWidth":1920,"availHeight":1177,"availTop":-117 ...

software: "widevinecdmadapter.plugin|widevinecdmadapter.plugin|PepperFlashPlayer.plugin|internal-remoting-viewer|intern ...

userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTM ....

Included in this demo are currently 

• Browser + Version
• Resolution, color depth
• Browser Plugins
• Operating System

Behind the sceene - creating the key

the method Collector.myDeviceHash() is hashing the concatenated infos in one compact hash

• The hashing is done in my example using  md5 checksum lib crypt:http://pajhome.org.uk/crypt/md5

"0c7dd26fd7c7d99751cb735519eaa226"


These keys represent the fingerprint of all collected information in one handy string. Unless the client changes his or her configuration or switches to a different device the fingerprint will stay the same. 

The shown script is very simple compared to version where updates to different versions of browsers or plugins can be tracked back to the original fingerprint. Panopticlick investigates more on the details of how many clients might share the same key, check the page its worth it and creepy.


Demo: https://gist.github.com/splosch/eaacc83f245372ae98fe

Credits:

• [corephp] Some code initially taken from but not entirely available anymore: http://www.corephp.com/.../browser-and-computer-fingerprinting/
• https://panopticlick.eff.org

Read More

check if a checkbox .is :not :checked ...

So many ways to check if a checkbox is (not) checked :) especially if you mix in a little jQuery
...and the winner is:

!$('#my-test-checkbox')[0].checked

even though i like to read

$('#my-test-checkbox').is(':not(:checked)')

http://jsperf.com/not-checked-vs-not-checked

Read More

I want Dinosaurs and Trees! - It's about CSS and HTML)

... sitting in a Cafe in the center of Hannover and try to browse some websites, google store, mail etc. Even though its 2013, 3G / 4G is not the fastest and resources for all those websites and Apps out there take some seconds to load... 

Who got some spare seconds these days ?!?

What If...

... just thinking - web resources could be shared among websites, buttons, theme styles even UI patterns... 
along with that User / Systems could choose the "Interaction Theme" they are comfortable with. This will lead to more high level implementation of websites / apps without the need to manually provide nitty code & assets that are anyway provided by similar UI Libs like all those bootstrapies and jquery UI XYZs. I know there is alot out there but anytime something new is Metro or Roundborderish or flat or ... code needs a change.

Sure, separation of concerns, Presentational Layer , "just" CSS changes - I know all that but it doesn't work that way. Touching the CSS only is a mess even if you follow structural Patterns or take Libs.

The old days

Back to Java Swing  :) - I mean the UI components where shared ....

Nooo.

Why do designers & devs have manually to decide for UI Patterns? 
Or If they don't want and take frameworks why is the HTML, CSS (JS) still so atomic and the Libs so scattered, deciding for a Framework doesn't make it easier in long term. Its a big mixed soup. And evolution is still in bacteria state.

I want Dinosaurs and Trees!

 And something that needs a lot of time and at least an Asteroid to be crashed.   

Its pretty fuzzy what I'm talking about but maybe someone can jump in and correct my thoughts. Especially the Dinosaur part :D

credits to http://jayisgames.com/archives/2010/02/babylon_sticks_asteroids.php

Read More

Building Drip-Castles using JS and CSS

[Post written by Mario August 22nd, 2010 at 3:10 pm]

...recovered

While looking for some way to draw HTML (sooo lazy :) I came up with some kind of Structure Generation based on divide & conquer. With some CSS it turned out to look like "Kleckerburgen" (engl. Drip Castles). Done by capturing "Mouse-Over" - Event on the initial Element-node, that get divided in 2 child-nodes and so on until reaching a defined max. depth. CSS is adding some visual "offset" to the child-nodes of each level + some shading to each node level.

Elementcount = 1

The poor scripty isn't a beauty at all, but highlights the depth of the nodes created, and so the underlaying html structure.

Here is the Demo @ jsFiddle

Have fun drawing!

Read More

Lichtatmer Hallo Welt!

Augen zu – und…… warten!Wenn dann die Äuglein wieder etwas Licht in den Kopf lassen, die ersten paar Momente richtig mitfühlen.Licht atmen! Gar nicht so einfach – aber beruhigt und lässt einen selbst ein paar tolle Dinge entdecken.Einfach selber mal ausprobieren.Da die meisten Dunkelheit zusammen mit Unbehagen und Unsicherheit empfinden evtl. zuerst in den eigenen 4+x Wänden testen. Später dann auch mal draussen probieren – im Park die Sonnenstrahlen einsaugen, in der U-Bahn den geschäftigen Menschlein zublinzeln, beim Aufzugfahren das Öffnen der Türen abwarten, früh unter der Dusche den von der Nase rutschenden Wasserkörnern folgen. Alles toll!Lichtatmen ist übrigens kostenlos und überall erhältlich Viel Spaß beim Lesen und Schauen,Mario

Read More

Normalize Number Delimiter for different locales with Javascript

Working with a Web-Application based on Java/Spring and FTL / JSP on the Template side you might know that you got some build in localization support(e.g. for number formatting). Various locales(java example locales). result in different number formatting:

• de_DE,german - 1.000,30 €
• cs_CZ,czech - 1 000,30 Kč
• en_GB,english - £1,000.30
• ...

Sometimes this is not that great

Currently some external Affiliate network requires us to handover prices as a standard float number (e.g: 1000.3) via their tracking code snippet.

How you should deal with that

--> Similar question on the Freemarker Templating Q&A
they are differentiating between "computer audience and human audience" in our example ${someLocalizedNumber?c}will do the trick(Freemarker c builtin reference ) This takes the plain float below all (Spring) Localization and exposes this again as an String.

If you can't do that - Javascript to the help!

Normalize the Delimiter with Javascript

So i wrote a little script that deals with that issue and gets you your floaty number back:

function normalizeDelimiter(str){
    var n = "", delim = false;
    for (var i = str.length-1; i >= 0; i--){
        //preserve decimal delimiter - remove all others
        if(!delim && !isInt(str[i])){
            n = "." + n;
            delim = true;
        }else{
            n= (isInt(str[i]) ? str[i] : "") + n;
        }
    }
  return parseFloat(n);  
}

Normalize Delimiter takes a String that contains a (valid) Number and transform into a float.
Feed it with e.g.

'1.234,56'
'1 234,56'
'1#000#01'
'0.2'
'22'

Run it

normalizeDelimiter('1.234,56')

and you get:

1234.56
1234.56
1000.01
0.2
22

It handles the normal stuff as well as the ones that have even strange delimiters

To make use of the code you'll need the isInt() function

// check if given input is of type integer
function isInt(input){
    return !isNaN(input)&&parseInt(input)==input;
}

Demo:

All assembled and ready to run @ jsFiddlehttp://jsfiddle.net/9w5AQ/

Read More