Mon, 07 Jan 2019 22:35:32 +0100
Fermenter monitor screen added control boxes and LED's.
/* */ body { background: #ccc; font-family: Verdana, Arial, sans-serif; margin: 0px; } #MainPanel, #fermenter { width: 1278px; height: 628px; border: 2px solid #4297d7; background: #252526; float: left; color: #eeeeee; } #water_totals { width: 960px; background: #353536; margin-top: 15px; border: 1px solid; border-color: #59b4d4; border-radius: 5px 5px 5px 5px; } #about_table { width: 960px; background: #353536; margin: 150px; border: 2px solid; border-color: #59b4d4; border-radius: 5px 5px 5px 5px; } #node_table { width: 600px; background: #353536; margin: 50px; border: 2px solid; border-color: #59b4d4; border-radius: 5px 5px 5px 5px; } #fermenter_table { width: 960px; height: 200px; background: #252526; margin: 5px; border: 2px solid; border-color: #59b4d4; border-radius: 5px 5px 5px 5px; } .ebccolor { float: left; margin-left: 10px; width: 75px; height: 23px; border:1px solid #59b4d4; border-radius:6px; moz-border-radius:6px; webkit-border-radius:6px; background: #212121; } /* * +----------------------------------------------------_ * |+-------------------++--------++-------------------+| * || || || || * || || chiller|| || * || || || || * || |+--------+| || * || Air temp | | Beer temp || * || | | || * || | | || * || | | || * |+-------------------+ +-------------------+| * +----------------------------------------------------+ */ #fermenter_thermometers { width: 960px; height: 390px; float: left; background-color: #252526; margin: 5px; border: 2px solid; border-color: #59b4d4; border-radius: 5px 5px 5px 5px; } /* * +----------panel_top------------+ * |+-------------++--------------+| * || || powerled || * || selector |+--------------+| * || |+--------------+| * || || mode control || * |+-------------++--------------+| * +-------------------------------+ * +---------panel_display---------+ * |+--------++---------++--------+| * || disp 1 || disp 2 || disp 3 || * |+--------++---------++--------+| * +-------------------------------+ * +---------panel_control---------+ * |+--------++---------++--------+| * || led 1 || led 2 || led 3 || * |+--------++---------++--------+| * |+--------++---------++--------+| * || sw 1 || sw 2 || sw 3 || * |+--------++---------++--------+| * +-------------------------------+ * +--------panel_buttons----------+ * | | * +-------------------------------+ */ #fermentor_panel_top { width: 280px; height: 200px; float: right; margin: 5px; background-color: #252526; border: 2px solid; border-color: #59b4d4; border-radius: 5px 5px 5px 5px; } #fermentor_selector { width: 100px; height: 198px; float: left; } input.select { margin-left: 10px; margin-top: 13px; } #fermentor_alarmled { width: 50px; height: 30px; float: left; text-align: center; margin-top: 10px; margin-left: 20px; } #fermentor_powerled { width: 50px; height: 30px; float: left; text-align: center; margin-top: 10px; margin-left: 42px; } #fermentor_mode_control { width: 148px; height: 110px; float: left; margin-top: 10px; background-color: #ddd; } #fermentor_panel_display { width: 280px; height: 80px; float: right; margin: 5px; background-color: #252526; border: 2px solid; border-color: #59b4d4; border-radius: 5px 5px 5px 5px; margin-bottom: 3px; } #fermentor_display1 { width: 93px; height: 76px; float: left; text-align: center; margin-top: 7px; } #fermentor_display2 { width: 93px; height: 76px; float: left; text-align: center; margin-top: 7px; } #fermentor_display3 { width: 93px; height: 76px; float: left; text-align: center; margin-top: 7px; } .dtemp { font-weight: bold; color: yellow; } .ltemp { font-weight: bold; color: green; } .htemp { font-weight: bold; color: red; } #fermentor_panel_control { width: 280px; height: 120px; float: right; margin: 5px; background-color: #252526; border: 2px solid; border-color: #59b4d4; border-radius: 5px 5px 5px 5px; margin-bottom: 3px; } #fermentor_led1 { width: 93px; height: 30px; float: left; text-align: center; margin-top: 8px; } #fermentor_led2 { width: 93px; height: 30px; float: left; text-align: center; margin-top: 8px; } #fermentor_led3 { width: 93px; height: 30px; float: left; text-align: center; margin-top: 8px; } #fermentor_toggle1 { width: 93px; height: 70px; float: left; text-align: center; margin-top: 10px; } #fermentor_toggle2 { width: 93px; height: 70px; float: left; text-align: center; margin-top: 10px; } #fermentor_toggle3 { width: 93px; height: 70px; float: left; text-align: center; margin-top: 10px; } #fermentor_panel_buttons { width: 280px; height: 130px; float: right; margin: 5px; background-color: #252526; border: 2px solid; border-color: #59b4d4; border-radius: 5px 5px 5px 5px; margin-bottom: 3px; } #fermenter_tempdigits { width: 145px; height: 120px; float: left; margin-top: 170; background-color: #252526; border: 2px solid; border-color: #59b4d4; border-radius: 5px 5px 5px 5px; } .LEDred_on { margin: 5px auto; width: 18px; height: 18px; background-color: #F40; border-radius: 50%; box-shadow: #000 0 0px 4px 1px, inset #C33 0 -1px 5px, #f44 0 2px 12px; } .LEDred_off { margin: 5px auto; width: 18px; height: 18px; background-color: #820; border-radius: 50%; box-shadow: #400 0 0px 1px 1px; } .LEDyellow_on { margin: 5px auto; width: 18px; height: 18px; background-color: #FF0; border-radius: 50%; box-shadow: #000 0 0px 4px 1px, inset #860 0 -1px 5px, #DD0 0 2px 12px; } .LEDyellow_off { margin: 5px auto; width: 18px; height: 18px; background-color: #A90; border-radius: 50%; box-shadow: #440 0 0px 1px 1px; } .LEDgreen_on { margin: 5px auto; width: 18px; height: 18px; background-color: #5E0; border-radius: 50%; box-shadow: #000 0 0px 4px 1px, inset #270 0 -1px 5px, #5D0 0 2px 12px; } .LEDgreen_off { margin: 5px auto; width: 18px; height: 18px; background-color: #270; border-radius: 50%; box-shadow: #250 0 0px 1px 1px; } .LEDblue_on { margin: 5px auto; width: 18px; height: 18px; background-color: #4AF; border-radius: 50%; box-shadow: #000 0 0px 4px 1px, inset #247 0 -1px 5px, #48F 0 2px 12px; } .LEDblue_off { margin: 5px auto; width: 18px; height: 18px; background-color: #137; border-radius: 50%; box-shadow: #024 0 0px 1px 1px; } /* * New recipe wizzard */ #hintBase, #hintStyle, #hintEq { float: left; margin-top: 30px; margin-right: 20px; padding: 5px; width: 600px; color: yellow; } #section { margin: 5px; } #baseButtonsWrapper { float: right; margin-top: 30px; margin-right: 10px; width: 160px; } #styleButtonsWrapper { float: right; margin-top: 30px; margin-right: 10px; width: 320px; } #eqButtonsWrapper { float: right; margin-top: 30px; margin-right: 10px; width: 320px; } #completedButtonsWrapper { float: right; margin-right: 10px; width: 320px; margin-top: 160px; } .nextButton { float: right; margin-left: 0px; } .backButton { float: left; margin-left: 10px; }