Logic Machine Forum
Small size problem of pin code menu for large panels - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Small size problem of pin code menu for large panels (/showthread.php?tid=466)

Small size problem of pin code menu for large panels - savaskorkmaz - 17.11.2016

As you know, we can add pin to change some KNX values in visualization screen. We have an android panel which have 1200x800 resolution and we try enter pin code in numeric screen but that numeric screen is too small. You can see in attached picture. 
I would like to increase visual size of this numeric menu which I can enter the pin number.
How can i do it ?

RE: Small size problem of pin code menu for large panels - edgars - 17.11.2016

Hi Savas!

use this CSS code to control the size of the PIN window.

Code:
.usermode .well.control-pincode {
transform: scale(2);
}


RE: Small size problem of pin code menu for large panels - Erwin van der Zwart - 17.11.2016

Or use multi browser compatible css:

Code:
/* Visu mode */
.well.well-small.control.control-pincode {
 -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
 -webkit-transform: scale(2);
 -moz-transform-origin: 50% 50%; /* Firefox */
 -moz-transform: scale(2);
 transform-origin: 50% 50%;
 transform: scale(2);
}

/* Touch mode */
.well.control-modal.control-pincode {
 -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
 -webkit-transform: scale(2);
 -moz-transform-origin: 50% 50%; /* Firefox */
 -moz-transform: scale(2);
 transform-origin: 50% 50%;
 transform: scale(2);
}


RE: Small size problem of pin code menu for large panels - admin - 17.11.2016

I'm pretty sure you don't need -moz-transform as it has been dropped in favor of unprefixed version in Firefox 16 on October 9, 2012 Smile
Webkit stuff is applicable to Chrome <36, Safari 5.1+, iOS < 9.2, Anroid =< 4.4.4
http://shouldiprefix.com/#transforms

RE: Small size problem of pin code menu for large panels - savaskorkmaz - 21.11.2016

Hello,
Edgars, your CSS is worked in PC browser but it didn't worked in our android tablets.
One of the our tablet is Android 4.4.4
Second is Android 4.2.2
We are using only visualization mode.
Can you make a CSS which can work both Android 4.2.2 and android 4.4.4 ?

Regards,

RE: Small size problem of pin code menu for large panels - admin - 21.11.2016

Try CSS from Erwin, it should take care of older Android browsers. I recommend installing Chrome instead of stock Android browser if possible.

RE: Small size problem of pin code menu for large panels - savaskorkmaz - 21.11.2016

I tried both Edgars and Erwin css. It didn't worked in both android panel.
We cannot use chrome because application is not working on the browser. We created our specific application which have intercom and automation (Comes from LM4) function in a one single application. This application use naturaly embedded browser comes with android.
If you can test CSS which can work with android 4.4.4 and 4.2.2 browser , it would be great.

RE: Small size problem of pin code menu for large panels - admin - 21.11.2016

This should work for all browsers:
Code:
.control-pincode {
  margin: -233px 0 0 -189px;
}
.control-pincode .btn-group .btn {
  width: 120px;
  height: 88px;
  font-size: 32px;
}
.control-pincode .input-large {
  font-size: 32px;
  width: 334px;
  height: 40px;
}


RE: Small size problem of pin code menu for large panels - savaskorkmaz - 23.11.2016

Hello ,
I added this last code to custom CSS section. Should i do anything else ? For example, should i write control-pincode to additional classes section of my object ?
Because it didn't worked. Maybe I'm doing something wrong.

RE: Small size problem of pin code menu for large panels - Erwin van der Zwart - 23.11.2016

Hi,

Additional classes on the object has no relation with the pincode control, so this is not the answer to solve your issue..

I tested all previous written css samples by admin and myself and all work on PC, Android and iOS...

Is it also not working on PC and iOS from your controller, or only android?

Have you tested with another (HTML5) browser on your android device, like with chrome?

Do you have a mistake in your custom css preventing the complete load of the css? 

Can you try only with just the css of the pincode scaling and see if this works?

Have you tested with cleared cache of your browser? (i don't think this is needed but can't hurt to try)

BR,

Erwin