changing color of HMI Input object?

scoobsalamander · 2015-12-18 22:27:54

How do you change the color of the background and the text of an Input field (HMI Inkscape)?

scoobsalamander · 2015-12-20 20:44:39

...it seems that it is coded in the file jquery-ui-1.10.2.custom.css and it uses the image

\css\metro-theme\images\ui-bg_flat_100_f0f0f0_40x100.png.

I could change the png file but that's not how it should be done I guess.

Would it be possible to create a new input.svg with some extra options :

- background color + alpha channel
- border color + alpha channel
- text color

...please some advise

jaroslav_sobota · 2015-12-21 16:45:19

You can use CSS styles to override the default look of the input elements. Just add a file myStyles.css into
C:\ProgramData\REX Controls\RexHMI\libs\MyCSS\css
and put the following in:

.ui-state-default{
  background: green;
}

#ColorInput-div{
  background: #CCCC22;
}

This will change background of all input boxes to green and the background of the Input box with ID=ColorInput to yellow. You have to export the HTML files after you add this file.

Use similar approach to change opacity and border color, e.g.

#ColorInput-div{
  background: #CCCC22;
  opacity: 1.0;
  border: solid 3px rgba(255, 0, 0, 0.8);
}

scoobsalamander · 2015-12-21 23:38:58

Thanks a lot.... I even managed to change the color of the header and the margins of the 'content'...
Very useful as I wanted to have an HMI which is more 'night vision' friendly....

But how does it work? Does my own css file overwrites all the existing css files?

skardar · 2015-12-22 09:21:02

For details on Cascading Style Sheets (CSS) see e.g. http://www.w3.org/community/webed/wiki/CSS/Training and
http://www.w3schools.com/css/

Each CSS rule has its priority, see e.g.
https://developer.tizen.org/dev-guide/w … es_css.htm

You are not overwriting the original CSS files - overlaying is a word which fits better I think. You create a cascade of styles and this is where the name comes from.

scoobsalamander · 2015-12-24 20:27:41

Maybe a tip for some of us who want to change the appearance of the buttons object in the HMI :

On bestcssbuttongenerator you can generate a button and then copy the CSS to your file myStyles.css. Then you just have to change 'mybutton' into 'ui-button' (3 times).

For example....

.ui-button{
	-moz-box-shadow: 0px 1px 0px 0px #fff6af;
	-webkit-box-shadow: 0px 1px 0px 0px #fff6af;
	box-shadow: 0px 1px 0px 0px #fff6af;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
	background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
	background-color:#ffec64;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}
.ui-button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
	background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
	background-color:#ffab23;
}
.ui-button:active {
	position:relative;
	top:1px;
}

jaroslav_sobota · 2015-12-28 02:17:26

Thanks for the tip!

geocipo · 2017-03-13 20:12:33

Hi, If I want to change the css button by button how should i do? Which css tag to use? Because .ui-button transforms the css of all buttons.
Thank you in advance.

osevera · 2017-03-14 15:51:38

Hello geocipo,
all the HTML components like Button, Input, Simple Logger, etc. from RexHMI Designer (version > 2.50) are placed inside the HTML DIV element with automatically generated ID using ID of the component and appending -div. If you want to change the styles you have to add you custom css file, you use the RexHMI Designer following these steps

Create CUSTOM/CSS folder in hmisrc directory
Create custom.css file
In RexHMI Designer open HMI Config extension (CTRL+E)
In HTML Export tab just add two libraries, GENERAL and CUSTOM

When the webpage is generated from the *.hmi.svg file the Library Paths are evaluated. When the relative path to the folder is found then it copy all the files from js and css sub-directories and add all the files to the main webpage as a resources. This is a way how you can add your custom.css file to the project. If the directory is not found in relative path it tries to search in default libraries that is why the GENERAL library can be used like that.

You can find simple example of custom component with JS and CSS files here Custom_HMI_component.zip

Finally the style for button can be changed following way

#Button-div button{
 /* Your custom style */
 color: yellow;
}

geocipo · 2017-03-16 03:40:13

Thank you, it works

REXYGEN Community Forum

Announcement

REXYGEN forum has been moved. This one is closed.
Head over to the new REXYGEN Community Forum at https://forum.rexygen.com.

Looking forward to meeting you there!

#1 2015-12-18 22:27:54