Hey everyone interested in SAC R Widgets, I had the idea of a news ticker widget for the SAC. I did a bit of programming and this is the result:
Unfortunately, the calculation of the length of the strings is not exact, so there is a greater delay with longer strings than with small ones. If anyone has an idea on how to make the calculation more accurate, I would be happy to hear from you. To use it simply copy the following source code into a SAC R widget and change the strings. You can also get the string list from a data frame.
library(plotly)
library(dplyr)
library(htmlwidgets)
library(tidyverse)
# Set the strings you want to display. You can set it manually or get it for a data frame.
strings <- c("some Text", "some other Text", "I am a Text", "A looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text")
Encoding(strings) <- "UTF-8"
strings
plot <- plot_ly(x=10,
y=0.5,
type = "scatter",
mode = "text",
text = "I need data",
textfont = list(color = "red", family = "verdana", size = 30), # set the color, font family and size here. Supported: "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".
textposition = "right")%>%
layout( xaxis = list(range=c(0,10), showgrid = F, fixedrange = T, visible = F, zeroline = F),
yaxis = list(range=c(0,1), showgrid = F, fixedrange = T, visible = F, zeroline = F),
margin = list(l =0, t=0, b=0)
) %>%
style(hoverinfo = 'none') %>%
config(displayModeBar = F)
onRender(plot, "
function(el,x,data) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
var textfont = String(el.data[0].textfont.size) + 'pt ' + el.data[0].textfont.family;
ctx.font = textfont;
var lengthArray = [];
for(var i = 0; i<data.length; i++){
let text = ctx.measureText(data[i]);
lengthArray[i] = text.width;
}
const timer = ms => new Promise(res => setTimeout(res, ms))
var deltaTime = 10000; // <--- set the time in ms to pass the R widget here
var plotData2 ={
data: [{x: [10] }],
};
var plotLayout2 = {
frame: {
duration: 0
}
};
async function update(){
var timeout = 0;
for(var i = 0; i<data.length; i++){
var shift = -(1 + (lengthArray[i]/el.getBoundingClientRect().width)*10);
var tempDuration = (deltaTime/10) * (-shift + 10);
timeout = timeout + tempDuration;
var plotData1 = {
data: [{x: [shift], text: data[i] }]
};
var plotLayout1 = {
transition: {
duration: tempDuration,
easing: 'linear'
},
frame: {
duration: tempDuration
}
};
Plotly.animate(el, plotData1, plotLayout1);
Plotly.animate(el, plotData2, plotLayout2);
}
await timer(timeout);
update();
}
update();
}" , data = strings)
Enjoy the widget.