https://linen.dev logo
Powered by
# haxe-ui
  • b
    Copy code
    haxe
class FancyLabel extends Label {
    public function applyMarkup(plainString:String, markupString:String) {
        var format1 = new FlxTextFormat(0xE6E600, false, false, 0xFF8000);
        var format2 = new FlxTextFormat(0xFFAE5E, false, false, 0xFF8000);
        var format3 = new FlxTextFormat(0x008040, false, false, null);
        var format4 = new FlxTextFormat(0x0080C0, false, false, null);
        var format5 = new FlxTextFormat(0x00E6E6, false, false, null);
        var format6 = new FlxTextFormat(0x0080FF, false, false, 0xFFFFFF);
        
        this.text = plainString;
        this.getTextDisplay().tf.setBorderStyle(FlxTextBorderStyle.OUTLINE, FlxColor.WHITE, 2);
        this.getTextDisplay().tf.applyMarkup(markupString, [
            new FlxTextFormatMarkerPair(format1, "<y>"),
            new FlxTextFormatMarkerPair(format2, "_"),
            new FlxTextFormatMarkerPair(format3, "$"),
            new FlxTextFormatMarkerPair(format4, "^"),
            new FlxTextFormatMarkerPair(format5, "!"),
            new FlxTextFormatMarkerPair(format6, ":")
        ]);
    }
}
  • b
    its a little yucky because you have to set the plainString so it can get the size of the string, you could either use an explict width / height, or someway to strip the tags first and use that to set the .text so it would calc the text bounds
  • b
    Copy code
    haxe
            var fancy = new FancyLabel();
            fancy.styleString = "font-size: 24px";
            fancy.applyMarkup("Formatted via applyMarkup()", "<y>Forma<y>_tted_ $v$^i^!a! apply:Markup():");
  • b
    ^^ @User
  • b
    maybe this is a nicer impl actually:
  • b
    Copy code
    haxe
class FancyLabel extends Label {
    public override function set_text(value:String):String {
        var s = StringTools.replace(value, "<y>", "");
        s = StringTools.replace(s, "_", "");
        s = StringTools.replace(s, "$", "");
        s = StringTools.replace(s, "^", "");
        s = StringTools.replace(s, "!", "");
        s = StringTools.replace(s, ":", "");
        super.set_text(s);
        
        var format1 = new FlxTextFormat(0xE6E600, false, false, 0xFF8000);
        var format2 = new FlxTextFormat(0xFFAE5E, false, false, 0xFF8000);
        var format3 = new FlxTextFormat(0x008040, false, false, null);
        var format4 = new FlxTextFormat(0x0080C0, false, false, null);
        var format5 = new FlxTextFormat(0x00E6E6, false, false, null);
        var format6 = new FlxTextFormat(0x0080FF, false, false, 0xFFFFFF);
        this.getTextDisplay().tf.setBorderStyle(FlxTextBorderStyle.OUTLINE, FlxColor.WHITE, 2);
        this.getTextDisplay().tf.applyMarkup(value, [
            new FlxTextFormatMarkerPair(format1, "<y>"),
            new FlxTextFormatMarkerPair(format2, "_"),
            new FlxTextFormatMarkerPair(format3, "$"),
            new FlxTextFormatMarkerPair(format4, "^"),
            new FlxTextFormatMarkerPair(format5, "!"),
            new FlxTextFormatMarkerPair(format6, ":")
        ]);
        
        return value;
    }
}
  • b
    ok, last one :D
    Copy code
    haxe
class FancyLabel extends Label {
    public var textBorder:Dynamic; // just for ease / prototype
    
    public override function set_text(value:String):String {
        var s = value;
        for (m in _markers) {
            s = StringTools.replace(s, m.marker, "");
        }
        super.set_text(s);
        
        if (textBorder != null) {
            this.getTextDisplay().tf.setBorderStyle(textBorder.style, textBorder.color, textBorder.size);
        }
        this.getTextDisplay().tf.applyMarkup(value, _markers);
        
        return value;
    }
    
    private var _markers:Array<FlxTextFormatMarkerPair> = [];
    public function addFormatMarker(marker:FlxTextFormatMarkerPair) {
        _markers.push(marker);
    }
}
    usage:
    Copy code
    haxe
var fancy = new FancyLabel();
fancy.styleString = "font-size: 24px";
fancy.textBorder = {
    style: FlxTextBorderStyle.OUTLINE,
    color: FlxColor.WHITE,
    size: 2
}
fancy.addFormatMarker(new FlxTextFormatMarkerPair(new FlxTextFormat(0xE6E600, false, false, 0xFF8000), "<y>"));
fancy.addFormatMarker(new FlxTextFormatMarkerPair(new FlxTextFormat(0xFFAE5E, false, false, 0xFF8000), "_"));
fancy.addFormatMarker(new FlxTextFormatMarkerPair(new FlxTextFormat(0x008040, false, false, null), "$"));
fancy.addFormatMarker(new FlxTextFormatMarkerPair(new FlxTextFormat(0x0080C0, false, false, null), "^"));
fancy.addFormatMarker(new FlxTextFormatMarkerPair(new FlxTextFormat(0x00E6E6, false, false, null), "!"));
fancy.addFormatMarker(new FlxTextFormatMarkerPair(new FlxTextFormat(0x0080FF, false, false, 0xFFFFFF), ":"));
fancy.text = "<y>Forma<y>_tted_ $v$^i^!a! apply:Markup():";
mainView.addComponentAt(fancy, 0);
  • m
    That's perfect! It suits all my needs! Thanks a lot!
  • m
    I really needed your help with this one because I was no aware of the most things here like getTextDisplay, applyMarkup, etc
  • m
    How should I go about having an animated image? I found your post (https://community.haxeui.org/t/animating-images-from-a-frameset/293) about animating button backgrounds, but they animate background-image of buttons, is there a css property to animate the resource of an image component?
  • b
    resource
    is the css property, but im not 100% if that is animatable or not... if it isnt it should be easy to make it so
  • b
    can you share the frames? so i can test
  • b
    right, should be working now in latest core (did need some changes):
  • b
    Copy code
    html
    <style>
        @keyframes animateIconButton {
            0%     { icon: "img/image_[[0]].png"; }
            100%   { icon: "img/image_[[54]].png"; }
        }

        @keyframes animateImage {
            0%     { resource: "img/image_[[0]].png"; }
            100%   { resource: "img/image_[[54]].png"; }
        }
        
        #animatedIconButton {
            icon: "img/image_0.png"
        }
        
        #animatedIconButton:hover {
            animation: animateIconButton 1s linear 0s infinite forward forwards;
        }
        
        #animatedImage {
            resource: "img/image_0.png";
            animation: animateImage 1s linear 0s infinite forward forwards;
        }
    </style>
    <hbox>
        <button id="animatedIconButton" text="Animated Icon" />
        <image id="animatedImage" />
    </hbox>
  • o
    when I use haxe-ui my file size is huge. https://github.com/TrilateralX/TrilateralSamples/blob/master/webgl/HtextureBasic/test.js but in my normal code it much smaller https://github.com/TrilateralX/TrilateralSamples/blob/master/webgl/JGradient/test.js although they are not exactly the same experiments the file difference is mostly about inclusion of these libraries. -lib haxeui-core -lib haxeui-html5 -lib hscript Seems -D js-flattern made some of the difference.
  • o
    But file sizes of html5 haxeui target seems very big.. maybe I am doing something bad
  • b
    yeah, haxeui is verrrry unoptimized when it comes to size... its something i keep meaning to sort out
  • b
    no, its not you, its me 🙂
  • o
    well my trilateral code is rather huge
  • o
    I think inline is tricky slope
  • b
    haxeui will be adding like at least 2 extra MB or something... its defo something that can be sorted out, and its defo something that should be sorted out
  • b
    ie, even if you use a single button, boom... +2mb
  • b
    :/
  • o
    hscript seemed not light
  • o
    Someone asked if my experiment was as OS 🙂 oops !
  • b
    im looking to drop hscript also, well, make it optional at least, but the real size jump isnt hscript, its haxeui itself...
  • o
    I tried no_inline but it does not seem to make much difference
  • o
    and think it's not actually not inlining everything
  • o
    Haxeui seems to be registering stuff that it's not using
  • b
    yup
1...479480481...1687Latest