Code in Node-Red: UIBuilder beginning

oops okay I'm guess I'm setting this one alone and um I have some free time the family is out so maybe I can get some bir work done in the next maybe hour and a half we'll see and uh I want to learn a little bit about this UI Builder uh because I want to do some new stuff and uh I don't think I would be able to do that in uh in the N red dashboard so I just need to learn something new and uh so we are going to do that and as I said in the previous live when I finish some housekeeping on the automation engine is that I started looking into UI elements uh sorry U UI Builder and uh I think I do have some basic understanding how it works so maybe we can just use it and um I've also um try to create a website that I can use I'm not really good at HTML especially not the sort of like the new stuff and how it works but uh I was able to use C GP just to give me a template and you know a couple of basic Styles which are I think they're good um maybe if I have some time I can work on that um or if anyone has some good styling skills and want to restart this page then uh of course any um help is welcome but um that's what I want to do now and uh let me just um get the basic started so I have a big example here which I think I'm just going to back and forth uh going go back and forth between this and my example but um let's just start working on this so I want to use this example uh UI Builder okay so um but I want to do it here here so I have a new UI Builder and by the way the way I understand this UI Builder is that uh you know with dashboard you can place uh certain controls on the on the screen like I want the button here I want the chart here but UI Builder what you are basically doing is you you have an HTML file and then you can use the UI Builder to dynamically replace parts of it so what I want to use here what I want to do is I have this template which is is basically just two big columns um and I'm so I'm going to just um like tag certain parts of the of the HTML which I can autop populate using the UI Builder So based on like you know the number of rules it I have it's going to populate this um section here and um and also in UI Builder there is this component here which is the UI element and let me just check my phone okay so the UI element which uh replaces part of your HTML is my phone holder okay so which replaces part of your HTML with something that you insert so I think I'm going to use that so I keep um I keep this as a skeleton and just have a piece pie of node red flow which populates this list and then it will populate the uh uh the form as well and uh with this UI Builder what you can do is you can um give it um certain elements like lists and paragraphs and Act form items so I think there is an example here how you can add a form so you can add a form in form of a Json where is supports the the main form elements like you know text and dates and buttons and that sort of stuff so you define it like this and then it would automatically render the uh the corresponding HTML uh which I think it's going to be great because uh I don't have to come up with the HTMI code myself but on other cases like this list view I think I'm just going to generate the HTML and then just uh put give it to UI Builder to add it to the site um but let's start from the beginning and um um we'll see how we go so I think I'm just going to name this one rule Builder and uh I don't think I have to configure anything at the moment and you need to deploy it first so then it creates uh this uh page and actually you can click here so you have uh so this uh the URL of your node red/ rule Builder and so that's done that's the basics and I think we can start so this also gives you a basic uh structure of like a basic page and um I think I'm just going to um [Music] use maybe these toggles just for testing uh how do I okay I always forget how to create the junction uh Junction yeah okay that's it so so all you guys go into this Junction and so the reason I'm doing this is uh where is my UI template okay so you go here and I go to okay how I do this okay that's it so if I send the message nothing happens I can toggle the message so now you can see that it works and I can toggle the status and the and the message as well so if I need to do debugging I can um at least do that one okay but what I need to do now is I need to take my HTML and my Styles so I think what I'm going to do is I'm going to use my Styles and copy that over to the UI Builder Styles so here in the files you see the uh styles. CSS and uh okay I guess I can leave the import here and I just uh paste mine and I'm guessing it will [Music] override uh save okay done I don't think I need to deploy okay I think I still have this black bound ground I'm not sure why that is but we we are going to figure that that one out maybe there is something in the HTML uh do know I'll find out have you used VY components yeah no so I'm completely new to the UI holes I mean I haven't used view or react or any of these uh environments and I think this can use either of those but I simply have no idea so I'm really just starting this whole thing so this view ify components in the UI that's not in UI Builder but in the dashboard right uh so let me try to bring over the HTML as well okay so HTML head viewport okay I use the same thing and then title okay maybe I'm going to copy this over here as well uh CSS and I guess I need these oh okay I have a class uib here that's probably the reason it is uh not black so I just want to use my class and uh so this is my code or my example and yep uh so now I'm just going to replace the whole stuff and I'm also so this is my example obviously I created all these so I have something to to view but so rules is scrollable list so what I learned is this in this U IB element you can replace um parts of your HTML that are identified by a special uh ID so in the example which I just deleted can we yeah so there is an ID more so I think I'm going to use the same thing here so I have a scrollable list and I'm just going to use it ID rule list rule list and of course I don't need any of the examples because this is what I will generate myself and I'm just going to leave the right column as it is for the time being so this is ID rule list so save and done um and following this example so I will use a uib element sorry a [Music] UI okay yeah maybe I should look at this view tii um maybe that's another way of creating some nice uis and I've also read in um in the no R Forum that somebody is working on like a dashboard 2. 0 because uh the current dashboard was built with so many sort of like pre-existing ideas that it is really difficult now to just uh um make changes to that so they found it easier just to rork the whole framework and now they are calling it dashboard to I have no idea when this is coming out so this is called uib element okay so we are going to use that and um oh my status loging is here anyway I will need some more space so and here we are going to insert HTML so you can see that um you can create all these um elements here uh by using that Json um description instead of doing HTML but I won't be able to replicate my uh example structure like this one which is like just a bunch of Dives so I'm just just going to use HTML and uh you have to give it an ID rule [Music] list so that's again the the ID that will be generated for the um um for this whole thing which gets inserted it and uh I just need to just uh cheat here so that's the parent last and payload okay so whatever I generate I want to insert it under the rule list um element which has the ID rule list and uh that's last and the information is coming in the message. payload and I don't need a heading optional heading and yeah I'm not going to use fine and that also goes into this uh input node of the UI Builder um I'm just going to give it a name so rule list okay so that's will insert the rule list into my site oh flow fuse is working with 2.0 okay good to know so um inject that's for testing function debug okay first uh I want to get the rule list which is um oops [Music] oh ah it's a good idea that I'm doing copy and paste um so I need to get the settings um okay okay and if uh rules length Okay so I just got the settings and um uh so I can get the roots or whether I want to get the roots from um the file storage or the memory and I get the rules from the contact store so this guy here and um and I think I just want to create um so I'm just going to pass it in uh actually there is no point to transform any of these so I think what I can just do is I can just pass it as uh as this object so if everything is working right then oh yeah uh payload so I put it into the payload equals message okay so I'm I'm getting the um what wait what what what is this uh what am I doing that's interesting I've never seen this before I guess this is some sort of stupid circular reference okay so I have all my rules here basically all I want to extract is the name of the dates for the time being and I'm going to use a template to format the um the the output to HTML and I always forget how to do this so I need to oh it's here okay and I'm not going to use this uh but I always forget this how I do this payload SL payload uh so this one if you have I I love this template node basically what it does is if you do this uh hash payload and SL payload then if your payload is an array then it will execute this code for every single instance in that um uh in that array and I need to take an example of uh what I configured for a list item okay yep and I don't need a table for this so it's going to be SL payload sorry hash payload and SL payload and um yep and all I'm going to do is I'm going to get I'm going to replace the name the name name so this is the name attribute I'm going to render it there good deploy let's check uh date test yep that looks good so if I pipe this one here so our website looks like yep uh the spacing is a bit beird but um and if I do time stamp yep yep yep yep yep yep yep yep yep yep yep yep yep yep okay that's great this is what I was looking for so I mean it is really fast it's to get something done like this I don't know why this is um um not aligned to this line but anyway so I want to maybe I can change these um you know icons at some point actually this is what I don't understand so if I look at the template um it uses this icon so these are I think these are like emojis I don't know how to generate these so these must have a special um character uh like a uni code character um and I guess I can F12 here and I look at the page Source um default I oh yeah that's just the class okay maybe I can um some Google like what are the HTML elements here so what I actually I'm looking for is uh I want to assign a an even to this div um so I can click on any of these elements here here and I was assuming that okay so that's going to be a little bit difficult because what I was assuming that because I insert these elements here they would have a special ID oh okay but because I generate the HTML myself it doesn't have so it puts everything into aiv and you can see rule uncore lore uib and that actually comes comes from uh here rule isore uib but I need to create my own IDs so um so here ID equals um and um so ideally I don't know how to create a number here which is the index within this payload and I think this is called the okay I think I need to Google node oh maybe I can just um template okay so this is this is mustache so maybe I can do something here okay name um oh okay so this is how I reference to T um two fields and uh I can reference to sub objects as well so that's good uh implicit iterator okay fine uh template today okay yeah these are the sections so this is how you create sections and uh uh yeah and non false values okay inverted sections comments partials o okay okay oh this is getting too complicated for me to be honest and that's it okay so maybe I'm just going to do um uh maybe I'm just going to do it here so for I'm just going to Loop through and add it myself okay welcome chicken chicken yeah dashboard 2.0 I think it's going to be interesting maybe I should um um write sorry read some of this stuff uh ahead so I know what this is about um so I want just to um Loop through the um the whole list I know I could do this for each but um actually I want to use this variable now so um rules I do ID equals I so because I have no idea how to create the ID I'm hoping that I can do it like this uh done inject website oh not this one we can close this one uh hit this here and um oh oh uh yeah rule 0 1 2 3 4 5 okay because um now I want to assign an event to this and the way you do this is um I'm just going to go back to my Forum post where I got some help so um I just want to assign this uh onclick event and I'm just hoping that just by assigning this it will become clickable and uh and let's just put some debug notes here and I think it's uh it's best idea to create a complete debug uh no I think the first one is going to be enough data from the front end control messages yeah I only need the data from the front end for the time being okay so I did this now inject so it generates the new code and I can close this yeah and you see it becomes clickable and if I click then o oh yes it is working so now I have a payload okay I yeah I don't have a payload but what I care about is this UI oo okay so we have this underscore UI element in the response and we have a send ah and I clicked on rule unor 0 so I was thinking that maybe I can use this very sort of sloppy rule that now um I always know that the ID is uh so if the ID starts with a rule then I clicked an element which is here and I can um uh just basically look at the number UND theore uh behind the underscore it's not nice but um I guess it gets gets the job done so I don't really care about anything else other than you know props attributes classes Mouse div client ID yeah I don't really care about any of the other stuff so I can do a function here and I think probably this is going to loop back into um everything process output uh process user input because that's going to be like that and uh so object yeah so probably I can do a lot of housekeeping up uh I uh let me just import this whole lot because I think sooner or later I would need to use uh these anyway like my set things and and everything else um and probably I'm going to use log level here but um yep uh so my rules are here my data cache everything is here okay and there is going to be a big switch node so switch message doore uib um okay no uh let's check this one first message dot equals so if this is an event send I don't know if there is going to be anything else probably just going to be event sent but um let's see and if the ID is uh if message do uib ID point do uh substring I is it all okay it's all lower case so for let's say five is Rule underscore so green and ring and um uh rule selection o a o why did it go to my other screen not sure anyway click yep okay uh so if this is a rule selection then what we can do is let array equals uh uh message do this do dot split and the rule ID is uh and this is the second array and actually the I we should convert it to a number uh bars integer uh I want to make sure that it's not not any in three zero okay that works uh and I'm thinking that um so my thinking is that this is going to do all just the processing of what comes in and then maybe um Define what item got selected what needs to be printed on the screen but then the actual you know getting the data what needs to be printed is still going to be in separate uh function notes so maybe what I can do here is I can create a big context um storage here which is going to be like uh editor and I'm going to store all the values that are um store what is happening on the editor so what is selected which rule is selected what we have here and some of the other bits and pieces so I think um yeah I'm going to do something like this um okay and the editor. rule ID equals rule so we are just going to put this here and uh flow flow. set editor okay and okay and then we selected the rule ID so we can just return and we are going to return this here on the output so if I deploy and if I select something here and if I refresh then editor rule ID is one okay and um and what I can do here um if editor dot rule ID uh sorry not undefined so if we have selected a rule then on ident um [Music] then rule um [Music] rules oh actually I put this into the um I know okay and I add a selected attribute to the to the editor which sorry to the rule that got selected and I passed that through because what I want to do here is that uh so it has a um class list item and I want to add the word selected here and uh and I know you can do these stuff in mustache as well and actually I think I've scrolled through that example just a few minutes ago and I know that I have done this before and it's done with the same question mark I think it's done with the same question mark [Music] person non false values when the value is non false but not in the list it will H why okay or maybe they are using the pipe oh where is my pipe it's not the pipe for will there be a recording on this broadcast on the channel uh actually I I think there should be um while I'm not really doing anything with these recordings I'm just uh I'm just putting them on but I am assuming that this can be accessed later on as well because I can see that I'm getting like just a few number of views here but when I go back to my main dashboard I can see like a few hundred views on these live so I think it just becomes available automatically um you know once the the streaming stops so yeah sure and uh mustach conditional conditional rendering how to render if statement in ah okay yeah that's it uh okay it's again the SL has fine let's give it a try um slash selected selected select uh selected I'm absolutely not sure if this is going to work but inject it works yeah and I if I do this oh that's stupid hey oh I know um I learned this the hard way so if you are um when you do something like this rules equals flow. getet rules it um it doesn't copy the data in the context but it instantiates it so when I change it then it actually um you know when I change anything even without um you know typing flow. set it automatically updates the flow so if I go to the flow now you can see my so this is seel no this is selected this is selected this is selected as well so all of them are selected so this is why I need to just change it here so I'm going to do this if um uh actually you know what I should make this change I I think I should make this change on the other code because um that's where that's where the selection happens so I think I should maintain all the data here as well um okay okay um yeah okay so technically again as you can see the ID gets written into this as well so I don't really need to do this every single time okay um so if if actually let me put this one here well if if we have gotten this point then the the the rule is definitely selected so there is a something is definitely selected so what I'm going to do here is if uh I equals to uh the editor. rule ID so if this is a selected item then rules do I do not selected equals true and probably I can do this in a much simplier way as well um I I can do something like here that uh ah anyway it takes up more space but I guess the you know the execution is going to be the same anyway okay so this is false and that's the end of it and I don't need this and I deleted an extra thing okay so um we go through all the rules and then we deselect everything and then we just select the ones that we we actually need so if I do this W Magic ah okay it is fairly easy to get things done with this uh um uh with this thing UI Builder okay maybe I can spend a little bit extra time just to beautify this uh just a little bit okay okay uh so that's how it looks like maybe I can do something different for these icons so HTML icons so the thing is that I what I don't understand is how you how you get this icon where does it come from because even if the F12 it doesn't show me anything it just um so it's a div icon okay it that's that's only Styles here and um you see even this one shows just so I I think these are like the Emojis Emoji Emoji codes okay oh so this is some uni code okay um um okay full skin token what's this not sure it doesn't load uni code cldr project I have no idea what this is help index and help Emoji Emoji ordering C proposals actually what I don't need the Emojis I just need need uni oh okay uni code about uni code technical support membership Emoji search uh NOP um code charts Wow Wow find chart by hex codes um oops wonderful um so how the hell I search for American scripts emojis and pictographs specials numbers and digits mathematical symbols punctuations OFW technical symbols control pictures what's this oh okay yeah I don't care about that miscellaneous technical e damn o okay something okay is everything is here because what I was thinking that I already have I addit this enable and disable thing so I can change the icon based on if something is enabled or disabled and here what I can use this small text here is maybe just use icons in what's in the conditions and what's in the um um in the actions and I was just thinking about you know using some sort of codes here I just have I have no idea how um I mean there must be a um some sort of easy search function uni code uni code okay uh um uni Cod icons damn that's a lot okay so I I would need something for a uh okay that would be symbol list of unial symbols um basic Latin F folder wow okay copy hey okay that's what I need um so symbol search okay I just need a way images okay F folder so I need an idea what I can what symbol I can use for let's say um an Automation and I need a version where you know maybe something is black and white and something is color so I can indicate that something is enabled or disabled uh content telephone flowers crosses Hearts arrows planets Sports wow crosses maybe not that special symbols and can I search something here like um oh okay so there are some really elaborate Graphics here as well okay so I can use this for if I have a Time condition maybe um oh that's cool maybe I this is a better icon for um uh for a necklace sort of like um like a reoccurring thing I just want to find if well sorry I just want to see if I can find something here which is um something similar which is black and white miscellaneous simples and pictograms let's look into this category and maybe we won't find something which is uh oh for oh uh yeah I can see all these they are familiar from WhatsApp and Viber and the other thing Globe all the weather jeez beverage symbols celebration symbols musical symbols entertainment symbols Building G okay Miss Sports Emoji notifiers animals any oh [Music] hands okay I think I'm going to use this lot I'm pretty sure I will be able to oh yeah you guys see the all the folders and everything uh actually maybe I can use maybe I can use something like this so if it's closed it's disabled and if it's open it's uh enabled Okay so how I uh yeah the value is false okay so um class leave icon okay so the icon if something is true so if um enabled so if the enabled is true then we are going to use the Open folder and we close with enabled and if the enables is false yep enabled then we are going to use the other one which is the closed folder yep uh yeah because this is disabled and the other ones are enabled uh that's that's that's really good okay so this is cool and uh I can do I can do this here as well so I uh yeah and I do like the fact that I don't really have to code an awful lot to get this going so here in this section I want to have icons for the whole you know condition stuff so conditions so what I'm going to do is I also going to create a thing on conditions and first I'm just going to print here the um the trigger and Trigger trigger trigger trigger trigger yep that's good okay so it it prints as many times as many conditions I have in the for that um rule okay so where is my not so okay that's cool and um so I can and again I can do like a big big sort of like um uh this here so if it is uh oh okay so I would need to find a way to place an icon based on not a value of a field uh variables okay I'm not sure if I would be able to do this uh okay I don't think it will be a Lambda function we have done the the sections EMP empty list I don't care Lambda so rap name is aome um um okay that's not what I'm looking for conditional if else statement HTML CSS JS uh okay so script okay I don't think I can do a condition on the value unfortunately I can do a condition if the um if the thing exists if an attribute exists formatting mustach condition all for f HTML rendering um response template yeah so yeah if yeah opting is false yeah um so the reason I want to look for this because uh oops so the reason I want to I I would like to do it here because then I can do all the formatting related stuff here like you know conversion of text to uh icons here and I wouldn't have to put it in in JavaScript or something like that um but I don't think it would be possible so I can't yeah um let's check this example again okay so if notified type friendship okay actually if notify type render something okay okay so that actually this is what I'm looking for uh um mhm yeah it cannot be done yeah yeah move as much Lo logic out of the template as possible uh okay I mean I I know where to move the logic I would just hoping that I can do it in any other way but um fine so maybe what I can do is um I can leave it here and then uh I do it here which again it will end up in the context but it will end up in the context no big deal so [Music] rules and it will get re executed every single time but again it's not a big deal because it only happens when the user clicks on something it's not like that this rule will get executed when uh the um the whole thing runs um the like you know when the the the rules are evaluated okay so assign icons to the uh conditions on the condition trigger types so there is going to be a switch on um rule rules I dot [Music] uh oh for that's another um Loop J less than rules I do conditions do length length j++ and this is where I usually do typos and use J's and not eyes and not Chase so obviously you have to uh be careful so switch rules I conditions J and probably I should use for each at this case and Dot trigger and so if I say that it is case data then uh I icon equals something okay let's hunt for icons so we have data State and I think we have time right oh let okay let's uh let's look for something uh let's look for the default icon default icon is going to be let's use this as a default icon uh default oops okay that's my default icon and I have data uh oops oops that state and time and just to make sure let's look at the documentation and Rule be conditions uh data State time yep date State and time we have date State and time okay let's hunt for icons um so we have let's look at the time that was easy I care I do remember there was some some clocks where are the clocks no idea um so clock uh let's use this one so this is going to be our time Rule and uh let's look something which is uh data oh only this um I need a better keyword F input no let's look at the miscellanous pictograms again uh data I mean I'm going to use just some some stupid icons because I don't think that I would be able to find anything which is even remotely um you know descriptive of either data or state I mean maybe I can use something for State because then it like you know it goes from one to another like you know it's sort of like a circular thing and um data could be one of the the notepad thingies here memo or let's use memo whatever okay so that's done and then here I'm going to use conditions and actually I'm going [Music] to conditions and I'm going to print the icon and and n bsp nonbreaking space glitch oh cool oh yeah and it works yeah so for example this date only has a date thing and then the washing machine looks for data and state data and state data and state pretty much everyone is data and state and then you know this has time conditions as well so actually that that describes the um you know how the rule works so that's uh that's that's cool this is what I wanted so um and um and then I want an [Music] arrow and we do the same with the um maybe this is a small Arrow but we will do the same with the actions as well um and I can do the same thing here in the in the actions assign icons to condition triggers I assign icons to uh action what we have inactions types they are types okay and we are going to do the uh same Loop we can use the same variable so let's uh I guess I don't really have to use let here anymore so conditions and that's going to be actions actions actions actions actions actions we are going to use this default again this is good enough X CH J yep and um and the switch is going to be on the action type oh actually I do have to use that so action type and we have uh action types as set State time conditions rule actions set State control and that's it uh um set State Control okay let's hunt for icons um control oh maybe we can use this envelope for a control and the set state is is is uh megaphone whatever and in the template we are going to use the same method but we are just going to use on actions and within each action we are going to print what is in the icon which is going to contain the icon and the non-breaking space and deploy execute oh that's cool oh yep exactly what I wanted if I want to make it really nice I can just do a small um what you call it um um like um hint uh I'm not sure if I can do if you can do hints for the actions you can do hints for um or captions for the images something like that but anyway uh I will get used to that and uh that works as well and yeah okay and uh and again that was that was done with with very little coding to be honest I mean it's not an awful lot you know it's doing some sort of like graphical conversions here but that's basically just getting the data and then most of the for formatting happens here and that works already so um yeah I'm quite happy that looks good I don't need this and um we can carry on so I think what I want to do is um uh so these are my so that's my form and ID selected rule name selected rule name okay save so I have just given a um an ID of this so I can replace it based on the selection here so um let's go back to the main code and so for this I would need a new uh um uib element so you I don't I mean I'm not really going to use this but I give it a different name to what I use selected rule name so this matches with the uh ID that I've given in the um in the code this is going to be HTML and Rule name and this goes back to here [Music] and and I think what I'm going to do here is yeah I'm going to check which one is selected if I'm just going to put it into some very varable so um selected rule name equals um okay selected rule name so I put it into the message to the main message object and I just use a well actually I don't need to use that message do selected rule name so this will just uh fetch the selected rule name from the message object and put it into the template so um oops h h selected rule name let's just do a debug let's here our selected rule name and [Music] selected selected rule name message do selected rule name selected rule name select ah bloody bloody spelling stupid okay so yeah that's that's what you get that's where you get Co cot is if you don't need if you don't know how to spell okay let's keep everything consistent selected rule name selected rule name everything is like that okay good I think I need to refresh this and I need to do this one as well and still doesn't work okay F12 um selected R name rule list oh hey it's here oh sorry that's that's the that's the list um now I want to close the right right column selected rule name form two H H HTML into oh hash so it knows it's an ID that it needs to match not still doesn't work [Music] mustache oh oh okay why is the form still there okay anyway I can remove this um that's not a problem quite like it okay okay what's the next actually I um so the reason I'm a little bit puzzled because my understanding was that it always replaces ah no [Music] yeah okay it doesn't do that because I think because it says hit here that do it last it puts it to the end of what's inside that tag which is the word form so that stays there and it just puts whatever comes through here to the end of of it so that's why and it puts it into a different div so this is why it's in a new line um so I mean yeah I guess uh in in the template I just need to remove it um uh I keep this empty and save and uh that will take care of it so now the next thing is that o I need to start creating all the the conditions and the rules um sorry actions and I can I can strip this sorry sample form because I'm I won't be needing this so actions conditions actions uh fine and I have to put again a placeholder diff here um I have to keep come up with a lot of different Styles here so that's going to be a um okay so the form itself has a a style hm okay so that's uh okay let's just name it condition list and that's going to be condition list as well and uh and the actions is going to be going going to have the same uh it's going to be just action list um so condition list action list and that's the rule name uh okay and um and I save and I have to come up with a I think I'm just going to uh copy this form CSS for the time being and this is called uh condition list condition list okay um and uh let me just rearrange this stuff a little bit better so I have more space to work with so that's the I'm thinking that I I'm going to have stuff sections like this here for conditions and actions and probably more stuff here for all the different forms um so I'm thinking that maybe I can create I'm just trying to just rearrange this a little bit better so maybe put a junction here and a junction there as well so this goes to here here oops this goes to here and that goes to there can I no I can't and it goes to here I don't think I can do ah this is ugly um I need a link Link in and I'm going to name this rule Builder UI Builder input and then link out ship ship andless we go in here okay it will keep it a little bit more tidy and I think here there's going to be like a bunch of uh case switches as well and um here payload editor and I think I'm just going to set the topic as well just to say what got clicked rule selected because there is going to be something like act um condition selected action selected and based on what got selected I don't need to regenerate the whole screen again uh or reinsert the whole screen okay so this is Rule selected and um and probably a big switch here switch um what is the action and topic and uh topic is Rule selected and if it's rues selected then we need to update the rules um okay that I don't need anymore because this is working cool so now we can do the whole thing again with conditions condition list okay and yep and this is going to be called conition list and the rule list is condition list condition list and last and payload no heading okay fine let's um let's look at this one so um I'm wondering do I need to do anything here um okay we have the editor here so I think I'm m yeah I I mean I I I just got the whole okay let's make myself a little bit easier okay so conditions um the payload is rules at editor Dot rule ID oh my dad is calling but I think I'm just going to call him back so editor. rule id. conditions because after all I only need to render this so there's no point passing the whole shibang around okay so okay that's done and in a template I think I need [Music] to I need to do the whole ID thing again uh yeah and probably I need to do the for the actions as well and I might I might just do it here because I I already have all the data I'm doing the whole looping and everything so um rules. i. conditions doj do ID equals J and I do the same for actions oops what did I do actions do J equals J okay okay so that will prepare the data for me and I have a um a div and I had to do the whole selected thing again as well oh Jesus um where I did the selected if rules okay oh I did it on the uh anyway okay that's fine so con I condition ID uh yep and I think I'm just going to print everything here because uh it's almost readable and I can make it pretty a little bit later on but uh I think that's going to be enough to get started operator and um so so far I think every condition has these three attributes so we are good as long as we keep to that rule or if I keep to that rule okay so this would get the trigger the operant the operator and the value printed and this was go up and this is uh yep yep yep already looks good and now I well I always initially need to do this crap condition list what did I do wrong condition list condition what just happened okay uh so why is it not working so I okay so uh is this because of the ID condition I should have changed this so I I want to create a condition list okay two and then replace it into the condition list ID last payload that's it and so that's how it looks like now if I insert okay yep that works why wasn't it working before woo fantastic it works and I can click click click click click that's that's that's pretty good that's pretty good okay so time equals 1 1500 okay maybe I just need to pretty print this one but uh I can already at least understand what's going on here let's quickly do the status uh sorry the actions because then um uh that would be good so if I get action list action list and that's going to be actions so the selected rules actions and oops and uh in the okay let's do the template first so actions have a type and a topic and a value and action yep I want this to be clickable and and I want this to replace the action list and action acttion action action okay so I think the biggest mistake to make here is that all these typos between the IDS in your HTML and the uib element stuff uh and obviously it's um class okay the class is the same ID action list sorry condition list action list okay so that's good that's good that goes back down here and wow wow man this is good man this is good oh it has three yep oh I like it I like it and now what happens is I can select I can select an action sorry I can select a condition click and I have an event which is event ID is condition and yep and I can do the same with actions action and I have an event event sent action zero okay so I can expand this code [Music] here uh node status uh dick dick node status Red Dot unhandled event and then um okay yeah because I'm not using a case but I'm just if maybe it's a good idea to have an unhandled event okay good good good good good so this one and then paste so this is condition condition is it condition condition and green green Green condition select condition selected so yeah I'm going to split it but again we get the ID at the end and Status green yeah uh let's keep consistent condition ID and condition ID selected editor do condition ID is condition ID and let's save the editor payload editor it is condition selected condition selected [Music] select yeah um okay so now this is Rule editor Dot rule ID dot condition Z do length if I equals editor. condition ID then rules [Music] conditions uh condition I selected equals true otherwise is false it's a lot of copy and paste uh I hate it so yep conditions selected select set the selected flag uh on [Music] the yeah okay so and again there's a lot of assumptions here because we are assuming that the role ID is selected it should be but yeah probably I have to do some if statements here so we are not I mean otherwise it's just going to fail it's not nice it's just going to send an error um yeah so if it's that and we don't have another loop here no we don't um yeah R condition s uh yep okay I think that's going to work and if the um if this is condition selected again typos typos uh then I update this and I forgot to save the rules so actually I should float do set rules rules because I'm I'm updating the rules up here and uh settings dot oh what is it settings dot uh rul store oops anyway let's type it Rule Store and the same should be here as well yep I'm not really the fan that I'm using the the rules to store well besides storing the rules some of the things are related to the editor but with this template I don't know how I would be able to do that um you know processing two different set of information like how I can do a selected based on a number in the item that comes from a different variable I don't think it would be possible so um yeah let's just leave it like that um okay and he something is not working let's look at [Music] errors unhandled event condition why oh stupid me um 1 2 3 4 5 6 7 8 9 10 it's such a good idea that I put this um thingy on the end oh look he gets selected way that's cool okay and it remembers the selection between the uh all the things yeah actually when I'm switching rules I should set the um uh the condition ID to to null I think undefined I can do undefined um JavaScript delete attribute from object delete okay let's use that delete delete okay uh let's do the uh the same thing for the actions so big copy and paste paste with a lot of potential for errors obviously um action which is 1 2 3 4 5 six 7 so the first I should yeah I probably should have done the split here as well and then I just look at the first uh yeah let's let's look at let's let's do this um let in event input uh yeah it's going to be good enough so even input it's uh split that and if the even input zero is rule then um we do that and the rule ID is going to be even input one I think this is probably a better way of doing this um so if even input zero is that I don't need this one and then it's even input one so we are splitting um yeah clicked on on rule cck on a condition let's just make sure that it still works yep it still works I thought my I think my family is coming home so I'm just going to close the door yep and uh so maybe there's going to be some noise from the background uh so that's done and um and we can do the actions so I don't have to deal with this you know number of characters blah blah blah blah blah it's um more prone to errors action everything is prone to smelling mistakes but um that's how it is actions selection [Music] selected okay let's do the whole thing okay so it's action green uh a action ID let's keep it consistent so D and the action ID and the editor. action ID is the action ID we save the editor we play we save it at the um we call the topic action selected select the uh set the selected flag in the action structure let rules rules rule ID actions uh if editor do condition ID this is action ID uh actions Z and actions set rules rules unhandled done close yep uh that's not working because because because uh hey why is it not oh what wa wait wait wait wait no no no we are doing this here actions selected actions I selected and let's look at the context okay so what did I do I've have G to the washing end and I selected the U so um rules second washing ends action selected true okay so this one is the def L working oh what did it do here what's this ID selected true why we have selected a okay I've just just messed up my data it's a good thing that I have in the inject no so I can inject the the whole thing in again um so topic uh o it might be uh maybe it comes from the fact that editor [Music] okay I need action idect okay so I think this one works and this one works as well so it is here H what's happening here let's did it let's do that so we got a action selected zero so this is definitely working it knows that I selected an action and probably if I go to the context and then I go to I refresh I select the action ID it's it's it's also shows here so I if I select the rule and actions zero selected true it has one selected true let's look at the source code yeah it should be list item Dash selected the class should be that because that drives how um you know what colors it shows up in the on the screen so why is it not working let's let's refresh and do this and select oh ni it's okay so yeah I think that was something with the um oh I know this that's because of that action selected I just did not redraw the um the UI so now if this yeah it works now oh what wait what wait what's this okay let's just refresh what is this okay um uh let me fix this um I inject the rules again and I regenerate control date test one okay set State he okay uh yeah so the thing here is that um here for the conditions I have the same attributes every single time depending on the um um you know what type of action it is but for the sorry what type of condition is but for the actions it's not because uh here I have U topic and um what did I do here yeah topic and value but if I look at another example it has yeah topic value but if I look at the actions here it has uh State and name so obviously just and and it has a value so this is why it says washing but then it doesn't say the the other two um yeah so I have to come up with a different logic here and uh uh we'll see how that happens yeah but I think it is already working quite well I mean I'm doing this recording for two hours now and I think in two hours I got most of this logic done already I have done some pre-work by generating the HTML but you know populating the value um control sorry handling some user control or so use an event some inputs and clickings is done already um I think think it's a big progress you might say it's not a big progress because in you know if you do this in um in uh in dashboard then all these events are handled for you but obviously we have to do a lot more ground workor but I think this wasn't an awful lot of ground workor also given the fact that I'm doing this for the first time so it is not bad at all in my view to be honest so I think it uh you know it looks pretty good uh probably I need to do some sorry I need to do some Cleanup in the code so like if um um you know these items keep selected um because now it remembers which condition and action was selected in each of the um each of the different rules uh so if you switch in between back and forth between the rules then they will keep selected probably I can just remove those uh it doesn't make sense to have all of them selected at at the same time uh but um yeah it is it is it is definitely getting there and maybe we can also start implementing some some changes uh to how these things work and um I mean that's going to be cool because I mean so far I haven't really done but maybe I can just uh Implement something simple in the beginning like um you know doing enable and disable so we should see these icon you know flipping between the closed folder and the Open folder that would be nice uh and uh and yeah of course it would be and probably I need to do I need to work something on the um on the conditions as well sorry on the on the layout as well but that's probably going to be the last I think what I will try to do next is to create a um uh what you call it um like an editor maybe for the conditions I think the conditions is going to be easier because um the let me just increase them oh okay the volume on the mic was way down I don't know maybe it was a little bit too um um too quiet maybe it's a little bit too uh loud at the moment maybe actually let me just go back and then I will change this a little bit later so at least I keep it consistent across the recording so anyway so I think um creating a UI for the conditions like when I can change the value it will make more sense because uh as I said the attributes are all the same for them for the triggers for the conditions and uh that's going to be just easier but uh yeah yeah so I think what I'm going to do is uh before I forget I'm just going to export this whole shibang um so all everything that we created today is here and uh again as a housekeeping you need [Music] UI builder for this which is no rad contri UI Builder and uh and I'm hoping that this UI Builder is going to save everything here so it has you know a CSS an index uh HTML Al it also has an index.js which I haven't uh modified so that's just a the basic uh you know whatever gets um delivered with a new UI Builder project but um let's see if it gets saved so if I export the flow to download and um nope nope download so I'm just looking in the flow file if I have had summary okay that's already the logging part but I think probably it's going to be later on because that's uh I created later rule documentation okay that's the documentation storage context uh send simple message as default a okay so that's the inject code that's the inject get rule list okay so it must have been somewhere here yeah I have no idea if it gets packaged within the uh the Json file when you download because this is Javascript I don't see the I I don't see my HTML or I don't see my settings. Js oh it's here no that's the template uib element you okay UI Builder on click okay that's the template node oh actually I should search from the beginning UI Builder Okay so there is the UI Builder note here uh rule Builder and yep there's nothing really here okay um let me share this one um and I call it automation engine and yes please all right and uh let's just export it and then I'm going to end the the uh uh the the live here and I should really get coffee because I'm tired so add file upload file and um come on version okay I need to update the version info and I probably have to in add the stream information here as well or the YouTube link but I don't think I have it from here so okay this is um start work on the r at the in UI Builder okay it's online I think I should be able to do it from node as well but I need to figure out I know that you can sorry not here that you can do here here like uh i' I've seen it that you can control git from here I just need to set it up to be able to control specific flows or put specific flows in the GitHub I I don't know if I I can certainly I I definitely not that you can control the whole thing I don't know if you can do it by flow uh you know by tabs because that would be my idea just to assign different um files to them and then upload them to GitHub that way but um yeah I think this was fun um I was hoping to get to at least that far I think it was slightly easier than I thought uh although I have done my homework uh previously so I think I have I had some good understanding how it's supposed to work and it's supposed to well it definitely works that way um and it is not an awful lot of code I mean um that's the input the event detection it's not that bad here it's mostly you know UI defining these things and a bunch of template nodes I mean that's that's cool I mean maybe it would be better if I can have a little bit more logic in the um in the UI template so I can just uh you know strictly separate the um the logic from from the UI generation because here it's a little bit of mix and match between the function node and the template node um but I guess we just have to work with the uh the capabilities that we have in you know the the template and um I mean the template node itself and this uh you know mustache syntaxing but I mean I don't really have to use this I could have used I guess I could have used some something else as well maybe I can use JavaScript here as well I've never used that so I don't I I have no idea how that would look like I mean this is only syntax highlighting so I don't think I can actually use anything else here I mean the template node pretty much just um it uses mustache by default I'm not really sure how you can change that to something else but uh I got used to this so I think it's it's it's nice and uh uh we will figure out for something else for um you know as we dig deeper but uh but again I think um thanks for everyone who has been here and uh I'm pretty sure that the as I said the recording is going to be available once uh it stops and you can watch the whole thing from the beginning if you only manage to join sort of like halfway through or in the middle but um yeah that was good um it was a good uh relaxing Sunday afternoon for me I hope it was the same for you as well but um thanks for watching and hopefully see you the next video bye-bye

Channel: Csongor Varga

Views: 1,048

Keywords: node-red, iot, node red, programming, javascript, development, live, node-red programing, function node, logic, automation, smart home, home automation, learn node-red, node-red tutorial, node-red tutorials

Id: ngNiKLBwc-Q

Length: 136min 50sec (8210 seconds)

Published: Mon Jan 22 2024