{"id":124,"date":"2016-01-22T15:23:40","date_gmt":"2016-01-22T14:23:40","guid":{"rendered":"http:\/\/tuiofx.org\/blog\/?p=124"},"modified":"2016-01-22T16:00:02","modified_gmt":"2016-01-22T15:00:02","slug":"mixing-console-demo","status":"publish","type":"post","link":"http:\/\/tuiofx.org\/blog\/2016\/01\/22\/mixing-console-demo\/","title":{"rendered":"Mixing Console Demo"},"content":{"rendered":"<p>Inspired by the nice look of the gauges in Gerrit Grunwald&#8217;s blog post <a href=\"http:\/\/harmoniccode.blogspot.de\/2016\/01\/building-simple-dashboard-using-medusa.html\" target=\"_blank\">Harmonic Code: Building a simple Dashboard using Medusa<\/a> I felt like trying out how his <a href=\"https:\/\/github.com\/HanSolo\/Medusa\" target=\"_blank\">Medusa gauges library<\/a> would look like on a Shared Interactive Surface with\u00a0 TUIOFX. I started from the example in the blog, but quickly added some interactive elements in form of some sliders, to control the gauges. The design of the gauges SlimSkin and the TUIOFX-Widget styling work together quite nicely.<\/p>\n<h1><a href=\"http:\/\/tuiofx.org\/blog\/wp-content\/uploads\/2016\/01\/tuiofx_mixer2.jpg\" rel=\"attachment wp-att-126\"><img loading=\"lazy\" class=\"alignnone wp-image-126\" src=\"http:\/\/tuiofx.org\/blog\/wp-content\/uploads\/2016\/01\/tuiofx_mixer2-225x300.jpg\" alt=\"TUIOFX Mixer Example 2\" width=\"255\" height=\"340\" srcset=\"http:\/\/tuiofx.org\/blog\/wp-content\/uploads\/2016\/01\/tuiofx_mixer2-225x300.jpg 225w, http:\/\/tuiofx.org\/blog\/wp-content\/uploads\/2016\/01\/tuiofx_mixer2-768x1024.jpg 768w\" sizes=\"(max-width: 255px) 100vw, 255px\" \/><\/a> <a href=\"http:\/\/tuiofx.org\/blog\/wp-content\/uploads\/2016\/01\/tuiofx_mixer1.jpg\" rel=\"attachment wp-att-125\"><img loading=\"lazy\" class=\"alignnone wp-image-125\" src=\"http:\/\/tuiofx.org\/blog\/wp-content\/uploads\/2016\/01\/tuiofx_mixer1-300x225.jpg\" alt=\"TUIOFX Mixer Example 1\" width=\"445\" height=\"334\" srcset=\"http:\/\/tuiofx.org\/blog\/wp-content\/uploads\/2016\/01\/tuiofx_mixer1-300x225.jpg 300w, http:\/\/tuiofx.org\/blog\/wp-content\/uploads\/2016\/01\/tuiofx_mixer1-768x576.jpg 768w, http:\/\/tuiofx.org\/blog\/wp-content\/uploads\/2016\/01\/tuiofx_mixer1-1024x768.jpg 1024w\" sizes=\"(max-width: 445px) 100vw, 445px\" \/><\/a><\/h1>\n<p>To go a little further, I put together a quick UI mockup for a mixing console. In order to have some sort of knobs as control, I remembered a <a href=\"http:\/\/fxexperience.com\/2012\/01\/fun-javafx-2-0-audio-player\/\" target=\"_blank\">blog post<\/a> by\u00a0Jasper Potts, where he developed a knob skin for the Slider control. While \u2014 due to some API changes in JDK 8\u2014his code did not work out of the box, it greatly helped me to quickly come up with an own Knob control implementing custom Skin and Behaviour.<\/p>\n<p><a href=\"http:\/\/tuiofx.org\/blog\/wp-content\/uploads\/2016\/01\/tuiofx_mixer3.png\" rel=\"attachment wp-att-127\"><img loading=\"lazy\" class=\"alignnone wp-image-127 size-large\" src=\"http:\/\/tuiofx.org\/blog\/wp-content\/uploads\/2016\/01\/tuiofx_mixer3-1024x586.png\" alt=\"TUIOFX Mixer Example 3\" width=\"750\" height=\"429\" srcset=\"http:\/\/tuiofx.org\/blog\/wp-content\/uploads\/2016\/01\/tuiofx_mixer3-1024x586.png 1024w, http:\/\/tuiofx.org\/blog\/wp-content\/uploads\/2016\/01\/tuiofx_mixer3-300x172.png 300w, http:\/\/tuiofx.org\/blog\/wp-content\/uploads\/2016\/01\/tuiofx_mixer3-768x439.png 768w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/a><\/p>\n<h1><\/h1>\n","protected":false},"excerpt":{"rendered":"<p>Inspired by the nice look of the gauges in Gerrit Grunwald&#8217;s blog post Harmonic Code: Building a simple Dashboard using Medusa I felt like trying out how his Medusa gauges library would look like on a Shared Interactive Surface with\u00a0 TUIOFX. I started from the example in the blog, but quickly added some interactive elements [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":125,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/tuiofx.org\/blog\/wp-json\/wp\/v2\/posts\/124"}],"collection":[{"href":"http:\/\/tuiofx.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/tuiofx.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/tuiofx.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/tuiofx.org\/blog\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":9,"href":"http:\/\/tuiofx.org\/blog\/wp-json\/wp\/v2\/posts\/124\/revisions"}],"predecessor-version":[{"id":136,"href":"http:\/\/tuiofx.org\/blog\/wp-json\/wp\/v2\/posts\/124\/revisions\/136"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/tuiofx.org\/blog\/wp-json\/wp\/v2\/media\/125"}],"wp:attachment":[{"href":"http:\/\/tuiofx.org\/blog\/wp-json\/wp\/v2\/media?parent=124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/tuiofx.org\/blog\/wp-json\/wp\/v2\/categories?post=124"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/tuiofx.org\/blog\/wp-json\/wp\/v2\/tags?post=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}