I am looking for a way for a user to select which Image, out of a group of 28 graphics, he or she would like to see.
Here are the details:
I am running a worldwide online conference over 2 1/2 days. I have a schedule (shown in color on the left) and the times they occur in each time zone (the gray columns on the right).
I want to allow a person to see the schedule and just the time zone column that applies to their location.
To do this, I envision making a PNG or JPG of just the schedule, and a separate PNG or JPG for each time zone column (one graphic per time zone) as shown below.
Coming back to my question, I am looking for some type of stack or method where a user can select one image, from a library or resources, or large number of images. The selection would hopefully be done via a drop-down list or maybe a (large!) group of radio buttons.
I haven’t taken time to think this through thoroughly but some of the various “filter” stacks come to mind. You may have to change your approach slightly, but it seems you could have a list/schedule of your class times and tag them with a correlating time zone. Then using a filter stack like @willwood ‘s “Filter Stack” your user could select their time zone, thus seeing only times/schedules that apply to them. Granted not fully hashed our but will perhaps get your gears turning
@danhmill – Thanks for the ideas. I see Will has a less-fancy stack, SortStack, that might work fine since I’m only filtering on one attribute (UTC offset).
I will try that out. In the meantime, if anyone else has suggestions, especially stacks that might take a different approach, please feel free to post here.
(One example that just came to mind is the ability to have a user select just part of a larger image. If I have a large PNG with all time zones, and a user can select a control with an image slice (“show only from X=250 to X=299, and Y=0 to Y=1000”) that could work.)
Essentially we’re dealing with tabular data here (data in table format).
So using images could work, but there could be a lot of extra overheads associated with that. And I imagine that images that are either very wide or very tall would be tricky to view on mobile. Also taking into account of the need for the whole thing to be retina optimised and “pin sharp” to view on any screen. Converting text to images tends to result in a notable downgrade in quality. And lots of high-res images will slow-down page loading.
I think my own approach would be to code the whole thing as an HTML table. Then you are assured everything is going to load quickly and reliably, displayed exactly as you want. As a bonus, you also have the option to set data in the table as links, if the need arises. In addition to building the timetable as a table…
Setup a select menu within the the right-most table column that lets the user choose their preferred timezone.
The select menu could have an onchange handler. Which calls a function that uses the Javascript classList.add() to toggle a class name on the table. That way, you can display the desired timezone data on the table.
The other way to look at it is you are using a select menu to toggle a class name on the table, to regulate which column gets shown there on the right. The columns of non-matches remain hidden.
I know of no stacks around that can do this. But if you want me to have a play and try to get something working, I’ll take a look tomorrow.
Wow, thanks for the “thinking out of the box” and offer to play around.
I should have said that while the original data is in a table (Mac Numbers), the data within the columns is so massaged and specialized that IMHO it is best for me to capture it as a PNG and work with it as an image.
For example, there are different fonts (“Hawaii” is in regular while “Mountain” is in narrow). There are different colors to distinguish when the three days are Nov. 19-20-21 (such as in Hawaii) from when they are Nov. 20-21-22 (such as in Eastern US). There are different colors for the time zone blocks (dark for night, gray for dusk/dawn, white for daytime). There are different cell border widths (4 pts for above midnight, 2 pts for when an event occurs).
I should also mention that my eyes glaze when talk starts of Javascript onchange handlers and class names . So that’s out for me.
I do appreciate your thoughts, and should have mentioned before that I think the table data needs to be handled as images, sorry for that.
I have 28 different time zone images to show (I only did 8 in the picture above). That’s 28 buttons that would be at the top. I need a more compact way to select a filter, such as a drop-down list.
The schedule in the left column does not vertically align with the image in the right column, because the SortStack filter buttons are in the way. I could do a workaround with a blank stack to push down the schedule but I think problem #1 above is more of a showstopper.
On the SortStack control I only see up to 12 tags (“Tag 12 filter”). I added 16 SortStack Items, but still only see filters for 12 tags. I need 28 tags, one for each time zone.
There are other things that don’t look right or work right at various sizes.
However, I think the main problem is that I’m using a stack not really designed to put two parts of an image together where the right part is selected by the user from a group of images.
If you or anyone can think of a different approach or other stack method, I’d appreciate it.
(You did mention the selectable table columns; not sure it would work for this where the column texts and colors vary so much. Perhaps an image slicer for the left, right, top and bottom coordinates: “show me the sections xl=0, xr=400,yt=0,yb=1000;xl=600,xr=650,yt=0,yb=1000”.)
And for prosperity, here it is as a JSFiddle to play with:
Either example works pasted in a RapidWeaver HTML code page or an HTML stack. Just remember to include the CSS code too, otherwise your table won’t have any styling!
Obviously I have only added a couple of conference events and part of the timetable; owing to the fact I don’t have the copyright to this content and it would take longer to setup the complete data. But there is enough data here to experiment with it. I have tested and confirmed that it’s working on all mainstream web browsers and handheld devices. It certainly could be restyled and extended further.
If you really did want to go against my advice and use images for this, the only solution I can think of currently would be to have an Options stack in the page, where users can make their time zone selection from a menu:
Configure Options stack to append the chosen timezone as a query string, in the web browser address bar. Like this:
?timezone=utc-05
Then use QueryDisplay to conditionally hide or show the desired timetable, for that particular time zone:
But this could be quite a clunky setup for the end user. Text often fails to reproduce with much clarity in images. Your images could become very large and harder to view or print.
Whereas the complete table example above is only 15 KB and works practically anywhere.
