Skocz do zawartości

PHP - obrót trójkąt według pobranych danych z bazy msql


UszaTek
 Udostępnij

Rekomendowane odpowiedzi

Witam. Jak w PHP zrobić aby "trójkąt" był obracony według danych z serwera msql. 

  • 22°C ( i mniejsza)  za mala = left red
  • 23°C - 25°C ciut za mala = left yellow
  • 26°C - 30°C idealna = green
  • 31°C - 33°C ciut za wysoka = right yellow
  • +34°C za wyoska - right red

Kod:

<div id="triangle"></div>

.triangle
{
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 120px solid white;
    margin: 40px auto 0;
}

Podgląd:

IMG_20211206_011925.png

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert

Jedna funkcja (na wzór Fabryki) w PHP. Lub rozbicie to na klasy i bardziej abstrakcyjne podejście - ale to już trochę over-engineering 😄 

<?php

declare(strict_types=1);

function getClassFromTemperature(int $temperature): string
{
    if ($temperature < 23) {
        return 'temp-red-minus';
    }
    
    if ($temperature >= 23 && $temperature < 26) {
        return 'temp-yellow-minus';
    }
    
    if ($temperature >= 26 && $temperature < 31) {
        return 'temp-ok';
    }
    
    if ($temperature >= 31 && $temperature < 34) {
        return 'temp-yellow-plus';
    }
    
    if ($temperature >= 34) {
        return 'temp-red-plus';
    }
}

Na podstawie zwracanych class będziesz musiał jednie ogarnąć CSS. Z zasad DRY/KISS, to... Klasa główna: `temp`, a póżniej po prostu np. `temp-yellow-plus`. Czyli przykładowe klasy dla strzałki: `[class="temp temp-ok"]`

Poczytaj o `rotate` i `transform-origin`. + z tego co po obrazku, to kolory masz co 15 stopni (żeby wyśrodkować strzałkę). Wyjątkiem jest zielony, bo obejmuje zakres 4-ech stopni zamiast dwóch, no ale dasz radę 😛 a jak nie, to @Mativve pomoże 😄 

Edytowane przez -n3veR
Odnośnik do komentarza
Udostępnij na innych stronach

  • Administrator

Taki wykres temperatury na podstawie danych można ładnie wyliczyć i aż się prosi aby wykorzystać te dane i zrobić ładny dynamiczny wskaźnik bez statycznych klas tak jak tutaj np.:

https://codepen.io/Mativve/pen/zYErZbo

ale jeśli chodzi o taką statyczną rzecz gdzie wszystko oparte jest o klasy to tutaj większego problemu nie ma:

https://codepen.io/Mativve/pen/LYzGyZd?editors=1101

Edytowane przez Mativve
Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert

Nie. Funkcję wystarczy tylko raz wrzucić w kod. Możesz ją dać na początek. Później musisz już jedynie się do niej odwołać. Czyli ...

<?php
error_reporting(0);
declare(strict_types=1);

function getClassFromTemperature(int $temperature): string
{
  if ($temperature < 23) 
  {
    return 'temp-red-minus';
  }	

  if ($temperature >= 23 && $temperature < 26) 
  {
    return 'temp-yellow-minus';
  }

  if ($temperature >= 26 && $temperature < 31) 
  {
    return 'temp-ok';
  }

  if ($temperature >= 31 && $temperature < 34) 
  {
    return 'temp-yellow-plus';
  }

  if ($temperature >= 34) 
  {
    return 'temp-red-plus';
  }
}

mysql_connect('localhost', 'user', 'pass');
mysql_select_db('baza');

$last = mysql_query("SELECT * FROM `tpr` ORDER BY `time` DESC LIMIT 1");
$l = mysql_fetch_array($last);

$temper = $l['temp'];
$czas = $l['czas'];

?>

// kod HTML 

<div class="container">
  <div class="circle circle-red-left"></div>
  <div class="circle circle-yellow-left"></div>
  <div class="circle circle-green"></div>
  <div class="circle circle-red-right"></div>
  <div class="circle circle-yellow-right"></div>

  <div class="triangle <?php echo getClassFromTemperature($temper) ?>"></div>
</div>

<div class="rectangle">28 °C</div>
<div class="rectangle"><?php echo $temper;?></div>

 

Odnośnik do komentarza
Udostępnij na innych stronach

Dzięki wielkie. A jak mogę zrobić aby dane były wyświetlane z 4 czujników?

Wystarczy zmienić zmienna? 

<div class="triangle <?php echo getClassFromTemperature($temper_1) ?>"></div>

<div class="triangle <?php echo getClassFromTemperature($temper_2) ?>"></div>
<div class="triangle <?php echo getClassFromTemperature($temper_3) ?>"></div>
<div class="triangle <?php echo getClassFromTemperature($temper_4) ?>"></div>
$temper_1 = $l['temp'];
$temper_2 = $l['temp'];
$temper_3 = $l['temp'];
$temper_4 = $l['temp'];

https://codepen.io/rafa-ziemianek-the-looper/pen/VwMLRGP

Odnośnik do komentarza
Udostępnij na innych stronach

Została mi ostania rzecz do zrobienia.

Chciałbym użyć do pokazania stanu wody w donicach progress-bar

https://codepen.io/whqet/pen/hfDzp

function getClassFromState(int $state): string
	{
		if ($state < 1 && $state < 5000)  
		{
			return 'fiv';
		}	

		if ($state >= 5000 && $state < 10000) 
		{
			return 'twentyfive';
		}

		if ($state >= 10000 && $state < 15000) 
		{
			return 'fifty';
		}

		if ($state >= 15000 && $state < 20000) 
		{
			return 'seventyfive';
		}

		if ($state >= 20000)  
		{
			return 'onehundred';
		}
	}
<div class="progress">
<div class="progress-bar"></div>

plik .css

/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 * Licensed under the MIT License
 *
 * Sass/SCSS source: https://goo.gl/UhXKg
 * PSD by Vin Thomas: https://goo.gl/n1M2e
 */

body {
  font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #2a2a2a;
}

.container {
  margin: 60px auto;
  width: 400px;
  text-align: center;
}

.container .progress {
  margin: 0 auto;
  width: 400px;
}

.progress {
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar {
  height: 16px;
  border-radius: 4px;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       https://css-tricks.com/webkit-sibling-bug/
 */

#five:checked ~ .progress > .progress-bar {
  width: 5%;
  background-color: #f63a0f;
}

#twentyfive:checked ~ .progress > .progress-bar {
  width: 25%;
  background-color: #f27011;
}

#fifty:checked ~ .progress > .progress-bar {
  width: 50%;
  background-color: #f2b01e;
}

#seventyfive:checked ~ .progress > .progress-bar {
  width: 75%;
  background-color: #f2d31b;
}

#onehundred:checked ~ .progress > .progress-bar {
  width: 100%;
  background-color: #86e01e;
}

.radio {
  display: none;
}

.label {
  display: inline-block;
  margin: 0 5px 20px;
  padding: 3px 8px;
  color: #aaa;
  text-shadow: 0 1px black;
  border-radius: 3px;
  cursor: pointer;
}

.radio:checked + .label {
  color: white;
  background: rgba(0, 0, 0, 0.25);
}

Cały czas myślę nad rozwiązaniem lecz nie mam pomysłu.

Odnośnik do komentarza
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

×