News Ticker/ Text Crawler - R widget for SAC

[FxGk]

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.