Tag Archive for: Material

Helios Torch

/in , /by

Material app for setting the intensity and area of light. It acts like a torch, the area where you are walking is lighting up.
In this image there are two different versions, the one I full developed is at the right side. All the interaction are reflected in the circle (area/intensity of light) and you can pan and pinch with your fingers in any part of your smart phone screen xD.

Helios_Torch_by_gengns

Helios Torch is a class of Helios sensor. All sensor are included and automatic detected in the Helios Sensor full app.

Editable Selection Box

/in , , /by

There is not any specific HTML tag to let you edit and select, we just have input tags and select tags but we can combine them and even more we can define our own icon/button for the select box. The trick here is to launch an event to show up our options from our hidden selection box.

You can adjust the options style, however in mobile apps the select options will be shown by an internal widget of the system.

Updated: you can use an input list with its datalist (Autocomplete dropdown)

Check input using HTML5 and MDL

/in , , /by

You can use input’s attributes as min, max, pattern and so on, and then checking a simple class do what you need to. In this example we are using a Text Field component of  Material Design Lite (MDL) which shows a message and a red mark up when the value is not the right one. You could extend this with as many inputs as you like and then if all of them are correct show a login button or whatever.

Note that in old browsers and android versions before Lolipop where the Web View isn’t Chrome you will need to use directly Validation DOM Methods. Ex:

document.querySelector('input').validity.rangeOverflow

Be careful because even some Validation DOM Methods are not well supported in old browsers versions.