News Ticker/ Text Crawler – R widget for SAC
2024-1-4 05:7:45 Author: blogs.sap.com(查看原文) 阅读量:5 收藏

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.


文章来源: https://blogs.sap.com/2024/01/03/news-ticker-text-crawler-r-widget-for-sac/
如有侵权请联系:admin#unsafe.sh