用plus控件和自动拆分图像的split函数做一个液晶时钟

nlysh007

import win.ui;
/*DSG{{*/
mainForm = win.form(text="时钟";right=465;bottom=244)
mainForm.add(
plus={cls="plus";left=182;top=92;right=190;bottom=121;background="\res\i.png";transparent=1;z=8};
plus1={cls="plus";left=107;top=81;right=136;bottom=130;notify=1;transparent=1;z=2};
plus2={cls="plus";left=142;top=81;right=171;bottom=130;transparent=1;z=3};
plus3={cls="plus";left=200;top=81;right=229;bottom=130;transparent=1;z=4};
plus4={cls="plus";left=235;top=81;right=264;bottom=130;transparent=1;z=5};
plus5={cls="plus";left=293;top=81;right=322;bottom=130;notify=1;transparent=1;z=6};
plus6={cls="plus";left=328;top=81;right=357;bottom=130;notify=1;transparent=1;z=7};
plus7={cls="plus";left=276;top=92;right=284;bottom=121;background="\res\i.png";transparent=1;z=9};
plus9={cls="plus";left=76;top=53;right=385;bottom=159;bgcolor=15780518;z=1}
)
/*}}*/

import gdip.bitmap;

var num = gdip.bitmap("\res\9.png").split(10,1)

var  clock =function(){
    for(k,v in (string.split(tostring(time(,"%H%M%S"))))){
            
        mainForm["plus"++k].background = num[v+1];
            
}
};
    clock();


tmid = mainForm.setInterval(
    1000/*毫秒*/,
    function(hwnd,msg,id,tick){//定时执行代码
        
    clock();
   
    }
);

mainForm.enableDpiScaling();
mainForm.show();

return win.loopMessage();

时钟.7z (5.07 KB, 下载次数: 684)

2018-4-15 21:20 上传

点击文件名下载附件

JacenHe

感谢分享，很有创意的小程序，不用字体文件，就实现了漂亮的液晶时钟。
但是有一个小小的问题，可以改进一下，字体在切换的时候，有轻微的闪烁，这是因为开启了浮动透明，这是Windows自己提供的透明方式，这种方式是会导致闪烁的。

plus功能提供了避免这种闪烁的功能，默认的，plus控件可以开启剪切背景，把父窗口的背景取过来，自己合成再绘图，这样就不闪。但是这需要plus控件直接放在窗体上，而你这个时钟数字是重叠放在另一个plus控件上面的，所以这个功能不适合。

你这个程序可以利用plus控件自己合成前景背景的能力来避免闪烁，操作如下：
1：选中所有plus控件，取消导致闪烁的【浮动透明】属性，然后将背景色设置为相同的背景色。
2、把透明数组这些改为用前景显示（也就是设置foreground属性）。
修改后的代码如下，供参考：

import win.ui;
/*DSG{{*/
mainForm = win.form(text="时钟";right=465;bottom=244)
mainForm.add(
plus1={cls="plus";left=107;top=81;right=136;bottom=131;bgcolor=15780518;notify=1;z=2};
plus2={cls="plus";left=142;top=81;right=171;bottom=131;bgcolor=15780518;z=3};
plus3={cls="plus";left=200;top=81;right=229;bottom=131;bgcolor=15780518;z=4};
plus4={cls="plus";left=235;top=81;right=264;bottom=131;bgcolor=15780518;z=5};
plus5={cls="plus";left=295;top=81;right=322;bottom=129;bgcolor=15780518;z=6};
plus6={cls="plus";left=328;top=81;right=357;bottom=131;bgcolor=15780518;z=7};
plusBk={cls="plus";left=76;top=53;right=385;bottom=159;bgcolor=15780518;z=1};
plusColon1={cls="plus";left=182;top=92;right=189;bottom=121;bgcolor=15780518;foreground="\res\i.png";z=8};
plusColon2={cls="plus";left=276;top=92;right=284;bottom=121;bgcolor=15780518;foreground="\res\i.png";z=9}
)
/*}}*/

var num = gdip.bitmap("\res\9.png").split(10);

var clock = function(){
    var str = tostring(time(,"%H%M%S"));
    for(i=1;#str){
        mainForm[ "plus" + i ].foreground = num[ str[[ i ]] + 1 ];
    }
};
clock();

mainForm.setInterval(1000, lambda() clock() );

mainForm.show();
win.loopMessage();

zhoubujin

不错

nlysh007

Jacen.He 发表于 2018-4-15 10:55
感谢分享，很有创意的小程序，不用字体文件，就实现了漂亮的液晶时钟。
但是有一个小小的问题，可以改进一 ...

仔细看了下，貌似是闪烁是图片的问题，数字对齐有点问题

当然

1：选中所有plus控件，取消导致闪烁的【浮动透明】属性，然后将背景色设置为相同的背景色。
2、把透明数组这些改为用前景显示（也就是设置foreground属性）。

是最保险的

ccbwx

是有，数字有点没有对齐，移动了一点点，现在齐了

nlysh007

ccbwx 发表于 2018-4-15 21:23
是有，数字有点没有对齐，移动了一点点，现在齐了

图片已经换了

JacenHe

原来还有这么一个没对齐的原因，不错不错，分析能力很强

JacenHe

aardio新版已经支持字符映射表，可以将字符自动转换为图像，例如：

winform.plus.fontCharMap = gdip.bitmap($"~\lib\win\ui\lcdClock\.res\lcd.png").split(11).map(
    ["0"] = 1;
    ["1"] = 2;
    ["2"] = 3;
    ["3"] = 4;
    ["4"] = 5;
    ["5"] = 6;
    ["6"] = 7;
    ["7"] = 8;
    ["8"] = 9;
    ["9"] = 10;
    [":"] = 11;
);

然后plus控件就可以自动将字符串转换为液晶时钟效果显示了。

在此基础上封装了一个扩展库，可以更简单的创建液晶时钟效果（感谢楼主提供的数字图像），示例：

import win.ui;
/*DSG{{*/
var winform = win.form(text="液晶计时器控件演示";right=615;bottom=303)
winform.add(
buttonClock={cls="button";text="时钟";left=488;top=80;right=557;bottom=110;z=2};
buttonCountDownTimer={cls="button";text="启动倒计时";left=240;top=176;right=384;bottom=208;z=3};
buttonReset={cls="button";text="重置";left=408;top=80;right=477;bottom=110;z=7};
buttonStop={cls="button";text="暂停";left=320;top=80;right=389;bottom=110;z=5};
buttonTimer={cls="button";text="启动计时器";left=240;top=216;right=384;bottom=248;z=4};
datetimepick={cls="datetimepick";left=64;top=180;right=218;bottom=206;edge=1;updown=1;z=6};
plusBk={cls="plus";left=64;top=62;right=283;bottom=122;z=1}
)
/*}}*/

import win.ui.lcdClock;
var lcdClock = win.ui.lcdClock(winform.plusBk);
lcdClock.startClock();

winform.buttonClock.oncommand = function(id,event){
    lcdClock.startClock()   
}

winform.buttonCountDownTimer.oncommand = function(id,event){
    lcdClock.startCountDownTimer(,function(){
        winform.msgbox("时间到了")
    })
}

winform.buttonTimer.oncommand = function(id,event){
    lcdClock.startTimer()
}

winform.buttonStop.oncommand = function(id,event){
    lcdClock.stop();
}

winform.datetimepick.setFormat("' 设置倒计时: 'mm':'ss");
winform.datetimepick.time = time(0);
winform.datetimepick.onnotify = function(id,code,ptr){
    if(code == 0xFFFFFD09/*_DTN_DATETIMECHANGE*/){
        lcdClock.resetCountDownTimer( winform.datetimepick.time )
    }
}

winform.buttonReset.oncommand = function(id,event){
    lcdClock.resetTimer();
    lcdClock.resetCountDownTimer(winform.datetimepick.time);
}

winform.show()
win.loopMessage();

使用这个库的只要用一个plus控件就可以绘制时钟，可以随意拖拉缩放非常方便。