Измените javascript для определения цвета шрифта для использования в R Shiny

Я пытаюсь определить цвет шрифта сообщений при наведении на основе цвета фона, т.е. белый, если фон темный, и черный, если он светлый,

и я столкнулся с этим вопросом SO с решением javascript, которое выглядит идеально, но теперь я изо всех сил пытаюсь заставить его работать в R

Оригинальный javascript взят отсюда: введите сюда описание ссылки

Скорее всего, я где-то упускаю что-то глупое, поскольку я использовал runjs и подход sprintf раньше, но не могу это заметить.

require('shiny')
require('shinyjs')

fontcolor <- function(color){
  sprintf(paste(
    " var bgColor = %s;",
    " var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;",
    " var r = parseInt(color.substring(0, 2), 16);",
    " var g = parseInt(color.substring(2, 4), 16);",
    " var b = parseInt(color.substring(4, 6), 16);",
    " var uicolors = [r / 255, g / 255, b / 255];",
    " var c = uicolors.map((col) => {",
    "  if (col <= 0.03928) {",
    "    return col / 12.92;",
    "  }",
    "  return Math.pow((col + 0.055) / 1.055, 2.4);",
    " });",
    " var L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);",
    " var colfont (L > 0.179) ? #000000 : #ffffff;",
    "  Shiny.setInputValue('Frontfont', bgColor, {priority: 'event'});",
    sep = "\n"
  ), color)
}

ui <- fluidPage(
  useShinyjs(),
    textInput('ColorTyped', label = 'Enter hex code'), 
    h5('Font color result'),
    verbatimTextOutput('FontColorSelected')
  )


server <- function(input, output) {

  ColorResult <- reactive({
    runjs(fontcolor(input$ColorTyped))
  })

  output$FontColorSelected <- renderPrint({ 
    ColorResult()
    })

}

shinyApp(ui, server)

javascript r shiny

20.07.2019 12:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В коде JS отсутствовали кавычки, а логика сервера была некорректной.

require('shiny')
require('shinyjs')

froncolor <- function(color){
  sprintf(paste(
    " var bgColor = '%s';",
    " var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;",
    " var r = parseInt(color.substring(0, 2), 16);",
    " var g = parseInt(color.substring(2, 4), 16);",
    " var b = parseInt(color.substring(4, 6), 16);",
    " var uicolors = [r / 255, g / 255, b / 255];",
    " var c = uicolors.map((col) => {",
    "  if (col <= 0.03928) {",
    "    return col / 12.92;",
    "  }",
    "  return Math.pow((col + 0.055) / 1.055, 2.4);",
    " });",
    " var L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);",
    " var colfont = (L > 0.179) ? '#000000' : '#ffffff';",
    " Shiny.setInputValue('Frontfont', colfont, {priority: 'event'});",
    sep = "\n"
  ), color)
}

ui <- fluidPage(
  useShinyjs(),
  textInput('ColorTyped', label = 'Enter hex code'), 
  h5('Font color result'),
  verbatimTextOutput('FontColorSelected')
)


server <- function(input, output) {

  observeEvent(input$ColorTyped, {
    runjs(froncolor(input$ColorTyped))
  })

  output$FontColorSelected <- renderPrint({ 
    input$Frontfont
  })

}

shinyApp(ui, server)

Признаюсь, я поторопился с фиктивной оболочкой приложения, чтобы создать пример, который можно было бы использовать для его тестирования. Спасибо за исправления!

— 20.07.2019 12:29

20.07.2019 12:24