From bb7cfbc11bc8b85ebaad98d29c2bbb8dc7a0b85f Mon Sep 17 00:00:00 2001 From: Jeremy Goecks Date: Mon, 26 Dec 2011 17:24:30 -0500 Subject: [PATCH] Trackster: use icons for setting data transparency, height based on filter values. --- static/images/fugue/arrow-resize-090-bw.png | Bin 0 -> 1123 bytes static/images/fugue/arrow-resize-090.png | Bin 0 -> 403 bytes static/images/fugue/layer-transparent-bw.png | Bin 0 -> 1299 bytes static/images/fugue/layer-transparent.png | Bin 0 -> 566 bytes static/june_2007_style/blue/trackster.css | 20 ++-- static/june_2007_style/trackster.css.tmpl | 33 ++++-- static/scripts/trackster.js | 108 +++++++++++-------- 7 files changed, 96 insertions(+), 65 deletions(-) create mode 100644 static/images/fugue/arrow-resize-090-bw.png create mode 100755 static/images/fugue/arrow-resize-090.png create mode 100644 static/images/fugue/layer-transparent-bw.png create mode 100755 static/images/fugue/layer-transparent.png diff --git a/static/images/fugue/arrow-resize-090-bw.png b/static/images/fugue/arrow-resize-090-bw.png new file mode 100644 index 0000000000000000000000000000000000000000..1bb4022b03084a377c4ba23936b44fe004a87885 GIT binary patch literal 1123 zcmV-p1f2VcP)4Tx0C)j~RL^S@K@|QrZmG~B2wH0nvUrdpNm;9CMbtL^5n^i$+aIn^?(HA4aZWV5ov6ELTdbo0FI&wK{O>*+w4vx20?>!`FrQsdJlnHR>OPy zcd~b_n$otK2Za4V;76L-DzNVtaSB-y0*E}{p()372;bw_^6ZZ}PI-92wGS&j#91PI zKs7DSe@(bk%_Y-7gGe}(^>I=@oY#w#*Bu9GZf3^F5WP>3rn}7Ut74&?PWBFvy`A)a zPP5)V!Xd&78LdA?xQ(9mjMYElVd13a#D+Z_7&Y|xU=_C-srWU*6kiZcC!$nw*)9$7 zn6CX+@=AhmkT}X@VSsa5NKe;HZuq)~1$`#h6R+ZTR#D-3j}vF!)ZOnz+5)dI4jl{{ z44Mr{P!L4~VVJN`K!!XTF*LGrKO?IK8z<8w`3e3jI8lUGNUta*C8 zn(P`s>{pjD=7Kek#B;Fw@hxAK%$F&Q6vg9J^Xf~4by_hu-=A!MJ3Znq&n~srbFGPs zH&&aMXZ>nO`|hf|ljc?VPhR!${AbO?W8x_>CU%PFA&Hm8F7cAsOREdwU~R_;ot1_u z(ruCYB-LPGn!NQdT|ZlRy+(fw^-+`=%+gee_kY4FWHg<*4sZI8+sFJD270UUORdLHO0nA4V) z%{fwsET5CQ>B?eK%uw4yQc~9?*JVo2}ze(;aRcp*ceL#HUJSllrgm5wQKR zQu+C;QrUh^8rFfA`ftFz{YAidi-`aL010qNS#tmY3ljhU3ljkVnw%H_00A3GL_t(I z5v5ZxYK1@$T_xaw>_i(u**2Xw$N_9pXdzhS3TeDTDj{NT_5WQgEWW$zZhXRmiKBsJ zV0q4)o#)Ij>lkAgW%XOlUG3J|)kX1Id{TG7xm2L4Dz1gD<2d$#@Tq&GKv|Z2S(Yt% z97hHb_~0p#Lj_8!XDKCX+xG5x-iGkOQvwV#piZ9Wx3239kcwOGP=Wo65Q5obISMZY zP&!1e>{I~BvzQt1%1#9y^Mgqt8Su(Z1(2+i+C=^&fZnyy|C<3@xBRymJpC*$Ns@QR zaeT`|AWc*3!oBbN7t32b%s?6Sf!?z$^QURr5I%UD^bPGs?J*2P9!1fuX&M8BzmM;~ p9XON)LBQ8m>NQ>r!*KeXzW^DL^!R3^ngsv=002ovPDHLkV1oa(7ytkO literal 0 HcmV?d00001 diff --git a/static/images/fugue/arrow-resize-090.png b/static/images/fugue/arrow-resize-090.png new file mode 100755 index 0000000000000000000000000000000000000000..dcfa5ab5364f6b4d0093a20d453df6e06bb8f06c GIT binary patch literal 403 zcmV;E0c`$>P)KoFhXvE>fYASw<( zZ90@b9iIzO!XaGx0#tx#sc6z#>FE*)iIN713lJ1O_I}LFvOq{|G>kNweWRVX^IO%n zEiB6J`6FPGunq~9q=mD#B88iiEm#%}-7=(ra(}Rqvt`_Kuah7I?+rHd*~|gkzerXH z=<gZhw~r3LZsJHpK%2-vued$Cny#;9 xz?L!lMLmctm7|*PPcKVQszAi5Zwem*3;=C3&?e^)?5qF)002ovPDHLkV1jC5t5pC1 literal 0 HcmV?d00001 diff --git a/static/images/fugue/layer-transparent-bw.png b/static/images/fugue/layer-transparent-bw.png new file mode 100644 index 0000000000000000000000000000000000000000..5adcf453fe9f23d9318360edc5fdd5cc2591489c GIT binary patch literal 1299 zcmV+u1?>8XP)4Tx0C)j~RL^S@K@|QrZmG~B2wH0nvUrdpNm;9CMbtL^5n^i$+aIn^?(HA4aZWV5ov6ELTdbo0FI&wK{O>*+w4vx20?>!`FrQsdJlnHR>OPy zcd~b_n$otK2Za4V;76L-DzNVtaSB-y0*E}{p()372;bw_^6ZZ}PI-92wGS&j#91PI zKs7DSe@(bk%_Y-7gGe}(^>I=@oY#w#*Bu9GZf3^F5WP>3rn}7Ut74&?PWBFvy`A)a zPP5)V!Xd&78LdA?xQ(9mjMYElVd13a#D+Z_7&Y|xU=_C-srWU*6kiZcC!$nw*)9$7 zn6CX+@=AhmkT}X@VSsa5NKe;HZuq)~1$`#h6R+ZTR#D-3j}vF!)ZOnz+5)dI4jl{{ z44Mr{P!L4~VVJN`K!!XTF*LGrKO?IK8z<8w`3e3jI8lUGNUta*C8 zn(P`s>{pjD=7Kek#B;Fw@hxAK%$F&Q6vg9J^Xf~4by_hu-=A!MJ3Znq&n~srbFGPs zH&&aMXZ>nO`|hf|ljc?VPhR!${AbO?W8x_>CU%PFA&Hm8F7cAsOREdwU~R_;ot1_u z(ruCYB-LPGn!NQdT|ZlRy+(fw^-+`=%+gee_kY4FWHg<*4sZI8+sFJD270UUORdLHO0nA4V) z%{fwsET5CQ>B?eK%uw4yQc~9?*JVo2}ze(;aRcp*ceL#HUJSllrgm5wQKR zQu+C;QrUh^8rFfA`ftFz{YAidi-`aL010qNS#tmY3ljhU3ljkVnw%H_00GNML_t(I z5v5W~ZW=)looPZA<|A2w5ub?_E`Ve%#D**Q5?CC9vv`fdiY*qb2#ACMGcccSzgM{1 zpM?`CCG}L*tKaMD@r^Ow|Hu~>_xt@Ds9T&8{eO@r!T@{l zbBfM2L2X3Q^ni)x$Kp(74KaHKRjbu>xmuRW$N3{;A~!#{o{Lx+O3->sVGc0e9ot(;7W%tgQDzwui zMTvQ3Kst-XLhp9Fe81nH+wJzDQmJTcTumku!_6bd^m;vEhAYsQ2J)f9y==GJc(d6Y z;d4@fcmaZqizdcH-!`y2P{-pj!SsYd8T0aiZ*YXV#pTK$uYjK@FO^E1;LT<;o9lJE zU1wW72m)cpfPKaS?kUs=!ln{=JKW;MVv!AGm^8pMo#yj-*6DPv`8zcl4O{PFna(DT zm8jKfg_7jNfHX+c^kFm_eZ{nEm;H%>9sCBH2d4ONK1uz1=oxn343>)fpd$bP002ov JPDHLkV1n2?b=&{| literal 0 HcmV?d00001 diff --git a/static/images/fugue/layer-transparent.png b/static/images/fugue/layer-transparent.png new file mode 100755 index 0000000000000000000000000000000000000000..40cbb90e35de2820c9d4404162f2ec63ce0b3e59 GIT binary patch literal 566 zcmV-60?GY}P)G<=>|obfA7w?!JlnE_9flnMv! zm3ldslwx@vIZ2wl0n}^rs_aS=-MhK7qR*ci7H53bouf{{8lWRqpjj-Zza*aeFcHhx z4`U%>HAXHuzUZ4C*4kd3G^@oN1=Fx7JN%o?FDu|v;1TNk!SncWBt)}iGC3$> z9GvvVFqR!Ht}s&pZ2}QRgK!c7X63mX*FO+1L1<@n3)e03|^Yn9Aqing9R*07*qoM6N<$ Ef_NPF=Kufz literal 0 HcmV?d00001 diff --git a/static/june_2007_style/blue/trackster.css b/static/june_2007_style/blue/trackster.css index f175fb5cdbc..47b38c87f98 100644 --- a/static/june_2007_style/blue/trackster.css +++ b/static/june_2007_style/blue/trackster.css @@ -44,19 +44,19 @@ input{font:10px verdana;} .dynamic-tool,.filters{margin-left:0.25em;padding-bottom:0.5em;} .dynamic-tool{width:410px;} -.filters > .sliders,.display-controls{float:left;margin:1em;} -.sliders{width:410px;} -.display-controls{border-left:solid 2px #DDDDDD;padding-left:1em -} -.filter-row { - margin-top:0.4em;} -.slider-row{margin-left:1em;} -.elt-label{float:left;font-weight:bold;margin-right:1em;} -.slider{float:right;width:200px;position:relative;} +.filters{float:left;margin:1em;width:60%;position:relative;} +.display-controls{float:left;margin-left:1em;} +.slider-row{margin-left:1em;height:16px;} +.elt-label{float:left;width:20%;font-weight:bold;margin-right:1em;} +.slider{float:left;width:40%;position:relative;padding-top:2px;} .tool-name{font-size:110%;font-weight:bold;} .param-row{margin-top:0.2em;margin-left:1em;} .param-label{float:left;font-weight:bold;padding-top:0.2em;} .menu-button{margin:0px 4px 0px 4px;} +.layer-transparent{background:transparent url(../images/fugue/layer-transparent-bw.png) no-repeat;} +.layer-transparent.active{background:transparent url(../images/fugue/layer-transparent.png) no-repeat;} +.arrow-resize-090{background:transparent url(../images/fugue/arrow-resize-090-bw.png) no-repeat;} +.arrow-resize-090.active{background:transparent url(../images/fugue/arrow-resize-090.png) no-repeat;} .layers-stack{background:transparent url(../images/fugue/layers-stack-bw.png) no-repeat;} .layers-stack:hover{background:transparent url(../images/fugue/layers-stack.png) no-repeat;} .chevron-expand{background:transparent url(../images/fugue/chevron-expand-bw.png) no-repeat;} @@ -92,4 +92,4 @@ input{font:10px verdana;} .intro{padding:1em;} .intro > .action-button{background-color:#CCC;padding:1em;} .feature-popup{position:absolute;z-index:1000;padding:5px;font-size:10px;filter:alpha(opacity=80);background-repeat:no-repeat;background-image:url(../images/tipsy.gif);background-position:top center;} -.feature-popup-inner{padding:5px 8px 4px 8px;background-color:black;color:white;} +.feature-popup-inner{padding:5px 8px 4px 8px;background-color:black;color:white;} \ No newline at end of file diff --git a/static/june_2007_style/trackster.css.tmpl b/static/june_2007_style/trackster.css.tmpl index 672ca6ec490..6dff924d0b5 100644 --- a/static/june_2007_style/trackster.css.tmpl +++ b/static/june_2007_style/trackster.css.tmpl @@ -255,32 +255,31 @@ input { .dynamic-tool { width:410px; } -.filters > .sliders, .display-controls { +.filters { float: left; margin: 1em; -} -.sliders{ - width: 410px; + width: 60%; + position:relative; } .display-controls { - border-left: solid 2px #DDDDDD; - padding-left: 1em -} -.filter-row { - margin-top:0.4em; + float: left; + margin-left: 1em; } .slider-row { margin-left: 1em; + height: 16px; } .elt-label { float: left; + width: 20%; font-weight: bold; margin-right: 1em; } .slider { - float: right; - width: 200px; + float: left; + width: 40%; position: relative; + padding-top:2px; } .tool-name { font-size: 110%; @@ -298,6 +297,18 @@ input { .menu-button { margin: 0px 4px 0px 4px; } +.layer-transparent { + background: transparent url(../images/fugue/layer-transparent-bw.png) no-repeat; +} +.layer-transparent.active { + background: transparent url(../images/fugue/layer-transparent.png) no-repeat; +} +.arrow-resize-090 { + background: transparent url(../images/fugue/arrow-resize-090-bw.png) no-repeat; +} +.arrow-resize-090.active { + background: transparent url(../images/fugue/arrow-resize-090.png) no-repeat; +} .layers-stack { background: transparent url(../images/fugue/layers-stack-bw.png) no-repeat; } diff --git a/static/scripts/trackster.js b/static/scripts/trackster.js index 9aa9c0bdb6b..2cc088934bb 100644 --- a/static/scripts/trackster.js +++ b/static/scripts/trackster.js @@ -153,6 +153,15 @@ var get_random_color = function(colors) { return '#' + ( 0x1000000 + new_color ).toString(16).substr(1,6); }; +/** + * Creates an action icon. + */ +var create_action_icon = function(title, css_class, on_click_fn) { + return $("").attr("href", "javascript:void(0);").attr("title", title) + .addClass("icon-button").addClass(css_class).tipsy( {gravity: 's'} ) + .click(on_click_fn); +}; + // Encapsulate -- anything to be availabe outside this block is added to exports var trackster_module = function(require, exports) { @@ -2100,19 +2109,18 @@ var FiltersManager = function(track, filters_list) { }); // - // Create sliders div. + // Create sliders. // - var sliders_div = $("
").addClass("sliders").appendTo(this.parent_div); var manager = this; $.each(this.filters, function(index, filter) { - filter.container = $("
").addClass("filter-row slider-row").appendTo(sliders_div); + filter.container = $("
").addClass("filter-row slider-row").appendTo(manager.parent_div); // Set up filter label (name, values). var filter_label = $("
").addClass("elt-label").appendTo(filter.container) var name_span = $("").addClass("slider-name").text(filter.name + " ").appendTo(filter_label); var values_span = $(""); var values_span_container = $("").addClass("slider-value").appendTo(filter_label).append("[").append(values_span).append("]"); - + // Set up slider for filter. var slider_div = $("
").addClass("slider").appendTo(filter.container); filter.control_element = $("
").attr("id", filter.name + "-filter-control").appendTo(slider_div); @@ -2142,59 +2150,71 @@ var FiltersManager = function(track, filters_list) { // Enable users to edit slider values via text box. edit_slider_values(values_span_container, values_span, filter.control_element); + // Set up filter display controls. + var + display_controls_div = $("
").addClass("display-controls").appendTo(filter.container), + transparency_icon = create_action_icon("Use filter for data transparency", "layer-transparent", + function() { + if (manager.alpha_filter !== filter) { + // Setting this filter as the alpha filter. + manager.alpha_filter = filter; + // Update UI for new filter. + $(".layer-transparent").removeClass("active").hide(); + transparency_icon.addClass("active").show(); + } + else { + // Clearing filter as alpha filter. + manager.alpha_filter = null; + transparency_icon.removeClass("active"); + } + manager.track.request_draw(true, true); + } ) + .appendTo(display_controls_div).hide(), + height_icon = create_action_icon("Use filter for data height", "arrow-resize-090", + function() { + if (manager.height_filter !== filter) { + // Setting this filter as the height filter. + manager.height_filter = filter; + // Update UI for new filter. + $(".arrow-resize-090").removeClass("active").hide(); + height_icon.addClass("active").show(); + } + else { + // Clearing filter as alpha filter. + manager.height_filter = null; + height_icon.removeClass("active"); + } + manager.track.request_draw(true, true); + } ) + .appendTo(display_controls_div).hide(); + + filter.container.hover( function() { + transparency_icon.show(); + height_icon.show(); + }, + function() { + if (manager.alpha_filter !== filter) { + transparency_icon.hide(); + } + if (manager.height_filter !== filter) { + height_icon.hide(); + } + } ); + // Add to clear floating layout. $("
").appendTo(filter.container); }); // Add button to filter complete dataset. if (this.filters.length !== 0) { - var run_buttons_row = $("
").addClass("param-row").appendTo(sliders_div); + var run_buttons_row = $("
").addClass("param-row").appendTo(this.parent_div); var run_on_dataset_button = $("").attr("value", "Run on complete dataset").appendTo(run_buttons_row); var filter_manager = this; run_on_dataset_button.click( function() { filter_manager.run_on_dataset(); }); } - - // - // Create filtering display controls. - // - var - display_controls_div = $("
").addClass("display-controls").appendTo(this.parent_div), - formatting_div, - header_text, - select, - // TODO: find better way to specify and change control filters. - filter_controls_dict = { - "Transparency": function(new_filter) { manager.alpha_filter = new_filter; }, - "Height" : function(new_filter) { manager.height_filter = new_filter; } - }; - $.each(filter_controls_dict, function(control_name, filter) { - // Display name and select option. - formatting_div = $("
").addClass("filter-row").appendTo(display_controls_div), - header_text = $("").addClass("elt-label").text(control_name + ":").appendTo(formatting_div), - select = $("