11
3rd Party Plugins - (fb2k) / Re: JScript Panel script discussion/help
Last post by eurekagliese -Here's a quick and dirty bodge job for having album art above the text and a blurred album art background.Code: [Select]// ==PREPROCESSOR==
// @name "Text Display"
// @author "marc2003"
// @import "%fb2k_component_path%helpers.txt"
// @import "%fb2k_component_path%samples\js\lodash.min.js"
// @import "%fb2k_component_path%samples\js\common.js"
// @import "%fb2k_component_path%samples\js\panel.js"
// @import "%fb2k_component_path%samples\js\albumart.js"
// @import "%fb2k_component_path%samples\js\text_display.js"
// ==/PREPROCESSOR==
// https://jscript-panel.github.io/gallery/text-display/
var panel = new _panel({ custom_background : true });
var albumart = new _albumart(0, 0, 0, 0);
var text = new _text_display(LM, 0, 0, 0);
albumart.blur_img = null;
albumart.metadb_changed = function () {
var img = null;
if (panel.metadb) {
img = panel.metadb.GetAlbumArt(this.properties.id.value);
}
if (this.img) this.img.Dispose();
if (this.blur_img) this.blur_img.Dispose();
this.img = this.blur_img = null;
this.tooltip = this.path = '';
if (img) {
this.img = img;
if (panel.display_objects.length) {
if (panel.display_objects[0].properties.albumart_blur.enabled) {
this.blur_img = this.img.Clone();
this.blur_img.StackBlur(60);
}
}
this.tooltip = 'Original dimensions: ' + this.img.Width + 'x' + this.img.Height + 'px';
this.path = this.img.Path;
if (this.path.length) {
this.tooltip += '\nPath: ' + this.path;
}
}
window.Repaint();
}
text.paint = function (gr) {
if (!this.text_layout) return;
if (this.properties.albumart.enabled) {
_drawImage(gr, this.properties.albumart_blur.enabled ? albumart.blur_img : albumart.img, 0, 0, panel.w, panel.h, image.crop);
_drawOverlay(gr, 0, 0, panel.w, panel.h, 170);
}
var h = panel.h - this.text_layout.CalcTextHeight(this.w) - 50;
_drawImage(gr, albumart.img, 20, 20, panel.w - 40, h, image.centre);
gr.WriteTextLayout(this.text_layout, this.colour_string, this.x, this.y + _scale(12), this.w, this.ha, this.offset);
this.up_btn.paint(gr, this.default_colour);
this.down_btn.paint(gr, this.default_colour);
}
panel.item_focus_change();
function on_colours_changed() {
panel.colours_changed();
text.refresh(true);
}
function on_font_changed() {
panel.font_changed();
text.refresh(true);
}
function on_item_focus_change() {
if (panel.selection.value == 0 && fb.IsPlaying) return;
panel.item_focus_change();
}
function on_metadb_changed() {
albumart.metadb_changed();
text.metadb_changed();
}
function on_mouse_lbtn_up(x, y) {
text.lbtn_up(x, y);
}
function on_mouse_move(x, y) {
text.move(x, y);
}
function on_mouse_rbtn_up(x, y) {
return panel.rbtn_up(x, y, text);
}
function on_mouse_wheel(s) {
text.wheel(s);
}
function on_paint(gr) {
panel.paint(gr);
text.paint(gr);
}
function on_playback_dynamic_info_track(type) {
if (type == 0) text.metadb_changed();
else if (type == 1) albumart.metadb_changed();
}
function on_playback_new_track() {
panel.item_focus_change();
}
function on_playback_pause() {
text.refresh();
}
function on_playback_stop(reason) {
if (reason != 2) {
panel.item_focus_change();
}
}
function on_playback_time() {
text.playback_time();
}
function on_playlist_items_added() {
text.refresh();
}
function on_playlist_items_removed() {
text.refresh();
}
function on_playlist_items_reordered() {
text.refresh();
}
function on_playlist_switch() {
on_item_focus_change();
}
function on_size() {
panel.size();
text.w = panel.w - (LM * 2);
text.h = panel.h;
text.size();
}
The right click menu options for enabling/blurring the background should work as expected. And the vertical alignment must be set to bottom as per my previous mod.
Thank you, the display looks great!