I am responsible for Node-Red-Contrib-BigTimer. I'm not bad at this but programming isn't my primary role in life so I'm having mental issues on tabbing the setup "Properties" interface. As you can see in the image, less than half of the properties show up in one screen even on my big monitor and I need to expand BigTimer - which has two pairs of on/off times a day - in Spain we're about to go to 3 electricity price bands a day (June 2021) so I see a need for more daily on-off times coming up. I'd like to TAB that properties page and I've no idea how to do it. Can any clever person demo in the simplest way how I can tab it to something like "Properties 1" , "Properties 2" and "Properties 3" ???
You might need to have a look at how something like the function node does it. I didn't take that route with uibuilder but instead went for buttons to open/close a virtual interface. Not really sure now why I didn't go with tabs. 
In terms of bigtimer though, have you considered using an "editableList"? That way you could have as many on/off sequences as you wanted.
When I said programming wasnt my thing - specifically web programming - I ALWAYS have trouble with CSS and JS - any idea where the function node is? I looked for node-red-node-function in the usual node_modules - nothing... ?
I tried using this code example https://codepen.io/WebDevSimplified/pen/ewapgK
as a base - fairly sure I understood it - added it to my html and js pages but somehow the tab headings came up, formatted - the home tab appeared with content - but I could not make it switch tabs.
Not just the on-off times - I basically want to split that page up as it is already unfeasibly long.
The EditableList - is Javascript - no idea how to add that into my list of items in the html page.. Thats how bad I am at the web side...
Any pointers if you are in the mood.... once I get started I'll go away
Hi, as Julian said, tabs are implemented in the function node so that would be a good place to start.
e.g. here are 2 of the tabs - the main "on message" tab and the "on stop" tab...
<div id="func-tab-body" style="display:none">
<div class="form-row node-text-editor-row" style="position:relative">
<div> your stuff here </div>
</div>
</div>
<div id="func-tab-finalize" style="display:none">
<div class="form-row node-text-editor-row" style="position:relative">
<div> your stuff here </div>
</div>
</div>
further down is the <script> to setup the tabs...
//create the tabs
var tabs = RED.tabs.create({
id: "func-tabs",
onchange: function(tab) {
$("#func-tabs-content").children().hide();
$("#" + tab.id).show();
}
});
//..
//..snip for brevety
//..
//add the "on message" tab
tabs.addTab({
id: "func-tab-body",
label: that._("function.label.function")
});
//add the "on stop" tab
tabs.addTab({
id: "func-tab-finalize",
label: that._("function.label.finalize")
});
//activate a tab programmatically by calling activateTab with a valid id
tabs.activateTab("func-tab-body");
1 Like
Wel, that didnt work too well. While obviously realising my html needs splitting up - and knowing how to do it - just for a test, I added that example html to my html page just before any of my controls just to see if anything happened... I'd expect to see nothing until the JS loaded...
and I put the js in a box further down the page in between the html scripts. Nothing at all.
I tried moving the js script into my .js file instead - and that produced "Node-red-contrib-bigtimer - TypeError: Cannot read property 'create' of undefined (line 25). I must be missing something here.. RED.tabs.create is on line 25
Any ideas?
The actual core nodes are indeed hard to track down. You can find the function node here: node-red/packages/node_modules/@node-red/nodes/core/function at master · node-red/node-red (github.com)
Lets take a step back Pete. In your .html file for the node, you should have an outline something like this:
<script type="text/javascript">
RED.nodes.registerType("bigtimer", {
//...
oneditprepare: function () {
//...
}
//...
})
</script>
//...
<script type="text/html" data-template-name="bigtimer"></script>
//...
<script type="text/html" data-help-name="bigtimer"></script>
The tab code needs to go inside the oneditprepare function. In that whole script section, remember that you have access to the jQuery front-end library as well (all the stuff starting with $) which gives you lots to play with.
However, any actual HTML that you reference in there must have been created in the data-template-name section of the .html file. That contains the basic HTML that defines the outline of the editor panel for your node.
Sorry if you already know this, just making sure we are all starting from the same place.
Steve hasn't quite shown everything you need. The actual HTML is defined here: node-red/10-function.html at master · node-red/node-red (github.com). Note how there is a "tabs row" and then a bunch of tab body sections. Then the JavaScript section actually creates the real tabs dynamically.
@TotallyInformation of course, you are right, putting the JS in the ineditprepare function indeed stops it from crashing bigtimer. I put th html in the right section as well and of course saw nothing. I removed the display:none from the first div and sure enough it came up. But of course there is no control. I know from the other example I tried that you need the menu (tab names) setup so clearly I AM missing something. Can I push my luck a little more - you refer to a node-red folder - I have no idea where that is, I'm aware only of the .node-red folder inside my /home/pi/ folder and that isnt the one you are referring to.
I am looking at Github now - github dot com/node-red/node-red - I've searched and cannot see 10-function.html - any pointers?
Sorry Pete, I can only find 3 references to the word "folder" on this page and they are all in your reply? 
On GitHub:
Hi
Sorry I'm suer this is me - but as a logged in Github user when I go to the node-red/node-red folder I don't see any BLOG folder under that...
But it looks like you have included that entire file - so thanks for that, meanwhile, adapting the code I first pointed out in codepen, I have this working... first stab at it - and thanks so much for your patience.
Of course I'd still prefer to use the node-red version if I can figure it out...
Actually - no, what I have seems almost perfect - the only thing I'd like to fix if any CSS whiz's are up to it... is this... the tabs line - the active tab should have no underline. I can't figure out how to overlay the LI (which could have no BOTTOM border) over the UL underline so the active tab doesn't have that bottom border while the rest do. Any ideas?
'''
.tabs {
display: flex;
justify-content: left;
list-style-type: none;
margin: 0;
padding: 0;
border-bottom: 1px solid black;
}
.tab {
cursor: pointer;
padding:10px 10px;
margin:0px 5px;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
.tab.active {
background-color: #888;
}
.tab:hover {
background-color: #333;
}
.tab-content {
margin-left: 20px;
margin-right: 20px;
}
'''
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
