Parade Series

var cvs = document.getElementById('mainCanvas');
var ctx = cvs.getContext('2d');
1
2

var seconds2Time = function(datum) {
    var result = '';
    var hh = Math.floor(datum / 3600);
    var mm = Math.floor((datum - (hh * 3600)) / 60);
    var ss = datum - (hh * 3600) - (mm * 60);

    ss = Math.round(ss * 100) / 100

    result += '' + (hh < 10 ? "0" + hh : hh);
    result += ':' + (mm < 10 ? "0" + mm : mm);
    result += ':' + (ss  < 10 ? "0" + ss : ss);

    return result;
}

console.log('seconds2Time', 60, seconds2Time(60));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

if (true) {
	var x0, y0, w0, h0， delta;

	x0 = y0 = w0 = h0 = delta = 0;
	w0 = parseInt(dynamic_form_device.devWidth);
	h0 = parseInt(dynamic_form_device.devHeight);
	delta = 80

	ctx.strokeStyle = 'white';
	ctx.beginPath();
	drawRect(ctx, 0 + delta, 0 + delta, w0 - 2*delta, h0 - 2*delta);
	ctx.stroke();
	ctx.closePath();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

comTextColor = comTextColor.replaceAll('=#', '=');
comTextColor = comTextColor.replaceAll('=%23', '=');
1
2

comImagePath = encodeURIComponent(comImagePath);
devImagePath = encodeURIComponent(devImagePath);

this.comImagePath = decodeURIComponent(this.comImagePath);
this.devImagePath = decodeURIComponent(this.devImagePath);
1
2
3
4
5

var hex2Rgba = (hexColor, alpha = 0.9) => {
    var result = '';
    var color = hexColor.slice(1);
    var rgba = [
        parseInt("0x" + color.slice(0, 2)),
        parseInt("0x" + color.slice(2, 4)),
        parseInt("0x" + color.slice(4, 6)),
        alpha
    ];
    result = 'rgba(' + rgba.toString() + ')';
    console.log(hexColor, '>>>>', result);
    return result;
};
1
2
3
4
5
6
7
8
9
10
11
12
13

if (true) {
    var width  = metrics.width + metrics.actualBoundingBoxAscent;
    var height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
    ctx.fillStyle = hex2Rgba(dynamic_form_device.comTimeBackgroundColor);
    ctx.fillRect(x0, y0 - metrics.actualBoundingBoxAscent, width, height);
  	ctx.stroke();
}
1
2
3
4
5
6
7

var parade_facade = {
    "device": {},
    "image": [],
    "text": [],
    "video": [],
    "caption": [],
    "time": []
};

var dynamic_parade_url = '';
var urlParameter = function(param) {
    var token = param.replace(/[]/, '\[').replace(/[]/, '\[').replace(/[]/, '\\\]');
    var regex = new RegExp('[\\?&]' + token + '=([^&#]*)');
    var result = regex.exec(dynamic_parade_url);

    if (result == null)
        return '';
    else
        return decodeURI(result[1]);
};
var param2json = function() {
    parade_facade.device.portrait = urlParameter('devPortrait');
    parade_facade.device.height   = urlParameter('devHeight');
    parade_facade.device.width    = urlParameter('devWidth');
    parade_facade.device.image    = urlParameter('devImagePath');
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

if (true) {
	$('input[name="devPortrait"]').get(0).checked = true;
	console.log('>>>>', $('input[name="devPortrait"]:checked').val());
}
1
2
3
4

<select class="form-select" dropup=true id="comTimeFormat" name="comTimeFormat">
	<option value="yyyy年MM月dd日 HH:mm:ss">yyyy年MM月dd日 HH:mm:ss</option>
	<option value="yyyy年MM月dd日">yyyy年MM月dd日</option>
	<option value="HH:mm:ss">HH:mm:ss</option>
</select>
1
2
3
4
5

	$('#comTimeFormat').val(timeFormat);
	$('#select2-comTimeFormat-container').attr('title', timeFormat);
	$('#select2-comTimeFormat-container').html(timeFormat);
1
2
3