rinterface / shinymobile Goto Github PK

shiny API for Framework7 (IOS/android)

Home Page: https://shinymobile.rinterface.com

R 69.48% CSS 0.51% JavaScript 29.70% HTML 0.32%

pwa android shiny shinyapps r template hacktoberfest2022

shinymobile's Introduction

shinyMobile

Develop outstanding {shiny} apps for iOS, Android, desktop as well as beautiful {shiny} gadgets. {shinyMobile} is built on top of the latest Framework7 template.

Installation

# from CRAN
install.packages("shinyMobile")
# for the latest version
devtools::install_github("RinteRface/shinyMobile")

Demo

A running demo is available here.

Progressive Web App (PWA)

Configuration

{shinyMobile} is PWA capable, meaning that it can be displayed full screen on many mobile devices. This feature is automatically handled by f7Page() if allowPWA is TRUE (it leverages the Google PWA compatibility script).

To setup the necessary assets for your PWA, you may run:

remotes::install_github("RinteRface/charpente")
library(charpente)
set_pwa(APP_PATH, ...)

where APP_PATH is the app location. It only works if the app is inside a package like with {golem}. Alternatively, you may copy the www folder of the gallery app, which provides:

A valid service worker.
A valid offline.html fallback.
A valid web manifest. Don't forget to change the start_url property to the path of your app. For instance, the following app hosted at https://dgranjon.shinyapps.io/rstudio-global-2021-calendar/, has the /rstudio-global-2021-calendar/ path.
A valid set of icons. There are tools such as appsco and app-manifest, to create those custom icons and splash screens, if you need to.

It is really easier with {charpente}, the reason why we strongly recommend to develop your app inside a package.

Add the PWA to your desktop Apps

Copy the url of your app in your mobile web browser (iOS: Safari and Andoid: Chrome). In this example this is: https://dgranjon.shinyapps.io/miniUI2Demo/. It opens like a classic web app, with top and bottom ugly navigation bars.

Select the share button located in the bottom bar of your Iphone/Ipad. For Android, you may do something similar. Importantly, Chrome for iOS does not support this feature, that's why I recommend using Safari.
Click on "Add to Home Screen"
Choose a relevant name and click on OK.
The app will be added to your IOS/Android Apps. In case you want custom icons, replace the content of the www folder with your own.

Limitations

It is actually quite complex to guarantee that all mobile platforms are supported. The PWA compatibility script will work in most of the case. If not, please open an issue here, to help improving it!

Acknowledgement

A special thanks to Vladimir Kharlampidi for creating this amazing framework7 HTML template.

Code of Conduct

Please note that the shinyMobile project is released with a Contributor Code of Conduct. By contributing to this project, you agree to abide by its terms.

shinymobile's People

Contributors

Stargazers

Watchers

shinymobile's Issues

Improve f7Sheet

More customisation for icon: for instance, people may want to use the sheet toggle directly from the tabbar... (cf deminR)

add input binding to f7Panel

Some input labels are ignored

My mistake... This should be added asap...

Need a better hex

Date Picker Issue

f7Flex(
            f7DatePicker(inputId = "date_range1",label = "Date Range",
                                  value = Sys.Date()-7,
                                   min = Sys.Date(),
                                   max=Sys.Date(),
                                   format = "yyyy-mm-dd"
                                  )
                            ),

f7Flex(
            f7DatePicker(inputId = "date_range2",label = "Date Range",
                                  value = Sys.Date()-7,
                                   min = Sys.Date(),
                                   max=Sys.Date(),
                                   format = "yyyy-mm-dd"
                                  )
                            )

Returns Date in form of ### yyyy-mmm-dd
date between '2019-011-13' and ### '2019-011-14'

Error:- nanodbc/nanodbc.cpp:1587: 22007: [Microsoft][ODBC SQL Server Driver][SQL Server]Conversion failed when converting date and/or time from character string

Some icons not rendering properly with material design

f7Segment broken

When segment container is row, buttons are not aligned in the same row

f7Appbar: allow maximizable only if desktop app

Does not make sense for mobile devices that are already fullscreen

add input binding for f7SmartSelect

Currently f7SmartSelect works with the auto-init property of framework7. However, not having a dedicated input binding prevents it from having an update function

extend f7Search to f7Expandablecards

The way I see it, f7Search works fine for f7List groups. It would be really nice if this worked for cards' titles as well. :)

f7Chip not rendering properly

library(shiny)
library(shinyF7)
shiny::shinyApp(
  ui = f7Page(
    title = "Chips",
    f7Init(theme = "auto"),
    f7Block(
      strong = TRUE,
      f7Chip(label = "Example Chip"),
      f7Chip(label = "Example Chip", outline = TRUE),
      f7Chip(label = "Example Chip", icon = "add_round", icon_status = "pink"),
      f7Chip(label = "Example Chip", img = "http://lorempixel.com/64/64/people/9/"),
      f7Chip(label = "Example Chip", closable = TRUE),
      f7Chip(label = "Example Chip", status = "green", closable = TRUE)
    )
  ),
  server = function(input, output) {}
)

Allow f7Tabs to be hidden

I was trying to create sub-tabs that could be accessed using updateF7Tabs and a button, but I've been failing to do that without creating another icon in the toolbar on the bottom. It would be a nice enhancement to be able to create these "hidden" tabs. Amazing library, by the way. :)

f7Accordion, f7AccordionItem

Some elements are not visible in dark mode

since v5 (probably), f7Gauge indicator is reversed...

Currently investigating

f7PhotoBrowser

Does not render well in light mode in the gallery. Links are not visible for some reason. I works well in the documentation.

Better initialize js elements and their dependencies

Implement f7Date input binding

f7Date currently does not work...

Add a way to disable cancel button in f7Dialog

f7Chip: issue in dark mode when status and outline are allowed

Text color is black and should be white

Add more style for inputs forms

Outline style, ...

input binding for f7Swipeout

This means to rework the f7Swipeout API...

Inputs from shinyWidgets

Same thing as for shiny, the following input do not render correctly (but javascript works):

pickerInput
awesomeCheckboxGroup
awesomeRadio
colorSelectorInput
progressBar
radioGroupButtons
searchInput
textInputAddon
actionGroupButtons
airDatepickerInput (and all related inputs)
dropdown

Regarding the layout:

verticalTabsetPanel

app height does not fit well on mobiles

Since upgrade to v5, the toolbar is truncated. Maybe because the statusbar was removed from framework7...

Improve f7Swiper API

textLabel update on f7Gauge

A suggestion: it would be a nice enhancement to provide a possibility to update the textLabel parameter of f7Gauge.

An example:

    if(interactive()){
      library(shiny)
      library(shinyMobile)
      
      shiny::shinyApp(
        ui = f7Page(
          title = "Gauges",
          f7SingleLayout(
            navbar = f7Navbar(title = "f7Gauge"),
            f7Block(
              f7Slider('slider', label = 'Insert value', min = 0, max = 100, value =50),
              
              f7Gauge(
                id = "mygauge",
                type  = "semicircle",
                value = 50,
                borderColor = "#2196f3",
                borderWidth = 10,
                valueText = "50%",
                valueFontSize = 41,
                valueTextColor = "#2196f3",
                labelText = "amount of something"
              )
            )
          )
        ),
        server = function(input, output, session) {
          
          observe({
            
            if(input$slider> 50){
              labelText = 'more than half'
            }else{
              labelText = 'less than half'
            }
            updateF7Gauge(session, 'mygauge', value = input$slider) # labelText = labelText
          })
        }
      )
    }

DatePicker initial open

Hi,

the Datepicker opens during initialization.
I guess this is on purpose:
I already saw that this is triggered in the datePickerInputBinding.js:

        // need to trigger a click
        // close the picker to initiate it properly but need Timeout
        // otherwise the date picker cannot open anymore
        init: function(datePicker) {
          datePicker.open();
          // minimum timeout value: 4 ms (HTML5 spec)
          setTimeout(function() {datePicker.close();}, 4);
        }

Is there any way to make this popover invisible?
Thanks in advance.

Best regards
Seyphaton

bigger = TRUE in f7Navbar does not work when dark_mode is TRUE in f7Page

Add tabName to f7ListItem element

To navigate between tabs

Unable to render inputs from renderUI

For f7Slider() and ci:

shiny::shinyApp(
  ui = f7Page(
    f7Init("ios"),
    title = "My app",
    f7SingleLayout(
      navbar = f7Navbar(
        title = "Single Layout",
        hairline = TRUE,
        shadow = TRUE,
        bigger = FALSE
      ),
      toolbar = f7Toolbar(
        position = "bottom",
        f7Link(label = "Link 1", src = "https://www.google.com"),
        f7Link(label = "Link 2", src = "https://www.google.com", external = TRUE)
      ),
      # main content
      uiOutput("slider"),
      plotOutput("distPlot")
    )
  ),
  server = function(input, output) {
    
    output$slider <- renderUI({
      f7Slider("obs", "Number of observations", 0, 1000, 500)
    })
    
    output$distPlot <- renderPlot({
      dist <- rnorm(input$obs)
      hist(dist)
    })
  }
)

This is not the case for f7checkBox, f7checkBoxGroup, f7Select, f7Text and f7Radio that share input bindings with vanilla shiny.

f7Panel broken in v5

and f7SplitLayout as a direct consequence

Error in pngfun: taille de périphérique quartz() incorrecte

Happens when using f7Flex with 4 cards containing plots:

library(shiny)
library(shinyF7)
shiny::shinyApp(
  ui = f7Page(
    title = "Align",
    f7Init(theme = "auto"),
    f7Flex(
      lapply(1:4, FUN = function(i) {
        f7Card(
          f7Slider(
            inputId = paste0("obs_", i),
            label = "Number of observations",
            max = 1000,
            min = 0,
            value = 100,
            scale = TRUE
          ),
          verbatimTextOutput(paste0("test_", i)),
          plotOutput(paste0("plot_", i))
        )
      })
    )
  ),
  server = function(input, output) {
    lapply(
      1:4,
      function(i) {
        output[[paste0("test_", i)]] <- renderPlot({
          hist(rnorm(input[[paste0("obs_", i)]]))
        })
      }
    )
  }
)

f7PickerDate, f7Picker rendering issue

f7Panel: style = "reveal" triggers app freeze

Slider range does not always show up on chrome when iOS theme is activated

See:
framework7io/framework7#989

Improve f7Messages

add the full JS API

issue 10 still open? some icons still not rendering.

e.g. "perspective", "function", "chart_bar_alt_fill", etc.

Only properly working icons tested so far: "book" and "list_number"

[Feature Request] F7 Smart Select input allowing to select multiple

Dear RinteRface Team,

It would be really good if the F7SmartSelect input could be used to select more than one item!

Thank you in advance!

f7Slider miss value label in new version

In the previous version of the package it showed the value label when scrolling the slider. Now it doesn't:

Add F7DatePicker and F7Select update

Hi,
I am currently migrating my shiny project to this great shinyMobile package (great work thanks).

However, I need update functions for the datepicker and select inputs.

Thanks a lot in advance.

Best regards

f7Popup doesn't display reactive outputs

Example:

f7Popup(id="popup",
                  label="Click",
                  title="Display age",
                  f7Slider("age", label = ("Age"), 
                           min = 50, max = 90, value = 60,step=1),
                  verbatimTextOutput("display")
  )

won't display my reactive output, that consists simply in:

output$display<-renderPrint(input$age)

Almost all shiny inputs do not render properly

This was expected since Framework7 contains its own inputs:

ui <- f7Page(
  checkboxInput("somevalue", "Some value", FALSE),
  verbatimTextOutput("value")
)
server <- function(input, output) {
  output$value <- renderText({ input$somevalue })
}
shinyApp(ui, server)

Concerns: radioButtons, checkboxInput, checkboxGroupInput, numericInput, textInput, textAreaInput, dataInput, datRangeInput.

sliderInput render well since they are not imported from bootstrap but rangeslider...

However, the javascript works...

dateRangeInput Not work over UI

dateRangeInput(inputId = "date_range",label = "Date Range",
                                             start = Sys.Date()-7,
                                             end = Sys.Date(),
                                               max=Sys.Date(),
                                               format = "yyyy-mm-dd"
                                  )

How to see output of App in Mobile or Tablet view after Run APP ?

Implement navigation between pages (f7Router)

For now, inputs and outputs of the children pages do not render.
Any ideas @pvictor ?

Ideally, we should have the same layout as in the framework7 kitchen sink. This is even more natural for phone users. However, from a technical point of view, this might be challenging.

Add lazy load to images

Save load time and trafic

Error in paste: argument "tag" is missing, with no default

70: paste
69: f7Shadow

Code:

source("packages.R")
f7Page(
  title = "Backhoe Paint System",
  init = f7Init(skin = "md", theme = "dark"),
  f7TabLayout(
    panels = tagList(
      f7Panel(
        inputId = "panelLeft",
        title = tags$li(class = "dropdown", img(src='img/CF_Logo_Final.jpg', style= 'margin-right:10px; margin-top:7px')),
        side = "left",
        theme = "light",
        effect = "reveal"
      ),
      f7Panel(
        inputId = "panelRight",
        title = tags$li(class = "dropdown",style= 'margin-right:50px; margin-top:21px', uiOutput("user_info")),
        side = "right",
        theme = "dark",
        effect = "cover"
      )
    ),
    navbar = f7Navbar(

      # tagList(span(class = "logo-lg"), img(src = "LOGO.png", width= 150, height= 60, style= 'margin-top: -5px; margin-left: -34px')),
      
      left_panel = TRUE,
      
      right_panel = TRUE
      ),
    f7Tabs(animated = TRUE,
           
           f7Tab(tabName = "Productivity", 
                 icon = icon("code-fork"),
                 active = FALSE,
                 f7Shadow(
                   intensity = 10,
                   hover = TRUE
                 )
                 
           ),
           f7Tab(tabName = "Safety", 
                 icon = icon("shield"),
                 active = FALSE,
                 f7Shadow(
                   intensity = 10,
                   hover = TRUE
                 )
           ),
           f7Tab(tabName = "Quality", 
                 icon = icon("check"),
                 active = FALSE,
                 f7Align(side = "center"),
                 f7Shadow(
                   intensity = 10,
                   hover = TRUE
                 ),
                   f7Row(
                     f7Card(title = "Carrier Count Production 1st",outline = TRUE, height = 275,
                            align="center",
                            highchartOutput("tx_bho_gauge1")%>% withSpinner(color="#0dc5c1")
                     ),
                     
                     br(),
                     
                     f7Card(title = "Carrier Count Production 3rd",outline = TRUE,height = 275,
                            align="center",
                            highchartOutput("tx_bho_gauge2")%>% withSpinner(color="#0dc5c1")
                     )
                     
                   ),
                   
                   f7Row(
                     
                     f7Card(title = "Volumes of Paint Sprayed (in CC)",solidHeader = TRUE,width = '12',collapsible = TRUE,status="success",
                            align="center", 
                            fluidRow(
                              f7Col(4,
                                    align="center",
                                    dateRangeInput("tx_bho_vol_date_range","Date Range",
                                                   start = Sys.Date()-7,
                                                   end = Sys.Date(),
                                                   max=Sys.Date(),
                                                   format = "yyyy-mm-dd",width = "80%"
                                    )
                              ),
                              f7Col(3,
                                    HTML('<br/>'),
                                    align="center",
                                    actionButton("tx_bho_vol_get_data","Get Data")
                              )
                            ),
                            fluidRow(
                              f7Card(title = "Carrier Count Production 3rd",outline = TRUE,height = 275,
                                     align="center",
                                     highchartOutput("tx_bho_paint_volume_chart")%>% withSpinner(color="#0dc5c1")
                              )
                            )
                     )
                     
                   ),
                   
                 )
                 
           )
           
    )
)

Find a way to eval user defined inputs in f7Dialog

Now any input in f7Dialog is NULL. Alternatively, an option could be to allow customisation of the prompt input when type = "prompt" (selectInput, dateInput, ...)

f7Popup miss vertical overflow

If you put several elements inside the popup such that they would fill more than one page, it will display only what fills in one page truncating all the other content and without the possibility of scrolling down.

add opacity utility for f7 items

Sometimes, iOS and android widgets are transparent. This might be a good addition to the package. For instance see:

.class-name {
  opacity:0.5;
}

Maybe try to be more clever

preview_mobile opens app full-screen in browser tab

I just installed the latest version of shinyMobile from GitHub for a new project (hoping to unveil very soon) and noticed that no matter which type of device I supply as the device value in the call to preview_mobile that a new tab opens in my Chrome browser and the app is not in an iframe at all (in fact it is full-screen as if it was a typical Shiny app). This happens for both the url and appPath invocations (at first I was thinking it had something to do with my current app being wrapped with golem, but that does not seem to be the case here).

Any ideas on how to get the preview to properly appear? In case it helps, here's the list of packages and versions grabbed from renv diagnostics for the project:

# Lockfile ===========================
There are 122 package(s) recorded in the lockfile.
               _
  BH             [1.69.0-1]
  DT             [0.10]
  MASS           [7.3-51.4]
  Matrix         [1.2-17]
  R6             [2.4.0]
  RColorBrewer   [1.1-2]
  Rcpp           [1.0.3]
  V8             [2.3]
  askpass        [1.1]
  assertthat     [0.2.1]
  attempt        [0.3.0]
  backports      [1.1.5]
  base64enc      [0.1-3]
  brew           [1.0-6]
  callr          [3.3.2]
  cli            [1.1.0]
  clipr          [0.7.0]
  clisymbols     [1.2.0]
  colorspace     [1.4-1]
  commonmark     [1.7]
  config         [0.3]
  covr           [3.3.2]
  crayon         [1.3.4]
  crosstalk      [1.0.0]
  curl           [4.2]
  desc           [1.2.0]
  devtools       [2.2.1]
  digest         [0.6.22]
  dockerfiler    [0.1.3]
  dplyr          [0.8.3]
  ellipsis       [0.3.0]
  evaluate       [0.14]
  fansi          [0.4.0]
  fastmap        [1.0.1]
  fs             [1.3.1]
  ggplot2        [3.2.1]
  gh             [1.0.1]
  git2r          [0.26.1]
  glue           [1.3.1]
  golem          [0.1]
  gtable         [0.3.0]
  highr          [0.8]
  htmltools      [0.4.0]
  htmlwidgets    [1.5.1]
  httpuv         [1.5.2]
  httr           [1.4.1]
  ini            [0.3.1]
  jsonlite       [1.6]
  knitr          [1.26]
  labeling       [0.3]
  later          [1.0.0]
  lattice        [0.20-38]
  lazyeval       [0.2.2]
  lifecycle      [0.1.0]
  magrittr       [1.5]
  markdown       [1.1]
  memoise        [1.1.0]
  mgcv           [1.8-29]
  mime           [0.7]
  munsell        [0.5.0]
  nlme           [3.1-142]
  openssl        [1.4.1]
  packrat        [0.5.0]
  parsedate      [1.2.0]
  pillar         [1.4.2]
  pkgbuild       [1.0.6]
  pkgconfig      [2.0.3]
  pkgload        [1.0.2]
  plogr          [0.2.0]
  plyr           [1.8.4]
  praise         [1.0.0]
  prettyunits    [1.0.2]
  processx       [3.4.1]
  promises       [1.1.0]
  ps             [1.3.0]
  purrr          [0.3.3]
  rappdirs       [0.3.1]
  rcmdcheck      [1.3.3]
  rematch        [1.0.1]
  rematch2       [2.1.0]
  remotes        [2.1.0]
  renv           [0.9.2]
  reshape2       [1.4.3]
  rex            [1.1.2]
  rhub           [1.1.1]
  rlang          [0.4.1]
  rmarkdown      [1.17]
  roxygen2       [6.1.1]
  rprojroot      [1.3-2]
  rsconnect      [0.8.15]
  rstudioapi     [0.10]
  rversions      [2.0.0]
  scales         [1.0.0]
  sessioninfo    [1.1.1]
  shiny          [1.4.0]
  shinyMobile    [RinteRface/shinyMobile]
  shinyjs        [1.0]
  sourcetools    [0.1.7]
  stringi        [1.4.3]
  stringr        [1.4.0]
  sys            [3.3]
  testthat       [2.3.0]
  tibble         [2.1.3]
  tidyr          [1.0.0]
  tidyselect     [0.2.5]
  tinytex        [0.17]
  usethis        [1.5.1]
  utf8           [1.1.4]
  uuid           [0.1-2]
  vctrs          [0.2.0]
  viridisLite    [0.3.0]
  wavesurfer     [Athospd/wavesurfer]
  whisker        [0.4]
  whoami         [1.3.0]
  withr          [2.1.2]
  xfun           [0.10]
  xml2           [1.2.2]
  xopen          [1.0.0]
  xtable         [1.8-4]
  yaml           [2.2.0]
  yesno          [0.1.0]
  zeallot        [0.1.0]