Tinydash Widgets

Hello everybody,

In continuation of another thread: http://forum.espruino.com/conversations/­327325/#comment14492142

I am working my way on learning html+css+js while improving tinydash.

Got initially a scrollbar running and generating events.

The look is not compatible with the other widgets yet.

What would be the correct/best way to center the bar... < center > html tag or css?

add to tinydash.css:

.td_slider_container {
  width: 100%;
}

.td_slider {
  -webkit-appearance: none;
  width: 90%;
  height: 15px;
  border-radius: 8px;   
  background: [#d3d3d3](https://forum.espruino.com/sea­rch/?q=%23d3d3d3);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.td_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: [#4CAF50](https://forum.espruino.com/sea­rch/?q=%234CAF50);
  cursor: pointer;
}

.td_slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: [#4CAF50](https://forum.espruino.com/sea­rch/?q=%234CAF50);
  cursor: pointer;
}

/* Mouse-over effects */
.td_slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

add to tinydash.js:

    /* {slider} */
    TD.slider = function(opts) {
      var el = setup("slider", opts,
          toElement('<div class="td td_slider_container"><span>' + opts.label + '</span><center><br><br><input type="range" min="' + opts.min + '" max="' + opts.max + '" value="' + opts.value + '" class="td_slider"</center></br></br></di­v>'));
      el.setValue = function(v) {
        el.setAttribute("value", v);
      };
      el.oninput = function(x) {
        sendChanges(el, x.srcElement.value);
      };
      return el;
    };

1 Attachment

Wed 2018.11.07

'What would be the correct/best way to center the bar'

In true present day web deployment, the < center >element was abandoned years ago in favor of CSS using properties.

https://developer.mozilla.org/en-US/docs­/Web/HTML/Element/center

https://www.w3schools.com/css/css_align.­asp

http://www.htmlhelp.com/reference/html40­/deprecated.html

You might also consider wrapping your control in a separate div and aligning that div or span container using attributes.

https://www.w3schools.com/tags/att_div_a­lign.asp

Keep verifying browser compatibility as you develop your control(s). You'll be surprised at how different browser vendors interpret the specs.
Your use of webkit may reduce the headaches.

'I am working my way on learning html+css+js'

Should your class start off with Html5 and CSS3 you'll miss out on all the version transition fun (not) I've had over the last twenty years!! ;-)

https://www.w3.org/People/Raggett/book4/­ch02.html

https://en.wikipedia.org/wiki/HTML

@Gordon, @allObjects, please remind me of the syntax that will allow aligning elements in block form when creating a string, to make development layout easier to read. Didn't it use three back ticks ``` perhaps? Unable to locate the recent forum post with an example in it.

EDIT: Found it
Template strings to inline elements using a single ` back tick

ref #2 http://forum.espruino.com/conversations/­327325/#comment14488693

Great! And it's perfect being able to use the browser-provided slider. I wonder whether we couldn't improve the button by just using a themed browser one.

As @Robin says, CSS is the way to go - although I always find centering to be a bit of a mess. Stackoverflow will be your friend there :)

Here is a new css button class.

.td_button {
  margin-top: 10px;
  margin-left: auto;
  margin-right: 10px; /* centered */
  display: inline-block;
  padding: 6px 16px;
  font-size: 24px;
  font-weight: bolder;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: [#fff](https://forum.espruino.com/search­/?q=%23fff);
  background-color: [#4CAF50](https://forum.espruino.com/sea­rch/?q=%234CAF50);
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px #888;
  -webkit-transition-duration: 0.2s; /* Safari */
  transition-duration: 0.2s;
  overflow: hidden;
  cursor: pointer;
}
.td_button:active {
  background-color: [#4CAF50](https://forum.espruino.com/sea­rch/?q=%234CAF50);
  box-shadow: 0 0px #888;
  transform: translateY(4px);
}
.td_button:hover {
  background-color: [#06B](https://forum.espruino.com/search­/?q=%2306B);
}

   /* {label, glyph, value, toggle}*/
    TD.button = function(opts) {
        var pressed = opts.value ? 1 : 0;
        opts.glyph = opts.glyph || "💡";
        var el = setup("button", opts, toElement(`<div align="right" class="td td_btn" pressed="${pressed}"><span>${opts.label}­</span><div class="td_button">${opts.glyph}</div></d­iv>`));
        el.getElementsByClassName("td_button")[0­].onclick = function() {
            togglePressed(el);
        };
        el.setValue = function(v) {
            el.pressed = v ? 1 : 0;
            el.setAttribute("pressed", el.pressed);
        };
        return el;
    };

1 Attachment

This is an attempt to create a dropdown menu.

HTML:

            d: TD.dropdown({
                x: 10, y: 505, width: 200, height: 25,
                label: "A dropdown",
                name: "dropdown",
                items: ["Link 1", "Link 2", "Test entry"],
                onchange: function(e, v) {
                  console.log(e + " " + v);
                  ws.send(JSON.stringify(e));
                }
            }),

css:

.td_dropdown {
  -webkit-appearance: none;
  background: var(--forecolor);
}
.td_dropdown select {
  background-color: var(--forecolor);
  color: [#fff](https://forum.espruino.com/search­/?q=%23fff);
  font-size: 16;
  border: 0;
  border-radius: 3px;
  width: 100%;
  height: 100%;
  text-overflow: '';
  padding-right: 1.25em;
}
.td_dropdown select option {
  font-size: inherit;
  text-align: center;
}
.td_dropdown select::-ms-expand { /*Hiding the select arrow for IE10*/
    display: none;
}

js:

    TD.dropdown = function(opts) {
      function a(arr) {
        var txt = "";
        arr.forEach(function(item, indice, array) {
          txt += `<option value="${item}">${item}</option>`;
        });
        return txt;
      }
      var el = setup("dropdown", opts, toElement(`<div class="td"><span class="td_dropdown"><select name="${opts.name}">${a(opts.items)}</se­lect></span></div>`));
      document.addEventListener('DOMContentLoa­ded', function() {
        document.querySelector('select[name="'+o­pts.name+'"]').onchange = function(x) {
          sendChanges(el, x.target.value);
        };
      }, false);
      el.setValue = function(v) {
      };
      return el;
    };

1 Attachment

Nice - thanks!

Fri 2018.11.09

Well @barbiani, quite an impressive advancement in just over a week. Be careful, as at this rate, you may be teaching the class you are about to take!!

Gordon mentioned this in your other post #2, and I called your attention to it again in #2 above. Templated Strings. And although I see you switched from the single quote ' to a back tick ` it isn't clear and may not have been explained well enough as to the reason why. The simple explanation is to maintain alignment to ensure valid Html is being coded, typically to locate closing elements in a tag set.

If it wasn't clear, maybe using Line 9 rewritten will bring it all in to focus:

toElement(`
 div align="right" class="td td_btn" pressed="${pressed}">
       span>${opts.label}</span>
       div class="td_button">${opts.glyph}</div>
/div>
`));

In order to allow the code block to display and show the indent, I had to remove the Html leading angle brackets < so that the embedded code would not get rendered, (it formats and disappears) but rather just presented.

Much easier to read, and to ward off possible debug scenarios.

...quite an impressive advancement in just over a week. Be careful, as at this rate, you may be teaching the class you are about to take!!

Actually js is not too far from C. What I find hard to digest is .NET with its amount of reserved words.

@Robin You know that I am not writing these from scratch, right? I am taking many samples and figuring out what and how each thing does what it does. The rest is finding the hundreds of variable fields available on each element. Like the < select > < option > set() function from js that is still missing in the dash.

...The simple explanation is to maintain alignment to ensure valid Html is being coded, typically to locate closing elements in a tag set.

I am not used to read html anyway... so it does not make a big difference to me. I was only following the original sources style.

The simple explanation is to maintain alignment to ensure valid Html is being coded, typically to locate closing elements in a tag set.

@Robin it's really not in this case. It's used here because it's more compact to insert elements with ${...}. The idea is the final TinyDash library ends up being... well... tiny - so extra characters used for indentation are far from ideal.

I have a question about this wonderful library. Is it possible and how I can use the graph for continues data streaming (something like sliding graph). The data is streaming very quickly interval 10ms.

@Gordon, I don't find any example how to update graph. Could you please help me!!

It's used here: https://github.com/espruino/EspruinoHub/­blob/master/www/rssi.html#L106

So just graphWidget.setData(data); is enough (that does a redraw all by itself)