Сef "Спидометр"

15 марта

Здравствуйте, сливаю вам cef спидометр!

Автор: я

pawn код

Спойлер

#include <a_samp>
#include <a_http>
#include <a_players>

#define SPEEDOMETER_URL "http://localhost/samp/cef/speedometer.html"
#define UPDATE_TIME 100

enum PlayerData
{
CEFBrowser,
bool:InCar,
Speed,
Gear,
Float:Fuel,
SpeedTimer
}
new pData[MAX_PLAYERS][PlayerData];

// Создание CEF браузера
stock CreateSpeedometer(playerid)
{
if(!IsPlayerConnected(playerid)) return 0;

// Создаем CEF браузер (пример функции)
pData[playerid][CEFBrowser] = cef_create_browser(
playerid,
0x12345,
SPEEDOMETER_URL,
true, // прозрачный фон
false // без фокуса
);

// Прячем сначала
cef_hide_browser(playerid, pData[playerid][CEFBrowser]);

// Запускаем таймер обновления
pData[playerid][SpeedTimer] = SetTimerEx("UpdateSpeedometer", UPDATE_TIME, true, "i", playerid);

return 1;
}

// Удаление CEF браузера
stock DestroySpeedometer(playerid)
{
if(pData[playerid][CEFBrowser])
{
cef_destroy_browser(playerid, pData[playerid][CEFBrowser]);
KillTimer(pData[playerid][SpeedTimer]);
pData[playerid][CEFBrowser] = 0;
}
}

// Обновление данных
forward UpdateSpeedometer(playerid);
public UpdateSpeedometer(playerid)
{
if(!IsPlayerConnected(playerid)) return 0;

new vehicleid = GetPlayerVehicleID(playerid);

if(vehicleid && GetPlayerState(playerid) == PLAYER_STATE_DRIVER)
{
if(!pData[playerid][InCar])
{
pData[playerid][InCar] = true;
cef_show_browser(playerid, pData[playerid][CEFBrowser]);
}

// Скорость
new Float:vel[3];
GetVehicleVelocity(vehicleid, vel[0], vel[1], vel[2]);
pData[playerid][Speed] = floatround(floatsqroot(vel[0]*vel[0] + vel[1]*vel[1] + vel[2]*vel[2]) * 180.0);

// Передача (примерно)
if(pData[playerid][Speed] < 1) pData[playerid][Gear] = 0; // N
else if(pData[playerid][Speed] < 30) pData[playerid][Gear] = 1;
else if(pData[playerid][Speed] < 60) pData[playerid][Gear] = 2;
else if(pData[playerid][Speed] < 90) pData[playerid][Gear] = 3;
else if(pData[playerid][Speed] < 120) pData[playerid][Gear] = 4;
else if(pData[playerid][Speed] < 150) pData[playerid][Gear] = 5;
else pData[playerid][Gear] = 6;

// Топливо (пример)
pData[playerid][Fuel] -= 0.01;
if(pData[playerid][Fuel] < 0) pData[playerid][Fuel] = 100.0;

// Отправляем данные в CEF
new data[256];
format(data, sizeof(data),
"samp:updateData({speed: %d, gear: '%s', fuel: %.1f})",
pData[playerid][Speed],
pData[playerid][Gear] == 0 ? "N" : (pData[playerid][Gear] == 1 ? "1" :
pData[playerid][Gear] == 2 ? "2" : pData[playerid][Gear] == 3 ? "3" :
pData[playerid][Gear] == 4 ? "4" : pData[playerid][Gear] == 5 ? "5" : "6"),
pData[playerid][Fuel]
);

cef_execute_js(playerid, pData[playerid][CEFBrowser], data);
}
else
{
if(pData[playerid][InCar])
{
pData[playerid][InCar] = false;
cef_hide_browser(playerid, pData[playerid][CEFBrowser]);
}
}
return 1;
}

// При подключении игрока
public OnPlayerConnect(playerid)
{
CreateSpeedometer(playerid);
return 1;
}

// При отключении
public OnPlayerDisconnect(playerid, reason)
{
DestroySpeedometer(playerid);
return 1;
}

// Управление поворотниками
public OnPlayerKeyStateChange(playerid, newkeys, oldkeys)
{
if(!pData[playerid][InCar]) return 1;

new left = 0, right = 0;

if(newkeys & KEY_SUBMISSION) left = 1; // Левая стрелка
if(newkeys & KEY_CROUCH) right = 1; // Правая стрелка

new js[128];
format(js, sizeof(js), "samp:updateIndicators({left: %d, right: %d})", left, right);
cef_execute_js(playerid, pData[playerid][CEFBrowser], js);

return 1;
}

CEF. Создайте текстовый файл с любым названием, но добавьте расширение .html. Затем вставьте в него код, который приведен ниже.

Спойлер

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAMP CEF Speedometer</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}

body {
width: 100vw;
height: 100vh;
overflow: hidden;
background: transparent;
font-family: 'Segoe UI', 'Roboto', sans-serif;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}

/* Основной контейнер спидометра */
.speedo-container {
position: relative;
width: 380px;
height: 200px;
margin: 0 20px 20px 0;
background: rgba(10, 10, 15, 0.92);
backdrop-filter: blur(10px);
border-radius: 25px;
border: 1px solid rgba(0, 255, 255, 0.4);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.6),
0 0 30px rgba(0, 255, 255, 0.3),
inset 0 0 30px rgba(0, 255, 255, 0.1);
overflow: hidden;
transform: translateZ(0);
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* Анимированный фон */
.speedo-container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 50%, rgba(0, 255, 255, 0.1) 0%, transparent 50%);
animation: rotate 10s linear infinite;
z-index: 0;
}

@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* Верхняя панель */
.top-bar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 15px;
background: rgba(0, 255, 255, 0.1);
border-bottom: 1px solid rgba(0, 255, 255, 0.3);
z-index: 2;
}

.indicators {
display: flex;
gap: 15px;
}

.indicator {
font-size: 22px;
opacity: 0.2;
transition: all 0.2s ease;
filter: drop-shadow(0 0 5px currentColor);
}

.indicator.active {
opacity: 1;
}

#left-indicator.active {
color: #4cff4c;
animation: pulseLeft 0.5s infinite;
}

#right-indicator.active {
color: #4cff4c;
animation: pulseRight 0.5s infinite;
}

#highbeam.active {
color: #00a2ff;
animation: pulse 1s infinite;
}

#engine-icon.active {
color: #ffaa00;
animation: rotate 3s linear infinite;
}

@keyframes pulseLeft {
0%, 100% { transform: translateX(0); opacity: 1; }
50% { transform: translateX(-3px); opacity: 0.8; }
}

@keyframes pulseRight {
0%, 100% { transform: translateX(0); opacity: 1; }
50% { transform: translateX(3px); opacity: 0.8; }
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

.warnings {
display: flex;
gap: 10px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}

.warning {
display: none;
color: #ff4444;
text-shadow: 0 0 10px #ff4444;
animation: blink 1s infinite;
}

.warning.active {
display: block;
}

@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}

/* Основная часть */
.main-panel {
position: relative;
display: flex;
align-items: center;
padding: 10px 20px;
z-index: 2;
}

.speed-section {
flex: 1;
text-align: center;
}

.speed-value {
font-size: 82px;
font-weight: 900;
background: linear-gradient(135deg, #fff, #00ffff, #0088ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
letter-spacing: 2px;
}

.speed-unit {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 3px;
margin-top: -5px;
}

.gear-section {
text-align: center;
min-width: 80px;
}

.gear-label {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
text-transform: uppercase;
}

.gear-value {
font-size: 48px;
font-weight: 800;
color: #00ffff;
text-shadow: 0 0 20px #00ffff;
line-height: 1;
margin-top: -5px;
}

/* Нижняя панель */
.bottom-panel {
position: relative;
padding: 0 20px 15px 20px;
z-index: 2;
}

.progress-item {
margin-bottom: 8px;
}

.progress-header {
display: flex;
justify-content: space-between;
font-size: 10px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 3px;
text-transform: uppercase;
letter-spacing: 1px;
}

.progress-bar {
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
position: relative;
}

.progress-fill {
height: 100%;
width: 0%;
border-radius: 4px;
transition: width 0.1s linear;
position: relative;
}

.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
animation: shine 2s infinite;
}

@keyframes shine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

#rpm-fill {
background: linear-gradient(90deg, #4cff4c, #ffaa00, #ff4444);
}

#fuel-fill {
background: linear-gradient(90deg, #00a2ff, #00ffff);
}

/* Нижний ряд */
.info-row {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
letter-spacing: 1px;
}

.info-item {
display: flex;
align-items: center;
gap: 3px;
}

.info-value {
color: #00ffff;
font-weight: bold;
text-shadow: 0 0 10px #00ffff;
}

#nitro.active {
color: #00a2ff;
animation: nitroPulse 0.3s infinite;
}

@keyframes nitroPulse {
0%, 100% { opacity: 1; text-shadow: 0 0 20px #00a2ff; }
50% { opacity: 0.5; text-shadow: 0 0 40px #00a2ff; }
}

/* Декоративный элемент */
.glow-ring {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 25px;
box-shadow: inset 0 0 30px rgba(0, 255, 255, 0.2);
pointer-events: none;
z-index: 3;
}

/* Иконки */
.material-icons {
font-size: 16px;
margin-right: 2px;
}
</style>
</head>
<body>
<div class="speedo-container" id="speedometer">

<div class="glow-ring"></div>


<div class="top-bar">
<div class="indicators">
<span class="indicator" id="left-indicator">←</span>
<span class="indicator" id="right-indicator">→</span>
<span class="indicator" id="highbeam">⚡</span>
<span class="indicator" id="engine-icon">⚙️</span>
</div>
<div class="warnings">
<span class="warning" id="low-fuel-warning">⛽ FUEL LOW</span>
<span class="warning" id="temp-warning">🌡️ OVERHEAT</span>
<span class="warning" id="check-warning">⚠ CHECK</span>
</div>
</div>

<div class="main-panel">
<div class="speed-section">
<div class="speed-value" id="speed">0</div>
<div class="speed-unit">KM/H</div>
</div>
<div class="gear-section">
<div class="gear-label">GEAR</div>
<div class="gear-value" id="gear">N</div>
</div>
</div>

<div class="bottom-panel">
<div class="progress-item">
<div class="progress-header">
<span>RPM</span>
<span id="rpm-text">0%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="rpm-fill"></div>
</div>
</div>

<div class="progress-item">
<div class="progress-header">
<span>FUEL</span>
<span id="fuel-text">100%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="fuel-fill"></div>
</div>
</div>

<div class="info-row">
<div class="info-item">
<span>🌡️</span>
<span class="info-value" id="temp">90°</span>
</div>
<div class="info-item">
<span>⏱️</span>
<span class="info-value" id="trip">0.0</span>
<span>KM</span>
</div>
<div class="info-item">
<span id="nitro">⚡ NITRO</span>
</div>
</div>
</div>
</div>

init() {
// Слушаем сообщения от SAMP
window.addEventListener('message', (event) => {
if (event.data && event.data.type === 'samp') {
this.updateFromGame(event.data);
}
});

// Функции для вызова из PAWN
window.samp = {
updateData: (data) => this.updateFromGame(data),
updateIndicators: (data) => this.updateIndicators(data)
};

// Тестовые данные (удалить в продакшене)
this.startTest();
}

updateFromGame(data) {
if (data.speed !== undefined) {
this.speed = Math.min(360, Math.max(0, Math.floor(data.speed)));
document.getElementById('speed').textContent = this.speed;

// Меняем цвет скорости в зависимости от скорости
let color;
if (this.speed > 200) color = '#ff4444';
else if (this.speed > 150) color = '#ffaa00';
else color = '#00ffff';

document.getElementById('speed').style.background =
`linear-gradient(135deg, #fff, ${color})`;
document.getElementById('speed').style.webkitBackgroundClip = 'text';
}

if (data.gear !== undefined) {
const gears = ['R', 'N', '1', '2', '3', '4', '5', '6'];
this.gear = gears[data.gear] || 'N';
document.getElementById('gear').textContent = this.gear;
}

if (data.rpm !== undefined) {
this.rpm = Math.min(100, Math.max(0, data.rpm));
document.getElementById('rpm-fill').style.width = this.rpm + '%';
document.getElementById('rpm-text').textContent = this.rpm + '%';
}

if (data.fuel !== undefined) {
this.fuel = Math.min(100, Math.max(0, data.fuel));
document.getElementById('fuel-fill').style.width = this.fuel + '%';
document.getElementById('fuel-text').textContent = this.fuel + '%';

// Предупреждение о низком топливе
const warning = document.getElementById('low-fuel-warning');
if (this.fuel < 15) {
warning.classList.add('active');
document.getElementById('fuel-fill').style.background =
'linear-gradient(90deg, #ff4444, #ff8800)';
} else {
warning.classList.remove('active');
document.getElementById('fuel-fill').style.background =
'linear-gradient(90deg, #00a2ff, #00ffff)';
}
}

if (data.temp !== undefined) {
this.temp = data.temp;
document.getElementById('temp').textContent = this.temp + '°';

const warning = document.getElementById('temp-warning');
if (this.temp > 110) {
warning.classList.add('active');
} else {
warning.classList.remove('active');
}
}

if (data.trip !== undefined) {
this.trip = data.trip;
document.getElementById('trip').textContent = this.trip.toFixed(1);
}

if (data.engine !== undefined) {
this.engineOn = data.engine;
const engineIcon = document.getElementById('engine-icon');
if (this.engineOn) {
engineIcon.classList.add('active');
} else {
engineIcon.classList.remove('active');
}
}

if (data.nitro !== undefined) {
this.nitro = data.nitro;
const nitroElement = document.getElementById('nitro');
if (this.nitro) {
nitroElement.classList.add('active');
} else {
nitroElement.classList.remove('active');
}
}

// Обновляем индикаторы
if (data.left !== undefined) {
this.leftIndicator = data.left;
this.updateIndicators();
}
if (data.right !== undefined) {
this.rightIndicator = data.right;
this.updateIndicators();
}
if (data.highbeam !== undefined) {
this.highbeam = data.highbeam;
this.updateIndicators();
}
}

updateIndicators() {
const left = document.getElementById('left-indicator');
const right = document.getElementById('right-indicator');
const highbeam = document.getElementById('highbeam');

left.classList.toggle('active', this.leftIndicator);
right.classList.toggle('active', this.rightIndicator);
highbeam.classList.toggle('active', this.highbeam);
}

// Тестовые данные (удалить)
startTest() {
setInterval(() => {
this.updateFromGame({
speed: Math.floor(Math.random() * 240),
rpm: Math.floor(Math.random() * 100),
fuel: Math.max(0, this.fuel - 0.5),
temp: 70 + Math.floor(Math.random() * 40),
trip: this.trip + 0.1,
engine: true,
nitro: Math.random() > 0.7,
left: Math.random() > 0.7,
right: Math.random() > 0.7,
highbeam: Math.random() > 0.8
});
}, 100);
}
}

// Запуск
document.addEventListener('DOMContentLoaded', () => {
new Speedometer();

// Показываем спидометр
document.getElementById('speedometer').style.display = 'block';
});
</script>
</body>
</html>

отдельно индикаторы

cef_execute_js(playerid, browser, "samp.updateIndicators({left: 0, right: 1, highbeam: 0})");

cef_execute_js(playerid, browser, "samp.updateIndicators({left: 0, right: 1, highbeam: 0})");

18 марта

Было бы отлично, если бы вы приложили скриншоты.

Войти

Сef "Спидометр"

В теме 2 сообщения

Daf Освоившийся 9

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

sinvays Завсегдатый 60

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Создать учетную запись

Войти

Последние посетители 0 пользователей онлайн

Похожий контент

Маркет