Галерея домашних страниц

AlexSedov · Сообщение **AlexSedov** » Вт дек 29, 2015 11:29 am

Спасибо дорогому nick7zmail за разъяснения. Всё получилось. Но теперь меня в ступор вогнало следующее- не могу у этих индикаторов цвет текста поменять, вернее не могу найти где его можно сменить.

СпойлерПоказать

: 2015-12-29.png (165.3 КБ) 14576 просмотров

Код

СпойлерПоказать

Код: Выделить всё

 <!--#
 @version 0.2 (auto-set)
#-->
<script src="/templates_alt/jsgraphics/jsgraphics.js"></script>
<script src="/templates_alt/jsgraphics/timeline2c.js"></script>
<script src="/templates_alt/jsgraphics/level2.js"></script>
<script type="text/javascript" src="/js/ui.tabs.paging.js"></script>
<script src="/templates_alt/jsgraphics/state1.js"></script>
<script src="/templates_alt/jsgraphics/state2.js"></script>

<table width="100%" border="0">
 <tr>
  <td valign="top" colspan=3>
  
<table width="100%" height="120" border="0" bgcolor="Black" style="background-image: url(/templates_alt/icon/fon3.png) ;border-radius: 0.4em 0.4em 0.4em 0.4em;">
 
 <tr>
        <td>
               
                </td>

                <td valign="bottom">
<script language="javascript">
 function leftPanelToggle() {
  $('#leftPanel').toggle();
  if ( $("#leftPanel").is(":visible") ) {
   $("#leftPanelToggleIcon").attr("src","/images/icon_left.png");
  } else { 
   $("#leftPanelToggleIcon").attr("src","/images/icon_right.png");
  }
  return false;
 }
</script>
 <a href="/"><img src="/templates_alt/icon/logo_s2.png" border="0"></a>
 
                <a href="#" onClick="return leftPanelToggle();"><img id="leftPanelToggleIcon" border="0" src="/images/icon_left.png" border="0"></a>
                </td>


                                <td width="90%">
                                
<table width="95%" height="100%" align="right">
  <tr>
  <td width="10%">

 
 
  </td>
    <td width="30%" height="30">
    
<div style="background:transparent">
<canvas id="stt11" width="48" height="25">Canvas not supported</canvas>
<canvas id="stt12" width="48" height="25">Canvas not supported</canvas>
<canvas id="stt13" width="48" height="25">Canvas not supported</canvas>
<canvas id="stt14" width="48" height="25">Canvas not supported</canvas>
<canvas id="stt15" width="48" height="25">Canvas not supported</canvas>
</div>    
<script type="text/javascript">

    st1 = new state1('stt11', 'Svet.stateColor', 'Свет ', 20000, 1);
    st1.int1_min = 01; st1.int1_max = 01; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 00; st1.int2_max = 00; st1.int2_color = 'transparent';  // transparent
    st1.redraw();    
    
    st1 = new state1('stt12', 'Router.stateColor', 'Router', 20000, 1);
    st1.int1_min = 01; st1.int1_max = 01; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 00; st1.int2_max = 00; st1.int2_color = 'transparent';  // transparent
    st1.redraw();       
    
    st1 = new state1('stt13', 'Switch.stateColor', 'switch', 20000, 1);
    st1.int1_min = 01; st1.int1_max = 01; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 00; st1.int2_max = 00; st1.int2_color = 'transparent';  // transparent
    st1.redraw(); 
    
    st1 = new state1('stt14', 'serverCPUload.value', '1', 20000, 1);
    st1.alertmin = 05;
    st1.alertmax = 95;
    st1.int1_min = 80; st1.int1_max = 101; st1.int1_color = '#ff0000'; // red
    st1.int2_min = 65; st1.int2_max = 79; st1.int2_color = '#ff9900';  // orange
    st1.int3_min = 51; st1.int3_max = 64; st1.int3_color = '#ffff00'; // green
    st1.int4_min = 11; st1.int4_max = 50; st1.int4_color = '#00ff00'; // blue
    st1.int5_min = 0; st1.int5_max = 10; st1.int5_color = '#00ffff'; // cyan
    st1.redraw();    
    
    st1 = new state1('stt15', 'serverCPUload.value', 'Mega', 20000, 1);
    st1.alertmin = 05;
    st1.alertmax = 95;
    st1.int1_min = 80; st1.int1_max = 101; st1.int1_color = '#ff0000'; // red
    st1.int2_min = 65; st1.int2_max = 79; st1.int2_color = '#ff9900';  // orange
    st1.int3_min = 51; st1.int3_max = 64; st1.int3_color = '#ffff00'; // green
    st1.int4_min = 11; st1.int4_max = 50; st1.int4_color = '#00ff00'; // blue
    st1.int5_min = 0; st1.int5_max = 10; st1.int5_color = '#00ffff'; // cyan
    st1.redraw();    
</script>    
    </td>
    <td width="30%">
 
    </td>
    <td ROWSPAN="3" width="10%">
<EMBED src="http://rp5.ru/informer/100x100/1/1.swf" loop=false menu=false quality=high scale=noscale wmode=transparent bgcolor=#CCCCCC flashvars="id=8715&lang=ru&um=00000" WIDTH="100" HEIGHT="100" NAME="loader" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE= "http://www.macromedia.com/go/getflashplayer"></EMBED>
    </td>
    <td ROWSPAN="2" width="30%">

<div align="left" id="txt" style='cursor: default;font-family:Liquid Crystal;text-align:center;color:#66FF00;font-size:32pt'></div>
<br>
<div id="txt1" style='cursor: default;text-align:center;color:#66FF00;font-size:9pt'></div>

<script type="text/javascript">
    function time() {
      var today = new Date();
      var day_of_week = ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"];
      var month_of_year = ["января", "Февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря"];
      var day_ = day_of_week[today.getDay()];
      var date_ = today.getDate();
      var month_ = month_of_year[today.getMonth()];
      //var year_ = today.getFullYear();
      var hours_ = today.getHours();
      var min_ = today.getMinutes();
      var sec_ = today.getSeconds();
      var zerom = zeros = '';
      if(min_ < 10) zerom = '0';
      if(sec_ < 10) zeros = '0';
 document.getElementById('txt').innerHTML=hours_+""+":"+""+zerom+min_+""+":"+""+zeros+sec_;
 document.getElementById('txt1').innerHTML=day_+","+'&nbsp'+'&nbsp'+date_+" "+month_;
   }
   setInterval(time, 1);
</script>
    
    </td>
  </tr>
  <tr>
    <td width="10%" height="35">
    
  </td>
    <td width="30%">
    
<canvas id="cpu2" width="184" height="29">Canvas not supported</canvas>
</div>

<script type="text/javascript">
   
   cpulevel2 = new timeline2c('cpu2', 'serverCPUload.value', 'CPU2:', 2000, '%');
   cpulevel2.alertmin = 0;
   cpulevel2.alertmax = 85;
   cpulevel2.background = 'rgba(0, 0, 0, 1)';
   cpulevel2.color = 'rgba(200, 200, 200, 1)';
   cpulevel2.border = 0;
   cpulevel2.basecolor = 'rgba(100, 100, 100, 1)';
   cpulevel2.grid = 0;
   cpulevel2.redraw();
   cpulevel2.color_title = 'rgba(0, 0, 0, 1)';
 </script>

    </td>
    <td width="30%">


 <div style="background:transparent">
<canvas id="lev3" width="80" height="30">Canvas not supported</canvas>
<canvas id="lev4" width="80" height="30">Canvas not supported</canvas>
<canvas id="lev5" width="80" height="30">Canvas not supported</canvas>
</div>    

<script type="text/javascript">

   level_3 = new level2('lev3', 'serverCPUTemp', 'CPU TEMP', 2000, '°C');
   level_3.alertmin = 0;
   level_3.alertmax = 50;
   //level_3.background = 'rgba(200, 40, 40, 1)';
   level_3.max_ = 48;
   level_3.min_ = 15;
   level_3.yellow_ = 45;
   level_3.red_ = 43;
   level_3.orange_ = 41;
   level_3.green_ = 20;
   level_3.blue_ = 10;
   level_3.cyan_ = 0;
   level_3.redraw();

   level_4 = new level2('lev4', 'serverCPUFan', 'FAN', 2000, '');
   level_4.alertmin = 2050;
   level_4.alertmax = 2512;
   //level_4.background = 'rgba(200, 40, 40, 1)';
   level_4.max_ = 2500;
   level_4.min_ = 2000;
   level_4.yellow_ = 2400;
   level_4.green_ = 2350;
   level_4.orange_ = 2150;
   level_4.blue_ = 2100;
   level_4.cyan_ = 2050;
   level_4.red_ = 2000;
   level_4.redraw();
   
   
   level_5 = new level2('lev5', 'serverCPUTemp', 'HDD TEMP', 2000, '°C');
   level_5.alertmin = 0;
   level_5.alertmax = 50;
   //level_5.background = 'rgba(200, 40, 40, 1)';
   level_5.max_ = 48;
   level_5.min_ = 15;
   level_5.yellow_ = 45;
   level_5.red_ = 43;
   level_5.orange_ = 41;
   level_5.green_ = 20;
   level_5.blue_ = 10;
   level_5.cyan_ = 0;
   level_5.redraw();
</script>    




    </td>
 
    <td width="30%">

    </td>    
  </tr>
  
   <tr>
    <td width="10%" height="20">
    
  </td>
    <td COLSPAN="2" width="30%">
    
<div style="background:transparent">
<canvas id="stt1" width="55" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt2" width="55" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt3" width="53" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt4" width="53" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt5" width="53" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt6" width="53" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt7" width="53" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt8" width="53" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
<canvas id="stt9" width="53" height="10" style="overflow:hidden;border-radius: 0.4em 0.4em 0.4em 0.4em">Canvas not supported</canvas>
</div>
<script type="text/javascript">

    st1 = new state2('stt1', 'Radio.RadioLedOn', '2', 10000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();    
    
    
    st1 = new state2('stt2', 'AlarmMenu.AlarmMenuLed', '3', 20000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();     
    
    st1 = new state2('stt3', 'Alise.Led', '4', 20000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // transparent
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // black
    st1.redraw();     
    
     st1 = new state2('stt4', 'Radio.RadioLedOn', '6', 20000, 1);
   st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();    
    
    
    st1 = new state2('stt5', 'Radio.RadioLedOn', '5', 10000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();    
    

    st1 = new state2('stt6', 'serverCPUload.value', 'SYSTEM', 20000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();    
    
    
     st1 = new state2('stt7', 'AlarmMenu.AlarmMenuLed', '7', 20000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();     
    
    st1 = new state2('stt8', 'Radio.RadioLedOn', '8', 10000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();    
    
     st1 = new state2('stt9', 'AlarmMenu.AlarmMenuLed', '9', 20000, 1);
    st1.alertmin = 01;
    st1.alertmax = 95;
    st1.int1_min = 08; st1.int1_max = 11; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 03; st1.int2_max = 07; st1.int2_color = 'transparent';  // transparent
    st1.redraw();     
    

</script>
 
 




    </td>
 
    <td width="30%">

    </td>    
  </tr>
</table>


                                </td>

  <!--#
  <td valign="top" nowrap>
  [ <a href="#" onClick="return openTWindow('addEventWin', 'Add Event', '/popup/addevent.html', 500, 230)">Add Event</a> ]
  </td>
  #-->
  <td valign="top" nowrap>

  <table border="0" align="right">
   <tr>
    <form action="/" method="get" name="frmSettings">
 <!--# [#if HIDE_TERMINALS!="1"#] #-->
  <td valign="top" nowrap>
  <style type="text/css">
   a {
color: transparent;
cursor: pointer;
}

select {
background-color: transparent;
cursor: pointer;
color: #41B446;
font-size: 14;
border-color: transparent;
}

a:hover {
color: #9ECF15;
}

  </style>
   <div><a><#LANG_TERMINAL#>
   <select name="terminal" onChange="document.frmSettings.submit();">
    <option value=""><#LANG_SELECT#>
    [#begin TERMINALS#]
    <option value="[#NAME#]"[#if SELECTED="1"#] selected[#endif#]>[#TITLE#]
    [#end TERMINALS#]
   </select></a></div>
  </td>
  [#endif#]
  <!--#
  [#if HIDE_USERS!="1"#]
  <td valign="top" nowrap>
   <#LANG_USER#>:
   <select name="username" onChange="document.frmSettings.submit();">
    <option value=""><#LANG_SELECT#>
    [#begin USERS#]
    <option value="[#USERNAME#]"[#if SELECTED="1"#] selected[#endif#]>[#NAME#]
    [#end USERS#]
   </select>
  </td>
  [#endif#]
  #-->
  </form>
  
   </tr>
   
   
   <tr>
    <td valign="top" nowrap><a href="/admin.php"><#LANG_CONTROL_PANEL#></a></td>
 
   </tr>
  

  
   <tr>
    <td valign="top" colspan="3" align="right" nowrap>
    <a href="<#LANG_WIKI_URL#>" target=_blank>MajorDoMo Project</a>
    |
    <a href="/popup/xray.html" target=_blank>X-Ray</a>
    </td>
   </tr>
  </table>
  </td>
  <td valign="top">
   [#if USER_AVATAR!=""#]
   <a href="#" onClick="return openModalTWindow('usersWindow', '<#LANG_USERS#>', '/popup/users.html', 500, 500);"><img src="/cms/avatars/[#USER_AVATAR#]" border="0" height="50"></a>
   [#else#]
   <a href="#" onClick="return openModalTWindow('usersWindow', '<#LANG_USERS#>', '/popup/users.html', 500, 500);"><img src="<#ROOTHTML#>templates_alt/icon/user.png" border="0"></a>
   [#endif#]
  </td>
 </tr>
 </table>
  
  </td>
 </tr>
 <tr>
  <td valign="top" width="350" id="leftPanel">
  <iframe src="/menu.html" width="350" height="450" id="navFrame" border="0" frameborder=0 framespacing=0></iframe>
  <!--#<iframe src="/demos/main/index.html" width="350" height="400" border="0" frameborder=0 framespacing=0 scrolling="auto"></iframe>#-->
  <!--#
  <img src="/img/0.gif" border="0" width="300" height="1">
  <div id="alertsLog" class="small">
   [#module name="shoutbox" limit="5"#]
  </div>
  #-->
  </td>

  <td valign="top" width="100%">

<div id="tabs">
<ul>
[#begin LAYOUTS#]
<li>
<a href="#tabs-[#ID#]"[#if ICON!=""#] style="padding:1px 1em 2px 0.5em"[#endif#]>[#if ICON!=""#]<img src="/cms/layouts/[#ICON#]" align="absmiddle" height="28">&nbsp;&nbsp;[#endif#][#TITLE#]</a></li>
[#end LAYOUTS#]
  <li><a href="#tabs-last"><span id='tablast_title'>***</span></a></li>
</ul>

[#begin LAYOUTS#]
<div id="tabs-[#ID#]">...</div>
[#end LAYOUTS#]

<div id="tabs-last">
  ...
</div> 

</div>

  </td>
 </tr>
</table>

<script language="javascript">

var iFrameHeight=500;

$(document).ready(function() {
  // Handler for .ready() called.
  iFrameHeight=$(document).height()-110;
  //alert($(document).height());
  $('#navFrame').height(iFrameHeight+57);
  [#begin LAYOUTS#]
  $('#htmlTab[#NUM#]').height(iFrameHeight);
  [#end LAYOUTS#]
  //alert($('#defaultFrame').height());
});

        $("#tabs").tabs({
        show: function(event, ui) { 
         iFrameHeight=$(document).height()-110;
         var selected = $( "#tabs" ).tabs( "option", "selected" );
         //alert(selected);
         [#begin LAYOUTS#]
         if (selected == [#NUM#]) {
          [#if TYPE="app"#]
           if ($('#tabs-[#ID#]').html()=='...') {
            $('#tabs-[#ID#]').html('<iframe src="/popup/[#APP#].html" width=100% height="'+iFrameHeight+'" border="0" frameborder="0"></iframe>');
           }
          [#endif TYPE#]
          [#if TYPE="url"#]
           if ($('#tabs-[#ID#]').html()=='...') {
            $('#tabs-[#ID#]').html('<iframe src="[#URL#]" width=100% height="'+iFrameHeight+'" border="0" frameborder="0"></iframe>');
           }
          [#endif TYPE#]
          [#if TYPE="html"#]
           if ($('#tabs-[#ID#]').html()=='...') {
            $('#tabs-[#ID#]').html('<iframe src="/page/[#ID#].html" width=100% height="'+iFrameHeight+'" border="0" frameborder="0"></iframe>');
           }
          [#endif TYPE#]
         }
         [#end LAYOUTS#]
        }});

$('#tabs').tabs('paging', {cycle:false, follow:false});


</script>

nick7zmail · Сообщение **nick7zmail** » Вт дек 29, 2015 2:38 pm

AlexSedov писал(а):Спасибо дорогому nick7zmail за разъяснения. Всё получилось. Но теперь меня в ступор вогнало следующее- не могу у этих индикаторов цвет текста поменять, вернее не могу найти где его можно сменить.

Всегда пожалуйста.
По поводу цвета могу ошибаться, но по-моему он зарыт где-то в css. Посмотри в хроме "Код элемента", там ссылка на оформление должна быть. Так же он может быть закопан в /templates_alt/jsgraphics/state1.js...приду домой, посмотрю, если время будет.

AlexSedov · Сообщение **AlexSedov** » Пт янв 01, 2016 8:42 pm

Чёт я ни как не найду где цвет текста поменять.

nick7zmail · Сообщение **nick7zmail** » Сб янв 02, 2016 6:20 pm

AlexSedov писал(а):Чёт я ни как не найду где цвет текста поменять.

Попробовал короче дома воссоздать индикатор - выходит вот такой

: индикатор.png (484 байт) 14448 просмотров

state1 взял отсюда. А ты где брал? Может более старая/новая версия библиотеки? Мне нужен исходник, чтобы помочь)

AlexSedov · Сообщение **AlexSedov** » Сб янв 02, 2016 8:39 pm

Привет в новом году. Чуть позже выложу.

Отправлено с моего SM-G900FD через Tapatalk

AlexSedov · Сообщение **AlexSedov** » Вс янв 03, 2016 11:17 am

Вот мой State1

nick7zmail · Сообщение **nick7zmail** » Вс янв 03, 2016 11:26 am

AlexSedov писал(а):Вот мой State1

Вот говорил же в state1 ищи. Вот эта строчка

Код: Выделить всё

this.color_title = 'rgba(30, 87, 153, 1)';

Если нужны разные цвета добавь в state1

Код: Выделить всё

function state1(contid, objprop, title, refreshtime, type, color) {
    ...
    this.color_title = color;

и вызывай вот так

Код: Выделить всё

st1 = new state1('stt1', 'ThisComputer.isDark', 'Свет', 20000, 1, 'rgba(255, 0, 0, 1)');

Если лень в state1.js лезть - можно принудительно при вызове присвоить.

Код: Выделить всё

<script type="text/javascript">
    st1 = new state1('stt1', 'ThisComputer.isDark', 'Свет', 20000, 1);
    st1.color_title='rgba(0, 255, 0, 1)'
    st1.int1_min = 01; st1.int1_max = 01; st1.int1_color = '#00ff00'; // green
    st1.int2_min = 00; st1.int2_max = 00; st1.int2_color = 'transparent';  // transparent
    st1.redraw(); 
</script>

Вариантов короче масса)) Как удобнее будет - так и делай.

AlexSedov · Сообщение **AlexSedov** » Вс янв 03, 2016 2:33 pm

Спасибо. Буду пробовать.

Отправлено с моего SM-G900FD через Tapatalk

AlexSedov · Сообщение **AlexSedov** » Пн янв 04, 2016 12:53 am

Спасибо разобрался. Всё получилось.

Amarok · Сообщение **Amarok** » Пн янв 04, 2016 10:08 am

А как в HTML коде выводить текст в зависимости от условий? К примеру, если температура за окном меньше 0, то выводить её синим цветом, если больше 25 - красным. Можно пример?

Галерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц