ОсновноеRadiotalkПользовательское
Технологии вещания, софт, скрипты
7   •   Посмотреть все темы

показываем количество слушателей с помошью красивых графиков от гугла.

 

156
Eugene @MechanisM
показываем количество слушателей с помошью красивых графиков от гугла.
открываем файлик странички Icecast2 где вы хотите это добавить например status.xsl и добавляем следующее:
перед </head>
  1. <script src="https://www.google.com/jsapi"></script>
  2. <script>google.load('visualization', '1', {packages: ['gauge']});
  3. function drawVisualization() {
  4. var data = new google.visualization.DataTable();
  5. data.addColumn('string', 'Label');
  6. data.addColumn('number', 'Value');
  7. data.addRows([
  8. ['TOTAL', <xsl:value-of select="listeners" />],<xsl:for-each select="source">
  9. ['<xsl:value-of select="@mount" />', <xsl:value-of select="listeners" />]<xsl:if test="position() != last()"><xsl:text>,</xsl:text></xsl:if></xsl:for-each>
  10. ]);
  11. var gaugeOptions = {min: 0, max: 300, greenFrom: 0, greenTo: 200, yellowFrom: 200, yellowTo: 280, redFrom: 280, redTo: 300, minorTicks: 5};
  12. new google.visualization.Gauge(document.getElementById('visualization')).
  13. draw(data, gaugeOptions);
  14. }
  15. google.setOnLoadCallback(drawVisualization);
  16. </script>

а уже в теге <body> добавляем контейнер куда это все вставляется:
  1. <div id="visualization" style="width:600px; height:200px;"></div>

вот скриншот:

Отредактировано MechanisM - 10.08.2011
0
1572
KyPIIaToB @KyPIIaToB
Красивая реализация вывода. Можешь выложить полный код со стилями для странички status.xsl ? )

0
156
Eugene @MechanisM
ну тут смысл в графиках. а дизайн то любой можно прикрутить. в данном случае использована библиотека jquerymobile.com

0
183
levbazhenov @levbazhenov
Спасибо, сейчас заценим...

0
1572
KyPIIaToB @KyPIIaToB
MechanisM пишет:

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

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

0
156
Eugene @MechanisM
кто уже заюзал код исправьте:
  1. <xsl:value-of select="mount" />

на
  1. <xsl:value-of select="@mount" />

или можете что угодно выводить хоть описание хоть трек играющий.

0
36
Павел @MaJlblLLl
Слушай, а ты не мог бы выложить мануал по подробнее не много, как прикрепить такой дизайн к серверу IceCast под win?
Я думаю такой пост был бы актуален и многим интересен да и я что то не много не допру.

0
1572
KyPIIaToB @KyPIIaToB
MaJlblLLl пишет:

Слушай, а ты не мог бы выложить мануал по подробнее не много, как прикрепить такой дизайн к серверу IceCast под win?
Я думаю такой пост был бы актуален и многим интересен да и я что то не много не допру

1) В первом посте манул.
2) Платформа тут не играет роли, это для веба.

0
114
lex46 @lex46
Спасибо, довольно интересно :) Могли бы поделиться стилем страницы icecast`a ?

0
1572
KyPIIaToB @KyPIIaToB
lex46 пишет:

Спасибо, довольно интересно smile Могли бы поделиться стилем страницы icecast`a ?

Готовый за денежку) А сам можешь прикрутить с помощью jquerymobile.com

0





Согласие на обработку данных на нашем сайте

Продолжая просматривать страницу, вы соглашаетесь с использованием файлов «Cookie» и с Политикой конфиденциальности «Privacy».
Наверху или внизу страницы вы можете изменить валюту и язык по умолчанию. Английская версия сайта ещё находится в доработке и доступна не полностью.