Sat, 25 Apr 2020 20:31:31 +0200
Version 0.9.8. Added extra path to the fonts for Debian buster. Changed the PID to work on Proportional on Measurement. Added loops so that it looks like the PID is running at 100 mSec intervals.
/* */ /* Reset default browser CSS. */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; } body { background: #fff; color: #000; font-family: Verdana, Arial, sans-serif; width: 980px; font-size: 12px; margin: 0px; } #jqxWidget { width: 980px; height: 510px; float: left; } #header { width: 978px; height: 78px; float: left; border: 1px solid #4297d7; border-radius: 5px 5px 5px 5px; background: #5c9ccc url(../jqwidgets/styles/images/redmond/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; } #title { width: 500px; height: 50px; float: left; margin-top: 23px; font-size: 1.8em; color: #FFD700; text-align: center; font-family: comic sans ms; } #room { width: 100px; height: 48px; float: left; border-radius: 5px 5px 5px 5px; background-color: #222; text-align: center; margin-top: 15px; } .rtemp { font-weight: bold; font-size: 1.2em; color: yellow; margin-top: 3px; } #content { width: 978px; height: 428px; float: left; border: 1px solid; border-color: #aaa; border-radius: 5px 5px 5px 5px; } #errors { height: 35px; width: 978px; float: left; text-align: center; font-size: 1.5em; margin-top: 10px; color: #ff0000; } #etable { height: 320px; width: 978px; float: left; overflow: auto; } #atable { height: 60px; width: 978px; float: left; } table.setup { margin-left: auto; margin-right: auto; border-collapse: collapse; } .trhead { font-weight: bold; background: #5c9ccc url(../jqwidgets/styles/images/redmond/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; } tr.setup:nth-child(odd) { background: #FFFFFF; } tr.setup:nth-child(even) { background: #CCFFFF; } td.setup { padding: 1px 3px 1px 3px; } /* * Editor screens */ table.editor { margin-left: auto; margin-right: auto; border-collapse: collapse; background-color: #eee; } tr.editor { height: 30px; } td.editname { width: 150px; padding: 1px 3px 1px 3px; } td.editfield { width: 300px; padding: 1px 3px 1px 3px; } td.editsub { width: 50px; padding: 1px 3px 1px 3px; } #jqxTabs { width: 980px; height: 440px; float: left; } #fermentor { height: 382px; width: 968px; background: #fff; margin: 5px; float: left; } /* * +-------------panel_top--------------+ * |+----------------++----------------+| * || || powerled || * || selector |+----------------+| * || |+----------------+| * || || mode_control || * |+----------------++----------------+| * +------------------------------------+ * +-----------panel_display------------+ * |+----------++----------++----------+| * || display1 || display2 || display3 || * |+----------++----------++----------+| * +------------------------------------+ * +-----------panel_control------------+ * |+----------++----------++----------+| * || led1 || led2 || led3 || * |+----------++----------++----------+| * |+----------++----------++----------+| * || switch1 || switch2 || switch3 || * |+----------++----------++----------+| * | | * +------------------------------------+ */ #fermentor_panel_top { width: 236px; height: 170px; float: right; background-color: #eee; border: 2px solid; border-color: #888; border-radius: 5px 5px 5px 5px; margin-bottom: 3px; } #fermentor_selector { width: 88px; height: 170px; float: left; } input.select { margin-left: 10px; margin-top: 13px; } #fermentor_thermometers { width: 720px; height: 371px; float: left; background-color: #eee; border: 2px solid; border-color: #888; border-radius: 5px 5px 5px 5px; } #fermentor_alarmled { width: 38px; height: 30px; float: left; text-align: center; margin-top: 10px; margin-left: 10px; } #fermentor_powerled { width: 38px; 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: 236px; height: 50px; float: right; background-color: #eee; border: 2px solid; border-color: #888; border-radius: 5px 5px 5px 5px; margin-bottom: 3px; } #fermentor_display1 { width: 79px; height: 46px; float: left; text-align: center; margin-top: 7px; } #fermentor_display2 { width: 78px; height: 46px; float: left; text-align: center; margin-top: 7px; } #fermentor_display3 { width: 79px; height: 46px; float: left; text-align: center; margin-top: 7px; } #fermentor_panel_control { width: 236px; height: 136px; float: right; background-color: #eee; border: 2px solid; border-color: #888; border-radius: 5px 5px 5px 5px; margin-bottom: 3px; } #fermentor_led1 { width: 79px; height: 30px; float: left; text-align: center; margin-top: 8px; } #fermentor_led2 { width: 78px; height: 30px; float: left; text-align: center; margin-top: 8px; } #fermentor_led3 { width: 79px; height: 30px; float: left; text-align: center; margin-top: 8px; } .dtemp { font-weight: bold; font-size: 1.2em; color: blue; } .ltemp { font-weight: bold; font-size: 1.2em; color: green; } .htemp { font-weight: bold; font-size: 1.2em; color: red; } #fermentor_toggle1 { width: 79px; height: 70px; float: left; text-align: center; margin-top: 10px; } #fermentor_toggle2 { width: 78px; height: 70px; float: left; text-align: center; margin-top: 10px; } #fermentor_toggle3 { width: 79px; height: 70px; float: left; text-align: center; margin-top: 10px; } #menu { width: 600px; height: 300px; margin-left: auto; margin-right: auto; border: 3px solid #5c9ccc; border-radius: 5px 5px 5px 5px; margin-top: 50px; } #menu_header { width: 600px; height: 30px; background-color: #5c9ccc; text-align: center; padding-top: 10px; color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; } #menu_left { width: 300px; height: 260px; float: left; } #menu_right { width: 300px; height: 260px; float: right; } .LEDred_on { margin: 5px auto; width: 12px; height: 12px; 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: 12px; height: 12px; background-color: #820; border-radius: 50%; box-shadow: #400 0 0px 1px 1px; } .LEDyellow_on { margin: 5px auto; width: 12px; height: 12px; 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: 12px; height: 12px; background-color: #A90; border-radius: 50%; box-shadow: #440 0 0px 1px 1px; } .LEDgreen_on { margin: 5px auto; width: 12px; height: 12px; 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: 12px; height: 12px; background-color: #270; border-radius: 50%; box-shadow: #250 0 0px 1px 1px; } .LEDblue_on { margin: 5px auto; width: 12px; height: 12px; 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: 12px; height: 12px; background-color: #137; border-radius: 50%; box-shadow: #024 0 0px 1px 1px; }