Convert HEIC to JPEG or PNG

If you own a modern age phone it’s very likely that it will store the photos you take in a wonderful format called HEIC – or “High Efficiency Image File Format (HEIF)”.

Now the issue with this format is that your average toolchain is based upon things like Portable Network Graphics (PNG), JPEG and maybe GIF or Scalable Vevtor Graphics (SVG).

So HEIC does not quite fit yet. But you can make it fit with this on Linux.

Imagemagick and current GIMP installations apparently still don’t come pre-compiled with HEIF support. But you can install a tool to easily convert an HEIC image into a JPG file on the command line.

apt install libheif-examples

and then the tool heif-convert is your friend.

2001-era docomo flip phone emoji font

NTT DoCoMo might not have been the first ones to release feature phones with actual emoji characters to be used in text messaging. But their set of original emojis is just oh-so-beautiful to look at.

With the help of Monica Dinculescu we now can enjoy these emojis on our modern era computing machines.

Behold:

You can either get the font downloaded for free directly from Monicas page or you could use her SVG code to further make use of the great emojis.

the font download will get you this

If you go for the SVG link you will get some overview alike the one at the start of this post. If you wanted to further work with the raw vector data (SVG) in there you could use this simple trick:

Step 1: locate the emoji you want in the code of the page. Maybe by utilizing the developer tools of your browser.

Step 2: Copy that specific element that you want to your clipboard / into a new text document.

Step 3: add the proper header tag before the element you’ve copied.

<?xml version="1.0" encoding="utf-8"?>

Step 4: Save the contents now as a file with the .svg ending. You can now open it up in any SVG compatible editor, like Inkscape.

Homebrew AR: HoloKit

Augmented Reality – AR – is getting some buzz here and there throughout the last 20 years almost. With hardware becoming more powerful and optics+light hardware becoming cheaper and more efficient it’s still all but close to become widely used and available.

Many refer to some one-trick pony feature in location-based games like “Pokemon Go” to being “AR”. But actual useful cases of AR are there but not feasible with current hardware generations.

Nevertheless a team in california has taken our the scissors and keyboards and made HoloKit:

HoloKit features super sharp optics quality and a 76-degree diagonal field of view. Pairing with a smartphone, HoloKit can perform an inside out tracking function, which uses the changing perspective on the outside world to note changes in its own position. HoloKit merges the real and the virtual in a smart way. While you see through the real world, virtual objects are blended into it. Powered by the accurate gyro and camera on smart phones, HoloKit solidly places virtual objects onto your table or floor, as if they were physically there without physical makers. These virtual objects will stay in the same place even if you walk away, just like real physical objects.

HoloKit is different from screen-based AR experience like Tango. You can directly see through the headset and view the real world as is, and in the meantime the virtual objects are projected on top of the real world, as opposed to viewing both the real and the virtual through a smartphone camera.

https://holokit.io/

create 3D environments with your phone – early access

Augmented Reality needs proper 3D geometry and the ability to sense the environment to interact with it. At some point I would expect tools to show up that allow us to do some of this ourselves.

Seems like we’re one step closer. Ubiquity6 is reaching out to get early access to interested users:

We’re giving early access to our 3D mapping tools for creators and artists! If you’re interested in trying it out sign up for early access here: https://ubiquity6.typeform.com/to/bmpbkB

Ubiquity6 on Twitter

Of course. I applied. And I’ve just started testing.

color assimilation grid illusion

The image [..] is a visual/artistic experiment playing with simultanous contrast resulting from other experiments these days. An over-saturated colored grid overlayed on a  grayscale image causes the grayscale cells to be perceived as having color.
The processing needed to create the above image happened along with unrelated but significant code improvements In the last couple of weeks. I have been visiting mitch – a prolific GIMP contributors for collaboration – and lots of progress has been – and is still – being made on babl, GEGL and GIMP.

original article
See the effect in a video

You can now play with this effect and experiment for yourself. Get Gimp and enjoy!

easily draw text based flowcharts

As I am mainly producing text and markdown notes throughout the day I am always interested in ways to quickly create simple text-based flow-charts.

I did write about a couple of tools to accomplish this previously but I want to take note of the most recent addition to the toolbox: ASCIIFlow Infinity.

You open it in your browser and start drawing with the simple tools provided.

When you are done you export it to plain text and do what you feel like with it.

Here’s a feature overview:

a wild Ma.K (Maschinen Krieger) appears

The franchise was started by Kow Yokoyama in the 1980’s. Yokoyama-san was a scratch-build modeller, artist and sculptor. Among his works he built machines of war that would fight in the 29th century, but took their visual cues from early 19th century weaponry and the early NASA space program. All his models were pieced together from numerous kits including armor, aircraft, cars and found objects (like ping pong balls).

Ma.K

Often described as WWII machinery in space, these kits are the perfect blend of sci-fi modelling with AFV weathering and finishing techniques…

There is also a longer article with high-resolution pictures here.

visualize baby sleep pattern

A visualization of my son’s sleep pattern from birth to his first birthday. Crochet border surrounding a double knit body. Each row represents a single day. Each stitch represents 6 minutes of time spent awake or asleep

Seung Lee on Twitter

No babies here. But I want such a blanket now.

TAICHI: opensource computer graphics library

I am following the proceedings of ACM SIGGRAPH conferences for more than 20 years now and with the recent years development in computational capacity it seems that many more algorithms and ideas make it to an application near you.

Take this one contribution by Yuanming Hu for example – the Taichi open source computer graphics library:

Taichi is an open-source computer graphics library that aims to provide easy-to-use infrastructures for computer graphics R&D. It’s written in C++14 and wrapped friendly with Python.

Yuanming Hu has been working on the development of Taichi since his third undergrad year (2016), mainly in his spare time. He would like to thank Prof. Toshiya Hachisuka and Prof. Seiichi Koshizukafor making possible his internship at UTokyo, where the initial parts of Taichi were developed.

Taichi: About

Also interesting, trivia about the name:

augmented (reality) book cover

If you ever want to quickly explain what augmented reality could be to a person not knowing yet, you might want to use this (and other) use cases for a visual explanation:

I achieved this by separating the artwork and text into many individual layers, that I placed in receding layers of 3D depth, in a 3D program on the computer. And made sure everything outside the borders of the book is excluded, to give it the ‘portal’ effect.

Augmented Reality Book Cover by Alexander Wand

full website screenshots from your commandline

Think of this: You want to capture a whole, multi-scroll-pages, web-page into one image.

This can be difficult without the right tools. It surely will be a lot of work to accomplish a 10th of thousand pixel height screenshot put together from multiple single screenshots…

CutyCapt is there to help! It’s a command line tool encapsulating the very powerful WebKit browser engine to render a full page and then create a single file screenshot of the whole page for you.

By example, this is what it did when told to screenshot this website:

I don’t like the long-tail Windows 10 default cursor

The first device in my household recently has updated itself to the newest Windows 10 1903 build.

On the very first moment of the login screen appearing and logging in I could tell that I hate one specific change that has made it into this latest update.

And it’s the default mouse cursor.

Back in the Pre-Windows Vista days, when I used to work for Microsoft, I was using the latest internal build of Windows and just around the first RTM (release-to-manufacture) build they touched up on the final designs.

I remember vividly when the mouse cursor had changed from the one we new and used since Windows 3 to a shorter tailed more “high-def” looking one.

Since then there were a couple of changes on the cursor but the general design was kept.

Now apparently with the latest Windows 10 update from 1803 to 1903 I got a new – old default mouse cursor.

left: like!
right: booh!

By reflex I changed it back to the one I love and stored safely in a backup. I cannot stand the long tail and the weird pixel-ness of the cursor. It just looks kinda weird to my eyes.

the “new” cursor in 1903
the beloved cursor.

Which one do you like better?

useful CSS Grid Generator

This project is a way for people to use CSS Grid features quickly to create dynamic layouts.

You can set the numbers, and units of your columns and rows, and I’ll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.

I noticed a lot of people weren’t using Grid because they felt it was too complicated and they couldn’t understand it. Grid is capable of so much, and this small generator only touches on a fraction of the features. The purpose of this is so people get up and running quickly, and create more interesting layouts.

Once you work with this a bit, I suggest checking out resources by Rachel AndrewJen Simmons, and Dave Geddes to dive deeper. There is also a CSS Grid Guide on CSS-Tricks, and a fun little game called Grid Garden to help you learn more!

Source

3D print a “Settlers of Catan” board

A very nice use of 3D printing technology: Print your own set of “Settlers of Catan” board game!

ThingiVerse

This is my new low-poly settlers of catan-style boardgame. Especially made for multicolor printers like the prusa mk2 multimaterial upgrade ore the palette from mosaic.

https://www.thingiverse.com/thing:2525047

Look me in the eye

As tools get better artists really polish out what technology enables them to do with computers nowadays.

This eye above made me awww. It’s from a user “ChrisJones” in the Blender Forum who posted his progress on modelling a human head in upmost detail.

Go there and be awwd as well. And while you’re there grab a copy of Blender and give it a go.

N8.5 – Tokyu White

It always seems to me so much easier to meet a Hackers in Japan than anywhere else. Maybe social-gravity works different there. Or there are more of them.

Whatever the reason, I keep crossing paths with people that more or less deep-dive into topics and understand systems in ways and in details that you would normally not expect.

And todays example is a detail you would normally not think about:

The footbridge that was newly built in Shibuya was painted in N8.5. This is commonly known as “Tokyu White”…

はらしょ‏ on Twitter

“Tokyu White”, N8.5, … of course…if you would need a bucket of this you can order it online.

convert Markdown scribbles to vector drawings

Every task you take
Every meeting you make
Every keyboard you break
Every note you take
I’ll be storing it for you

my text editor

Well that was fun! And indeed: a big portion of my professional daily business is taking place in a text editor taking notes and scribbling ideas and thoughts.

I’ve tried many things but the only way that resonated with me was taking notes in Markdown in a text editor that supports markdown. Currently that editor is Atom.io. Mainly because it is not in the way and quite portable. Runs on Linux, Windows, MacOS.

extra cheesy 80s neon theme

This way – I just took a count – I noted down 364.416 words in the last 1.5 years on my current job (equals to about 46 hours of average speed reading…).

Along side those simple text notes and bullet lists I am doing very simple tables as well as ASCII scribbles in Markdown as well. With the right tools it’s extremely easy and much faster than booting up the Powerpoint or worse.

When you have all in Markdown you then can freely stylesheet away and convert to handy PDF files as well. All even with embedded images if you so desire.

But even if you sit on that treasure trove of Markdown there comes the time when you wish you could convert your scribbles to graphics. Even if it is for the sole reason to not have to draw it again for that fancy Powerpoint slide deck.

You’ve got multiple options to accomplish this:

svgbob is at first a command line tool that got a recent level-up with a proper web-frontend:

When given Markdown it creates graphics. In the picture above the input is on the left and the svgbob output on the right (as SVG).

Markdeep is the alternative. Which of both work for your case depends on that specific case. Knowing and using both properly is the best way.

Purple Tentacle

There are some things that influenced us over time. I’ve never played a lot of computer games. But I’ve played adventure games. Most notably those of LucasArts.

The “Day of the Tentacle” – being the sequel to “Maniac Mansion” – was one adventure game that I have a lot of great memories of. I have played it through a lot of times since it’s release.

At the beginning of the game the main villain (the purple tentacle) of the game is making a statement:

Bernard: Ok, you’re free to go.
Green Tentacle: Thanks Bernard!
Purple Tentacle: Yes, thank you, naive human! Now I can finish taking over the world! Ha ha ha!
Green Tentacle: Wait!
Bernard: Oh, yeah. Now I remember. He’s incredibly evil, isn’t he?
Green Tentacle: Uh… I’ll try to talk him out of it.

LucasArts (June 1993). Day of the TentacleDOS.

And because of his aspiration to take over the world the picture of the scene this is being said ended up as my phones unlock screen background (and if lots of other places) ever since.

With the help of the internet, you can have it on yours as well. And since screen resolutions improve over time, have it in timeless vectors:

vectorialized by Chalda Pnuzig

The vectorized purple tentacle above has been kindly provided by: Chalda Pnuzig

How to design a Transit Map

We’ve all used them. And if they are made well they really make life easier: Transit Maps.

Apart from using transit map art style to visualize a train line transit maps can be applied to a lot of data visualization needs.

Take time to consider everything about your diagram. How thick do you want the route lines to be? Are they touching, or is there a slight gap between them? Are you going to use curves or straight edges where a line changes direction? Consider your station markers – will they be ticks, dots or something else? Think about how you would like to differentiate interchange stations or transit centres as well. Consider the typeface you’re going to use for station names – it should be legible and simple. When you’ve considered all these points, you’ve given yourself a set of rules that you will use to construct the diagram. Every design decision you make should be evaluated against these rules: sometimes, you can break them if needed, but it definitely helps to have them in your head as you work.

Tutorial: How to design a Transit Map

OpenSource drawing: Krita

I just recently learned about Krita. An open source drawing application that allows you to… oh well… do free-hand drawings.

Krita is a FREE and open source painting tool designed for concept artists, illustrators, matte and texture artists, and the VFX industry. Krita has been in development for over 10 years and has had an explosion in growth recently. It offers many common and innovative features to help the amateur and professional alike. See below for some of the highlighted features.

Krita highlights

Taking a look at the gallery yields that I cannot draw. Frustration about that is limited because there’s so much nice drawings to gaze at!

Also this is a multi-platform application. It’s available for Windows, macOS and for Linux.

css font-feature “tnum”

Oh this is so useful for my head-up-display prototype implementation:

This feature replaces numeral glyphs set on glyph-specific (proportional) widths with corresponding glyphs set on uniform (tabular) widths. Note that some fonts may contain tabular figures by default, in which case enabling this feature may not appear to affect the width of glyphs.

tabular figures: tnum

IoP – the internet of pets – predictive maintenance of a cat

In the interesting field of IoT a lot of buzz is made around the predictive maintenance use cases. What is predictive maintenance?

The main promise of predictive maintenance is to allow convenient scheduling of corrective maintenance, and to prevent unexpected equipment failures.

The key is “the right information in the right time”. By knowing which equipment needs maintenance, maintenance work can be better planned (spare parts, people, etc.) and what would have been “unplanned stops” are transformed to shorter and fewer “planned stops”, thus increasing plant availability. Other potential advantages include increased equipment lifetime, increased plant safety, fewer accidents with negative impact on environment, and optimized spare parts handling.

Wikipedia

So in simpler terms: If you can predict that something will break you can repair it before it breaks. This improvse reliability and save costs, even though you repaired something that did not yet need repairs. At least you would be able to reduce inconveniences by repairing/maintaining when it still is easy to be done rather than under stress.

You would probably agree with me that these are a very industry-specific use cases. It’s easy to understand when it is tied to an actual case that happened.

Let me tell you a case that happened here last week. It happened to Leela – a 10 year old white British short hair lady cat with gorgeous blue eyes:

Ever since her sister had developed a severe kidney issue we started to unobtrusively monitor their behavior and vital signs. Simple things like weight, food intake, water intake, movement, regularities (how often x/y/z).

I’ve built hardware to allow us to do that in the most simple and automated way. In the case of getting to know their weight we would simply put the kitty litter box on a heavily modified persons scale. I wrote about that already back int 2016.

When Leela now visits her litter box she is automatically weighed and it’s taken note that she actually used it.

A lot of data is aggregated on this and a lot of things are being done to that data to generate indications of issues and alerts.

This alerted us last weekend that there could be an issue with Leelas health as she was suddenly visiting the litter box a lot more often across the day.

We did not notice anything with Leela. She behaved as she would everyday, but the monitoring did detect something was not right.

What had happened?

The chart shows the hourly average and daily total visits to the litterbox.

On the morning of March 9th Leela already had been to the litter box above average. So much above average that it tripped the alerting system. You can see the faded read area in the top of the graph above showing the alert threshold. The red vertical line was drawn in by me because this was when we got alerted.

Now what? She behaved totally normal just that she went a lot more to the litter box. We where concerned as it matched her sisters behavior so we went through all the checklists with her on what the issue could be.

We monitored her closely and increased the water supplied as well as changed her food so she could fight a potential bladder infection (or worse).

By Monday she did still not behave different to a degree that anyone would have been suspicious. Nevertheless my wife took her to the vet. And of course a bladder infection was diagnosed after all tests run.

She got antibiotics and around Wednesday (13th March) she actually started to behave much like a sick cat would. By then she already was on day 3 of antibiotics and after just one day of presumable pain she was back to fully normal.

Interestingly all of this can be followed up with the monitoring. Even that she must have felt worse on the 13th.

With everything back to normal now it seems that this monitoring has really lead us to a case of “predictive cat maintenance”. We hopefully could prevent a lot of pain with acting quick. Which only was possible through the monitoring in place.

Monitoring pets is seemingly becoming a thing – which lead to my rather funky post title declaration of the “Internet of Pets”. I know about a certain Volker Weber who even wrote in the current c’t magazine about him monitoring his dogs location.

Health is a huge topic for the future of devices and gadgets. Everyone will casually start to have more and more devices in their daily lifes. Unfortunately most of those won’t be under your own control if you do not insist on being in control.

You do not have to build stuff yourself like I did. You only need to make the right purchase decisions according to things important to you. And one of these things on that checklist should be: “am I in full control of the data flow and data storage”.

If you are not. Do not buy!

By coincidence the idea of having the owner of the data in full control of the data itself is central to my current job at MindSphere. With all the buzz and whistles around the Industry IoT platform it all breaks down to keep the actual owner of the data in control and in charge. A story for another post!

proper links when printing out the internet

Cascading Style Sheets or CSS in short are a very powerful tool to control how content is being displayed.

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.
Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.

Wikipedia

So with CSS you can differentiate between target audiences. It gives you control over the output being rendered for specific render targets.

I frequently come across content I want to read. And almost as frequently I do not have time for a longer read when I come across interesting content.

My workflow for this is: keeping some to-be-read backlog of PDF files I have printed from websites. These PDF files are automatically synced to various devices and I can read them at a later stage.

What often is frustrating to see: bad the print results of website layouts as these websites have not even thought of the remote option of being printed.

With this blog I want to support any workflow and first and foremost my own. Therefore printing this blog adds some print-audience specifics.

For example the links I am using in the articles are usually inline when you are using a browser. When you’re printing the article those links get converted and are being written out with the text. So you can have them in your print-outs without loosing information.

this is how Google Chrome shows you the print preview…

And the changes you need to apply to any webpage to instantly enable this are very simple as well! Just add this to your page stylesheet:

@media print {
a {
text-decoration: none;
}
a::after {
content: "( " attr(href) " )";
margin-left: 0.2em;
text-decoration: underline;
}
}

a new header

I had redone the header of this blog a while ago but since I was trying around some things on the template I wanted something more dynamic but without any additional dependencies.

So I searched and found:

Tim Holman did a very nice implementation of this “worm generator” with only using the HTML5 canvas tag and some math. I made some very slight changes and integrated it into the header graphic. It will react to your mouse movement and resets if you click anywhere. Give it a go!

fonts for your programming needs

We are looking at our screens more and more time of the day and most of that time we are reading or writing text. Text needs to look pretty for our eyes not to get sore – apart from the obvious “being able to tell what letter that is” there is a big portion of personal taste and preference when it comes to the choice of the font.

Most of the texts I am writing benefit from monospaced fonts.

This blog celebrates monospaced fonts for programming.
So many fonts have popped up in recent years.

programmingfonts.org/about

Of course there’s a nice page available that previews the fonts right in your browser:

when you’re working late: grant your eyes a rest

“Ever notice how people texting at night have that eerie blue glow?

Or wake up ready to write down the Next Great Idea, and get blinded by your computer screen?

During the day, computer screens look good—they’re designed to look like the sun. But, at 9PM, 10PM, or 3AM, you probably shouldn’t be looking at the sun.

f.lux fixes this: it makes the color of your computer’s display adapt to the time of day, warm at night and like sunlight during the day.

It’s even possible that you’re staying up too late because of your computer. You could use f.lux because it makes you sleep better, or you could just use it just because it makes your computer look better.”

Bildschirmfoto 2014-09-27 um 12.58.33

Source: https://justgetflux.com/

The Data Visualisation Catalogue

The Data Visualisation Catalogue is currently an on-going project developed by Severino Ribecca.

Originally, this project was a way for me to develop my own knowledge of data visualisation and create a reference tool for me to use in the future for my own work. However, I thought it would also be useful tool to not only other designers, but also anyone in a field that requires the use of data visualisation regularly (economists, scientists, statisticians etc).

Although there have been a few attempts in the past to catalogue some of the established data visualisation methods, there is no website that is really comprehensive, detailed or helps you decide the right method for your needs.

I will be adding in new visualisation methods, bit-by-bit, as I research each method to find the best way to explain how it works and what it is best suited for.”

Bildschirmfoto 2014-03-29 um 13.11.59

Source 1: http://datavizcatalogue.com/