Anyone really using the Timline compact layout?

62 views
Skip to first unread message

Matt Denman

unread,
Jul 9, 2013, 11:14:37 AM7/9/13
to simile-...@googlegroups.com
There is only one demo of the compact layout, which has lots of broken image links and some interesting weekday background color highlighting, but otherwise doesn't seem to do much different from the original layout.  I built a demo and what it appears to do is allow the events to scroll when there is not enough height for all the events, however it appears to not be implemented well.

fgalah

unread,
Jul 10, 2013, 4:32:45 AM7/10/13
to simile-...@googlegroups.com
Hi Matt - thanks for all of your work on this. I am (slowly!) trying to build an app that displays events in square boxes. I have used the compact painter but tweaked the code. I can't show you any code at the moment because it uses secure data so I've tried to attach a screenshot. Each event contains a URL for a thumbnail which is inserted as the background image of a div tag, on top of which the title of the event is written. The bubble then shows the full event info if the user clicks on an event tile.

So I am using an extension of the compact painter but I am not properly trained in this stuff so I may be doing things in a stupid manner.

Tim

Matt Denman

unread,
Jul 10, 2013, 11:02:12 AM7/10/13
to simile-...@googlegroups.com
That example is much different than the one shown in the timeline examples page.  That might be a fascinating way to show screen shots from security cameras that would let you zoom in and out of time to see more frames and then click to view the video.

If you're interested, I'd like to get the code for your version of compact painter.


--
You received this message because you are subscribed to a topic in the Google Groups "SIMILE Widgets" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/simile-widgets/paYo_zFK268/unsubscribe.
To unsubscribe from this group and all its topics, send an email to simile-widget...@googlegroups.com.
To post to this group, send email to simile-...@googlegroups.com.
Visit this group at http://groups.google.com/group/simile-widgets.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Matt Denman

unread,
Jul 10, 2013, 11:06:27 AM7/10/13
to simile-...@googlegroups.com
That example would be fantastic to have another label on the left for the other time dimension.

For your example showing years, I'd think that other dimension would be months, such that the top slot would always be jan.

Another example would be if the main timespan was a day rather than a year, the other time dimension could be hours, such that there would be 24 slots available for each day for an image like you show.

I can see you don't stack vertically like that.  Each event for a given year is just stacked to fill the space, but there would be more info if the spacing was by the months those events happened and you had to scroll vertically to see it all.  The compact view supports that types of vertical scrolling.

Matt Denman

unread,
Jul 10, 2013, 11:07:51 AM7/10/13
to simile-...@googlegroups.com
Well, on my Dell 30" monitor, I wouldn't have to scroll vertically to see 24 time slots for the day zoom in compact view.

Tim Fawns

unread,
Jul 15, 2013, 12:39:21 PM7/15/13
to simile-...@googlegroups.com
Hi - yep, I'd be interested in anything you develop along these lines. I will post some code soon, just very busy at the moment.

Tim Fawns

unread,
Jul 15, 2013, 12:42:38 PM7/15/13
to simile-...@googlegroups.com
Re the 2nd time dimension, I currently allow the user to zoom by day, week, month, year, decade etc. Some events are only specified at year level (because we don't know what day or month they happened) which means that you can't know which of 2 events within a particular year came first. If the user zooms to month level, these events don't show up. For more precise data, your solution (e.g. years on horizontal axis and months on vertical) sounds good.

Tim Fawns

unread,
Jul 18, 2013, 9:35:49 AM7/18/13
to simile-...@googlegroups.com
Hi Matt,

I have a pretty specific setup here that has grown a few arms and legs. Some Javascript variables and CSS parameters are set through PHP in interaction with a MYSQL database. To compensate for this, I've attached a temp.html file that is the result of what is produced by the PHP. Because my data are confidential, you would need to use a different JSON string which included icon and description parameters for each event.

As such, I hope that you can make some sense of the attached code for my compact painter! Did I mention that I am also not properly trained and so my code and commenting is probably not very friendly.

If you'd like more info or a discussion around this, please let me know.

Tim
compact-painter.js
temp.html
Reply all
Reply to author
Forward
0 new messages