[Java] Graphics: Het maken van grote counters

[Snow_King]

Hi,

Ik ben bezig een .Net applicatie om te schrijven naar Java toe ( de beweegredenen doen er even niet toe ).

Deze .Net is door een programmeur snel in elkaar gezet als proof of concept en ik probeer dit nu in Java te herschrijven.

Bij de GUI loop ik nu echter even vast.



In .Net is het erg makkelijk om zulke "counters" te maken, in Java lijkt dit niet echt makkelijk.

Ik ben al aan de slag gegaan met het Swing component "JFormattedTextField", maar dat lijkt hem ook niet te worden.

Ik sta nu op het punt dit te gaan tekenen met de old-skool java.awt.Graphics library, maar dat is ook niet echt wenselijk.

Iemand een idee?

[sig69]

Heb je het lettertype van die counters? Of worden ze custom getekend? Als je het lettertype heb kan je toch gewoon wat labels neerzetten met een grote font size?

[bat266]

een andere oplossing kan zijn plaatjes van 0-9 neer te zetten afhankelijk van het gewenste getal, is iets makkelijker dan AWT-graphics imho

[krvabo]

Gaat het om de layout, of gaat het om de functionaliteit?

Anders kun je nog eens kijken naar Apache Commons Lang die een stopwatchfunctionaliteit heeft.. Doc

public String toSplitString()

Gets a summary of the split time that the stopwatch recorded as a string.

The format used is ISO8601-like, hours:minutes:seconds.milliseconds.

[Snow_King]

Het is puur functioneel, ik wil die tellers laten lopen, maar er is een andere thread die de gametijd en scores bij houdt.

Maar aan het lettertype kan ik wel komen. Ook is het plaatjes idee geen slechte.

[Snow_King]

Uiteindelijk was het JLabel de optie, hier een stukje code voor iemand die dat interessant vindt.

code:

    JLabel redScore = new JLabel("13:21");
    JLabel blueScore = new JLabel("22:41");
    
    blueScore.setForeground(Color.BLUE);
    redScore.setForeground(Color.RED);

    try {
        Font ttf = Font.createFont(Font.TRUETYPE_FONT, new BufferedInputStream(new FileInputStream("resource/fonts/SFDigitalReadout-Heavy.ttf"))).deriveFont(Font.TRUETYPE_FONT, 50);
        blueScore.setFont(ttf);
        redScore.setFont(ttf);
    } catch (Exception e) {
        Logger.msg("Error", "Error loading font: " + e.getMessage());
    }

    Container cp = getContentPane();
    cp.setLayout(new FlowLayout());
    cp.add(blueScore);
    cp.add(redScore);

[Cobalt]

Je zou de Java GUI ook in JavaFX kunnen bouwen.

Een voorbeeld van een stopwatch met een strakke GUI. http://javafx.com/samples/StopWatch/index.html

Een code achter van een counter zou er als volgt uit kunnen zien.

code:

package form1;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.control.Label;
import javafx.scene.control.Button;
import javafx.scene.text.Font;
import javafx.scene.paint.Color;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.transition.ParallelTransition;

def font: Font = Font {
    name: "SFDigitalReadout-Heavy"
    size: 50
}

var minutes: Integer = 0;
var seconds: Integer = 0;
var timeString: String = bind "{%02d minutes}:{%02d seconds}";

var counterLabel = Label {
    text:  bind "{timeString}"
    font: font
    textFill: Color.RED
}

var transition: ParallelTransition = ParallelTransition {
    node: counterLabel
    content: [
        Timeline {
            repeatCount: 3600
            keyFrames:[
                KeyFrame {
                    time: 1s 
                    action: function() {
                        if(seconds < 60) {
                            seconds++ 
                        } else {
                            seconds = 0;
                            minutes++; 
                        }
                    }
                }
            ]
        }
    ]
}
                        
Stage {
     title : "Form1"
     scene: Scene {
        content: [
            VBox {
                content: [
                    counterLabel,
                    Button {
                        text: bind if(transition.running) "Stop" else "Start" 
                        action: function(){
                            if(transition.running) transition.stop() else transition.play()
                        }
                    }
                ]
            }
        ]
     }
}

[ Voor 22% gewijzigd door Cobalt op 08-02-2010 23:40 ]

[Snow_King]

Dat ziet er erg goed uit! Overigens ga ik het project Open Source maken, dus zodra ik het geheel draaiend heb, dan zal ik hier nog wel een linkje plaatsen naar het project.

[Cobalt]

Ik heb net even snel, mijn vorige code sampel aangepast. Nu is het wat netter met aparte klasse voor Counter, het kan nog wat netter, ik heb het ook maar even snel in elkaar gezet.

code:

package form1;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.Node;
import javafx.scene.Group;
import javafx.scene.layout.VBox;
import javafx.scene.layout.HBox;
import javafx.scene.layout.LayoutInfo;
import javafx.geometry.BoundingBox;
import javafx.scene.control.Label;
import javafx.scene.control.Button;
import javafx.scene.control.Control;
import javafx.scene.control.Skin;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.paint.Color;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.transition.ParallelTransition;

// custom font is gedefinieerd in META-INF/fonts.mf en de font zit in de folder /fonts
def font: Font = Font {
    name: "SFDigitalReadout-Heavy"
    size: 50
}

class Counter extends Control {
    
    override public-read protected var layoutBounds = BoundingBox {
        height: 70
        width: 220
    }
    
    public var minutes: Integer = 0;
    public var seconds: Integer = 0;
    
    public var label: String;
    
    // deze methode wordt aangeroepen bij het aanmaken van het object
    override public function create(): Node {
        if(skin == null)
           skin =  CounterSkin{}
        super.create();
    }
    
    public function isRunning(): Boolean {
        return (skin as CounterSkin).transition.running;
    }
    
    public function play(): Void {
        (skin as CounterSkin).transition.play();
    }
    
    public function stop(): Void {
        (skin as CounterSkin).transition.stop();
    }
    
    public function reset(): Void {
        seconds = 0;
        minutes = 0;
    }
       
}

class CounterSkin extends Skin {
    
    var timeString: String = bind "{%02d (control as Counter).minutes}:{%02d (control as Counter).seconds}";
    
   // bind kan je vergelijke met een Observer pattern, als timeString veranderd dan wordt de text van redScore 
   //geupdate. bind ... with inverse is ook mogelijk in sommige gevallen dan wordt timeString ook geupdate als 
   //de text van redScore gewijzigd wordt.
    var redScore: Label = Label {
        text:  bind "{timeString}"
        font: font
        textFill: Color.RED
    }
    
    public var transition: ParallelTransition = ParallelTransition {
        node: redScore
        content: [
            Timeline {
                repeatCount: 3600
                keyFrames:[
                    KeyFrame {
                        time: 1s 
                        action: function() {
                            if(seconds < 60) {
                                seconds++ 
                            } else {
                                seconds = 0;
                                minutes++; 
                            }
                        }
                    }
                ]
            }
        ]
    }
    // draw de counter
    init {
        node = Group {
            content: [
                Text{ x: 20 y: 15 content: "Totals" fill: Color.BLUE}
                Rectangle{x:10 y: 10 height: 50 width: 200 strokeWidth: 1 stroke: Color.LIGHTGREY fill: Color.TRANSPARENT}
                HBox {
                    layoutX: 20
                    layoutY: 20
                    content: [
                        redScore
                    ]
                }
            ]
        }
    }
        
    override function contains(localX: Number, localY: Number): Boolean {
        node.contains(localX, localY);
    }
    
    override function intersects(localX: Number, localY: Number,
        localWidth: Number, localHeight: Number): Boolean {
        node.intersects(localX, localY, localWidth, localHeight);
    }
}


// instantieren van een object Counter. Counter{} is aanroepen van de default constructor.
var counter: Counter = Counter{};

                    
Stage {
     title : "Form1"
     width: 250
     height: 150
     scene: Scene {
        content: [
            Group {
                content: [
                    VBox {
                        content: [
                            counter,
                            Button {
                        text: bind if(counter.isRunning()) "Stop" else "Start" 
                                action: function(){
                                    if(counter.isRunning()) counter.stop() else {counter.reset(); counter.play();}
                                }
                                layoutInfo: LayoutInfo {
                                    width: 100
                                    height:40   
                                }
                            }
                        ]
                    }
                ]   
            }   
         ]
    }
}