Nekromanti Digital träffmall

Pendragon · 3 Oct 2015

Jag ligger i startgroparna för en premiärkampanj till Western 4, och har lite trassel med att ordna en bra träffmall. Det finns förvisso möjligheten att skriva ut en, men jag är inte så sugen på att köpa ett storpack overheadpapper som till 98% kommer vara oanvänt, så jag har tänkt lite utanför lådan.
Jag laddade in sidorna med träffigurer och träffmallen som lager i Gimp, och gjorde träffmallens bakgrund genomskinlig. Nu kan jag ha Gimp öppet på tv:n när jag spelleder och flytta runt lagret med med mallen över måltavlorna så att alla ser, vilket är en funktionabel, om än lite meckig lösning.

Det jag undrar är, är det någon här som sitter på kompetensen att koka ned det här till en smidigare lösning, t ex interaktiv flashanimation eller app till telefon eller pad? Givetvis förutsatt Åskfågeln inte har några invändningar.

/Joel

Inkognito · 4 Oct 2015

Tyvärr inte, men jag gillar din idé!

Du kanske redan vet, men för säkerhetsskull: de konventsäventyr som släppts till Western IV innehåller alla en träffmall (alltså det ovala siktet på OH-plast).

Harry S · 4 Oct 2015

Pendragon;n121051 said:
Det finns förvisso möjligheten att skriva ut en, men jag är inte så sugen på att köpa ett storpack overheadpapper som till 98% kommer vara oanvänt, så jag har tänkt lite utanför lådan.

Går det ens att köpa overhead nuförtiden? Jag hittade inga när jag sökte runt i olika webbutiker för några månader sedan.

Pendragon · 4 Oct 2015

Harry S;n121132 said:
Går det ens att köpa overhead nuförtiden? Jag hittade inga när jag sökte runt i olika webbutiker för några månader sedan.

Hittade på både Kjell & co och Dustin, men bara 50- och 100-pack.

Harry S · 4 Oct 2015

Det här fungerar om ni byter ut bilderna mot träfffiguren och en transpatrent träffmall (och använd ClickLock i Windows):

<!DOCTYPE HTML>
<html>
<head>

<style>
#div1 {float:right; width:500px; height:500px; margin:10px;border:1px solid black;}
#div2 {background-image: url(https://upload.wikimedia.org/wikiped...gonshoot.jpg); height: 1280px; width: 1024px;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data ));
}

function myFunction() {
location.reload();
}
</script>
</head>
<body>

<button onclick="myFunction()">Starta om</button>

Lank till olika traffigur: TRAFFIGUR1, TRAFFIGUR2, TRAFFIGUR3
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

<img src="http://www.clker.com/cliparts/b/a/b/0/1207156679935151925noxin_crosshairs.svg.med.png" draggable="true" ondragstart="drag(event)" id="drag1" width="400" height="400">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

Ladda om sidan (eller klicka på starta om) om ni råkar släppa musknappen (vilket knappat händer om man använder ClickLock) för att nollställa siktet eller drag och släpp siktet till rutan till höger.

Kopiera koden och klistra in den i en fil som ni döper till filnamn.html
Öppna i webbläsaren med Arkiv -> Öppna fil ...
Ni får själva fixa med bildstorlekarna så att de matchar skärmresolutionen och träffigurer/träffmall. Även länkarna till de andra träffigurerna behöver fixas på ett smidigt sätt.

Pendragon · 4 Oct 2015

Harry S;n121141 said:
Det här fungerar om ni byter ut bilderna mot träfffiguren och en transpatrent träffmall (och använd ClickLock i Windows):

Ladda om sidan (eller klicka på starta om) om ni råkar släppa musknappen (vilket knappat händer om man använder ClickLock) för att nollställa siktet eller drag och släpp siktet till rutan till höger.

Kopiera koden och klistra in den i en fil som ni döper till filnamn.html
Öppna i webbläsaren med Arkiv -> Öppna fil ...
Ni får själva fixa med bildstorlekarna så att de matchar skärmresolutionen och träffigurer/träffmall. Även länkarna till de andra träffigurerna behöver fixas på ett smidigt sätt.

Fick inte det att fungera som jag tänkt mig, men de gav en bra startpunkt för att mecka med. Inte för att jag kan sånt själv, men en bekant har börjat kika på det. Tack ändå!

Harry S · 5 Oct 2015

Pendragon;n121423 said:
Fick inte det att fungera som jag tänkt mig, men de gav en bra startpunkt för att mecka med. Inte för att jag kan sånt själv, men en bekant har börjat kika på det. Tack ändå!

Vad var det som inte fungerade?

Pendragon · 5 Oct 2015

Harry S;n121514 said:
Vad var det som inte fungerade?

Fick inte måltavlan att lägga sig över olika platser på måltavlan utan alltid i mitten.

Harry S · 6 Oct 2015

Pendragon;n121795 said:
Fick inte måltavlan att lägga sig över olika platser på måltavlan utan alltid i mitten.

I Firefox på min dator så fungerar det att dra och hålla (håll ner musknappen - släpp inte) siktet över olika delar av träffiguren. Jag trodde att ClickLock skulle göra så att man slapp hålla ner musknappen och bara kunde dra och hålla siktet över träffiguren?

Vill man kunna klicka för att fästa träffmallen så behöver man vidareutveckla koden. Vilket hade varit det bästa för att inte tappa siktet om man stöter till musen.

Pendragon · 6 Oct 2015

Harry S;n121828 said:
I Firefox på min dator så fungerar det att dra och hålla (håll ner musknappen - släpp inte) siktet över olika delar av träffiguren. Jag trodde att ClickLock skulle göra så att man slapp hålla ner musknappen och bara kunde dra och hålla siktet över träffiguren?

Vill man kunna klicka för att fästa träffmallen så behöver man vidareutveckla koden. Vilket hade varit det bästa för att inte tappa siktet om man stöter till musen.

Mjo, att behöva hålla musen still och så var lite av dealbreaker, då kör jag hellre på Gimp-lösningen tillsvidare, men jag har ett par vänskapligt sinnade kodapor som kan tänka sig kika på det.

Harry S · 6 Oct 2015

Här är en fungerande lösning som du kan fästa träffmallen på träffiguren så att du inte behöver bry dig om du stöter till musen (du får byta ut bildlänkarna):

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Western digital träffmall</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body bgcolor="#EEE8E0">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Draggonshoot.jpg" alt="Träffigur" align="left">
<div id="draggable" class="ui-widget-content">
<img src="http://www.clker.com/cliparts/b/a/b/0/1207156679935151925noxin_crosshairs.svg.med.png" alt="Träffmall" align="right">
</div>

</body>
</html>

Kör i fullscreen så slipper ni se webbläsaren.

Du kan byta ut img-taggarna i koden mot

<img src="http://www.clker.com/cliparts/b/a/b/0/1207156679935151925noxin_crosshairs.svg.med.png" alt="Träffmall" align="right" height="auto" width="200">

och

<img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Draggonshoot.jpg" alt="Träffigur" align="left" height="auto" width="500">

om du vill kunna skala träffmallen/träffiguren.

Harry S · 7 Oct 2015

Här är en ny version som även tillåter dig att byta träffigur från en drop down list:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Western digital träffmall</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#draggable" ).draggable();
});

function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.traffigurer.picture.options[document.traffigurer.picture.selectedIndex].value
}
</script>
</head>
<body bgcolor="#EEE8E0">
<div style="float:right;display:block;">
<form name="traffigurer">
<select name="picture" size="1" onChange="showimage()">
<option selected value="https://upload.wikimedia.org/wikipedia/commons/b/be/Draggonshoot.jpg">Revolverman</option>
<option value="https://upload.wikimedia.org/wikipedia/commons/c/c2/Billy_the_Kid_corrected.jpg">Billy the Kid</option>
<option value="https://upload.wikimedia.org/wikipedia/commons/2/23/Broncobuster3.jpg">Rodeo</option>
</select>
<div id="draggable" class="ui-widget-content">
<img src="http://www.clker.com/cliparts/b/a/b/0/1207156679935151925noxin_crosshairs.svg.med.png" alt="Träffmall" align="right">
</div>
</form>
</div>

<p align="center"><img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Draggonshoot.jpg" name="pictures"></p>

</body>
</html>

Inkognito · 7 Dec 2016

Pendragon: Gjorde du något av den här HTML-koden?

Om inte, har du träffmallen som bild "utan bakgrund" som man kan få ta del av?

Pendragon · 9 Dec 2016

Inkognito;n212369 said:
Pendragon: Gjorde du något av den här HTML-koden?

Om inte, har du träffmallen som bild "utan bakgrund" som man kan få ta del av?

Nej, mina kodarskills är undermåliga, men Han knåpade ihop en app till iPhone med träffmallen. Går att hitta om man söker på "Western träffmall".

Inkognito · 10 Dec 2016

Pendragon;n212506 said:
Nej, mina kodarskills är undermåliga, men Han knåpade ihop en app till iPhone med träffmallen. Går att hitta om man söker på "Western träffmall".

Koden som Harry S postade fungerar bra, det är egentligen bara att byta ut bilderna han använt!
Jag kanske får försöka finns tiden att fixa en "genomskinlig" träffmall.. postar här isf!

(Appen har jag! Mkt bra! Men tänkte spela lite över skype och köra träffmall på delad skärm!)

Pendragon · 10 Dec 2016

Inkognito;n212617 said:
Koden som Harry S postade fungerar bra, det är egentligen bara att byta ut bilderna han använt!
Jag kanske får försöka finns tiden att fixa en "genomskinlig" träffmall.. postar här isf!

(Appen har jag! Mkt bra! Men tänkte spela lite över skype och köra träffmall på delad skärm!)

Sätter du ihop en fungerande lösning till och med teknikidioter som jag kan hantera så får du gärna dela med dig!

Nekromanti Digital träffmall

Pendragon

Swashbuckler

Inkognito

Swordsman

Harry S

Swordsman

Pendragon

Swashbuckler

Harry S

Swordsman

Pendragon

Swashbuckler

Harry S

Swordsman

Pendragon

Swashbuckler

Harry S

Swordsman

Pendragon

Swashbuckler

Harry S

Swordsman

Harry S

Swordsman

Inkognito

Swordsman

Pendragon

Swashbuckler

Attachments

Inkognito

Swordsman

Pendragon

Swashbuckler