Simple uibuilder + Vuetify dashboard

Dashboard
1

(This is a continuation from some of the thread.)

I've been continuing to work on my little dashboard using uibuilder and vuetify. I replace vue-svg-gauge by my own dependency-less and animation-less version and more importantly, started to split components up into "foo" and "foo-card", where foo is the raw component that can be placed anywhere and foo-card is the same component wrapped into a v-card in such a way that it can be "just" placed into a grid. The idea is that the "-card" components can be dropped into a grid from some config sent by node-red while the non-card components can be used to build custom stuff. My test page now looks as follows:

image
image2162Ă—2840 788 KB

The second row of widgets is composed of an array of gauge-cards. The third row has 4 more gauge-cards with different options but the last card in that row is an explicit/custom card that includes 3 gauges (the gauge component doesn't print value or title, it's the gauge-card that adds this, the assuming being that in a custom setting one may want to format these text strings very differently).

In terms of html the four gauge-card on the third row look like this:

  <gauge-card title="bedroom" unit="°F" :value="nr.bedroom"
      :gauge="{min:30, max:120, arc:90}"></gauge-card>
  <gauge-card title="gh-air" unit="°F" :value="nr.gh_air"
      :gauge="{min:30, max:120}"></gauge-card>
  <gauge-card title="gh-air" unit="°F" :value="nr.gh_air"
      style="grid-row:span 2" :gauge="{min:30, max:120, stretch:true}"></gauge-card>
  <gauge-card title="gh-air" unit="°F" :value="nr.gh_air"
      style="grid-row:span 2; grid-column:span 2" class="gauge-large"
      :gauge="{min:30, max:120, stretch:true}"></gauge-card>

While the custom card with the three gauges looks like this:

  <v-card style="grid-row:span 2">
    <v-card-text class="d-flex py-1">
      <span class="mx-auto">Three gauges</span>
    </v-card-text>
    <div class="d-flex">
      <gauge v-bind="{min:30, max:120, arc:180}" :value="nr.bedroom"
          style="width:80%; height:auto;" class="mx-auto mt-2"></gauge>
    </div>
    <div class="d-flex flex-row mt-5">
      <gauge v-bind="{min:30, max:120, arc:90, color:'#0091ea'}" :value="nr.study"
          style="width:80%; height:auto;" class="mx-1"></gauge>
      <gauge v-bind="{min:30, max:120, arc:90, color:'#ffd600'}" :value="nr.gh_air"
          style="width:80%; height:auto;" class="mr-1"></gauge>
    </div>
  </v-card>

The "orchard status" card is also a custom card that includes four of the stat components that also make up the whole top row of widgets. I don't have a distinction between stat and stat-card yet, I probably should...

Overall this shaping up to be quite nice!

(A sample flow with the dashboard uibuilder stuff is in GitHub - tve/uibuilder-test: Node-Red Test Dashboard using uibuilder)

1 Like
2

Shaping up nicely. Quick question - is vuetify actually a dependency for your components?

If you are looking to publish your components at some point, could I suggest that the repo name start with "uibuilder-vuejs-"? So that such components are easily discoverable?

3

Good question! I hadn't even considered that... So it turns out the gauge and uplot components are not dependent on vuetify. But the -card components definitely are 'cause they all use the v-card vuetify component. That actually seems like a reasonable split, as I refactor I'll try to maintain that. So basically we'd end up with 4 classes of artifacts:

  • vue.js components
  • vuetify and/or bootstrap-vue widget components
  • nodes to format/handle messages corresponding to the widgets
  • nodes or custom editor stuff to handle widget layout (for auto-placed widgets)

(I'm quite certain I won't be working on the last item. I'm ambivalent about the third and am currently just using a couple of subflows for reusable stuff and else just use function nodes.)

Makes sense. I'm not sure where my repo is headed. I'm not intending to make it something I'm releasing and maintaining for others to install and just use. I'd gladly work to fit my stuff into a team effort, but to make it usable I know there's too much stuff needed that I don't need at all and don't want to build and maintain.

4

OK, not too bad. Maybe when I get a chance, I'll have a look to see if I can reproduce that part with bootstrap so that it can be used with the default uibuilder install.

Might be interesting at some point to see how easy it might be to reproduce a card without a dependency :slight_smile:

Yes, agree, there is already too much to do so unless other people step up to the plate to help out, things may stay this way for some while.

Yep, that's the hard part for sure.

5

OK, not too bad. Maybe when I get a chance, I'll have a look to see if I can reproduce that part with bootstrap so that it can be used with the default uibuilder install.

Might be interesting at some point to see how easy it might be to reproduce a card without a dependency :slight_smile:

Yes, agree, there is already too much to do so unless other people step up to the plate to help out, things may stay this way for some while.

Yep, that's the hard part for sure.

6

I don't think it would be difficult at all to switch to bootstrap-vue. What the -card components do is wrap the raw component in a v-card and add a v-card-title inside of that, etc, to position everything. So it's really "just" a matter of changing some tag and class names to use comparable bootstrap-vue functionality. (Plus spend hours tweaking the CSS crap...)

I don't think it makes sense to "reproduce a card without a dependency" because the whole point of bootstrap-vue or vuetify is to get a uniform look that can be customized easily. So while you can, of course, produce something that looks like a vuetify v-card using a bunch of div's and styles I fail to see the point because if you'd load those into a bootstrap-vue project, for example, these things won't look like the custom cards/widgets you craft in for the rest of the page.

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.