LinuxMCE Forums

General => Developers => Topic started by: tschak909 on June 05, 2010, 03:21:12 am

Title: Re: Clutter Exercise: Media List - [X] DONE
Post by: tschak909 on June 05, 2010, 03:21:12 am
As a first experiment, let's try to build a media list, using Clutter or Qt.

How about the following:

* A Grid of thumbnails that stretch from left to right, and scroll off the bottom
* as you mouse over one of them, it pushes forward, becomes larger, and expands into a rectangle, containing the thumbnail. and some text.
* kinetic scrolling.

Go.

-Thom
Title: Re: Clutter Exercise: Media List
Post by: l3mce on June 05, 2010, 06:06:37 am
Learning qt.

Can you point me to the lmce side to where to draw this off of DB? I am obviously green.

By scroll off of the bottom, do you mean simple up/down or left/right buttons... or do you mean more advanced scrolling like ui2?
Title: Re: Clutter Exercise: Media List
Post by: tschak909 on June 05, 2010, 06:10:24 am
Well, for now, just use some dummy data. Whatever will get you moving faster.

I am actually referring to kinetic scrolling, where dragging with the mouse, will scroll in a given direction... If you have another idea, have at it.. I was just trying to give some example ideas.

I don't want a scroll bar, if we can avoid it.

-Thom
Title: Re: Clutter Exercise: Media List
Post by: golgoj4 on June 07, 2010, 07:07:55 am
Learning qt.

Can you point me to the lmce side to where to draw this off of DB? I am obviously green.

By scroll off of the bottom, do you mean simple up/down or left/right buttons... or do you mean more advanced scrolling like ui2?

there is a good example in the database section of those books i linked in irc, specifically c++ gui programming with qt4 should get you up and running allthough you may need to grab the qtmysql driver. Tschak pointed me in the right direction and it was just a matter of moving the .so from one place to another.

lastly, if your using qt-creator, you'll need to add
Code: [Select]
QT += sql
on its own line to your .pro file otherwise it wont include things properly.

In other news, i realized after this was all worked out that I would have to create an dummy mysql user for this to work properly. I could have used temp data, but i like the idea of working with data in a form that its going to live in to see what can be done.

-golgoj4
Title: Re: Clutter Exercise: Media List
Post by: l3mce on June 07, 2010, 12:31:04 pm
I was thinking of using smaller thumbs and including space for a resized pip for active video... I then realized that I am looking at a huge TV, and would have to keep in mind a smaller one. Would have to function differently than a mobile orbiter... or waste space.

Worthwhile for this exercise?
Title: Re: Clutter Exercise: Media List
Post by: phenigma on June 07, 2010, 02:52:53 pm
there is a good example in the database section of those books i linked in irc, specifically c++ gui programming with qt4 should get you up and running allthough you may need to grab the qtmysql driver. Tschak pointed me in the right direction and it was just a matter of moving the .so from one place to another.

Could you provide that link here for those who were not on IRC at the time?

J.
Title: Re: Clutter Exercise: Media List
Post by: golgoj4 on June 07, 2010, 05:40:27 pm
there is a good example in the database section of those books i linked in irc, specifically c++ gui programming with qt4 should get you up and running allthough you may need to grab the qtmysql driver. Tschak pointed me in the right direction and it was just a matter of moving the .so from one place to another.

Could you provide that link here for those who were not on IRC at the time?

J.

http://www.kdedevelopers.org/node/3526
the book only really covers the basics, but me being very new I found that its really helpful to get a good feel for how things work.

-golgoj4
Title: Re: Clutter Exercise: Media List
Post by: phenigma on June 07, 2010, 07:20:37 pm
Thanks.

J.
Title: Re: Clutter Exercise: Media List
Post by: tschak909 on July 11, 2010, 06:16:01 pm
Has anyone attempted anything?

-Thom
Title: Re: Clutter Exercise: Media List
Post by: l3mce on July 18, 2010, 10:28:05 pm
Has anyone attempted anything?

-Thom

I did some very unimpressive things before I got sick. I am out of the hospital now and will spend the next 3 days doing this. I mean... the qt interface is pretty much drag and drop... so you can do really pretty things pretty easily... I was trying to get into alpha layering and PIP... so most of the time I have invested is just reading.

I will just do what you asked first so that there is at least some measure of progress.
Title: Re: Clutter Exercise: Media List
Post by: l3mce on August 06, 2010, 03:06:18 pm
3 days, 3 weeks... you get the idea. Had to take on some projects to keep the people fed.
Title: Re: Clutter Exercise: Media List
Post by: uplink on August 27, 2010, 02:23:59 am
And I clicked on the topic thinking I'll find something to drool on... Silly me :)
Title: Re: Clutter Exercise: Media List
Post by: tschak909 on October 06, 2010, 11:21:29 pm
Is anyone attempting this?

-Thom
Title: Re: Clutter Exercise: Media List
Post by: phenigma on October 07, 2010, 12:40:23 am
Unfortunately not I.  In the time I do have right now I am re-learning c++ and looking at the linux TouchOrbiter among other things...  trying to get my head re-wrapped around pointers (and pointers to pointers).

J.
Title: Re: Clutter Exercise: Media List
Post by: l3mce on October 17, 2010, 05:32:03 pm
Yes.

Every time I make headway my life folds in around me. Will have a working model before forever or never. Need a job.
Title: Re: Clutter Exercise: Media List
Post by: uplink on October 17, 2010, 07:44:26 pm
Yes.

Every time I make headway my life folds in around me. Will have a working model before forever or never. Need a job.
/me wonders why that sounds familiar :)
Title: Re: Clutter Exercise: Media List
Post by: DragonK on October 19, 2010, 10:53:07 am
Thom,

I want to learn..... what would be the best way for a newbie? Qt or clutter?
Which one would u prefer we do it with?

Karel
Title: Re: Clutter Exercise: Media List
Post by: tschak909 on October 19, 2010, 02:02:55 pm
doesn't matter.

-Thom
Title: Re: Clutter Exercise: Media List
Post by: cfernandes on October 19, 2010, 03:07:52 pm
Tom ,

 i go try to learn this.

Carlos
Title: Re: Clutter Exercise: Media List
Post by: tschak909 on October 19, 2010, 03:12:10 pm
The whole point of this, is to try and make some toys that we can play with.

I suggested Clutter due to its feature set, the fact that it is exceptionally fast, and can run on embedded and on-screen devices, and that it's flexible without being over-bearing. There is also the Mx toolkit which builds atop Clutter to create UI elements.

But in the end, it doesn't matter what toolkit is used, because the whole point here is to get a "clay model" that we can use with our bare hands.

-Thom
Title: Re: Clutter Exercise: Media List
Post by: golgoj4 on November 24, 2010, 10:43:18 am
should have something interesting as soon as i get scrolling implemented in a semi-interesting fashion. well that and cleanly laying out data grids :) Spent a few days trying to digest gui programming so far i have this...which a badly rendered grid. prototype 1st, refine later.

(http://farm6.staticflickr.com/5281/5203936730_99bbd51e8d.jpg)

-golgoj4

left 2 things out.

1. On the qt-web browser, has resolved and integrated most stuff(i think?) but im getting tripped up by one include. Says its a reference to an undefined function but i can find the function in the include thats in that file. confusing.

2. anyone that wants to take a look and hack on what im doing as far as the experimental datagrid stuff http://gitorious.org/demo-file-grid-idea

good day!
Title: Re: Clutter Exercise: Media List
Post by: uplink on November 24, 2010, 04:32:20 pm
should have something interesting as soon as i get scrolling implemented in a semi-interesting fashion. well that and cleanly laying out data grids :) Spent a few days trying to digest gui programming so far i have this...which a badly rendered grid. prototype 1st, refine later.

http://flic.kr/p/8VRx65

-golgoj4


Looks alright so far. I like how I can move the image in the background with the scrollbar :D

left 2 things out.

1. On the qt-web browser, has resolved and integrated most stuff(i think?) but im getting tripped up by one include. Says its a reference to an undefined function but i can find the function in the include thats in that file. confusing.

I was looking around your code for a qt-web browser, and couldn't find it, to see what you were doing wrong. It's not there, but after thinking a bit it struck me what your problem might be. By your description your error is at link time, not at compile time.

I don't know what the proper way to do it in QtCreator is. In QDevelop I can tick a few boxes to add the needed libs for the link. Anyway, lacking those tickboxes, I think you achieve the same effect doing this:

In file demo_orbiter.pro, at line 7 change this:

Code: [Select]
QT       += core guito this:
Code: [Select]
QT       += core gui webkit
and run qmake to update your Makefile. This should get rid of your link error for qt-web, if I understand correctly and you use the QtWebkit stuff.

2. anyone that wants to take a look and hack on what im doing as far as the experimental datagrid stuff http://gitorious.org/demo-file-grid-idea

good day!
Title: Re: Clutter Exercise: Media List
Post by: golgoj4 on November 24, 2010, 08:11:04 pm
Sorry forgot to list the link to it :) http://gitorious.org/linuxmce-webkitbrowser. Im specifically having a problem with a link against a function in a dcecommon. Me being the rocket scientist i am, I overwrote my my directory earlier trying to generate what I thought would be an updated DCEcommon lib to link against which would have the function. Long story short, i need to rebuild from from git(where i backed up my progress thank goodness) and then see exactly where the error was.

-Golgoj4.
Title: Re: Clutter Exercise: Media List
Post by: uplink on November 24, 2010, 08:58:35 pm
I assume I'll have to go to my LinuxMCE development box, which is in fact Thom's development and girl amazement box :P, 'cause I get "Gen_Devices/QtWebBrowserBase.h: No such file or directory". That is if the Device Template is in the latest database. If it's just on your system, then I can't do much to help you, unless you give me direct access to your system to see what's going on.
Title: Re: Clutter Exercise: Media List
Post by: coley on March 08, 2011, 01:27:07 am
...knocking the dust off here...
I've played a bit with QML on this.
This is a start - for me - taking a bit of this and that from QML seeing how it operates. It is in no way a consistent UI, and more than likely breaks most paradigms.
I've attached a deb for maemo as I've been testing this on windows and my N900.
What it does - not a lot but
 - scrolling side menu akin to groupings on current orbiter
 - touch lights - menu fades out(sample transition) touch anywhere to get menu back
 - touch webadmin - quess what web page appears (assuming 192.168.80.1 for core)(no scrolling panning yet, but available)
 - a lot of the menu items do nothing but clicking on each unloads the current component at least if not loading its own component, at the moment.
 - touch music a CD case appears - tap it, it flips and flick-able track-listing appears - tracks are selectable
 - touch video - grid of sample videos appear, again flick-able, zooming to fill area currently broken - well it zooms in but zooming out doesn't, so I've it disabled
 - touch arrow at top of screen - quick access area appears - can put status here, at the moment has quit button.

suggestions criticisms please form an orderly queue
now where did I leave my flame retardant suit....

-Coley.

attached deb updated - shouldn't depend on qtmobility.
update 2: deb updated, more sensible name, scroll menu working.
Title: Re: Clutter Exercise: Media List
Post by: tschak909 on March 08, 2011, 05:03:22 am
awesome. I will have to set up a maemo 5 SDK (if it's still out there), to test this. :) I do not have my N900 any more, as it was nicked in a hotel room.. :(

I wonder if we could get some more targets built for testing? ;)


-Thom
Title: Re: Clutter Exercise: Media List
Post by: golgoj4 on March 08, 2011, 05:25:36 am
...knocking the dust off here...
I've played a bit with QML on this.
This is a start - for me - taking a bit of this and that from QML seeing how it operates. It is in no way a consistent UI, and more than likely breaks most paradigms.
I've attached a deb for maemo as I've been testing this on windows and my N900.
What it does - not a lot but
 - scrolling side menu akin to groupings on current orbiter
 - touch lights - menu fades out(sample transition) touch anywhere to get menu back
 - touch webadmin - quess what web page appears (assuming 192.168.80.1 for core)(no scrolling panning yet, but available)
 - a lot of the menu items do nothing but clicking on each unloads the current component at least if not loading its own component, at the moment.
 - touch music a CD case appears - tap it, it flips and flick-able track-listing appears - tracks are selectable
 - touch video - grid of sample videos appear, again flick-able, zooming to fill area currently broken - well it zooms in but zooming out doesn't, so I've it disabled
 - touch arrow at top of screen - quick access area appears - can put status here, at the moment has quit button.

suggestions criticisms please form an orderly queue
now where did I leave my flame retardant suit....

-Coley.

and why would we flame you for doing awesome stuff? :)
Title: Re: Clutter Exercise: Media List
Post by: rperre on March 08, 2011, 07:41:05 am
screenshots, video, youtube, anything?

Great work,

Richard
Title: Re: Clutter Exercise: Media List
Post by: coley on March 08, 2011, 09:09:46 am
Thom - sorry to hear about your N900 being nicked, not nice!!

will try and get screenshots, though screencast would be better, tried one already but it wasn't smooth at all.

-Coley.
Title: Re: Clutter Exercise: Media List
Post by: posde on March 08, 2011, 09:34:44 am
Installed it on my n900 - only shows a black screen
Title: Re: Clutter Exercise: Media List
Post by: uplink on March 08, 2011, 07:58:52 pm
Source code?
Title: Re: Clutter Exercise: Media List
Post by: coley on March 09, 2011, 01:14:11 am
@possy I don't know why it still only displays a black screen on your device. I uninstalled any extra Qt -dev or -dbg pkgs on my N900 and all works.

@tschak what other platforms? at the moment I can produce an app for Qt on linux, windows and Maemo, haven't tried for Symbian or Meego yet

src avail here if anyone wants to look quickorb.tgz - 304.4 KB (http://uploading.com/files/18b9f997/quickorb.tgz/)

-Coley.

p.s. deb updated in orig post http://forum.linuxmce.org/index.php?topic=10214.msg79637#msg79637 (http://forum.linuxmce.org/index.php?topic=10214.msg79637#msg79637)
Title: Re: Clutter Exercise: Media List
Post by: coley on March 21, 2011, 08:03:15 pm
Another small update.
The package should now know about its dependencies - requires mcsp, and libqtm-11. (on N900)
Additions:
- simple clock date/time displayed on home screen.
- I got qml working with some of the sensors offered by QtMobility. QML bindings to QtMobility are improving all the time :)
The application can now know the orientation of the device - for example placing the device face down could be used to trigger events e.g. do not disturb when watching/listening to media.
- Added sample thermostat sliders - atm I only display two for illustration. I had hoped to have a flickable row of them, but my height calculations are going screwy when its a list of them and they come out all squished, need to revisit.
The same component could just as easily be adapted for light dimmers.
- There is a txt reading of the Accelerometer output, this could potentially allow a device so equipped to be used as a gyroMouse, Bluetooth in QML bindings only starting in QtMobility1.2TP so not going near that yet - but its a future possibility. Alternatively entirely possible now to expose these readings via Qt framework and some c++.

All of the above is written using QtQuick so whatever devices in the future will support QML this kind of stuff can drop straight onto them.

-Coley.
Title: Re: Clutter Exercise: Media List
Post by: tschak909 on March 21, 2011, 08:18:20 pm
Fantastic :)

can we get the source regularly so that some of us can compile it elsewhere? ;)

-Thom
Title: Re: Clutter Exercise: Media List
Post by: posde on March 21, 2011, 08:50:01 pm
coley,

missing debs according to program manager:
Title: Re: Clutter Exercise: Media List
Post by: coley on March 22, 2011, 12:49:08 pm
@possy - I guess you want it a step further to install the needed dependencies as opposed to just warning in the app manager? I can check that out. Was wary of that as QtMobility1.1 is only in dev repo atm.

@tschak - could I check the src into svn? under a /people directory?

-Coley.
Title: Re: Clutter Exercise: Media List
Post by: posde on March 22, 2011, 01:05:38 pm
coley,

I am dumb :) so yes, I would want to have it install its dependencies automatically.

Title: Re: Clutter Exercise: Media List
Post by: RayBe on March 22, 2011, 02:06:21 pm
@Coley,

Thank you very much for developing this and taking LMCE again 1 step further.
Since i am very curious as how the whole thing looks when using this and i can imagine other too,
could you please make a youtube video from what you got so far,
kind of like a teaser ;)

thanks again,
br,
Raymond
Title: Re: Clutter Exercise: Media List
Post by: coley on April 02, 2011, 03:00:16 am
Sorry for the delay in getting this up there. You can grab my initial efforts here.
http://svn.linuxmce.org/svn/people/coley/quickorb (http://svn.linuxmce.org/svn/people/coley/quickorb)

Any suggestions are welcome or if you have difficulty getting it operational just shout, mind you it doesn't do a huge lot :)

-Coley.

@possy - I haven't figured out the wonders of debian pkging yet so it still doesn't install the dependencies.

@RayBe - no video or pics yet sorry, as soon as I get a chance I'll generate something.
Title: Re: Clutter Exercise: Media List
Post by: l3mce on April 02, 2011, 03:30:36 am
That should read
http://svn.linuxmce.org/svn/people/coley/quickorb/

Forgot a dir.
Title: Re: Clutter Exercise: Media List
Post by: coley on April 02, 2011, 09:55:02 am
That should read
http://svn.linuxmce.org/svn/people/coley/quickorb/

Forgot a dir.
thanks l3mce, original link updated.
-Coley.
Title: Re: Clutter Exercise: Media List
Post by: rperre on April 02, 2011, 04:46:41 pm
Some screenshots for the one's that want to see this. Unfortunately i could not get a screencast to show video on playback.

All praise to coley to start this off.

This is the main menu, it's like a wheel that you can drag around

(https://lh4.googleusercontent.com/_VqrTGqjF5tM/TZc1X05JD-I/AAAAAAAAF0g/vMplUk2wrxk/s144/n900mainmenu.png)

Here are more menu items

(https://lh4.googleusercontent.com/_VqrTGqjF5tM/TZiNRvbNnBI/AAAAAAAAF1Q/DwQjZcca_JM/s144/n900mainmenumore.png)

Clicking the top bar opens it, just like current smart phones do

(https://lh4.googleusercontent.com/_VqrTGqjF5tM/TZc1bklmR5I/AAAAAAAAF0s/LFSaqMCtQAk/s144/n900topbaropen.png)

Lighting and contact do nothing yet, but clicking Music gives the front album art

(https://lh6.googleusercontent.com/_VqrTGqjF5tM/TZc1Z-PXdmI/AAAAAAAAF0k/LNk1I9IVtXw/s144/n900musiccoverfront.png)

Now if you click on this album art, the picture rotates vertically 180 degree so you can see the back of the album.
The list on the right is scrollable, just click and drag to see all titles

(https://lh3.googleusercontent.com/_VqrTGqjF5tM/TZc1Z-SYDHI/AAAAAAAAF0o/yqiDQ5G9IME/s144/n900musiccoverback.png)

Clicking the Video menu button gives a list that is scrollable top to bottom, click and drag

(https://lh5.googleusercontent.com/_VqrTGqjF5tM/TZc1cXXYC9I/AAAAAAAAF0w/b1aXCpW5AfQ/s144/n900videoscroll.png)

Hvac menu gives two sliding bars to adjust temperature

(https://lh4.googleusercontent.com/_VqrTGqjF5tM/TZiNQHSHmPI/AAAAAAAAF1I/riKqjuxJZPM/s144/n900hvacmenu.png)

Webadmin button, pulls up webadmin, i could put in my username and pass and get to the main screen as shown

(https://lh3.googleusercontent.com/_VqrTGqjF5tM/TZiPQYh1_1I/AAAAAAAAF1c/SOZmflWMh7A/s144/n900webadmin.png)

That's it, i'll try again to make a screencast of it working, not sure what makes it a transparent video after capture.

Very nice Coley although you'll say it's not much, it's a step in the right direction.

Richard
Title: Re: Clutter Exercise: Media List
Post by: l3mce on April 02, 2011, 05:13:44 pm
Great work rperre... the album flip is slick.

I think once golgoj4 and I catch up, we can collaborate on something much needed for the project. Way to get the ball rolling coley. Very exciting stuff.
Title: Re: Clutter Exercise: Media List
Post by: coley on April 02, 2011, 06:45:59 pm
Thanks for putting those up, the menu on the left scrolls up and down, items wrap. there should be a hvac option too, when clicked displays adjustable stats.
-Coley.
Title: Re: Clutter Exercise: Media List
Post by: rperre on April 03, 2011, 05:02:40 pm
Coley, that wheel menu is awesome, i didn't even notice it, i have posted a few more pics in the above thread to show the stats and the webadmin.

Richard
Title: Re: Clutter Exercise: Media List
Post by: coley on May 04, 2011, 02:34:59 pm
golgoj4 - how far did you get with your window controller experiments? Anything I could grab to experiment with?

-Coley.
Title: Re: Clutter Exercise: Media List
Post by: dextaslab on May 26, 2011, 02:18:01 pm
Just tried it on my N900, and it works great, very smooth!
Title: Re: Clutter Exercise: Media List
Post by: joerod on May 26, 2011, 08:42:11 pm
lets see some youtube video..... I'm really curious to see what it looks like but I don't have any of these devices.... just a lowly webdt..... :(



I do love my webdt tho ( please don't break...)
Title: Re: Clutter Exercise: Media List
Post by: golgoj4 on September 02, 2011, 09:35:15 pm
dare i say this thread should be marked 'DONE!'


 ;D
Title: Re: Clutter Exercise: Media List - [X] DONE
Post by: hari on September 03, 2011, 07:20:58 pm
dare i say this thread should be marked 'DONE!'


 ;D
you rock!