The output and the reaction on input will come later. That is all about the coding youäll need to do to make the knob an actual interactive element inside the ui_template. step by step ..
Thanks stax for the help... I REALLY appreciate it!!
Consider a beer bought and emailed to you!!
I have a starting point now... At least from here I (might) be able to formulate the right questions!!
E
An e-mailed beer 
I hope it will be lager and not over 5.5 vol. And the delivery not later than 15 minutes from now and please - chilled 
...
...
...
Time delay initiated
...
...
...
...
Lager lite sent...
Ice cube Appended!
1 Like
Ill respond if you have any news about the main topic even today if I'm still online or tomorrow with arbitrary delays due the limited computer-time for Sundays.
I'm sort of starting to understand how this works... Enough to parrot it... I have managed to change size etc and get it deployed as a visual switch only... I have been reading up on the site as to "adding the values" for the output... tried them, no errors, but also no debug output from the node either.... Parroted this:
<input type="range" class="input-knob" min="-10" max="10" step="0.1"
oninput="inputEventHandler(this)" onchange="changeEventHandler(this)"/>
I'm gonna keep going as late as I can tonight, while this is fresh in my mind...our utility power is off tomorrow and we had a cloudy day today... solar batteries are tired!!
Lets walk through about the creation of ui widget with ui_template tomorrow or some next day with all necessary explanations about why and how, So we leave behind the guide for any other, willing to learn how to achieve.
Sure thing.... I'm going to plod on for a couple of hours to try and get an output from it... Thanks heaps again for the help!!
Doing so, do not go in blind.
See the help section of the ui_template node about the interactivity and the uniqueness.
It is mandatory to do it that way.
Thank you.... Didn't even think of looking at the help....Duhhh....
Hey @hotNipi ,
Spent a good few hours puzzling over the help examples and trying to see if I could adapt them to the .js for the knobs... Not much progress I'm sorry to say, but I did pick up a bit more understanding on the way...
What I have picked up is that from:
is that we have to ?assign? a new and unique id for each instance of the calling template that is deployed, particularly in this case, where there will be multiple "similar" occurrences ... Not doing so would have possibly ?variables? etc overwritten on one instance when another is accessed... The actual code to do it is the bit that says: <div id="{{'my_'+$id}}"
I see a reference to this in the line that says "#my_"+scope.$id ... That being said, while I understand its purpose, I don't follow the structure of it... But that will come..(hopefully)...
The script in the help concerning sending a message on a button click:
var value = "hello world";
// or overwrite value in your callback function ...
this.scope.action = function() { return value; }
</script>
<md-button ng-click="send({payload:action()})">
Click me to send a hello world
</md-button>
is pretty straight forward and I can certainly get to grips with it... As to actually generating this script without a cheat-sheet later, I doubt whether I will be able to, but at least I grasp the concept and method involved (and might remember where to parrot it from...LOL)...
As to how to author the "calling template" to have access to the information generated by the .js script and send it to the outside .... Dark magic!! (But immensely interested in getting to grips with it!)
Regds
Ed
Have you visited the gallery and downloaded image stripe of your favoriite knob?
https://www.g200kg.com/en/webknobman/gallery.php
Or you want to go with standard knob which does not need any additional things.
Hiya H!!
Yep - got the image stripe, got it scaled and the right number of sprites set, it's twisting and turning, looking like a real one!! (A bit small, but this I can sort out later...)
Also managed to get the toggle switch in and looking good too!!
E
1 Like
OK.
Now as the ui_template has some CSS rules by default, we need to do some tweaks and also we need a container to adjust the position of knob.
<div ng-init="init()" class="knobwrapper">
<input id="{{'knob_'+$id}}" type="range" ng-model="knobvalue" class="input-knob" data-diameter="100" data-src="/images/led-knob-30fr.png" data-sprites="30"/>
</div>
We most probably have different images and different sprite count and size but all other things should be arranged like this.
Done! - I now see a blue lined frame around it when selected...
Yes, lets's fix it.
In the JavaScript file, find this
input[type=range].input-knob{
width:${op.knobWidth}px; height:${op.knobHeight}px;
}
For this rule add declaration:
outline:none;
Now as the created wrapper declares that the class "knobwrapper" is required <div ng-init="init()" class="knobwrapper">
The rule looks like this.
.knobwrapper{
width:100%;
height:100%;
display:flex;
justify-content: center;
align-items: center;
}
It is good practice to have common CSS in one ui_template so if you have one already, add this rule in that. If not, I'd suggest to create one.
Done - I now see a blue lined frame around it...
This is the content as I have it now:
<div ng-init="init()" class="knobwrapper">
<input type="range"
class="input-knob"
data-diameter = "24"
min="0"
max="255"
step="1"
data-src = "/png/knob70.png"
data-sprites = "100"
oninput="inputEventHandler(this)"
onchange="changeEventHandler(this)"
/>
</div>
(My Internet connection is really crappy at the mo - the power outages are taking their toll by the looks of it) Apologies if I duplicate post in error...
Done... Outline gone!
