2
$\begingroup$

I'd like to deploy a website to display and increment counters that track daily activities.

Here's a minimal working example:

bin=CreateDatabin[]
CloudDeploy[FormPage[{"Pushups" -> {0, 5, 10, 15, 20, 25, 30}, 
                      "Water" -> {0, .5, 1, 2}}, 
     DatabinAdd[bin, {{"Pushups", Now, #Pushups}, {"Water", Now, #Water}}]; &], Permissions->"Public"]

enter image description here

I'm unsure how to customize the content of a FormPage. I would like to add this plot on the page below the submit button:

DateListPlot@Cases[Flatten[Normal@bin,1],{"Pushups",r__}:>{r}]

enter image description here

Along with a few tweaks for bonus points:

  • replace drop-downs with buttons
  • display the current daily counter values
  • custom image banner at top of page
  • custom fonts and colors
$\endgroup$
7
  • $\begingroup$ I think it'll depend on what the semantics are. You could probably use any of the cloud object mechanisms, but I think Databin is geared toward getting a historic record of one type of data structure. You essentially end up with a Dataset with timestamps. A counter sounds like more of a stateful thing, so probably not necessary to use Databin for that. $\endgroup$
    – lericr
    Commented Sep 6, 2022 at 19:54
  • 1
    $\begingroup$ As for tracking daily activities, I used Mathematica to build an exercise tracker. It includes a webform to select the exercises I intend to do in the session, and then builds a form for recording the actual reps/weights for each selected exercise. I just used CloudPut. The exercise "types" are stored in one Association and the exercise "history" is stored in another Association. $\endgroup$
    – lericr
    Commented Sep 6, 2022 at 19:57
  • $\begingroup$ Just re-reading this... I think it might be helpful to split this up into separate questions. I think designing a webform is one thread. Maybe you can explain what you've tried and what's challenging for you. The use of Databin versus just "plain" cloud objects might be a separate thread. I'm not sure what the question about showing dataset and plot on the same page is all about--maybe that's related to the webform--but that sounds like a separate thread. As it stands, I feel that this might just turn into an undirected discussion of how to design and implement a web app. $\endgroup$
    – lericr
    Commented Sep 6, 2022 at 20:27
  • $\begingroup$ I updated the problem. $\endgroup$
    – user5601
    Commented Sep 6, 2022 at 21:35
  • $\begingroup$ Not sure if Databin is best choice here or if there something more appropriate or modern $\endgroup$
    – user5601
    Commented Sep 7, 2022 at 2:31

2 Answers 2

3
$\begingroup$
  • Replace drop-downs with buttons. You can add your own controls for each form element. Not sure if SetterBar is what you want, and it seems to behave a bit strangely when it's deployed to the cloud, so you might have to experiment with other controls.

    exerciseForm = 
      FormPage[
        FormObject[
          {"Pushups" -> <|"Interpreter" -> {0, 5, 10, 15, 20, 25, 30}, "Control" -> SetterBar|>, 
           "Water" -> <|"Interpreter" -> {0, .5, 1, 2}, "Control" -> SetterBar|>}], 
          UpdateAndDisplayExerciseHistory]
    
  • Custom image banner at top of page. You could probably use AppearanceRules for this.

    title = ImageResize[ExampleData[{"TestImage", "Volubilis"}], 400];
    exerciseForm =
      FormPage[
        FormObject[
          {"Pushups" -> <|"Interpreter" -> {0, 5, 10, 15, 20, 25, 30}, "Control" -> SetterBar|>,
           "Water" -> <|"Interpreter" -> {0, .5, 1, 2}, "Control" -> SetterBar|>}],
        UpdateAndDisplayExerciseHistory,
        AppearanceRules -> <|"Title" -> title|>]
    
  • Custom fonts and colors

    You can add your own labels. For example, the pushup form element specification might look like this:

    "Pushups" -> 
      <|"Interpreter" -> {0, 5, 10, 15, 20, 25, 30}, 
        "Control" -> SetterBar, 
        "Label" -> Style["Pushups", Blue]|>
    

I'm not sure what "display the current daily counter values" means.

$\endgroup$
2
$\begingroup$

Let's stick with the Databin idea for now. It will give us the timestamp functionality for free. We can play with the form locally before deploying it.

  • Create the databin

    exerciseDataBin = CreateDatabin["exercise"]
    
  • Define a function to update the databin and produce the desired plot

    UpdateAndDisplayExerciseHistory =
      Function[
        data,
        DatabinAdd[
          exerciseDataBin, 
          <|"pushups" -> data["Pushups"], "water" -> data["Water"]|>]; 
        DateListPlot[TimeSeries[exerciseDataBin]]]
    

    This can probably be cleaned up, but I wanted to be explicit while testing things out.

  • Now we can create the form page

    FormPage[
      FormObject[{"Pushups" -> {0, 5, 10, 15, 20, 25, 30}, "Water" -> {0, .5, 1, 2}}], 
      UpdateAndDisplayExerciseHistory]
    

Summary:

  • The plot below the submit button is just whatever the result is of executing the submit function. You can play with the exact plotting functionality you want--I just chose something easy to test with. Aslo, there's probably a way to get it to display in the initial view before the first submit, but I didn't explore that yet.
  • It's easier (in my opinion) to have explicit named functions that do the work so you can test them outside of the form context.
  • If you use Databin, you don't need to do your own timestamping (like you were doing with Now).
  • To test your databin, it's useful to apply Dataset, e.g. Dataset[exerciseDataBin]
  • Once you're happy with your local testing, you can CloudDeploy it.

I think this gets you your basic functionality. I'll try to grab some time later to look at your bonus questions.

$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.