Как добавить и украсить php скрипт прогрессбаром?

Question

[Andrei St]

Подскажите пожалуйста как украсить данный скрипт круглым прогресс баром?

<?php
$str = file_get_contents ('https://localhost/api.php?ip='.$config['servers'][$i]['host'].'&port='.$config['servers'][$i]['port'].'');
$playersonline = json_decode($str, true);
$isOnline = $playersonline['online'];
if($isOnline){
echo '<img class="logo" src="./assets/img/ico-online.png" title="Сервер работает">';
}else{
echo '<img class="logo" src="./assets/img/ico-offline.png" title="Сервер выключен">';
}
?>
<div class="info">
<b id="ip"><?php echo $config['servers'][$i]['host']; ?>:<?php echo $config['servers'][$i]['port']; ?></b>
<?php if (isset($config['servers'][$i]['showMonitoring']) && $config['servers'][$i]['showMonitoring'] === true) { ?> Сейчас  играет 
<?php
$str = file_get_contents ('https://localhost/api.php?ip='.$config['servers'][$i]['host'].'&port='.$config['servers'][$i]['port'].'');
$playersonline = json_decode( $str );
echo "<span>";
echo $playersonline->players->now;
echo "</span> игроков";
?>

$playersonline->players->now; (Отвечает за вывод цифры, собственно говоря эту функцию нужно вставить в код который ниже или добавить html код прогрессбара в скрипт выше...

Еще один такой важный вопрос! где значок статуса, можно както в прогресс баре сделать так что бы при выключенном сервере, прогресс менялся на цвет (progress yellow) что бы менялся сам css класс

ProgressBar

<div class="progress blue"> <span class="progress-left"> <span class="progress-bar"></span> </span> <span class="progress-right"> <span class="progress-bar"></span> </span>
            <div class="progress-value">90%</div>
        </div>

Answer 1

[Олег]

1. Всё придумано до нас:
https://prog-time.ru/kruglyj-animirovannyj-progres...

2."Еще один такой важный вопрос! где значок статуса, можно както в прогресс баре сделать так что бы при выключенном сервере, прогресс менялся на цвет (progress yellow) что бы менялся сам css класс"

<?php
   if(!$isOnline){
      $online_class="progress yellow";
   }else{
      $online_class="progress какой-нибудь-другой-цвет";
   }
?>
<div class="progress <?php echo $online_class; ?>">
   <span class="progress-left"> <span class="progress-bar"></span> </span> <span class="progress-right"> <span class="progress-bar"></span>
</span>
   <div class="progress-value">90%</div>
</div>

Comments

[Andrei St]

<div>
     <div class="counter" data-cp-percentage="45" data-cp-color="#00bfeb"> </div>
  </div>

Спасибо, но как добавить допустим где 45 вот эту функцию > $playersonline->players->now;

[Олег]

вместо 45

<?php echo round($playersonline->players->now/$переменная_с_макс_допустимым_кол_вом_игроков); ?>

- только туда подразумеваются проценты, а у вас на сервере может быть больше 100 игроков, возможно

round($playersonline->players->now/$переменная_с_макс_допустимым_кол_вом_игроков)

round() - математическое округление до целого,
$playersonline->players->now - ваш текущий онлайн
$переменная_с_макс_допустимым_кол_вом_игроков - максимально возможный онлайн - можете вместо неё вписать просто число, например 200, а можете её до выполнения вывода командой echo где-нибудь раньше в коде задать

[Andrei St]

Сделал так

<?php
$str = file_get_contents ('https://minebrix.com/api.php?ip='.$config['servers'][$i]['host'].'&port='.$config['servers'][$i]['port'].'');
$playersonline = json_decode( $str );
echo "<div class='counter' data-cp-percentage='";
echo $playersonline->players->now;
echo "'data-cp-color='#00bfeb'></div>";
?>

Вроде бы как получилось, но теперь надо что бы менялся статус сервера в > data-cp-color='#00bfeb'

[Олег]

if(!$isOnline){
      $online_color="#000000"; // офлайн
   }else{
      $online_color="#FFFFFF"; // онлайн
   }
echo "'data-cp-color='<?php echo $online_color; ?>'></div>";

Цвета сами подберите, какие надо

P.S. отредактировал

[Andrei St]

Олег, Насчет вывода максимального онлайна, у меня все выводиться через api по json
https://minebrix.com/api.php?ip=95.217.219.25&port...

[Олег]

Andrei St, а это уже echo $playersonline->players->max;

[Andrei St]

Олег, ну вы сказали добавить > round($playersonline->players->now/$max)

но у меня ничего не выводиться кроме как NaN%

https://minebrix.com/api.php?ip=95.217.219.25&port...

[Andrei St]

Andrei St, Если конечно вас не затруднит, можно весь код вместе, как объединить это все?

[Олег]

Andrei St, скиньте весь макет, что получился

[Andrei St]

Олег,

<?php
$str = file_get_contents ('https://minebrix.com/api.php?ip=95.217.219.25&port=19132');
$playersonline = json_decode($str, true);
$isOnline = $playersonline['online'];
if($isOnline){
echo '<img class="logo" src="./assets/img/ico-online.png" title="Сервер работает">';
}else{
echo '<img class="logo" src="./assets/img/ico-offline.png" title="Сервер выключен">';
}
?>
<div class="info">
<b id="ip"><?php echo $config['servers'][$i]['host']; ?>:<?php echo $config['servers'][$i]['port']; ?></b>
<?php if (isset($config['servers'][$i]['showMonitoring']) && $config['servers'][$i]['showMonitoring'] === true) { ?> Сейчас  играет 
<?php
$str = file_get_contents ('https://minebrix.com/api.php?ip=95.217.219.25&port=19132');
$playersonline = json_decode( $str );
echo "<div class='counter' data-cp-percentage='";
echo round($playersonline->players->now/$max);
echo "'data-cp-color='#00bfeb'></div>";
?>

[Andrei St]

Andrei St, Вместо > мне и надо туда добавить прогрессбар, с количеством онлайна и статусом меняющим полоску

[Олег]

<?php
	$str = file_get_contents ('https://minebrix.com/api.php?ip=95.217.219.25&port=19132');
	$playersonline = json_decode($str, true);
	$isOnline = $playersonline['online'];
	if($isOnline){
		$progressbar_online_color="#00bfeb";
		echo '<img class="logo" src="./assets/img/ico-online.png" title="Сервер работает">';
	}else{
		$progressbar_online_color="#00bfeb";
		echo '<img class="logo" src="./assets/img/ico-offline.png" title="Сервер выключен">';
	}
?>
	
	<div class="info">
		<b id="ip">
			<?php echo $config['servers'][$i]['host']; ?>:<?php echo $config['servers'][$i]['port']; ?>
		</b>
	
<?php
	if (isset($config['servers'][$i]['showMonitoring']) && $config['servers'][$i]['showMonitoring'] === true) { 
?> 
	
<?php
	$str = file_get_contents ('https://minebrix.com/api.php?ip=95.217.219.25&port=19132');
	$playersonline = json_decode( $str );
	
	$players_online_now = $playersonline->players->now; // текущее кол-во игроков
	$players_online_max = $playersonline->players->max; // максимальное кол-во игроков
	$players_online_percentage = round($players_online_now/$players_online_max); // текущее/максимальное кол-во игроков в %
?>
		<div>Сейчас  играет</div>
		<div class="bg-style">
		  <div>
			 <div class="counter" data-cp-percentage="<?php echo $players_online_percentage; ?>" data-cp-color="<?php echo $progressbar_online_color;?>"> </div>
		  </div>
		</div>
<?php
	}
?>
	</div>

В этом куске кода не забудьте поправить цвета #00bfeb - я их одинаковыми прописал

if($isOnline){
    $progressbar_online_color="#00bfeb";
    echo '<img class="logo" src="./assets/img/ico-online.png" title="Сервер работает">';
  }else{
    $progressbar_online_color="#00bfeb";
    echo '<img class="logo" src="./assets/img/ico-offline.png" title="Сервер выключен">';
  }

[Олег]

Andrei St, машинально закрыл все скобки {} )))
Ваш исходный вариант с корректировкой, должно работать

<?php
$str = file_get_contents ('https://minebrix.com/api.php?ip=95.217.219.25&port=19132');
$playersonline = json_decode($str, true);
$isOnline = $playersonline['online'];
if($isOnline){
$progressbar_online_color="#00bfeb";
}else{
$progressbar_online_color="#00bfeb";
}
?>
<div class="info">
<b id="ip"><?php echo $config['servers'][$i]['host']; ?>:<?php echo $config['servers'][$i]['port']; ?></b>
<?php if (isset($config['servers'][$i]['showMonitoring']) && $config['servers'][$i]['showMonitoring'] === true) { ?> Сейчас  играет 
<?php
$str = file_get_contents ('https://minebrix.com/api.php?ip=95.217.219.25&port=19132');
$playersonline = json_decode( $str );

	$players_online_now = $playersonline->players->now; // текущее кол-во игроков
	$players_online_max = $playersonline->players->max; // максимальное кол-во игроков
	$players_online_percentage = round($playersonline->players->now/$players_online_max); // текущее/максимальное кол-во игроков в %


?>
		<div>Сейчас  играет</div>
		<div class="bg-style">
		  <div>
			 <div class="counter" data-cp-percentage="<?php echo $players_online_percentage; ?>" data-cp-color="<?php echo $progressbar_online_color;?>"> </div>
		  </div>
		</div>

[Andrei St]

Олег, Значения не изменилось, количество игроков. как отобразить не в процентах?

[Олег]

Andrei St, после строки $playersonline = json_decode( $str ); добавьте ещё var_dump($playersonline->players);
пожалуйста

[Andrei St]

Олег, object(stdClass)#7 (2) { ["max"]=> int(100) ["now"]=> int(1) }

[Олег]

Andrei St, погодите, на своём сервере проверю

[Олег]

Andrei St,
тут

$players_online_percentage = round($playersonline->players->now/$players_online_max);

замените на

$players_online_percentage = round($playersonline->players->now/$players_online_max*100);

На 100 домножить забыл, чтобы проценты получались.

Строчку с
var_dump($playersonline->players);
можно убирать

[Andrei St]

Олег, А если сервер выключен выдает NaN% и цвет не меняеться

[Олег]

Andrei St,

<?php
$str = file_get_contents ('https://minebrix.com/api.php?ip=95.217.219.25&port=19132');
$playersonline = json_decode($str, true);
$isOnline = $playersonline['online'];
if($isOnline){
$progressbar_online_color="#00bfeb";
}else{
$progressbar_online_color="#00bfeb";
}
?>
<div class="info">
<b id="ip"><?php echo $config['servers'][$i]['host']; ?>:<?php echo $config['servers'][$i]['port']; ?></b>
<?php if (isset($config['servers'][$i]['showMonitoring']) && $config['servers'][$i]['showMonitoring'] === true) { ?> Сейчас  играет 
<?php
$str = file_get_contents ('https://minebrix.com/api.php?ip=95.217.219.25&port=19132');
$playersonline = json_decode( $str );
if($isOnline){
  $players_online_now = $playersonline->players->now; // текущее кол-во игроков
  $players_online_max = $playersonline->players->max; // максимальное кол-во игроков
  $players_online_percentage = round($playersonline->players->now/$players_online_max); // текущее/максимальное кол-во игроков в %


?>
    <div>Сейчас  играет</div>
    <div class="bg-style">
      <div>
       <div class="counter" data-cp-percentage="<?php echo $players_online_percentage; ?>" data-cp-color="<?php echo $progressbar_online_color;?>"> </div>
      </div>
    </div>
<?php
}else{
	$players_online_percentage=0;
?>
	<div>Сервера остановлены</div>
    <div class="bg-style">
      <div>
       <div class="counter" data-cp-percentage="<?php echo $players_online_percentage; ?>" data-cp-color="<?php echo $progressbar_online_color;?>"> </div>
      </div>
    </div>
<?php
}
?>

[Олег]

И цвет не забудьте там в самом верху поменять

if($isOnline){
$progressbar_online_color="#00bfeb";
}else{
$progressbar_online_color="#00bfeb";
}

[Andrei St]

Олег, Есть телеграм?

[Олег]

Andrei St, не а

[Andrei St]

Олег, Опять не выводит инфу об онлайне

object(stdClass)#7 (2) { ["max"]=> int(100) ["now"]=> int(1) }
Сейчас играет

[Олег]

Andrei St, опять умножение на 100 потерялось
в строке

$players_online_percentage = round($playersonline->players->now/$players_online_max); // текущее/максимальное кол-во игроков в %

надо сделать

$players_online_percentage = round($playersonline->players->now/$players_online_max*100); // текущее/максимальное кол-во игроков в %

[Andrei St]

: Division by zero in
/var/www/u1164390/data/www/minebrix.com/assets/pages/main/main.html
on line
413

pe.MineBrix.com:19132
Сейчас играет object(stdClass)#11 (2) { ["max"]=> int(0) ["now"]=> int(0) } 0 игроков

Выдает ошибку, у меня когда сервер выключен в json данные все к нулю равняются, я имею ввиду онлайн...
Можно это как исправить сделать првоерку что если в now и max (0-0) то прогресс бар выводит тоже 0

[Олег]

<?php
$str = file_get_contents ('https://minebrix.com/api.php?ip=95.217.219.25&port=19132');
$playersonline = json_decode($str, true);
$isOnline = $playersonline['online'];
if($isOnline){
$progressbar_online_color="#00bfeb";
}else{
$progressbar_online_color="#00bfeb";
}
?>
<div class="info">
<b id="ip"><?php echo $config['servers'][$i]['host']; ?>:<?php echo $config['servers'][$i]['port']; ?></b>
<?php if (isset($config['servers'][$i]['showMonitoring']) && $config['servers'][$i]['showMonitoring'] === true) { ?> Сейчас  играет 
<?php
$str = file_get_contents ('https://minebrix.com/api.php?ip=95.217.219.25&port=19132');
$playersonline = json_decode( $str );
if($isOnline){
  $players_online_now = $playersonline->players->now; // текущее кол-во игроков
  $players_online_max = $playersonline->players->max; // максимальное кол-во игроков
  if($players_online_now!=0){
	  $players_online_percentage = round($playersonline->players->now/$players_online_max*100); // текущее/максимальное кол-во игроков в %
  }else{
	  $players_online_percentage=0;
  }
?>
    <div>Сейчас  играет</div>
    <div class="bg-style">
      <div>
       <div class="counter" data-cp-percentage="<?php echo $players_online_percentage; ?>" data-cp-color="<?php echo $progressbar_online_color;?>"> </div>
      </div>
    </div>
<?php
}else{
?>
  <div>Сервера остановлены</div>
    <div class="bg-style">
      <div>
       <div class="counter" data-cp-percentage="0" data-cp-color="<?php echo $progressbar_online_color;?>"> </div>
      </div>
    </div>
<?php
}
?>

[Олег]

Отредактировал предыдущий пост. Деления на ноль избегаем теперь

[Andrei St]

Олег, Спасибо огромное что помог и все разъяснил..

[Олег]

Andrei St, успехов!

[Andrei St]

Олег, Еще вопрос как это все записывать в кеш? У меня иногда хостинг выдает всю инфу о скрипте!

[Олег]

Andrei St, т.е. периодически вместо html-кода показывается вся начинка php? - это с техподдержкой хостинга надо общаться и решать проблему.

[Andrei St]

Олег, Подскажи как убрать в прогресс баре цифры? что бы просто при онлайне заполнялся прогрессбар?

[Олег]

Andrei St, в таблице CSS стилей для этого прогресс бара у вас должна быть запись

.percentage {
	  position:absolute;
	  text-align:center;
	  top:50%;
	  left:0;
	  right:0;
	  vertical-align:middle;
	  transform:translate3d(0,-50%,0);
	}

Замените её на

.percentage {
	  display:none; /* свойство "display" в значении "none" скрывает блок так, как будто его и не было */
	  position:absolute;
	  text-align:center;
	  top:50%;
	  left:0;
	  right:0;
	  vertical-align:middle;
	  transform:translate3d(0,-50%,0);
	}

Answer 2

[tltary]

Почему бы не сделать это на js? и в реалтайме менять онлайн и тд

Comments

[Олег]

Оно и так хорошо выходит. Если ТС дозреет до изучения программирования, то конечно же сделает и на js.