66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<template>
|
|
<div class="preview-root">
|
|
<div class="preview-ctn">
|
|
<div :style="qft.bgStyle" />
|
|
<PreviewString v-if="qft" :x="qft.x" :y="qft.y" :size="qft.fontSize" :color="qft.color" text="0:00:00" />
|
|
<PreviewString v-if="mdp" :x="mdp.x" :y="mdp.y" :size="mdp.fontSize" :color="mdp.color" :text="mdp.text" />
|
|
<PreviewString :x="16" :y="320" :size="20" :color="'#fff'" text="Pattern #0 0 0" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
config: {type: Object},
|
|
},
|
|
computed: {
|
|
mdp() {
|
|
return {
|
|
x: 16,
|
|
y: 200,
|
|
fontSize: 20,
|
|
color: '#fff',
|
|
text: 'X Pos -4\nY Pos 27\nZ Pos -1515\nAngle 3117\nH Spd 4.26\nV Spd 4.28',
|
|
};
|
|
},
|
|
qft() {
|
|
const {config: {qft}} = this;
|
|
if (qft == null) return;
|
|
const {x, y, fontSize, fgRGB, fgA, fgRGB2, fgA2, bgRGB, bgA, width} = qft;
|
|
const i2s = (rgb, a) => '#'+rgb.toString(16).padStart(6, '0')+a.toString(16).padStart(2, '0');
|
|
const bg = i2s(bgRGB, bgA);
|
|
const fg1 = i2s(fgRGB, fgA);
|
|
return {
|
|
x, y, fontSize,
|
|
color: fgRGB2==null || fgA2==null ? fg1 : `linear-gradient(180deg, ${fg1}, ${i2s(fgRGB2, fgA2)})`,
|
|
bgStyle: {
|
|
left: x+'px',
|
|
top: (y-fontSize)+'px',
|
|
width: (width*fontSize/20)+'px',
|
|
height: fontSize+'px',
|
|
background: bg,
|
|
},
|
|
};
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
div.preview-root {
|
|
position: relative;
|
|
width: 600px;
|
|
height: 448px;
|
|
background: url(/img/preview/background.png);
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
div.preview-ctn {
|
|
position: absolute;
|
|
top: -16px;
|
|
}
|
|
div.preview-ctn * {
|
|
position: absolute;
|
|
}
|
|
</style>
|