SABREDİP OKUYUP VE DAHASI YARDIM ETTİĞİNİZ İÇİN TEŞEKKÜR EDERİM.
electron js ile app yapıyorum ama bir kaç hata var çözemedim Yardımcı Olurmusunuz?
tam olarak nerede hata var bilemedim electron js öğrenmek için hemde kodları görebilmek için chatgpt ye bir yere kadar yaptırdım ama index.html ve sonuc.html arasında dinamik veri alış - veriş, güncelleme yapamıyorum
`
main.js, renderer.js, preload.js, renderertwo.js, index.html, sonuc.html, ve index.htmlde kullanılan css, sonuc.html de kullanılan css
main.js
`const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('node:path');
let mainWindow, resultWindow;
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
frame: false,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
});
win.loadFile('index.html');
// Window controls via IPC
ipcMain.on('close-window', () => {
win.close();
});
ipcMain.on('minimize-window', () => {
win.minimize();
});
ipcMain.on('maximize-window', () => {
if (win.isMaximized()) {
win.restore();
} else {
win.maximize();
}
});
return win;
}
app.on("ready", () => {
mainWindow = createWindow();
resultWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
resultWindow.loadFile("sonuc.html");
ipcMain.on("update-results", (event, { probabilities, generalProbability }) => {
resultWindow.webContents.send("display-results", { probabilities, generalProbability });
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
renderer.jsdocument.getElementById('close-btn').addEventListener('click', () => {
window.electron.closeWindow();
});
document.getElementById('minimize-btn').addEventListener('click', () => {
window.electron.minimizeWindow();
});
document.getElementById('maximize-btn').addEventListener('click', () => {
window.electron.maximizeWindow();
});
document.getElementById('clear-last-btn').addEventListener('click', () => {
selectedNumbers.pop(); // Son eklenen sayıyı sil
calculateProbabilities(); // Olasılıkları tekrar hesapla
});
document.getElementById('clear-all-btn').addEventListener('click', () => {
selectedNumbers = []; // Tüm sayıları sil
calculateProbabilities(); // Olasılıkları tekrar hesapla
});
// Seçilen sayılar için liste
let selectedNumbers = [];
// Buton tıklamalarını dinleme
document.addEventListener("DOMContentLoaded", () => {
const buttonsContainer = document.getElementById("buttons");
// 0-36 arasında butonlar oluştur
for (let i = 0; i <= 36; i++) {
const button = document.createElement("button");
button.innerText = i;
button.className = "number-button";
button.addEventListener("click", () => {
// Butona tıklanınca sayı listeye eklenir
selectedNumbers.push(i);
calculateProbabilities(selectedNumbers);
});
buttonsContainer.appendChild(button);
}
// Tümünü sil butonu için işlem
document.getElementById("clear-all-btn").addEventListener("click", () => {
selectedNumbers = [];
calculateProbabilities(selectedNumbers); // Boş liste ile hesapla
});
// Son rakamı sil butonu için işlem
document.getElementById("clear-last-btn").addEventListener("click", () => {
if (selectedNumbers.length > 0) {
selectedNumbers.pop(); // Listenin son elemanını sil
calculateProbabilities(selectedNumbers); // Güncel liste ile hesaplama yap
}
});
});
// Olasılık hesaplama ve güncelleme
function calculateProbabilities(numbers) {
const frequencies = {};
numbers.forEach(number => {
frequencies[number] = (frequencies[number] || 0) + 1;
});
const totalNumbers = numbers.length || 1; // Bölme hatasını önlemek için en az 1 alınır
const probabilities = {};
// Olasılıkları hesapla
for (const num in frequencies) {
probabilities[num] = ((frequencies[num] / totalNumbers) * 100).toFixed(2);
}
// Sonuçları sırala
const sortedProbabilities = Object.entries(probabilities).sort((a, b) => b[1] - a[1]);
// Genel olasılığı hesapla
const generalProbability = calculateGeneralProbability(numbers, 1, 12);
// HTML'yi güncelle
updateResults(sortedProbabilities, generalProbability);
}
// Genel olasılık hesaplama
function calculateGeneralProbability(numbers, rangeStart, rangeEnd) {
const rangeCount = numbers.filter(num => num >= rangeStart && num <= rangeEnd).length;
return ((rangeCount / (numbers.length || 1)) * 100).toFixed(2); // Bölme hatasını önlemek için
}
// Dinamik sonuç güncelleme
function updateResults(probabilities, generalProbability) {
// sonuc.html sayfasını güncellemek için Electron'un IPC mekanizmasını kullan
const { ipcRenderer } = require("electron");
// Güncellenmiş olasılıkları gönder
ipcRenderer.send("update-results", { probabilities, generalProbability });
}
`
renderertwo.js
`const { ipcRenderer } = require('electron');
ipcRenderer.on('display-results', (event, { probabilities, generalProbability }) => {
const centeredDivs = document.querySelectorAll(".centered-div");
// Olasılıkları ekle
probabilities.forEach(([num, prob], index) => {
if (index < centeredDivs.length) {
centeredDivs[index].innerText = `${num}: ${prob}%`;
}
});
// Genel olasılığı güncelle
const generalDivs = document.querySelectorAll("tr:nth-child(3) .centered-div");
if (generalDivs.length > 0) {
generalDivs[0].innerText = `1-12: ${generalProbability}%`;
}
});`
preload.js
`const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
closeWindow: () => ipcRenderer.send('close-window'),
minimizeWindow: () => ipcRenderer.send('minimize-window'),
maximizeWindow: () => ipcRenderer.send('maximize-window'),
updateResults: (results) => ipcRenderer.send('update-results', results)
});
`
index.html ve styles.css
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<title>Sayılara Tıklayın</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Başlık Çubuğu ve Taşıma Alanı -->
<div id="title-bar">
<div id="drag-bar"></div> <!-- Pencereyi taşıma alanı -->
<button id="close-btn">X</button>
<button id="minimize-btn">_</button>
<button id="maximize-btn">[]</button>
</div>
<h1>Sayılara Tıklayın</h1>
<!-- 0'dan 36'ya kadar butonlar ve silme butonları -->
<div id="buttons">
<!-- Sayı butonları dinamik olarak eklenecek -->
</div>
<div id="control-buttons">
<button id="clear-last-btn">Sil</button>
<button id="clear-all-btn">Tümünü Sil</button>
</div>
<script src="renderer.js"></script>
</body>
</html>
/* Başlık çubuğu ve taşıma alanı */
#title-bar {
background-color: #333;
color: white;
padding: 10px;
display: flex;
justify-content: flex-end;
align-items: center;
}
#drag-bar {
width: 10px;
height: 100%;
background-color: #444;
cursor: pointer;
}
#close-btn, #minimize-btn, #maximize-btn {
background-color: #444;
border: none;
color: white;
margin-left: 10px;
cursor: pointer;
}
#buttons {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 10px;
margin-top: 20px;
}
button {
padding: 10px;
background-color: #f1f1f1;
border: 1px solid #ccc;
cursor: pointer;
font-size: 14px;
}
button:hover {
background-color: #ddd;
}
#control-buttons {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.styled-table {
border-collapse: collapse;
width: 80%;
background-color: white;
text-align: center;
}
.styled-table td {
border: 1px solid black; /* Çizgileri belli etmek için /
padding: 20px;
text-align: center;
vertical-align: middle; / Dikey hizalama */
}
.merged-cell {
font-size: 24px;
font-weight: bold;
background-color: #f0f0f0; /* Hafif gri arka plan */
vertical-align: middle;
height: 150px;
}
.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.number {
font-size: 32px;
margin-bottom: 10px;
}
.centered-div {
width: 80px;
height: 40px;
background-color: transparent;
border: 1px dashed gray;
margin-top: 10px; /* Yazı ile biraz mesafe bırak */
}
.centered-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%; /* Hücre yüksekliğini kullan */
}
/* Genişletilmiş Hücre */
.expanded-cell {
vertical-align: top;
padding: 10px;
width: 33.33%;
}
/* İç Tablo */
.inner-table {
width: 100%;
border-collapse: collapse;
}
.inner-table td {
border: 1px solid gray; /* İç tablodaki hücrelerin çizgileri */
padding: 10px;
text-align: center;
}`
sonuc.html ve sonucstyles.css
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<title>Sayılara Tıklayın</title>
<link rel="stylesheet" href="sonucstyles.css">
</head>
<body>
<!-- Başlık Çubuğu ve Taşıma Alanı -->
<div id="title-bar">
<div id="drag-bar"></div> <!-- Pencereyi taşıma alanı -->
<button id="close-btn">X</button>
<button id="minimize-btn">_</button>
<button id="maximize-btn">[]</button>
</div>
<table class="styled-table">
<!-- 1. Satır -->
<tr>
<td colspan="3" class="merged-cell">
<div class="content-wrapper">
<span class="number">0</span>
<div class="centered-div"></div>
</div>
</td>
</tr>
<!-- 2. Satır -->
<tr>
<!-- 4. Hücre -->
<td class="expanded-cell">
<table class="inner-table">
<tr>
<td>1</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>2</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>3</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>4</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>5</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>6</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>7</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>8</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>9</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>10</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>11</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>12</td>
<td><div class="centered-div"></div></td>
</tr>
</table>
</td>
<!-- 5. Hücre -->
<td class="expanded-cell">
<table class="inner-table">
<tr>
<td>13</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>14</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>15</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>16</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>17</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>18</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>19</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>20</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>21</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>22</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>23</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>24</td>
<td><div class="centered-div"></div></td>
</tr>
</table>
</td>
<!-- 6. Hücre -->
<td class="expanded-cell">
<table class="inner-table">
<tr>
<td>25</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>26</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>27</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>28</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>29</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>30</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>31</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>32</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>33</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>34</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>35</td>
<td><div class="centered-div"></div></td>
</tr>
<tr>
<td>36</td>
<td><div class="centered-div"></div></td>
</tr>
</table>
</td>
</tr>
<!-- 3. Satır -->
<tr>
<td>
<div class="centered-container">
Genel Olasılık:
<div class="centered-div">1-12</div>
</div>
</td>
<td>
<div class="centered-container">
Genel Olasılık:
<div class="centered-div"></div>
</div>
</td>
<td>
<div class="centered-container">
Genel Olasılık:
<div class="centered-div"></div>
</div>
</td>
</tr>
</table>
<script src="renderertwo.js"></script>
</body>
</html>
/* Başlık çubuğu ve taşıma alanı /
#title-bar {
background-color: #333;
color: white;
padding: 10px;
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed; / Sayfanın üst kısmına sabitler /
width: 100%; / Çubuğu geniş yapar /
top: 0;
z-index: 1000; / Tabloya göre önde görünmesini sağlar */
}
#drag-bar {
width: 10px;
height: 100%;
background-color: #444;
cursor: pointer;
}
#close-btn, #minimize-btn, #maximize-btn {
background-color: #444;
border: none;
color: white;
margin-left: 10px;
cursor: pointer;
}
/* Sayfa içeriği /
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center; / Yatay ortalama /
align-items: center; / Dikey ortalama /
min-height: 100vh; / Yüksekliği tam sayfa yap /
background-color: #f9f9f9; / Arka plan rengi */
}
/* Tabloyu ortalama /
.styled-table {
margin-top: 80px; / Tabloyu üst çubuktan ayırmak için boşluk /
border-collapse: collapse;
width: 80%;
background-color: white;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); / Gölge ekler /
border-radius: 8px; / Köşeleri yuvarlar /
overflow: hidden; / Taşan kısımları gizler */
}
.styled-table td {
border: 1px solid black; /* Çizgileri belli etmek için /
padding: 20px;
text-align: center;
vertical-align: middle; / Dikey hizalama */
}
.merged-cell {
font-size: 24px;
font-weight: bold;
background-color: #f0f0f0; /* Hafif gri arka plan */
vertical-align: middle;
height: 150px;
}
.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.number {
font-size: 32px;
margin-bottom: 10px;
}
.centered-div {
width: 80px;
height: 40px;
background-color: transparent;
border: 1px dashed gray;
margin-top: 10px; /* Yazı ile biraz mesafe bırak */
}
.centered-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%; /* Hücre yüksekliğini kullan */
}
/* Genişletilmiş Hücre */
.expanded-cell {
vertical-align: top;
padding: 10px;
width: 33.33%;
}
/* İç Tablo */
.inner-table {
width: 100%;
border-collapse: collapse;
}
.inner-table td {
border: 1px solid gray; /* İç tablodaki hücrelerin çizgileri */
padding: 10px;
text-align: center;
}`
`
dosya ve kodların barındığı pastebin linki:
https://pastebin.aquilenet.fr/?6cdd89a711e397e8#GqJPGpvm7hs8ULazjUSo7HjU7NxGUT2wiZFx1hTo12o9
şifresi:
1234567892024
buttonlar çalışıyor console log da liste içerisindeki sayılar ve olasılık liste içerisindeki sayı ve olasılık gözüküyor ama sonuc html de mesela tabloda o sayıya denk gelen sayıyı bulup yüzdeliği göstermek index.html de sayı tıkladıkca
renderer.js de yapmasını istediğim şey sayı listesindeki sayıları 500 sayıdan oluşan kullanıcının 500. defaya kadar her hangi 0 ile 36 arasına tıkladıkca olasılığı hesaplayan sonuc.html de tablodaki sayıya eşleştirerek olasılıkları yazan ve bu olasılıkları listeye sayı yüzdelik şekilde kayıt ederek.
çıkan olasılık sonucu listesi 500 e ulaşasıya kadar sürekli 1. 2. 3. bölmedeki genel olasılık bölümde tabloda bulunan sayıların ortalamasını alıp olasılığını hesaplayarak alttaki bölmelerin gelme olasılığını hesaplayıp sonuc.html de göstermek istiyorum mümkün müdür?
