how to fix control button scaling on large monitor

[jHeron]

My zoneminder monitor is a 52" flatscreen tv as my zoneminder box is also my mythtv pvr box.
The control buttons for PTZ etc do not scale properly and are not really usable. I have had a look through various scripts etc and cand figure out how to correct this?
Any help would be appreciated!
Cheers,
Jon

[PacoLM]

Hi,

Works fine in my 20" monitor, if you want we could exchange monitors....

Regards,

PacoLM

PS: Seems that you are using the new flat skin...is the "old" skin also behaving that way?

[jHeron]

Lol, in reality your 20" probably has a better picture than this cheap samsung anyways...
Yes its the same with both skins, I actually didnt notice the new skin till this morning when I started looking for some scaling settings so I though I would try it out... It looks pretty sharp IMO!
Cheers,
Jon

[jHeron]

I believe I found the file that needs editing, a CSS file found here: /usr/share/zoneminder/www/skins/flat/css/control.css for the flat style.
However no changes I make seem to make any difference whatsoever... Which makes think this is not the file... lol
I have no HTML or CSS experience but I do have java script (js) experience from Qt's qml language, with that experience it seems pretty obvious how to change the default size and scaling of the controls but nothing seems to make a difference...
Any guidance as to whether this is the right file and how to make sure it gets loaded fresh after each edit would be appreciated... Currently I have tried

Code: Select all

sudo zmpkg.pl restart

then reloading the browser as well as a complete restart of the system with no joy...
Here is the file in question:

Code: Select all

.ptzControls {
    vertical-align: top;
    margin: 10px auto 0;
  /* width: 300px; */
	width: 90%;
}

.ptzControls input.ptzTextBtn {
    margin-top: 2px;
    width: 40px;
}

.ptzControls .controlsPanel {
    margin: 0 auto;
}

.ptzControls input[type=image] {
    border: 0px;
}

.ptzControls .controlsPanel .arrowControl {
    width: 40px;
    height: 180px;
    margin: 0 4px;
}

.ptzControls .controlsPanel .arrowControl input {
    display: block;
}

.ptzControls .controlsPanel .longArrowBtn {
    width: 32px;
    height: 48px;
    margin: 0 auto;
    cursor: pointer;
}

/*
 * This is a bit of a hack as these lines should be in the above
 * section but that messes up layout on IE6
 */
/*
.ptzControls .controlsPanel > div > div.longArrowBtn {
    left: 50%;
    margin-left: -16px;
}
*/

.ptzControls .controlsPanel .upBtn {
    background: url("../graphics/arrow-l-u.gif") no-repeat 0 0;
}

.ptzControls .controlsPanel .downBtn {
    background: url("../graphics/arrow-l-d.gif") no-repeat 0 0;
}

.ptzControls .controlsPanel .focusControls {
    float: left;
}

.ptzControls .controlsPanel .zoomControls {
    float: left;
}

.ptzControls .controlsPanel .irisControls {
    float: right;
	
}

.ptzControls .controlsPanel .whiteControls {
    float: right;
	
}

.ptzControls .controlsPanel .pantiltPanel {
    margin: 0 auto;
    height: 180px;

}

.ptzControls .controlsPanel .pantiltPanel .pantiltControls .pantiltButtons {
    margin: 5px auto;
    border: 1px solid #006699;
    text-align: center;
    padding: 1px;
    width: 96px;
    height: 96px;
}

.ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
    width: 32px;
    height: 32px;
    cursor: pointer;
    float: left;
}

.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
    background: url("../graphics/arrow-ul.gif") no-repeat 0 0;
}

.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
    background: url("../graphics/arrow-u.gif") no-repeat 0 0;
}

.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
    background: url("../graphics/arrow-ur.gif") no-repeat 0 0;
}

.ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
    background: url("../graphics/arrow-l.gif") no-repeat 0 0;
}

.ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
    background: url("../graphics/center.gif") no-repeat 0 0;
}

.ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
    background: url("../graphics/arrow-r.gif") no-repeat 0 0;
}

.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
    background: url("../graphics/arrow-dl.gif") no-repeat 0 0;
}

.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
    background: url("../graphics/arrow-d.gif") no-repeat 0 0;
}

.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
    background: url("../graphics/arrow-dr.gif") no-repeat 0 0;
}

.ptzControls .controlsPanel .pantiltPanel .powerControls {
    margin: 0 auto;
}

.ptzControls .presetControls {
    margin: 0 auto;
padding: 10px;
}

.ptzControls .presetControls input {
    margin: 1px;
}

.ptzControls .presetControls input.ptzNumBtn {
    padding: 1px 2px;
    width: 24px;
    color: #ffffff;
    text-align: center;
    background-color: #016A9D;
}

Cheers,
Jon