Помогите пож с домашней страницей

[adzam]

Помогите пож с домашней страницей: я хочу чтоб по умолчанию был график температуры котла, а при левом клике на любой кружок, график температуры менялся на соответствующий данному помещению

012.JPG (213.81 КБ) 8351 просмотр

Два дня бьюсь , но чего-то мало толку, вот мой код:
<div style="background-color:#DFEFFC;border: 1px solid ;color:rgb(204, 204, 204);border-radius: 0.6em 0.6em 0.6em 0.6em;width882px; height:755px">
<style>
.box {
border:1px solid #a1a4a8;
-moz-border-radius:20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius:20px;
padding-top:20px;
box-shadow:0 0 10px 0 #555555;
-webkit-box-shadow:0 0 10px 0 #555555;
-moz-box-shadow:0 0 10px 0 #555555;}
.color-8 { background-image: url("/pChart/?p=Chisinau.TemperHOLL&type=7d&width=1240&height=225&gcolor=green&px=10");
}
.color-9 { background-image: url("/pChart/?p=Chisinau.TemperKUHNIA&type=7d&width=1240&height=225&gcolor=green&px=10");
}
.color-10 { background-image: url("/pChart/?p=Chisinau.TemperKOTEL&type=7d&width=1240&height=225&gcolor=green&px=10");
}
.color-11 { background-image: url("/pChart/?p=Chisinau.TemperZAL&type=7d&width=1240&height=225&gcolor=green&px=10");
}
.color-12{ background-image: url("/pChart/?p=Chisinau.TemperSPALNIA&type=7d&width=1240&height=225&gcolor=green&px=10");
}
.color-13 { background-image: url("/pChart/?p=Chisinau.TemperKABINET&type=7d&width=1240&height=225&gcolor=green&px=10");
}
.circle {
border-radius: 50%;

margin: 4px;
margin-top:4px;

/* text styling */
font-size: 35px;
width: 270px;
height: 270px;
color: #FFF; border: 2px solid #fff;
height: 250px;
text-align: center;
font-family: Arial;
}
.color-1 { background-image: url("../../../templates_alt/icon/05.png");}
.color-2 { background-image: url("../../../templates_alt/icon/03.png");}
.color-3 { background-image: url("../../../templates_alt/icon/27.png");}
.color-4 { background-image: url("../../../templates_alt/icon/18.png");}
.color-5 { background-image: url("../../../templates_alt/icon/trees.jpg");}
.color-6 { background: #5E2750; }
.color1-box-shadow { box-shadow: 0px 0px 5px 1px #DD4814 }
.color2-box-shadow { box-shadow: 0px 0px 5px 1px #DD4814 }
.color3-box-shadow { box-shadow: 0px 0px 5px 1px #DD4814 }
.color4-box-shadow { box-shadow: 0px 0px 5px 1px #DD4814 }
.color5-box-shadow { box-shadow: 0px 0px 5px 1px #DD4814 }
.color6-box-shadow { box-shadow: 0px 0px 5px 1px #DD4814 }
.text { line-height: 45px; padding-top: 50px; height: 200px }
</style>
<table style="position:relative;top:0px;width:100%" >
<tr align="center">
<td width="30%" >
<div style="height:254">
<div class="circle color-1 color1-box-shadow" style="color:green">
<br>Холл<br>%Chisinau.TemperHOLL%°C<br>влажность<br>%Chisinau.humidity_dHOLL%%
</div>
</div>
</td>
<td width="30%" >
<div style="height:254">
<div class="circle color-2 color2-box-shadow" style="color:green;position:relative;top:0px">
<br>Кухня<br>%Chisinau.TemperKUHNIA%°C<br>влажность<br>%Chisinau.humidity_dKUHNIA%%
</div>
</div>
</td>
<td width="30%" >
<div style="height:254">
<div class="circle color-1 color1-box-shadow" style="color:green">
<br>Котел<br>%Chisinau.TemperKOTEL%°C<br>влажность<br>%Chisinau.humidity_dKOTEL%%
</div>
</div>
</td>
</tr>
<tr>
<td width="100%" colspan="3" >
<canvas class="box color-8" id="Mycanvas" style="position:relative;top:0px;float: right; width:100%; height:200"></canvas>
</div>
</td>
</tr>
<tr align="center">
<td width="30%" >
<div style="height:254px">
<div class="circle color-4 color4-box-shadow" style="position:relative">
<br>Зал<br>%Chisinau.TemperZAL%°C<br>влажность<br>%Chisinau.humidity_dZAL%%
</div>
</div>
</td>
<td width="30%" >
<div style="height:254">
<div class="circle color-5 color5-box-shadow" style="position:relative">
<br>Спальня<br>%Chisinau.TemperSPALNIA%°C<br>влажность<br>%Chisinau.humidity_dSPALNIA%%
</div>
</div>
</td>
<td width="30%" >
<div style="height:254">
<div class="circle color-6 color6-box-shadow" style="position:relative">
<br>Кабинет<br>%Chisinau.TemperKABINET%°C<br>влажность<br>%Chisinau.humidity_dKABINET%%
</div>
</div>
</td>
</tr>
</table>
</div>

Спасибо

[Vit]

как второй pChart вставить ниже первого

что id="Mycanvas" обозначает?

спасибо

[adzam]

как второй pChart вставить ниже первого

что id="Mycanvas" обозначает?

спасибо

<style>
.box {
border:1px solid #a1a4a8;
-moz-border-radius:20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius:20px;
padding-top:20px;
box-shadow:0 0 10px 0 #555555;
-webkit-box-shadow:0 0 10px 0 #555555;
-moz-box-shadow:0 0 10px 0 #555555;}
.color-8 { background-image: url("/pChart/?p=Chisinau.TemperHOLL&type=7d&width=1240&height=225&gcolor=green&px=10");
}
.color-9 { background-image: url("/pChart/?p=Chisinau.TemperKUHNIA&type=7d&width=1240&height=225&gcolor=green&px=10");
}
.color-10 { background-image: url("/pChart/?p=Chisinau.TemperKOTEL&type=7d&width=1240&height=225&gcolor=green&px=10");
}
.color-11 { background-image: url("/pChart/?p=Chisinau.TemperZAL&type=7d&width=1240&height=225&gcolor=green&px=10");
}
.color-12{ background-image: url("/pChart/?p=Chisinau.TemperSPALNIA&type=7d&width=1240&height=225&gcolor=green&px=10");
}

и так далее


.circle {
border-radius: 50%;


а обьявляешь так

<tr>
<td width="100%" colspan="3" >
<canvas class="box color-8" id="Mycanvas" style="position:relative;top:0px;float: right; width:100%; height:200"></canvas>
<canvas class="box color-9" id="Mycanvas" style="position:relative;top:0px;float: right; width:100%; height:200"></canvas>
</div>
</td>
</tr>

и получаются два графика, а я хочу чтоб график был один но переключался
сделал наброски переключателя но он привязан к температуре, и не получается привязать его к окнам, короче нужно сначало превратить окна в кнопки , потом связать их с переключателем и собрать сам переключатель

<script language="javascript">
if(%Chisinau.Temp%<=18){
document.write('<canvas class="box color-8" id="Mycanvas" style="position:relative;top:0px;float: right; width:100%; height:200"></canvas>');
}else{
document.write('<canvas class="box color-9" id="Mycanvas" style="position:relative;top:0px;float: right; width:100%; height:200"></canvas>');
}
</script>
переключатель работает но от температуры, подскажите как его привязать к кнопкам

[Vit]

спасибо большое за подсказку

[adzam]

спасибо большое за подсказку

я рад что хоть кому-то пригодилось, когда сделаешь то покажешь что получилось.
Может кто подскажет или никто не может помочь?
Пожалуйста!!!

[Vit]

увы не смогу подсказать, не силен в php.... надо Сергея просить помочь, может еще кто на форуме в этом сможет подсобить, думаю кто нибудь да отпишется...

[adzam]

увы не смогу подсказать, не силен в php.... надо Сергея просить помочь, может еще кто на форуме в этом сможет подсобить, думаю кто нибудь да отпишется...

Очень надеюсь и жду

[LutsenkoDenis]

что id="Mycanvas" обозначает?

id - уникальный идентификатор элемента, в данном случае канвы(Canvas)
в идеале, на странице не должно быть элементов с одинаковыми ID.

[LutsenkoDenis]

короче нужно сначало превратить окна в кнопки , потом связать их с переключателем и собрать сам переключатель.

Блин, мозг взорвался

1. Что из нарисованного на картинке должно быть по умолчанию?
2. Что должно нажиматься?
3. Что должно происходить после нажатия на необходимый элемент?
4. Что есть переключатель? Что и на что он должен переключать?
5. Что за окна, которые нужно превращать в кнопки?

[adzam]

Кнопкой является или круг с данными температуры и влажности в разных помещениях, или сама надпись в кругу(что наверное полегче будет) , т.е. 6 кругов надо превратить в 6 кнопок
Меняться должен график, т е оболочка графика остается а меняется помещение в котором рисуется график
допустим если нажать кнопку кухня то строку:
эту строку которая рисует температуру в холле поменять
<canvas class="box color-8" id="Mycanvas" style="position:relative;top:0px;float: right; width:100%; height:200"></canvas>
на строку которая рисует температуру на кухне
<canvas class="box color-9" id="Mycanvas" style="position:relative;top:0px;float: right; width:100%; height:200"></canvas>

где
.color-8 { background-image: url("/pChart/?p=Chisinau.TemperHOLL&type=7d&width=1240&height=225&gcolor=green&px=10");
}
.color-9 { background-image: url("/pChart/?p=Chisinau.TemperKUHNIA&type=7d&width=1240&height=225&gcolor=green&px=10");
}
я хочу , чтоб просматривая на данной странице температуру и влажность в разных помещениях (температура и влажность это это данные от датчиков которые меняются ),я мог бы нажать например на кнопку зал (это или круг зал или надпись с данными в этом кругу) и увидеть на графике температуру в зале ночью .Нажав на кнопку холл я должен увидеть график температуры в холле.