'mooie' GUI omgeving voor set-topbox

[Boudewijn]

Hoi Iedereen,

Ik ben bezig met een multi-media applicatie waarbij gebruikers films kunnen kijken; dit heb ik in swing gemaakt en met nimbus opgeleukt. Klant vindt het er niet echt goed uitzien, waar ik hem ook wel deels gelijk in geef.

Project draait trouwens op windows en ik ontwikkel op zowel Windows (ad hoc @ klant bijv) als Linux (laptop + werkstation). Windows op de daadwerkelijke productie-omgeving is (helaas) een bikkelharde eis ivm drivers.


Nu zoek ik een gratis toolkit die er een stuk beter uit ziet, te denken valt meer aan een dvd-menu achtige interface dan de huidige knoppenstructuur. Als ik met knoppen zou werken zijn ronde knoppen etc echt een pre.

Leuk, maar ik schrijf normaliter command line applicaties die in UNIX omgevingen draaien, of eventueel 'kale + efficiente programmas met een GUI'... ondanks dat ik mijn colleges usability en GUI engineering niet heb overgeslagen is dit toch wel een taaie dobber.


Daarom dus eens overwegen wat ik aan interface voor de nieuwe versie van mijn programma kan maken:

- QT : Ik lees dat het niet altijd even goed ondersteund wordt. Wel is het best een mooie interface (KDE-like ) en er is een Java poort voor. Nadeel is dat het er waarschijnlijk toch weer tamelijk computer-achtig uitziet. Dat is expliciet niet de bedoeling. Ook is het niet gratis voor commerciele apps en zit er toch een wrapper tussen (QT is in C++ geschreven); aangezien ik waarschijnlijk toch zelf wat componenten moet tunen word ik daar niet heel blij van.


- Swing: Tsja het ziet er heel handig uit voor zakelijke applicaties en is mooi strak maar de klant vindt het niets. 'Veel te computerachtig'.

- AWT: Idem dito en mi nog lelijker dan swing.

Punt is dat het hier makkelijk bediend moet worden in een niet-computer manier: geen keyboard + muis.


Het alternatief is een mega GUI overhaul.... waarbij we een beeldscherm gebruiken om de film te tonen en een tabletpc voor de bediening. Te denken valt aan een goedkope android tablet ofzo.
Nadeel is dat er dan weer inter-proces-communicatie plaats moet vinden (zelfs tussen 2 pc's) en ik mijn java code dus de brandstapel op kan gooien; een webpagina lijkt me hier dan veel vanzelfsprekender.
Ik ben er niet kapot van; ik ben geen webdeveloper en mijn hele codebase is momenteel java. Ook is het zo dat het afspelen van de film per se op de pc moet gebeuren (en niet de tablet) omdat hier het beeldscherm aan hangt, en een berg decodering plaats moet vinden. Een tablet is hier te licht voor, deze zou puur voor de UI/input dienen.

Heeft iemand hier een goed idee voor?


Edit:

De vraag "wat is dan mooi" rijst uiteraard ook weer: Tsja ik durf dat niet keihard te zeggen, maar het gaat hier om een dvd-speler achtig menu, maar ook dingen als ronde knopjes zijn gewenst. Ik kan me voorstellen dat een ipad achtige interface he-le-maal de natte droom van klanten is... puur omdat het op apple lijkt en dus 'bekend' is. Dat laatste is absoluut een argument voor een tablet achtige UI, maar ik zit dan wel met de communicatie tussen tablet en pc. De software @ pc zou eventueel ook in een andere taal geschreven kunnen worden,maar er zit al aardig wat dev-tijd in dus liever niet .

[Voor 10% gewijzigd door Boudewijn op 26-06-2011 22:01]

[kluyze]

Ik ben even lopen zoeken op het net, in het begin was dat nogal moeizaam, ik had niet de juiste zoekwoorden maar toen kwam ik hier uit.

10-foot user interface
In computing a 10-foot user interface (also sometimes referred to as "10-foot UI", "10-foot interface", or "10-foot experience") is a software GUI (graphical user interface) designed for display on a large television (or similar sized screen) with interaction using a regular television-style remote control.[1]

"10 foot" refers to the fact that the GUI's elements—i.e. menus, buttons, text fonts, and so on—are theoretically large enough to read easily at a distance of 10 feet (3 m) from the display (which in this context is normally a large-screen television). To avoid distractions and to be more clear, 10 foot UIs also tend to be very simple and usually only have the minimum core buttons.

Typical examples of popular 10-foot user interfaces are HTPC and Media Center software applications such as MediaPortal, XBMC, Boxee, Windows Media Center and Front Row / Apple TV interfaces, but most other Smart TV and set-top boxes devices and software also belong in this category.[2]

Dat is dus hoe ze een 'gui' noemen waar de gebruiker ongeveer 10 foot van het scherm af zit.

Misschien dat je hier een sterk keywoord aan hebt om gerichter te zoeken? Ik hoop dat je er wat aan hebt.

[Voor 54% gewijzigd door kluyze op 26-06-2011 22:07]

[Boudewijn]

Punt is dat het wellicht interessant is om die discussie iets breder te trekken dan die 10-voets interface: daarom ook mijn suggestie voor het gebruik van een tablet pc. Punt is wel dat ik bang ben me daarmee heel veel werk op de hals te halen. Wat wel zou kunnen zit ik me net te bedenken is een applicatie met 2 windows en het touchscreen als monitor gebruiken (die zijn er ook in 11 of 12 inch): daarna het frame met de UI controls op het touchscreen tonen en de film op het hoofdscherm tonen. Of dat heel betrouwbaar haalbaar is in windows+java weet ik niet.

[Gleighton]

Overigens is Qt onder de LGPL licentie uitgebracht, wat betekent dat je die wel mag gebruiken voor wat je zoekt. Meer info: klik

Qt wordt ook gebruikt voor mobiele devices en er een set-top box die draait voor de GUI op Qt, dus je zou het ter overweging kunnen gebruiken

[Exirion]

Ik krijg een beetje de indruk dat je wonderen verwacht van bepaalde frameworks terwijl je zelf al aangeeft dat je normaal gesproken command line software schrijft en niet bijzonder veel feeling hebt met esthetische aspecten. Met QT kun je inderdaad best leuke interfaces maken, maar het framework doet niks voor je; het geeft je alleen de mogelijkheid.

Een jaar of 4 terug heb ik veel software voor settopboxes gemaakt en een voorbeeld daarvan is een YouTube browser met een 3D-interface. Alle vormgeving heb ik in Photoshop zitten doen, maar de daadwerkelijke rendering was veel memcpy werk op de framebuffers, waarvan er gelukkig een aantal waren en met behulp van alpha blending en layer swaps kan je dan best leuke dingen doen. Het 3D gedeelte werd verzorgd door een soort co-processor waar we een hele simpele OpenGL implementatie naar hadden geport, en dan zit je dus wel gewoon OpenGL commando's te kloppen. Dit alles draaide op een settopbox met een 250MHz MIPS met 128MB geheugen

Je kunt voor superschaalbare en makkelijk bruikbare frameworks kiezen, maar als de applicatie niet zo complex is zou ik even pragmatisch zijn: maak zelf een miniframeworkje voor jouw doel, en zorg dat het goed performt op het platform waar het voor bedoeld is.

[Alexxxxxxxxxx]

Ik vind het uiterlijk van Ubuntu 11.04 (Unity) wel mooi voor een tablet interface, alleen de minimize, maximize en close buttons moeten iets groter dan.

[Exirion]

Alexxxxxxxxxx schreef op zondag 26 juni 2011 @ 23:09:
Ik vind het uiterlijk van Ubuntu 11.04 (Unity) wel mooi voor een tablet interface, alleen de minimize, maximize en close buttons moeten iets groter dan.

Heb je uberhaupt gelezen waar het hier over gaat?

[Alexxxxxxxxxx]

Ja, hij zoekt een ontwerp voor zijn GUI.

[Exirion]

Alexxxxxxxxxx schreef op zondag 26 juni 2011 @ 23:17:
Ja, hij zoekt een ontwerp voor zijn GUI.

Een desktop environment heeft weinig te maken met een UI ontwerp voor een settopbox applicatie die vanaf de bank bediend moet worden.

[Boudewijn]

Het is niet per se de bank; het is een medisch instrument waarbij de gebruiker in een gefixeerde stoel zit. We kunnen hier een kastje met joystick/controls voor maken dat voor de bank 'zweeft'.

Qua IO: zo low-level was ik eerlijk gezegd niet van plan te gaan. Het moet er vooral fancy uitzien... en goed op afstand te lezen etc. (kleine friemeldingen werkt dus niet erg lekker).

[ctrlaltdelbe]

Als je van de default look and feel van Swing af wil, kan het helpen om dit ergens helemaal in het begin van je applicatie te zetten:

code:

try {
     UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (Exception ex) {}

Je Java-programma neemt dan de look-and-feel over van het OS, misschien is dat al goed genoeg voor de klant, al is dat natuurlijk nog altijd 'computerachtig'. Met mijn excuses voor de 'catch every Exception'-stijl.

Er van uitgaande dat dit nog altijd te computerachtig is, zal je op den duur niet anders kunnen dan de paintComponent-methode van de Swing objecten te gaan overschrijven met je eigen implementiatie ervan. Op die manier kan je het uitzicht van elke knop en elk Swing-element volledig zelf bepalen.

[Voor 25% gewijzigd door ctrlaltdelbe op 26-06-2011 23:34]

[Exirion]

Boudewijn schreef op zondag 26 juni 2011 @ 23:25:
Het is niet per se de bank; het is een medisch instrument waarbij de gebruiker in een gefixeerde stoel zit. We kunnen hier een kastje met joystick/controls voor maken dat voor de bank 'zweeft'.

Misschien moet je toch iets meer uitleggen over wat voor software het precies moet worden, want dit in combinatie met de vorige beschrijving dat gebruikers films moeten kunnen afspelen laat me nogal in het duister tasten over wat de bedoeling is

[Aloys]

Nikolas schreef op zondag 26 juni 2011 @ 23:29:
..

code:

try {
     UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (Exception ex) {}

...
Met mijn excuses voor de 'catch every Exception'-stijl.
....

@Informatica RuG -> automatic fail . Maar was het niet gewoon mogelijk om hier true in te vullen? Op osx wel het overigens behoorlijk mooi in combinatie met AWT/Swing.

[Alexxxxxxxxxx]

Exirion schreef op zondag 26 juni 2011 @ 23:20:
[...]

Een desktop environment heeft weinig te maken met een UI ontwerp voor een settopbox applicatie die vanaf de bank bediend moet worden.

Kun je wel ideeën voor opdoen (of de sourcecode pakken en herschrijven)

[Boudewijn]

Nikolas schreef op zondag 26 juni 2011 @ 23:29:
Als je van de default look and feel van Swing af wil, kan het helpen om dit ergens helemaal in het begin van je applicatie te zetten:

code:

try {
     UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (Exception ex) {}

Je Java-programma neemt dan de look-and-feel over van het OS, misschien is dat al goed genoeg voor de klant, al is dat natuurlijk nog altijd 'computerachtig'. Met mijn excuses voor de 'catch every Exception'-stijl.

Er van uitgaande dat dit nog altijd te computerachtig is, zal je op den duur niet anders kunnen dan de paintComponent-methode van de Swing objecten te gaan overschrijven met je eigen implementiatie ervan. Op die manier kan je het uitzicht van elke knop en elk Swing-element volledig zelf bepalen.

True maar echt lekker qua werk is het natuurlijk niet. De OS stijl is nou net niet de bedoeling, dat is erg computer....

Exirion schreef op zondag 26 juni 2011 @ 23:33:
[...]

Misschien moet je toch iets meer uitleggen over wat voor software het precies moet worden, want dit in combinatie met de vorige beschrijving dat gebruikers films moeten kunnen afspelen laat me nogal in het duister tasten over wat de bedoeling is

Ik mag er niet teveel van zeggen maar het is dus een setup waarbij je een stoel krijgt met een TV voor je neus, en dus kan ik redelijk makkelijk een kastje bij/naast de stoel bedenken waar wat controls op zitten.

Mijn deel van het verhaal is een stukje kiosk-software om die films af te spelen (iig qua GUI, er zit wat licentie/beveiligingsongein verder nog bij).

Alexxxxxxxxxx schreef op zondag 26 juni 2011 @ 23:54:
[...]

Kun je wel ideeën voor opdoen (of de sourcecode pakken en herschrijven)

Plakken en herschrijven? Lijkt me niet heel maintainable. Ook moet die DE dan in java geschreven zijn...

[Jegorex]

Je hebt al op google gezocht naar andere libraries?
http://www.google.nl/search?q=look+and+feel+libraries

[Voor 21% gewijzigd door Jegorex op 27-06-2011 01:55]

[alienfruit]

Wij gebruiken daar voornamelijk gewoon Flash middels Stagecraft of AIR for TV voor. Dit maakt het een stuk makkelijker om een leuke GUI te maken. Maar ja, dit is helaas niet gratis. Het wordt bijvoorbeeld gebruikt voor de Chumby of de laatste variant van de TiVO. Verder zijn er enkele SKY settop-boxen die ook gebruik maken van Stagecraft (de AS3 variant) voornamelijk voor de elektronische televisiegids.

[Voor 38% gewijzigd door alienfruit op 27-06-2011 08:09]

[farlane]

Zou een browser interface kunnen werken? Neem aan dat er wel http server libraries zijn voor Java?

[Niemand_Anders]

Nou als je weet dat de klant Windows eist, dan is natuurlijk WPF/Silverlight ook een goede optie. WPF heeft zo'n beetje dezelfde opmaak mogelijkheden als HTML, dus daarmee kun je zeer indrukwekkende interfaces bouwen..

En uiteraard kun je ook voor een browser kiezen welke een lokale website draait op IIS Express.

[EddoH]

erm, sinds wanneer heeft GUI layout en look&feel met het gebruikte framework te maken?
Het framework geeft je mogelijkheid om GUI functionaliteit op een makkelijke manier te implementeren, maar zegt natuurlijk niets over hoe het eruit zal gaan zien.

Uiteraards krijg je als je geen eigen graphics gebruikt de native componenten van het framework voor je kiezen, maar om daar nou het framework op uit te gaan kiezen

[Woy]

Ik zou inderdaad gewoon eens met een interface designer gaan praten. De look&feel is niet zo veel afhankelijk van het gebruikte framework, zeker niet als het een relatief eenvoudige interface moet zijn. Het is meer een kwestie van styling, en met een aantal plaatjes kom je daar meestal best een eind mee.

Niemand_Anders schreef op maandag 27 juni 2011 @ 08:53:
Nou als je weet dat de klant Windows eist, dan is natuurlijk WPF/Silverlight ook een goede optie. WPF heeft zo'n beetje dezelfde opmaak mogelijkheden als HTML, dus daarmee kun je zeer indrukwekkende interfaces bouwen..

WPF heeft een stuk meer opmaak mogelijkheden als HTML, maar dat lijkt me hier nu niet direct een optie aangezien het project blijkbaar in Java is gemaakt. Natuurlijk kun je wel weer een losse interface maken die met IPC o.i.d. met de applicatie communiceert, maar dat maakt het wel meteen weer complexer, en dat is iets wat je beter kunt proberen te voorkomen.

[bomberboy]

Akkoord met EddoH

Het belangrijkste advies dat ik je (uit ervaring) kan geven is om er een externe partij vertrouwd met UI-design bij te betrekken die samen met de klant (en met jou) een eigenlijk design opstelt. Op basis van dat design kan je dan aan de slag. Omgekeerd werken verloopt typisch veel moeilijker. En aangezien je in de ogen van een klant al een design hebt afgeleverd dat niet voldoet zal het moeilijker zijn om hem van iets nieuws te overtuigen.

Qua technische aspecten. Het is me niet duidelijk of je nu al veel tijd/werk geïnvesteerd hebt in de huidige applicatie en wat er van herbruikbaar is. Aangezien enerzijds java wenst blijven te gebruiken, maar toch ook iets totaal anders overweegt.

Het goede nieuws, met Java kan het zeker. Je kan ofwel een alternatieve look en feel gebruiken en deze eventueel nog verder aanpassen aan je wensen. Een overzicht van alle parameters en kleurtjes die je gewoon via een aantal properties kan instellen voor de Nimbus L&F vind je hier: http://download.oracle.co...feel/_nimbusDefaults.html

Indien je wil kan je er zelfs eentje helemaal from scratch maken, maar dat zou ik niet aanraden. Makkelijker is vaak een te zoeken die aansluit bij wat je wil en die aan te passen.

Tot slot, het nieuwe hete ding voor flashy java GUI's is JavaFX: http://www.javafx.com/
Tot op zekere hoogte te vergelijken met Flash/Silverlight, maar Java gebaseerd, kan ook buiten de browser gebruikt worden en is in eerste instantie bedoeld om relatief eenvoudig funky GUI's te bouwen. Waar je een deel zelfs via css enzo kan stylen. Dit lijkt me zeker een geschikte toolset om mee te verwezenlijken wat jij wil. Het voordeel is bovendien dat je delen van je bestaande java code gewoon kan overnemen en hergebruiken (gesteld dat je je netjes aan het MVC pattern gehouden hebt)

Maar het belangrijkste advies blijft toch om er iemand bij te betrekken die gespecialiseerd is in UI-design

[croontje]

Misschien kan je de skins van XBMC een bekijken om wat inspiratie op te doen?

[MSalters]

Kijk eens naar Stardock, die hebben een toolkit (WindowBlinds) die nogal eens gebruikt wordt voor "mooie" UI's.

[YopY]

Je zou sowieso kunnen beginnen met een daadwerkelijk ontwerp, te beginnen met schetsen / wireframes, en die uitwerken dmv Fotosoep of een vergelijkbaar product. Dat laat je door de baas goedkeuren.

Vervolgens ga je kijken naar wat voor frameworks er zijn. Je kunt bij 'native' Java blijven door Swing skins te bouwen, maar je kunt ook iets verder kijken - JavaFX heeft (volgens mij) meer grafische mogelijkheden, en als je buiten 'native' wilt gaan kun je een front-end met Adobe Air bouwen, en anders een web-front-end met HTML5 en fancy nieuwerwetse zut.

Begin bij het ontwerp, ga dan pas kijken naar de tools, ipv andersom. Zie ook: gouden hamer.

[Exirion]

YopY schreef op maandag 27 juni 2011 @ 12:24:
Begin bij het ontwerp, ga dan pas kijken naar de tools, ipv andersom. Zie ook: gouden hamer.

Gamma!