[in Arbeit] Ergebnisanzeige für Website

[Patrick]

Hallöchen Community,

nachdem ich letztes Jahr erfolgreich war mit dem Schweinepreisschießen, viewtopic.php?f=9&t=240&p=942#p932, wollte ich nun noch einen Schritt weitergehen. - Und zwar möchte ich die besten Ergebnisse quasi auf einer Website anzeigen lassen.

Daher erst einmal an Meyton gefragt:
Darf man die HTML Dateien von euch für die Zwecke nutzen? Die App z.B. zeigt ja auch über HTML die Ergebnisse an. "Gefühlt" zumindest.
Also hier der lokale Aufruf als Bild: http://www.schuetzenverein-plate.de/wp- ... 24x638.jpg (einfach per Google gefunden)
Bzw. kann/darf ich irgendwo die HTML Dateien "legal" extrahieren? Bspw. bei dem Programm gibt es ja eine Export-Funktion als HTML meine ich, die auch für den Monitor genutzt wird(?). Ob man die angreifen darf für die Website dann?

Bzw. in die Runde gefragt.
Mein Ziel ist es, quasi anhand folgender Daten den Treffer anzuzeigen - quasi so als wäre man vor dem Stand, nur dass man eben auf sein Handy/Computer (= Website) guckt und das dann sieht.



Also erst einmal so umständlich gedacht wie ich es jetzt machen wollte. (Bevor ich auf die Idee kam, dass das ja aktuell auch schon angezeigt wird bspw. in der App mit ESTA(?) und es das ggf. schon gibt)
Ein Script in PHP welches bspw. eine Schießscheibe als Bild nimmt. Bspw. https://upload.wikimedia.org/wikipedia/ ... cheibe.jpg
Und dann je nach Bildgröße ein Bild von einem roten Kreis (= der Schuss) in das Bild einfügt an der Stelle, wo der Schuss ist.
Bspw. X = 103 und Y = -45.
Wenn man dann "Innenzehner" == 1 hat könnte man das Bild noch zuschneiden, damit man nur noch die Mitte sieht und nicht mehr die Umrandung.

Vielleicht denke ich jetzt auch nur zu kompliziert.
Für die 2. Teiler-Stelle gab es auch eine total einfache Erklärung: viewtopic.php?f=7&t=312&p=1391#p1479

Daher habt ihr vielleicht auch einen Lösungsansatz für mich.

Das Ergebnis teile ich natürlich mit euch, falls ich es selbst schreiben muss.
In dem Fall würde ich mich freuen zu wissen ob ich die Grafiken von der Software extrahieren darf/kann und verwenden kann oder ob ich die selbst malen muss.

[[MEYTON CM] kathe]

Hallo Patrik,

Mein Ziel ist es, quasi anhand folgender Daten den Treffer anzuzeigen - quasi so als wäre man vor dem Stand, nur dass man eben auf sein Handy/Computer (= Website) guckt und das dann sieht.

Also willst du die Scheibe anzeigen lassen.

Im Preißschießen gibt es den xml export.
Hier hast du auch die Koordinaten.

Code: Alles auswählen

         <Shot ShotID="7">
                    <Coordinate>
                        <CCoordinate Resolution="100">
                            <X>9</X>
                            <Y>391</Y>

Im HTML mode in den Ausgabe Files habe ich noch keine Koordinaten gesehen.

Da die Bilder mit den Koordinaten gerendert werden sehe ich nur die Möglichkeit das du die Scheibe selber zeichnen musst.
Ob du nun die SSMDB2 abfragst oder die xml musst du selber entscheiden.

Da keine Grafiken direkt verfügbar sind musst du das wohl selber zeichnen.

Gruss Chris

[[MEYTON CM] minnten]

Hallo,

Eine Idee, die mir jetzt spontan noch kommt wäre:

Wo kein Bild ist, da machst du dir eines.
Einfach einen Screenshot machen und auf die Homepage hochladen, evtl. ein Script dafür und schon hast du die Lösung.

Ansonsten muss ich kathe recht geben, du wirst wohl nicht ums selber zeichnen rum kommen.

Gruß
Minnten

[[MEYTON] JM]

Hallo Patrick,

also von Seiten Meytons gibt es da keine Beschränkung, die Daten zu nutzen.

Egal ob die HTML Daten oder auch gleich die Mysql. Ist Linux und ist frei.

[armin.pfaeffle]

Ich klinke mich beim Thema selbst zeichnen ein: wieso nicht einfach HTML/CSS verwenden? Dann hast du auch nie Probleme mit der Auflösung, da alles wunderbar skaliert. Selbst wenn du sowas drucken wolltest, sieht alles, egal in welcher Größe, gestochen scharf aus. Ich hab da mal eine Demo programmiert gehabt, allerdings vor einem anderen Hintergrund. Mit ein paar Anpassungen skaliert das Ding super. Alternativ kann man natürlich auch auf SVG ausweichen.

Hier gehts zu der Demo

[Patrick]

Ich hab da mal eine Demo programmiert gehabt, allerdings vor einem anderen Hintergrund. Mit ein paar Anpassungen skaliert das Ding super. Alternativ kann man natürlich auch auf SVG ausweichen.

Ach geil. Das liebe ich immer an Communities wenn es Dinge die man umsetzen will schon gibt.

Wegen dem selbst umsetzen... Naja ich bin jemand der manchmal so Gedankenansätze braucht
Deine Idee und Umsetzung ist natürlich dafür jetzt genial.

Also ich hab jetzt nebenbei ein wenig damit rum gespielt und muss sagen:
Echt geil Das ist echt exakt das, was ich brauche. Perfekt Hammer


Vielleicht noch einmal eine Frage an dich zwecks Überlegung.
Also die Meyton Daten gibts ja im X / Y Format. Sprich 0 / 0 ist ein 0 Teiler.
Jetzt hab ich hier mal die relevante Funktion im Detail.

Code: Alles auswählen

var $shot = $('<div class="shot"></div>');
shotLeft = Math.floor( (Math.random() * 300) + 224 - 68 );
shotTop  = Math.floor( (Math.random() * 300) + 224 - 68 );
$shot.css({left: shotLeft, top: shotTop});
$shot.html($shots.length + 1);

var deltaX = Math.abs( (748 / 2) - (shotLeft + 68)) / 30 * 100;
var deltaY = Math.abs( (748 / 2) - (shotTop  + 68)) / 30 * 100;

var distance = Math.sqrt( deltaX * deltaX + deltaY * deltaY ) / 10; // Teiler
var shotValue = 10.9 - (distance / 25);

Jetzt möchte ich ja den Schuss genau mit den Daten von Meyton anzeigen.
Also mal angenommen ich hab einen 0er Teiler.

Code: Alles auswählen

var $shot = $('<div class="shot"></div>');
shotLeft = 0 + 306; // 306 herausgefunden durchs Div-Verschieben
shotTop = 0 + 306; // 306 herausgefunden durchs Div-Verschieben
$shot.css({left: shotLeft, top: shotTop});
$shot.html($shots.length + 1);

var deltaX = Math.abs( (748 / 2) - (shotLeft + 68)) / 30 * 100;
var deltaY = Math.abs( (748 / 2) - (shotTop  + 68)) / 30 * 100;

var distance = Math.sqrt( deltaX * deltaX + deltaY * deltaY ) / 10; // Teiler
var shotValue = 10.9 - (distance / 25);

Dann dürfe man doch einfach gesagt immer so arbeiten können. Oder? (PHP)

Code: Alles auswählen

<div class="shot shot-yellow" style="left: ' . ($x + 306) . 'px; top: ' . ($y + 306) . 'px;">' . $shot . '</div></div>

Darum herum ist eine foreach welche die ganze Schuss-Serie durchgeht und dann halt X, Y und die Schussnummer ausgibt.


In dem Sinne noch einmal ein großes Dankeschön. Sobald das ganze Thema (spätestens im Dezember) fertig ist werde ich euch mal die Resultate zeigen Was ich daraus gemacht hab etc.

[UH Edelweiss]

Hallo Patrick

Das währe super, denn beim Oktoberfestschiessen gibt es auch so eine Auswertung.
http://www.altronik.de/oktoberfest/

Gruß Udo

[Patrick]

So also ich hab jetzt mal ein bisschen mit der Lösung gearbeitet und eigentlich ein tolles Ergebnis erzielt.
Dummerweise stimmt scheinbar die Skalierung im Sinne der Meyton X / Y Position nicht.

Sprich einfaches Beispiel.
X = -348
Y = -799
Ring = 7
Ring01 = 75
Teiler01 = 8714

Das entspricht dann theoretisch Optisch eine 7.

armin.pfaeffle's Ansatz sähe mit den Daten dann so aus.


Demo: https://jsfiddle.net/5qdhchzd/

Mein Ansatz - basierend auf der Idee von armin.pfaeffle, nur anstatt in HTML mit PHP gelöst und mit simpler PNG Ausgabe, sprich der Browser muss nix verarbeiten und für mein Vorhaben ist das so sinnvoller.


Demo auf Anfrage, gibt leider kein so tolles jsfiddle für PHP ^^ Bzw. die Font-Datei ist separat und das unterstützt so gut wie niemand.


Daher die Frage an Meyton bzw. an alle die das wissen ^^
Wie groß ist das gesamte Koordinatensystem bzw. wenn mein Koordinatensystem insgesamt von -500 bis +500 geht. Sprich 1000 Pixel groß ist.
Wie positioniert man bestmöglich solche Dinge wie 4.040 X und 33 Y (Ring01 = 59, teiler01 = 40.401)?
Ist das nicht eigentlich mit meinem / 10 dann abgedeckt?


Ich glaub die Lösung ist wieder total einfach aber ich komme einfach nicht drauf.

[[MEYTON CM] kathe]

Hallo Patrick,

Wie groß ist das gesamte Koordinatensystem bzw. wenn mein Koordinatensystem insgesamt von -500 bis +500 geht. Sprich 1000 Pixel groß ist.

Von wo bis wo sollen dein 1000 px die Scheibe darstellen ?
Es gibt nur ein Koordinatensystem aber Die Scheibe kann unterschiedlich im Durchmesser sein.

Denk anders.
Da unterschiedliche Wettbewerbe unterschiedliche Spiegel haben sollte das mit der Disziplin verwebt werden.

Beispiele:
http://www.dsb.de/sport/disziplinen/gew ... ewehr_10m/
Ø 10er "Ringabstand Jeweils"
Luftgewehr 10 m 0,5 mm 2,5 mm
KK 50 m Freigewehr Männer 10,4 mm 8,0 mm
Scheibengewehr 100 m 50 mm 25 mm
Ordonanzgewehr 100 m 50 mm 25 mm Ringe 1-9
Großkalibergwehr 300m 100 mm 50 mm
Zimmerstutzen 15 m 4,5 mm 4,5 mm

Luftpistole 10 m 11,5 mm 8,0 mm Ringe 1-9


Also gehen wir mal von LG 10 m aus.

Dann ist der Scheibenradius
0,25 mm + 9 * 2,5 mm = 22,75 mm bis die Null kommt.
Hier hast du die Angabe in mm.
Damit kannst du deine Scheibe zeichnen.

Die Einheit der Schüsse ist für x und y 1/100mm laut SSMDB2 Dokumentation.

Jetzt noch ein paar Berechnungen und schon sollte der Schuß korrekt dargestellt sein.

Gruss Chris

[Patrick]

Also gehen wir mal von LG 10 m aus.

Dann ist der Scheibenradius
0,25 mm + 9 * 2,5 mm = 22,75 mm bis die Null kommt.
Hier hast du die Angabe in mm.
Damit kannst du deine Scheibe zeichnen.

Die Einheit der Schüsse ist für x und y 1/100mm laut SSMDB2 Dokumentation.

Dafür auch nochmal ganz herzlichen Dank.
Das mit dem 1/100 hab ich bisher vergeblich gesucht. Wahrscheinlich hab ich falsch gesucht. Hab es jetzt hier gefunden https://www.meyton.info/uploads/media/S ... DB2_03.pdf. Seite 5 "Treffer".

So jetzt hat mich das ganze Berechnungsthema echt nochmal viel Nachdenken gekostet.
Ich muss dazu sagen, dass ich eigentlich ganz gut in Mathe früher in der Schule war
Also schiebe ich die Schuld vorübergehend auf die Uhrzeit und die Müdigkeit

Also nachdem ich mein ganzes Script jetzt umgestellt hab auf die originalen Maßangaben, bin ich absolut verwirrt.
Die Scheibe kann ich jetzt beliebig groß zeichnen und rein technisch gesehen entspricht das auch absolut den Anforderungen des DSB, also deiner Beispiel-Seite da.

Aber die Umrechnung mit X / Y von euch bekomme ich nicht auf die Reihe. Wie gesagt, vielleicht sollte ich ins Bett gehen

Scheiben: Durchmesser der 10 = 0,5 mm, Ringabstand = jeweils 2,5

Nach deiner Rechnung wäre das dann der Radius der Scheibe:
0,25 mm + 9 * 2,5 mm = 22,75 mm bis die Null kommt.

Das bedeutet die gesamte Scheibe wäre dann 45,5 mm breit und hoch.
Ich hab das jetzt technisch gesehen mit dem Pixel-Multiplikator 10 gerechnet, sonst wird die Scheibe ja so unglaublich klein, dass man gar nichts mehr erkennt ^^

Sprich unsere Scheibe ist jetzt 455 x 455 Pixel groß. So kann man alle Angaben / 10 rechnen dann weiß man die Millimeter

Beispiel:
X = 567
Y = -4714
Ring = 5,0
Teiler = 4747,9

Machen wir das mal nicht technisch, also Mathematisch.
Meyton gibt die Daten 1/100 an, sprich nach meinem Verständnis müssten wir so rechnen.
X = 567 / 100 = 5,67mm
Y = -4714 / 100 = 47,14mm

Das habe ich rot markiert weil das quasi schon der Fehler ist.
Die Scheibe liegt ja gerade mal bei 45,5mm d.h. die 47,14mm sind locker aus der Scheibe raus.
Meyton hingegen teilt mit als Ring 5,0 mit, weshalb ich davon ausgehe, dass die 5 getroffen sein muss


Wenn ich mal so darüber nachdenke, wundere ich mich eh die ganze Zeit weshalb die Scheiben so unglaublich klein sind.
Die von Meyton sehen definitiv größer aus Wenn ich mal gucke und schätze dass wir die im Verein haben: https://www.meyton.info/de/produkte/mes ... index.html
Dann gehe ich mal davon aus, dass unsere 45,5mm Scheibe dann im System der Angabe von Durchschuss 182mm x 182mm entspricht.
Wie es der Zufall so will, kommt beim Geteilt durch tatsächlich auch 4 bei raus.
Und wenn ich das dann so spaßeshalber mal in mein System einbaue, sieht das sogar vernünftig aus



Naja gut bei diesem Beispiel verfliegt dann die Freude wieder.

X = -3096
Y = -1838
Ring = 6,5
Teiler = 3600,4




Hier noch eben ein kurzer Überblick über meine Formeln.

Code: Alles auswählen

$unit = 10; // 1mm = 10 Pixel
$size = (0.25 + (9 * 2.5)) * 2 * $unit; // Breite/Höhe der Scheibe, entspricht unseren 45,5mm bzw. dann 455 Pixeln
$diameter = (($x * 2.5 * 2) + 0.5) * $unit; // Der Ringdurchmesser, $x ist hierbei die Zahl des Rings (1, 2, 3, 4, 5, 6, 7, 8, 9)
$diameter10 = 0.25 * 2 * $unit; // Der Ringdurchmesser der 10 - lediglich 0,5mm
$x = -3096 * 0.01 * $unit * 0.25; // X wie oben genannt / 100 (also mal 0,01 geht auch) und dann geteilt durch 4 wegen der Messrahmengröße
$y = -1838 * 0.01 * $unit * 0.25; // Y wie oben genannt / 100 (also mal 0,01 geht auch) und dann geteilt durch 4 wegen der Messrahmengröße
$diameterHit = 2.5 * 2 * $unit - $unit * 1.5; // der Durchmesser des roten Schusses

Vielleicht ist der Schuss auch einfach nur zu groß?
Wenn ich den anstatt mit 2.5 nur noch mit 1 ansetze ist der zwar echt nur noch so groß wie die 10, allerdings hätte ich dann meine 6,5. Wobei ich dann ja noch eine Berechnung bräuchte mithilfe der ich dann den Schuss korrekt verschieben kann, sodass der auch eine sichtbare Größe hat.

Alles nicht so einfach

Vielleicht mag da nochmal jemand mit mir nachdenken woran das liegt.
Aber Danke nochmal an dich Chris (und vorher Armin) für die beiden genialen Ansätze die mich echt enorm weiterbringen.


//edit:
Ah noch bevor ich es vergesse. Ich hab mir nachdem Meyton JM meinte, dass das alles verwendet werden kann, mal über den Kundenbereich das ESTA5 heruntergeladen. Die .run kann man scheinbar per 7-Zip entpacken. Wenn ich mir die entweder obfuscated oder kompilierte JavaScript/TypeScript Datei ESTA5.min.js ansehe, dann finde ich da ja noch mehr geile Funktionen für tatsächlich viele verschiedene Typen und Zoom-Level.
Weil Fragen ja nichts kostet: Wäre es per Privater Nachricht irgendwie möglich die originale "MeCpcHits.js" und/oder "MeCpcTarget.js" zu bekommen?
Wenn ich das richtig sehe steht da dann alles was relevant ist: "MeCpcHits.drawHit", "MeCpcHits.drawHitFocus", "initHitsCanvas", etc.
Ist aber eigl. nur Neugierde Wenn mir jemand oben bei der Umrechnung von X / Y hilft bin ich echt schon wunschlos glücklich


//edit2 8.8.17 12:26
Mir kam es über Nacht... Ich hab beim Testen dummerweise nur in die Treffer Tabelle geguckt - ohne zu beachten was für eine Disziplin dahinter steckt. Hab eben mal nachgesehen und musste feststellen, dass ich da echt zwei mal auf Luftpistole gestoßen bin. Ich aktualisiere den Beitrag hier gleich nochmal sobald ich in circa einer Stunde weitere Ergebnisse habe. Diesmal dann auch echt nur Luftgewehr


//edit3 8.8.17 13:10
Wohoo
Nachdem ich jetzt tatsächlich auch nur die Treffer vom Luftgewehr hab bekomme ich auch nachdem ich das geteilt durch 4 entfernt habe extrem geile Ergebnisse.

Hier mal ein paar Beispiele. Die sollten aber eigentlich dann auch dem Messstand-Ergebnis von Meyton entsprechen. Oder zumindest ziemlich nah dran sein. Das was ich in den JS Dateien vom ESTA gesehen hab ist halt unglaublich flexibel. Meins ist jetzt echt Maßarbeit und ohne Zoom-Stufen etc.
Den Zoom realisiere ich dann einfach indem ich auf Full HD skaliere und dann den mittleren Teil ausschneide

Beispiel 1:
X: -1321
Y: -25
Ring: 5,7
Teiler: 1321,2

Ergebnis:


Beispiel 2:
X: -472
Y: -103
Ring: 9,0
Teiler: 483,1

Ergebnis:


Beispiel 3:
X: -515
Y: 223
Ring: 8,7
Teiler: 561,2

Ergebnis:


Beispiel 4:
X: 16
Y: 14
Ring: 10,9
Teiler: 21,2

Ergebnis:




Ich hab jetzt im Nachhinein meine Schussgröße nochmal auf 4,5mm angepasst. Dann ist meine virtuelle Scheibe jetzt wirklich Maßstabsgetreu.


Ein großes Danke geht an [MEYTON CM] kathe / Chris für den Ansatz mit dem Maßstab und an armin.pfaeffle für seinen Ansatz.
Und @UH Edelweiss bzw. alle die sich dafür interessieren, ich hab schon eine Idee wie ich euch das problemlos zur Verfügung stellen kann.
Einfach noch ein paar Tage abwarten