'People' tile like control? (ImageTile)

May 15, 2012 at 11:04 AM

Hi

Are there any plans to add a control, to use within an application, similar to the People tile on the main phone screen?  I think it would be a great addition to what is already a very useful collection of tools.

Cheers,

Rupert.

Coordinator
Jun 15, 2012 at 7:06 PM

good idea, let me do some doodles and think about how to pull this off with some epic results.

Coordinator
Jul 12, 2012 at 9:36 PM
Edited Jul 12, 2012 at 9:52 PM

Continuing the discussion from twitter. People hub like tile control will be excellent. was thinking of something similar. having 4 fixed points in the tile and setting the image at those points say 50px or 25px and flipping them around and then switching images after a few seconds. not as extensive animations as people hub but something more than we have now.

Is there any way I can help ?

PS: okay the people control itself is not bad.. tile split to 9 subimages and animation controlled

Coordinator
Jul 14, 2012 at 10:33 PM

I checked in a POC into the experimental dir. I can add you on as a dev if you'd like to help create the control. 

I'd rather have a dynamic control rather than forcing "it must be a grid of this size".  Looking at my code, you can see where I was going with this.  Still thinking what is the "best" way to do this it is useful / powerful.

A lot of stuff would still need to be exposed like "ImageLoadFailure" if people are pulling from a URL.

 

Coordinator
Jul 16, 2012 at 10:59 PM

I am all in. You can add me in and I will give it a go. You are right - it needs to handle invalid Uri's etc. Will download your code and have a look. Thanks in advance.

Coordinator
Jul 17, 2012 at 5:36 AM

added you as a dev.  Keep the stuff in the experimental right now, move stuff into the primary only after it is far more prime time :-)

Jul 19, 2012 at 6:34 PM

hey, can i take a peek into the code you guys are developing. i want to contribute as well.

Coordinator
Jul 21, 2012 at 8:07 PM

I have uploaded the first cut of people tile control. can you have a look ?

Coordinator
Jul 22, 2012 at 6:15 PM

This is sweet.

Let me go in and adjust the code slightly so it meets the coding style for the rest of the project.

Things that need to be adjusted:

  • Better "OnLoad" experience
  • Random alg needs to be adjusted as you do get some starved tiles it seems like
  • Make the Row/Col adjustable
  • Lets see if we can't make the "big tile" adjustable so you can also set the row / col
  • Need to get the animation enum working with the VS editor.
  • Not sure this should run on a dispatch timer VS calling the dispatcher when appropriate.

 

Coordinator
Jul 22, 2012 at 6:24 PM
  • Better "OnLoad" experience - yes this is possible.
  • Random alg needs to be adjusted as you do get some starved tiles it seems like - interval is adjustable from designer - can set lower interval for faster image rendering
  • Make the Row/Col adjustable - this should be easy.. was thinking about a wider tile for Win8 use and adjustable columns / rows makes sense
  • Lets see if we can't make the "big tile" adjustable so you can also set the row / col - did you mean fixing it to a specific col / row position ?
  • Need to get the animation enum working with the VS editor - it was workong on VS for me just fine :)
  • Not sure this should run on a dispatch timer VS calling the dispatcher when appropriate. - either way you need a timer and all image manipulation will need to be done on dispatcher / UI thread.

 

 

Coordinator
Jul 22, 2012 at 6:28 PM

Looking at the code, the only thing that has to be done on the Dispatcher is "sb.Begin();"

Coordinator
Jul 22, 2012 at 6:28 PM

Ooo, the refresh timer interval isn't adjustable

Coordinator
Jul 22, 2012 at 6:45 PM

I think the creation of any UI elements or BitmapImage would require UI thread. where you thinking of using System.Threading.Timer ?

Coordinator
Jul 22, 2012 at 6:49 PM

correction, i missed the DP, the interval is there :-)

Coordinator
Jul 22, 2012 at 6:49 PM

AnimationInterval was set to int and from Seconds.. testing FromMilliseconds now

Coordinator
Jul 22, 2012 at 6:50 PM

Yes, was thinking about using Timer.  Not sure on BitmapImage but I know you can create UI elements on a background thread.  Only need to hop back on a UI thread when you touch a UI element.

Give me a few more minutes on the clean up.  I did some renaming and what not

Coordinator
Jul 22, 2012 at 6:51 PM

did a small commit relating to AnimationInterval.. will stay out till you finish your changes

Coordinator
Jul 22, 2012 at 7:05 PM

I'm the PeopleTile to ImageTile as that is a more appropriate name for it.  This will cause merge issues, give me 10 minutes to correct a merge issue then I'll check in.

Coordinator
Jul 22, 2012 at 7:06 PM

that's absolutely fine.. busy shredding piled up docs

Coordinator
Jul 22, 2012 at 7:25 PM

how do you want to break up some of this work?  Want me to look into the timer?

Issues I currently see:

  • Config Row / Column
  • sb_Complete I don't believe is "big tile" friendly.  The images under it are still in memory.
  • Make Big Tile configurable Row/Column
  • Make Big Tile able to shift locations if one isn't currently displayed
  • Better "First Load" experience
  • See if we can't get it off a dispatch timer
  • Get off the {XY} system. 
  • ImageFailed Logic
Coordinator
Jul 22, 2012 at 7:26 PM

Running the logic faster, big tile can shift location, sweet!  running it slow, it always seemed to be in the same location

Coordinator
Jul 22, 2012 at 7:36 PM

well 3 x 3 only gives 4 possible locations for the big tile... so random wouldn't be very random..

The images are being removed from grid however we can try and set them to null so mark them for GC collection. Not very good at animation but I would have preferred to have a fixed images and being able to tweak the image source. let me try and mess around with imagefailed etc.

Coordinator
Jul 22, 2012 at 7:51 PM

Dispatch timer is a must, can't get off of it due to DP of ItemsSource.  Would involve far too much hopping on / off


Coordinator
Jul 22, 2012 at 8:01 PM

okay.. I have managed to handle imagefailed :)

Coordinator
Jul 22, 2012 at 8:09 PM

Going to tackle col / row being configurable

Coordinator
Jul 22, 2012 at 8:11 PM

RE: image fail, we should expose that event to tell the dev, if it fails to load, it just stays blank.

Coordinator
Jul 22, 2012 at 8:18 PM
Edited Jul 22, 2012 at 8:19 PM

don't do anything for col / row.. doing that now :)

I can ask dev to provide uri for invalid image - another property. if not set, we blank it rather than throw exception ?

is min 3 x 3 a good config or do you want to cater for 2 x 2 or even 1

Coordinator
Jul 22, 2012 at 8:35 PM

i think 1 should be supported.  I'll work on the logic for all this.  I'll also be working on the LargeTile Column/Row size as well.

I checked in an incomplete version of GridBuilder.  Builds it but can get in trouble and timer doesn't respect it.  Need a test case for it as well in UX.

Coordinator
Jul 22, 2012 at 8:37 PM

okay I will accept your commit :(

Coordinator
Jul 22, 2012 at 8:57 PM

I have merged the changes.. can you have a look ?

Coordinator
Jul 22, 2012 at 10:46 PM

Can you comment timer_Tick, you do some things that aren't totally clear why.

Coordinator
Jul 22, 2012 at 11:04 PM

comments added and commited

Coordinator
Jul 23, 2012 at 3:28 AM
Edited Jul 23, 2012 at 3:28 AM

Ok, refactored heavily

Things left

  • UX Tester
  • Test use case of less images than tiles visible (example 12 images, 4x4 grid)
  • Configurable Large Tile size
  • ImageFail event that a dev can tap into

Things that don't seem to work properly

  • rolling off string based IDs instead of a int version of a Point.  I keep getting dups when I shouldn't.
Coordinator
Jul 23, 2012 at 5:27 AM

jbragadeesh check out the experimental folder in the source tree.  I think we're pretty close

Coordinator
Jul 23, 2012 at 10:28 AM
Edited Jul 23, 2012 at 10:28 AM

Can you have a look at line 262 ? ImageTile.cs ?

when you create an image you assign guid to img.Name. in the dictionary we store XY and you are trying to remove item by guid when there isn't one.

I also tried replacing row / col with point and it was throwing exceptions. dictionary needs to generate hashcode. I think it will amount to the same thing as it does with strings.

* I will revert image fail later today.

Coordinator
Jul 23, 2012 at 6:52 PM

okay I got that work with ImageLocation.. however a few major issues.

1) the GetHashCode is not always unique for different spots - need to find a unique algo

2) being a structure, it defaults and I have seen issues relating to default position.

trying to isolate it.. might create a nullable type and try that way

Coordinator
Jul 23, 2012 at 7:40 PM

okay fixed all the above issues and code committed back.. let me know what you think of it.

For ImageFailed, do you want to throw the same exception or should we expose another say ImageLoadError and throw only if dev has subscribed to those ?

Coordinator
Jul 23, 2012 at 11:59 PM

Ahhh, hashcode was the issue!  ok, that should be an easy fix then.

Will review soon, been crazy busy today.

Coordinator
Jul 26, 2012 at 5:32 AM

So behavior wise, this is a step backwards.  Lots of duplicate images and even the layering seems incorrect. 

Coordinator
Jul 26, 2012 at 8:15 AM

yes though a bit scary considering I only swapped string XY for imagelocation struct... think hashcode might still be overwriting each other

Coordinator
Jul 26, 2012 at 10:14 PM

Something is still akward here.  with 15 images, I shouldn't see the same image loaded 3 times ever yet I've seen that pattern.  You should only see the same image once on a 9x9 grid if there are more than 10 images which in this case there are.

Lemme add in some better debugging

Coordinator
Jul 26, 2012 at 11:26 PM

you are right.. was tempted to change GetRandomImage() as that is the source of issue... previously we used to maintain another array which was non repeatable lookups

Coordinator
Jul 26, 2012 at 11:36 PM

But seemed like when we were the string system, it worked properly.  I fixed a few things, lemme add in some debugging goodness :-)

Coordinator
Jul 27, 2012 at 8:23 AM

went a bit more old school for tracking, give it a peak if it makes sense.  basically i did what you'd do if you had a flat array but had to deal with a 2D array.

Also added in a layout state enum for tracking when stuff should shift and additional images.

Coordinator
Jul 27, 2012 at 12:31 PM

we both went around different ways.. I prefer axe approach rather then zen :) I went and created a uri list and selected random with substitution to get the same results..  I am going to try and generate random colored image (and then possibly use accent color and lighten darken it)

Coordinator
Jul 29, 2012 at 11:01 PM

Dave, think we are pretty close right now.  Pending the following, I think this is prime time read.

  • "OnLoad" pre-loading
    • Preload images?
    • Preload random Rect with gradients?
      • If we do this route, should we follow this for image failures.
  • On grid resize, should the preload execute
  • Configurable large tile sizes

What would you like to tackle?

 

 

Coordinator
Jul 29, 2012 at 11:27 PM
Edited Jul 29, 2012 at 11:31 PM

I have messed about with gradient images but for some reason it wasn't successful.

* Create WriteableBitmap say 100x100 and set a specifc color but for some reaons it never sets correctly.. if that worked, I had code to then lighten darken accent colour and set that to writeable bitmap. Maybe I will try and recreate BitmapImage out of WriteableBitmap and try that way.

I can do the preload and then start the timer.

Let me add these 2 tomorrow.

On resize if there is a change in grid col / row, we should recalculate and consume the additional space if available on the fly rather than resetting the object

I am not particularly fussed about fixed Large tile.. would you always display it or would you alternate it. Windows 8 image hub tile always shows the large tile.. are you thinking in those terms ?

Coordinator
Jul 30, 2012 at 12:10 AM

Why are you creating a bitmap VS just using a rectangle?

Coordinator
Jul 30, 2012 at 12:14 AM

For large tile size, if I have a 4x4 grid, that means my large tile is always 2x2 versus me able to do a 3x3 or 4x2 tile size.  I'm just thinking in terms of flexablility.  I don't think it is a "show stopper" but something that should be added

Coordinator
Jul 30, 2012 at 12:21 AM

Creating tickets for bugs now for tracking

Coordinator
Jul 31, 2012 at 10:53 PM

With rectangles I am having same issue as with writeable bitmap before. while I can see it being created, I don't see it rendering. I am checking it in, can you have a look

Coordinator
Jul 31, 2012 at 10:54 PM

Will look into it shortly.  For stuff like this, I highly suggest creating a new project and test.  Good way to isolate issues :-)

Coordinator
Aug 1, 2012 at 3:18 PM

i have reverted the code (for accent colored tiles) as i still dont have a clear idea of how to go about it.

I have added code to execute initial loading of items.

Coordinator
Aug 1, 2012 at 6:49 PM

added support for large tile customisation.

Coordinator
Aug 2, 2012 at 6:22 AM

I have a few ideas for accent color tiles.

Coordinator
Aug 2, 2012 at 6:42 AM

invalid grid sizes (<= 0), throw exception or does control react defensively and set it back to 1?  Same with large tile size, IE LargeRow > Row, do we set LargeRow = Row.

Coordinator
Aug 2, 2012 at 9:31 AM

i haven't checked grid rows / columns code :) but for large tiles i started with exception however thought it would be better to LargeRow > Row then LargeRow = Row and thats how i commited it in.

I will check the grid row / column logic and fix it if required.

Coordinator
Aug 2, 2012 at 1:49 PM

had to use Setter methods in properties for range check. otherwise dependency properties were not being called once a value was set to 0. now its all working as it should

Coordinator
Aug 5, 2012 at 6:22 AM

wasn't getting fired in test app, moved the validity check to more callback methods.

Coordinator
Aug 5, 2012 at 11:36 PM

nope definitely not working for me.

Scenario:

1) Start app

2) Reduce rows to 0 (ie our code keeps it to 1 internally)

3) now increase it to 1 and 2 and 3 etc

4) the code does not pick the change as dependency property is not called any more (once ie sets it to zero)

For this reason, I had moved it to property's setter methods and above scenario was still working.

Coordinator
Aug 6, 2012 at 3:11 AM

Large Tile would have the same issue BUT you had twoway binding on :-)

asking around if it is better to be defensive or throw exceptions.  I think based on the stock Slider base control, you should throw exceptions.

Coordinator
Aug 8, 2012 at 7:12 PM

throw exceptions is deemed the "recommended" approach since it mimics how the slider does it and doesn't break binding

Coordinator
Aug 12, 2012 at 8:24 PM

Added into primary release branch now.  Seems like the "on-load" feature doesn't do a 100% load.  will look into this later on today