Ongoing updates to @totallyinformation/web-components - handy widgets for all

Share Your Projects
1

UPDATE: 2024-10-01 - Yet more updates.
image

UPDATE: 2024-10-01 - More updates and now the components have their own website which demonstrates and tests them. https://wc.totallyinformation.net

Hi all, just letting you know what I've been working on this weekend.

I've had a repo on GitHub for ages called web-components.

I've now started re-engineering them to make them a bit more production ready.

They work anywhere you can use W3C standard Web Components since that is what they are. :grinning: Each one is stand-alone so requires just a single load. They self-register on load so are immediately usable. You should be able to use these not only with UIBUILDER but also with Dashboard's 1 & 2 and http-in/http-response.

The documentation is a bit hit-and-miss I'm afraid but will get better.

I'd consider only a couple of the components to be ready to use: visible-console and button-send. The rest should be considered "alpha" quality and all need to be brought into the standards I've just created (namely using a base class).

Example output:

image
image944×696 22.8 KB

Though they don't require UIBUILDER, they are generally enhanced by it.

For example, the button-send tag will immediately send data back to Node-RED when clicked. Without uibuilder, you would need to add an event listener. Either way, you get an enhanced set of data automatically.

The visible-console isn't currently enhanced by uibuilder. It enhances your browser's console logging to make it visible on-page, useful for debugging pages on a mobile device.

Next to be moved to production status will most likely be:

  • html-include - which lets you easily integrate external HTML fragments into your page.
  • syntax-highlight - which gives you a formatted view of JSON data.

There are dozens of others in preparation though including a number that use standard chart libraries.

You can make the package immediately usable in UIBUILDER (and elsewhere in Node-RED) by using uibuilder's library manager and adding totallyinformation/webcomponents which will load the latest GitHub version and make it available. See the docs for quick examples of use both with and without UIBUILDER.

As always, let me know what you'd find useful and any issues.

3 Likes
2

I was looking at the repo, note that a datalist element already exists in html, although the webcomponent is called data-list, it might be confusing ?

In the visible console you have a renderCollapsible function - this behaviour can be done using standard html, look at the details + summary elements (heavily under-used elements, super useful)

1 Like
3

Thanks, you may be right there. The idea for that component was the ability to pass a simple array or object and have it render as a list. UIBUILDER has a no-code element that does the same thing and it is really useful, this was to be a component equivalent of that. Other names always welcome. :slight_smile:

I'm aware of details/summary but it wasn't quite right for this as the rendering of an arbitrarily complex JavaScript object is really quite a hard problem. I'm sure it could be done that way but the code I came up with didn't quite lend itself. Of course, I "borrowed" much of the code from elsewhere anyway.

One day I may get around to re-writing it but for now, it does the job well enough.

I also know that I need to improve other aspects of that code as much of it is still pixel based sizing which I very much dislike. All of my own code is em, rem, %, etc or grid/flexbox based.

Plenty of other things to add to that one as well such as timestamps. And some loop traps to prevent endless loops.

But as it just about works for its stated purpose and I've already found it useful, it went into the usable pile. :slight_smile:

Many thanks for your feedback. I've far more ideas than I'll ever have time to properly implement but I always welcome more.

4

state-trail :slight_smile:

1 Like
5

Yup, started on it. :slight_smile: Though it is called state-timeline which is a little more descriptive and in line with the Grafana widget of the same style.

6

Ah, just sidetracked myself! Had a sudden brainwave regarding something I've long looked for a solution.

How to make a collection of text and headings (e.g. a document or report) be collapsible around the headings without having to change the HTML (which might be produced elsewhere - for example converted from Markdown).

And with a little help from my coding partner (AKA ChatGPT!), a new component <collapsible-headings> is born! Wrap it around some HTML that contains <h1> to <h4> tags and those become clickable to collapse/expand according to the hierarchy of headings.

Assuming I can get it to work, that should be very cool indeed. Great for wordy pages such as documentation and reports.

1 Like
7

Some more updates.

The basic version of the collapsible-headings component is there and does the job. Not perfect for sure but already amazingly useful if you need to show a lot of text divided up with headings (AKA a "document" or "report").

8

Another big update just pushed. Documentation not quite caught up.

Moving all components to extend from a base component to improve standardisation.

The following components have versions that, while not as "complete" as I'd like, are ready for basic use:

  • button-send - an active button
  • call-out - the latest addition, produces nice callout boxes of different types with title overrides.
  • collapsible-headings - takes a report/article and makes the headings collapsible
  • html-include - show html/json from an external resource
  • syntax-highlight - show JSON data in a formatted/highlighted way
  • visible-console - mirror console output to the page

All the components are dependency-free so you only have a single file to load.

I'm also building up a library of test/demo web pages (in the tests folder). There is a simple node.js web server that you can run to demo things.

Documentation is growing and vs-code intelligence is provided for ease of use.

Lots more to come in the ever-growing library:

  • show-var - displays JavaScript data on-page - e.g. I'll probably use this in the demo pages to show the component versions.
  • light-switch - with on/off/level/colour and location.
  • layout-area - pre-defined page layouts along with a set of area-* components that will make it easy to put information in the right logical place.
  • smart-list - nestable lists with optional icons, nested numbering, ability to create from a nested JavaScript array. Eventually, drag/drop reordering, double-click to edit various parts. Browser save and output updates to node-red ...
  • smart-report - an enhanced version of collapsible-headings with similar features to the smart-list but designed specifically for report/article style text with headings.
9

Callouts:

image
image1004×869 28.7 KB

1 Like
10

And the HTML for some callouts to show how easy they are:

    <call-out type="note">
        This is a <code>note</code> type.
    </call-out>

    <call-out type="note" title="We can add our own title">
        <p>
            If you specify <i>any</i> <code>type</code> attribute and a <code>title</code> attribute, 
            the title replaces the heading.
        </p>
        <p>
            This example also shows multiple paragraphs.
        </p>
    </call-out>

    <call-out type="tip">
        This is a <code>tip</code> type.
    </call-out>

    <call-out type="warning">
        This is a <code>warning</code> type.
    </call-out>

    <call-out type="important">
        This is a <code>important</code> type.
    </call-out>

    <call-out type="caution">
        This is a <code>caution</code> type.
    </call-out>

    <call-out>
        This does not have a type. It has no heading.
    </call-out>

    <call-out title="This has a title.">
        This does not have a type. It gets a heading if you specify a title attribute.
    </call-out>

    <call-out type>
        This has a blank type. It has no heading.
    </call-out>

    <call-out type title="This has a title." icon="😈">
        This has a blank type. It gets a heading if you specify a title attribute.
        <p>
            We can set a custom heading icon as well (only text allowed for now, use emoji's).
        </p>
    </call-out>

Also, for fun, tried this in a ui-template on D2:

image
image1275×1119 47.3 KB

Yup, works perfectly. :slight_smile:

11

Still more updates.

And this time - the library now has its own website!

https://wc.totallyinformation.net

The documentation (such as it is) and the demo/test pages are all here.

2 Likes
12

Looks good, especially with the examples.

1 Like
13

Thanks, I had a sudden brainwave and had been thinking about moving my blog (which I never get to update because it is a bit of a pain) to Cloudflare pages but then realised that I could use it to host both the docs (which use Docksify) and the demo pages. Even better, Cloudflare make a test/dev webserver that you can run with a simple npx command and that mirrors the features of Cloudflare Pages AND Cloudflare Workers - nice!

Cloudflare Pages gives me a lot more flexibility than GitHub pages AND not only have unlimited pages access (and generous worker access) but also link to Cloudflare DNS and other Cloudflare security features including Cloudflare Access if you want to protect access to something with up to 50 users for free.

Darn it, I need to get sponsored by Cloudflare! :grinning:

2 Likes
14

More updates today including the promotion of the <labelled-value> component.

image
image445×838 23.6 KB

And some further documentation updates. All the demos and documentation get automatically updated on https://wc.totallyinformation.net.

15

Should that link be https://wc.totallyinformation.net.
The colour of the menu links is a bit iffy for a dark page :smile:

16

Oops! Thanks. Corrected.

For info, the next component being worked on is smart-table. This creates an HTML table (usually a painfully laborious job) from a data array/object input. With named rows/columns, cell identifiers, column overrides, ....

Yes, I noticed that - suggestions would be welcome!