design forces

the established workflow centered around a huge physical board. design naturally departed visualising this board, a regular grid proved best after iterations.

producers evaluate many items against each other. dense presentation of items that expand on mouse click provide overview.

producers decide and act fast. hovering an item brings up buttons to start inplace editing. all pre production decisions are done on this single page. this aligns cognitive activity with the previous workflow at the physical board - the board always stays in front.

this is television, glamour and glory! avoided a typical 'database ui' with forms and lists. its not a game either, but tough production, so staid serious and practical. integrated corporate and program ci where possible.

other pages allow tv programming by drag and drop or ressource planning.

research center ffoqsi had graphic elements, visual corporate identity and visual web page design ready, when they asked me to finalize the design, implement and host the page and provide a way to update site content.

developers favor github pages and static site generators to get fast hosting, version control and ease of operation for free. i took the challenge to train ffoqsi personell this developer way of site maintenance.

site generator

ffoqsi personell writes content in markdown. inside markdown they use components i prepared for them, for instance components for team members, scientific partner profiles or foto galleries. the site generator 'foxygen' serves an internal preview. with a single click, by fetching a bookmarked page, the preview is published to github.

all involved persons praised this tool as being better than systems they used before. static site gens apply beyond the developer community.

the implementation is based on razor view engine's tag helpers - components in tag form.

discretelogics provides tools for time series analysis and processing.

wrote the teafile file format definition and 3 platform agnostic open source apis for this file format in c#,c++ and python. unicredit italy released one for the nim language.

teahouse and teashell are windows applications, written in .net and wpf.

created all visuals like corporate logo, icons and the web page (with github pages + jekyll).

discretelogics.com

simple static web page.

the page has a lighthouse score of 100/100/100/100 for desktop and 99/100/100/100 for mobile. the 1 percent off is for the short (10min) cache intervals on images. lighthouse suggests a year. well, for now that 99 score does not force me to put the images onto another host. tough netlify might be a good alternative to github pages.

website (best on mobile phone)

visual studio toolwindow

f# language service
wpf
visual studio integration

repository

use case

the user gets the name of the doctor, is located in the train or at home, wants to inform herself and then call.

design

mobile page loads in a single fetch
on desktop shows animated page transitions
can call directly: href="tel:0680 55 55 555"
google maps entry

did not use lighthouse during development but still has 100 / 92 / 93 / 100

psychiater-klimpt.at
psychologiezentrum.at

client side encrypting note taking app. built with

drop box js api
stanford javascript crypto library
contenteditable - i believed in this technique for a long time
typescript (use it since 0.8)

github.com/snuup/tacidonotes

a universal recommendation service, started with events in london + vienna

programmed in c# and c++ with in memory processing for results within 1 millisecond.

here the skin for london ...

... and here the skin for vienna

i always found skeuomorphism in screen design too dominant, underestimating users. the 5 buttons in the header are the only slight skeuomorph elements, justified as a contrast to the remainung ui, which was flat. this was in 2003, many years later flat was is en vogue. same with the large fotos that set the mood here.

users read recommended events based on their own ratings and the ratings of selected other users.

the weekly overview

channel selection - similar to newsgroups

users find likeminded users with similar ratings ...

and use the service on their mobile phones.

implemented the realtime quoteboard (model and view), the realtime news feed and, most challenging, the ...

marketprofile, with hover and selection features on every element and

fold / collapse per day.

the rhodes chroma synthesizer - cult.

i lived inside it while builing a midi interface for it.

            midi interface1234
          
            soldered parallel hardware interface for commodore vic 20
soldered serial midi interface for commodore vic 20
developed software with vic 20 using raw 6502 mnemonics

                transferred hard- and software to a rockwell 6511eab singlechip
                microcontroller
              
integrated the controller into the synthesizer

lets end with another picture of this wonderful synth.

this is the end. but since this was in reverse chronological order, it actually is the beginning.

previous slide	swipe, mousewheel, scrollbar	`left-arrow`
next slide	swipe, mousewheel, scrollbar	`right-arrowenter`
first slide	scrollbar	`pos1`
last slide	scrollbar	`end`
close gallery	close-button (top right corner)	`esc`
toggle explanation	click or touch page	`space`

works

computer science

human computer interaction

craft

warum großschreiben wenn man nicht groß sprechen kann?

why write uppercase if one cannot speak uppercase?

(bauhaus)

tv production

#hci #application #mobile #web #agile

tv production at speed, daily media. the well-tried production workflow should be adapted to modern technology. a serious challenge, since the efficiency of the huge planning board on the wall was hard to beat.

on every project start i recall what the professor taught us about software projects: 50% never complete, 30% are never used, 20% succeed. here i identified the risk to fall into the 30 pie, because we face the high benchmark of the current workflow and also need to cope with the transition effort.

i considered the organisatorial aspects of human computer interaction (hci) critical. participatory design, attention on critical roles in the production workflow and perfect collaboration between all involved lead to success - we landed safely in the center of the 20 pie.

the tool immediately became the indispensable information system for the (partly remote) team. production planning and tv programming by drag-and-drop is now available on phones, pads and web. 48578 production items have been entered while these letters were written.

ffoqsi

#web #static-site-generator #asp.net #razor

ffoqsi communicates its research on food quality and safety with a static web page that is updated every few weeks.

i suggested a static site generator setup where they update markdown files in visual studio code. inside markdown, html tag components make it easy to include content blocks like team members or photo collections. no available static site generator fullfilled the needs, so i wrote 'foxygen' in asp.net and razor.

i was prepared to convert the page into a usual cms based solution if this way of site maintenance would be to raw for them - at my risk. but the opposite happened. all ffoqsi people involved in site updates gave very positive feedback and said that this way is much better than other tools they used before. convenience features like 1-click publishing to github via a browser bookmark have added to that. static site gens proved applicable beyond the developer community.

discretelogics

#c++ #csharp #python #wpf #ui #high-performance

teafiles.net
teafiles.c++
github
website

since time series storage is usually append only, persistence in plain files is a first choice. simple and fast. with the advent of 64bit address spaces, high performance processing of big data frequently utilizes file storage together with memory mapping.

defined the teafiles file format, that enables inclusion of metadata at the begin of such file to make larger collections of files holding raw structs managable.

wrote teashell for easy data file browsing inside windows explorer. founded a company for tools around teafiles. with my cofounder wrote teahouse for efficient visualisation of very large data files.

vienna geo

#responsive #web #page

website
repository

i founded und run a local meetup where we get all people involved in geo-information systems together to share experiences.

the meetup's web page is pure static and hosted at github. i author it with a self written static site generator, that consists of 10 lines javascript and allows html componentisation via jsx.

f# file structure

#fsharp #.net #open-source #vs-extension #wpf

source code

f# is my favorite programming language. succinct expression of computations, superb domain modeling, a responsive pragmatic community around the best language designer and its interactive mode sets it apart from all other performant static typed languages. i find the latter indispensable for the design and analysis of complex algorithms.

i am used to keep overview of code files with file structure windows (document outlines). visual studio lacked such window for f#, so i digged into the f# language service and built one. it is quick and a bit rough but satisfies my needs. no tests, just usage. positive community feedback on twitter and vs marketplace.

responsive webpages

#web #mobile #responsive

psychiater-klimpt.at
psychologiezentrum.at

when i take the underground into the city, the mobile network breaks down after 3 stations. navigating websites halts.

the best navigation on small devices is scrolling - the whole screen is the handle for this gesture. since all content could fit on a single page here, the mobile version is a single page, the user navigates by scrolling up and down. soft background colors distinguish the sections while scrolling.

the desktop version has one page per section but also loads in a single fetch. smooth transitions convey empathic human feeling. their fast speed (300ms) reflects the doctors determination to immediately act on patients concerns.

tacido notes

#typescript #viennajs

repository
presentation

combined the javascript client of dropbox, stanford javascript crypto library and a simple note editor/reader utilising browsers contenteditable into a client side encrypting note taking app. presented at the vienna js meetup. won a rasperry pie for best talk ;)

sputnik4

#mobile #recommendations #readwriteweb #collaboration #design #hci #research #.net #csharp #c++ #javascript #css

before apple enabled the internet on phones, when phones and the web converged just so far, i invented, designed and implemented a recommendation service targeted at mobile devices. implemented a correlation engine engine that computes results in single millisecond range via in memory computation.

started as a student project in cs249 as an open collaborative filtering system - "recommendations in social context".

realtime analytics

#ui #c++ #realtime

developed an analytics application for traders in a team of 5. wrote the realtime quoteboard and news feed but in particular the market profile, a specific analytics view used by derivative traders. for the complex visualisation wrote a widget library, that provides core functionalities like hittesting or roll hover effects in c++ . introduced clean object oriented design and model view controller architecture.

realtime analytics application screenshot small

chroma midi interface

#hardware #software #6502

the legendary rhodes chroma synthesizer has a computer interface but no midi, the standard that arrived after its production.

i was asked to create a midi interface. after organizing technical documents soldered a parallel interface and a midi hardware interface for the commodore vic 20 (mind the φ2 line of the 6502 cpu). wrote software in machine language using raw mnemonics.

adapted hard- and software for the rockwell 6511eab singlechip microcontroller. without an unaffordable emulator this was a blind flight but after erasing the eprom a hundred times with my parents sunray lamp it worked perfect. and it does since falco's first world tour. until today.