Trying to load npm package justgage into UIBUILDER 7.4.3 NR 4.0.9

Dashboard
21

Just one question.

Raphael is apparently downloaded with Justgage. I can’t seem to see where these paths are derived from.

Looking at File Explorer in node_modules Raphael and Justgage are in two separate same level directories, and there is no Raphael under Justgage, so how does the ‘tree’ work? Is there some kind of command in Justgage to show where Raphael is?

UIBUILDER libraries only shows Justgage available.

EDIT: Node_modules in the uibuilder directory

22

Not totally incorrect..

Reading the justgage install guide - justGage says;

“Include JustGage and Raphael scripts in your page.” So was not aware that justgage was actually bundled with Raphael, and I loaded both as separate libraries. Obviously a duplication, but it made life easier because it was easier to determine their paths.

I seem to recall that Justgage is in the root of the Justgage library, and Raphael is in a sub- directory called of course raphael, but I could be wrong.

23

I see and understand what you are saying,

I am trying to get my head around this, purely because it is not yet clear. This is the deepest I have been into npm, so you will have to excuse my ‘innocence’ and on getting a grasp on what it happening.

24

It was a is a learning curve for me too, and I've not necessarily got things right, for example a lost of my javascript needs further work to integrate the chart etc into my 'Centralised Message Handling'.

It seems that all the pieces for UIBUILDER are documented & available, but arranging those pieces into the jigsaw is proving hard.
It would be very useful to have some very basic templates to work from, especially for SPA structures, which introduce a number of problem areas for none-professional users.

1 Like
25

And this is something that needs work for sure. In truth, it isn't really UIBUILDER causing this but the strange life of JavaScript library developers who don't quite seem to be able to get to a solid standard for everyone.

This is why there are caveats in the library manager in uibuilder. There ARE standards for declaring where the top-level entry point is for a library. But not everyone uses them and some people misuse them.

And, using a library from a CDN often has different entry points to when you install it using NPM!

This is also why I just make the whole library's folder structure available to the front-end when you use the library manager to install things. Because it is literally impossible to know where the necessary files might be.

Very frustrating all round. If it makes you feel any better (I won't!), I have the same issues.

If you can at least identify some that may be needed, I will work them up for sure.

26

As a novice in all this, I am learning all the time, which is one of the things that gets me up in the morning! I have used Julian’s examples to help me along the way, and agree, the information is there, but to me, at times, I have found it confusing, mainly because I want to run before I can walk. Your flows have really helped me a lot in this journey.

Reading the manual is not something I do easily. The problem is, I see an idea and, like a kid, want to run with it, so only me to blame!

I/We are lucky in that people on this Forum with more experience than me/us are ready to help work through our problems. A fact of which I am truly grateful for.

To me, the ‘modern’ programming style seems similar to what I was using back in the 80’s on a far larger scale. Lots of Subroutines to carry out specific tasks called from a main routine. It is just that bigger ‘subroutines’ exist these days. pulled together by a central routine. That is of course if I understand correctly.

27

Oh, don't worry, you'll still be doing that many years from now! I certainly am.

:wink: Well don't forget that I was taught my programming skills in the same way. Some things don't stop being good.

Yes, things got a lot bigger and more complex, that's for sure. But the central routine thing was there before in most cases - unless you were directly bit-bashing hardware. It just got a bit more complex.

Fun fact, my Dad worked on the first computer at Cadbury's. It was made by Singer (yup, the sowing machine manufacturer!) and was programmed using toggle switches.

Years later, I ended up working on the computers at Cadbury's as well. Except, by then, they were £10m+ worth of IBM mainframes and a room full of tape drives (the big-cupboard sized ones) and hard drives (the ones the size of slightly smaller cupboards). For operations, we used punch cards, magnetic tapes and green-screen cathode-ray tubes. :rofl:

28

@Paul-Reed Thank you so much for your flow. I have now managed to understand what is happening. :partying_face: (Must admit, I had a week off for Grandchild sitting!)

I am now going to apply the same principles to getting @hotNipi web component gauge working in SPA. Editing your flow bit by bit made sure that i knew which parts I needed and which parts I didn’t.

Finally, to get the display I want I will have to resurrect my css knowledge! But that is just another journey without too much complication - just a few cul-de-sacs!!

29

Just been mucking about with ObervableHQ Plot on my new weather page and starting to try and work with Apache ECharts which D2 is switching to. Both work though both are somewhat different in their approaches and have different strengths and weaknesses. I have some example code based on data from OWM if you need to look at it.

I note that ECharts has some decent gauges in it BTW.

And, if you have any issues with the web component version of hotnipi's gauge, hit me up, I'm sure there are plenty of improvements that could be made.

30

I'm in the process of tidying it up, and removing surplus code, and have updated my git repo accordingly. If you find improvements, or better ways of doing things, please let me know, as I'm on the learning curve too :sweat_smile:

31

:lol Of course I will, but to be honest, you are one of the people I follow on here to help me get my stuff working! I will certainly have a look once you are happy with the code.

Having said that, I am still getting to understand/comprehend completely your script. I understand, but need to comprehend so that I can create my own stuff, and as I get older, the comprehending bit becomes harder! But you have literally saved me weeks/months. I need to get my (very old) Javascript and css books out! (Or possibly get some new ones!)

@TotallyInformation I did get hotNipi’s gauge working, but in tidying up, I did the inevitable of deleting the working one (Static Page). At the moment I have a couple of errors that I am working through -

Uncaught SyntaxError: Unexpected identifier 'template' (at hotnipi-gauge.js:18:51)
index.js:6 Uncaught SyntaxError: Unexpected token 'if' (at index.js:6:26)

I know I got it working, but not sure which source - Forum or Web Component page.

32

At the moment, I am happy passing an embedded Grafana graph into the SPA site, but once I get that to 90%, maybe, possibly, I might progress to this…

33

I usually ask chatGPT ‘why am I getting a Uncaught SyntaxError: Unexpected identifier 'template' (at hotnipi-gauge.js:18:51) error in the code below.’

….and then paste the whole JavaScript code.

Same with the index.js error

AI normally quickly identifies the error

2 Likes
34

:smiley: I just constantly rely on MDN to remind me about all the functions and API's.

35

I am afraid that the language in MDN is not the simplest, but once you have the idea, it can help a lot!

36

If I don't understand the language or, more likely, a term, I will look that up more generally to get a different view. ChatGPT can help there.

1 Like
37

OK, I have found where my problem is.

If I open the Node hotnipi-gauge.json the working flow in SPA (no values are transferred due to SPA method) and CTRL-C to copy the code, then CTRL-V into flow of the static page in UIBUILDER I see errors (Javascript set as language in both). If I do exactly the same but RIGHT CLICK and copy, then go to Static page and RIGHT CLICK paste, I get no errors and the flow works OK (same with index.js). This was in Vivaldi, I will try Brave and Firefox, although Firefox is starting to go out of favour with me with it’s integrated changes including AI etc. despite being an early adopter!!

@Paul-Reed Chat GPT showed me where the error was :+1: , but of course it couldn’t account for this syntax error!!

38

Sorry, you've lost me with your explanation :smiley:

I've not jumped in because I thought you may want to sort it yourself. If you want some more help though, you probably need to share some code and the errors. Happy to help if you want it.

39

It’s a copy and paste problem with the Browser!

CTRL-A, Ctrl-C and CTRL-V from the Node Editor box to another flow and the code format is corrupted.

CTRL-A, RIGHT CLICK and Copy, then RIGHT CLICK and Paste into another flow and all is OK.

Or at least, that is what is now working for me.

(hotnipi-gauge.js)

1 Like
40

Do you have any browser extensions installed? Or something at the OS level that interferes? (AutoHotKey or something else?) Or do you have a sticky key?

I've done that kind of thing fairly regularly so it should be fine. I use Vivaldi on Windows 11.