Slider avec markage personnalisé

Version imprimable

30/08/2013, 20h17
tchize_

Slider avec markage personnalisé

Je dois créer pour une application un slider où on aimerais bien indiquer des "marques". Le slider permet d'avancer dans une animation et les marques doivent représenter les endroits où il y a des éléments clés de l'animation.
Malheureusement, avec JSlider, il n'est pas possible de fournir une liste de marques à afficher, elle sont juste affichées à intervale régulier.

Il faudrait pouvoir cliquer aussi sur ces marques pour aller exactement à cette valeur (pas une ou deux valeurs à coté). Je cherche quelque chose de proche de ce qu'on trouve dans VLC sur ce screenshot, où l'on vois les chapitres de la vidéo dans la timeline:

http://images1.videolan.org/vlc/scre...c-2.0-win7.jpg
Quelqu'un à une idée d'où je peux trouver ça? Pas envie de tout coder :)
31/08/2013, 14h40
joel.drigo

Salut,

on peut afficher des labels à des positions non régulières dans un JSlider avec public void setLabelTable(Dictionary labels). Le problème c'est qu'on ne peut pas cliquer sur les labels pour aller directement à l'endroit associé. Et le look n'a rien à voir avec la seekbar de vlc évidemment.

Pour limiter le boulot pour faire un slider avec accès direct à des positions, tu peux peut être partir du code fourni avec ce tutoriel :
https://today.java.net/pub/a/today/2...component.html.
31/08/2013, 16h30
tchize_

Le problème, c'est que l'exemple utilise un slider sur le coté. J'y avais pensé (slider + JComponent affichant les données, ou marqueurs en surimpression), mais le problème, c'est qu'il n'y a aucun moyen pour savoir où comment et où fini le track du slider, du coup, mes marqueur peuvent être décalés de quelques pixels. Et c'est problématiqué :)
31/08/2013, 17h01
joel.drigo

Ah oui j'avais pas fait gaffe qu'il ne fonctionnait qu'en mode vertical. Dommage, ça fait pas mal de boulot pour le modifier pour qu'il puisse fonctionner en mode horizontal, en particulier pour détecter le clic sur une étiquette.

J'avais trouvé un autre lien sympa dans le genre, mais il est fait un peu l'inverse de ce que tu veux : il est prévu juste pour empêcher de slider sur des valeurs intermédiaires.Et il date, alors il n'intègre pas la notion de LabelTable.: j'ai pas regardé ce que ça pouvait coûter en temps d'adaptation. Sans parler d'un petit bug bizarre avec le laf metal (mineur dans la mesure ou le laf nimbus est plus joli en ce qui me concerne).
31/08/2013, 19h03
tchize_

Je crois que je vais finir par modifier le slider de openjide, puisque là j'ai les sources, mais ça m'ennuie d'embarquer toute cette bibliothèque pour juste un composant :aie:
31/08/2013, 19h45
joel.drigo

Citation:

Envoyé par tchize_

Je crois que je vais finir par modifier le slider de openjide, puisque là j'ai les sources, mais ça m'ennuie d'embarquer toute cette bibliothèque pour juste un composant :aie:

Je connaissais le rangeslider de jide, qu'on utilisait dans ma boite y'a plusieurs années (je suppose qu'il y a les mêmes composants dans jide et openjide), mais je ne savais pas qu'il y avait un slider maintenant (à ma connaissance y'en avait pas à l'époque). Je viens de rejeter un coup d'oeil vite fait mais je ne le trouve pas. Par curiosité, tu as un lien ou un nom de classe ?
31/08/2013, 20h57
tchize_

oui, il y a un range slider que je compte adapter, pour retirer le range et rajouter les images qui me manquent :)

Mon problème pour créer des composants custom, c'est surtout que c'est moche quand je le fais :)
31/08/2013, 21h48
joel.drigo

Citation:

Envoyé par tchize_

oui, il y a un range slider que je compte adapter, pour retirer le range et rajouter les images qui me manquent :)

Ah ok. Je me disais aussi.

Citation:

Envoyé par tchize_

Mon problème pour créer des composants custom, c'est surtout que c'est moche quand je le fais :)

C'est un problème commun à beaucoup de développeurs. On est pas forcément des artistes graphistes, mais suffisamment pour nous apercevoir que ce qu'on fait est plutôt moche parfois ;)

En tout cas, ce composant (celui de vlc) me motive bien personnellement, surtout que pour le moment j'ai rien vu d'équivalent lors de mes recherches. Je vais peut être profiter de mes congés pour me pencher la dessus.
03/09/2013, 14h39
tchize_
Bon, visiblement, pas grand chose à tirer du RangeSliderUI. Il se base sur le JSliderUI des différent look and feel et se contente de faire ceci:
Code:

1 2 3 4 5 dessin normal changer le current value sans lancer d'event dessin du thumb remettre le current value sans lancer d'event
:aie:

Par contre en jettant un oeil au code, j'ai vu qu'on peux facilement sur l'UI du slider récupérer le Rectangle du Track et des ticks. Je vais voir comment utiliser ça pour y dessiner des trucs en plus.
03/09/2013, 15h04
joel.drigo

Citation:

Envoyé par tchize_

Par contre en jettant un oeil au code, j'ai vu qu'on peux facilement sur l'UI du slider récupérer le Rectangle du Track et des ticks. Je vais voir comment utiliser ça pour y dessiner des trucs en plus.

En effet, les dimensions du rectangle du track pourraient te permettre de résoudre aussi le problème que tu citais dans ton précédent post :

Citation:

Envoyé par tchize_

Le problème, c'est que l'exemple utilise un slider sur le coté. J'y avais pensé (slider + JComponent affichant les données, ou marqueurs en surimpression), mais le problème, c'est qu'il n'y a aucun moyen pour savoir où comment et où fini le track du slider, du coup, mes marqueur peuvent être décalés de quelques pixels. Et c'est problématiqué :)

1 pièce(s) jointe(s)

TADAAAA

finalement quand on sais ou chercher, ça va vite :mouarf:

voilà un exemple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
public class MetalTimelineUI extends MetalSliderUI {
 
	@Override
	public void paintTicks(Graphics g) {
		System.out.println("paint ticks "+tickRect);
		Rectangle tickBounds = tickRect;
		TimelineView timelineView = (TimelineView)slider;
        AnimationModel model = timelineView.getAnimationModel();
		Collection<? extends AbstractElementAnimation<?, ?>> surveyed = timelineView.getSurveyed();
        g.translate( 0, tickBounds.y);
		for (int i : model.getKeyFrames()){
			List<AbstractElementAnimation<?, ?>> elements = new ArrayList<AbstractElementAnimation<?,?>>(model.getAnimatedElementsAt(i));			
			if (surveyed!=null)
				elements.retainAll(surveyed);
			int xPos = xPositionForValue( i );
			if (elements.size()>1)
				paintMajorTickForHorizSlider( g, tickBounds, xPos );
			else if (elements.size()==1)
				paintMinorTickForHorizSlider( g, tickBounds, xPos );
		}
		g.translate( 0, -tickBounds.y);
	}
 
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class TimelineView extends JSlider {
 
	private static final String uiClassID = "TimelineViewUI";
	public void setUI(SliderUI ui){
		super.setUI(ui);
	}
 
    public void updateUI() {
        if (UIManager.get(getUIClassID()) != null) {
            setUI((SliderUI) UIManager.getUI(this));
        } else {
            setUI(new MetalTimelineUI());
        }
    }
 
    public SliderUI getUI() {
        return (SliderUI) ui;
    }
 
    public String getUIClassID() {
        return uiClassID;
    }

et le résultat:

http://www.developpez.net/forums/att...1&d=1378216990

Plus qu'à gérer les clicks, mais ça devrais aller :)

13/03/2014, 12h17
kkt8

Salut Tchize !

je suis intéressée par ce que tu as fait ... mais il doit manquer un bout de code dans ce que tu as mis de ta classe TimelinsView.
A quoi correspond : AnimationModel model = timelineView.getAnimationModel(); ?

D'avance merci
Chris
13/03/2014, 12h45
tchize_

C'est mon propre modèle de donnée, c'est à partir de celui là que je récupère les information concernant les points à mettre en évidence. Ce n'est pas vraiment relevant pour l'exemple. Dans ton cas ce sera probablement traité différement. Je n'ai mis que le principal: afficher les marqueurs en fonction d'une liste d'index à marquer.
13/03/2014, 16h50
kkt8

Merci beaucoup de ta réponse, je vais regarder :)