EDIT: If there is a better way of me producing this code for you please let me know.
I'm making this working "tuner laptop" as an example for a friend but I'm struggling with click functions. I've partially found code from various places and brought it all together in this final format.
I'm fairly amateur at coding but I've managed to get this far. The only thing I'm struggling with is where and what I need to put into the JS to make the text animation start upon clicking the "save" button.
As you can see, the text animation starts immediately when the html is loaded. I want people to open the laptop, select their desired performance and then click "save". Once they've clicked save, the settings are applied and the text animation begins. The text doesn't actually do anything, it's merely for example/immersion.
I've also noticed that for some reason the buttons still have a green border when I click them and go fully green when I right-click them. I'm fairly new to bootstrap so if you could help with editing that as well, that would be great.
The actual actions/functions for this laptop are coded in .lua which is why it might just seem like a useless object to you guys.
The code is as follows:
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css" rel = "stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="custom.css">
<link rel="stylesheet" type="text/css" href="textanim.css">
</head>
<body>
<div class="background">
<div class="container monitor">
<div class="program">
<div class="fixed-top position-relative program-top-bar">
<div class="row">
<div class="col"><span id="appName">London Motors</span></div>
<div class="col text-right"><i class="fa fa-sm fa-window-minimize" id="minimizeProgram"></i> <i class="fa fa-sm fa-window-maximize"></i> <i class="fa fa-sm fa-times-circle" id="exitProgram"></i></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col col-lg-6">
<p>Boost Pressure <small class="text-muted">(STANDARD-HIGH)</small></p>
<div class="slider" id="boost"></div><br>
<p>Fuel Mixture <small class="text-muted">(LEAN-RICH)</small></p>
<div class="slider" id="fuelmix"></div><br>
<p>Transmission Speed <small class="text-muted">(STANDARD-FAST)</small></p>
<div class="slider" id="gearchange"></div><br>
<p>Brake Force Allocation <small class="text-muted">(REAR-FRONT)</small></p>
<div class="slider" id="braking"></div><br>
<p>Drive Train <small class="text-muted">(REAR-FRONT)</small></p>
<div class="slider" id="drivetrain"></div>
</div>
<div class="col col-lg-6">
<p>ABS Strength <small class="text-muted">(WEAK-STRONG)</small></p>
<div class="slider" id="brakeforce"></div>
</div>
<div class="ecutext-container">
<pre id="typewriter">
<span class="var-highlight">Init</span> lmECU.exe = {
<span class="string">--------------------------------</span>
lmECU:\ <span class="string">validating engineer key</span>
lmECU:\ <span class="string">validation success</span>
lmECU:\ <span class="string">accessing sensors</span>
lmECU:\ <span class="string">parsing senslog.xml</span>
lmECU-senslog:\ <span class="string-highlight">running diagnostics</span>
<span class="string-highlight">- {0 faults detected</span>
lmECU:\ <span class="string">applying Modifications...</span>
lmECU:\ <span class="string">generating senslog.xml</span>
lmECU:\ <span class="string">parsing senslog.xml</span>
lmECU-senslog:\ <span class="string-highlight">running diagnostics</span>
<span class="string-highlight">- {0 faults detected</span>
lmECU:\ <span class="string">ECU remap successful</span>
lmECU:\ <span class="string">end lmECU.exe</span>
<br></br>
</pre>
</div>
<div class="savebtn">
<div class="colbtns"><button class="btn btn-success form-control" id="savebtn">SAVE</button></div>
<input id="clickMe" type="button" value="clickme" onclick="doFunction(setupTypewriter());" />
</div>
<div class="colbtnd"><button class="btn btn-success form-control" id="defaultbtn">DEFAULT</button></div>
</div>
</div>
</div>
<script src="config.js"></script>
<script src="index.js"></script>
<script src="textanim.js"></script>
</body>
</html>
index.css:
.monitor {
display:block;
background-image: url("https://doc-08-9s-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/6rfloh5t77j7vobuhjfr7pr8ou0ju1ou/1561413600000/03452464485581425039/*/1qA3_b6NWsHIm5FJtp1vtMhEEmOgNXbz6");
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
margin-top: 5%;
height:700px;
width:100%;
padding:0 !important;
z-index: 2;
}
.monitor-brand {
display:block;
position:fixed;
text-align:center;
height:100%;
width:100%;
top:81%;
font-size:24px;
font-weight: 700;
font-family: "YaHei UI";
}
.program {
display:block;
position:relative;
top: 71px;
left: 165px;
height: 440px;
width: 803.5px;
background-image: url("https://doc-04-9s-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/mc80aggjohrv54phak19aj4eq1a9lc18/1561413600000/03452464485581425039/*/1whCzPNt2E6REry7I0a0Xy6CU5G_mi4q7");
background-repeat: no-repeat;
background-size: 100%;
overflow: hidden;
padding-bottom:19px;
}
.program-top-bar {
display:block;
padding-left:310px;
padding-right:10px;
padding-top:3px;
width:100%;
height:40px;
color:white;
background-color: rgba(26, 117, 255, 0.8);
background-image: linear-gradient(to bottom left, lightblue, #4d94ff)
font-family: roboto;
font-weight: 600;
font-size: 20px;
}
.colbtns {
left: 50px;
bottom: 37.5px;
position: relative;
width: 140px;
z-index: 3;
}
.colbtnd {
left: 115px;
bottom: 37px;
position: relative;
width: 140px;
z-index: 3;
}
.ecutext-container {
background-color: #000000;
border-radius: .25rem;
position: relative;
height: 235px;
width: 380px;
left: 413px;
bottom: 290px;
z-index: 1;
}
custom.css (for overwriting bootstrap):
.col {
color: #fff;
}
.text-muted {
color: #fff!important;
}
.btn-success {
color: #fff;
background-color: #1a75ff;
border-color: #1a75ff;
}
.btn-success:hover {
color: #fff;
background-color: #005ce6;
border-color: #005ce6;
}
.btn-success:active {
color: #fff;
background-color: #005ce6;
border-color: #005ce6;
}
.btn-success:focus {
color: #fff;
background-color: #005ce6;
border-color: #005ce6;
}
.ui-widget-content {
border: 1px solid;
border-color: #fff;
background-color: #1a75ff;
background: none;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #fff;
}
.slider {
border: 1px solid;
border-color: #fff;
background-color: #fff;
}
#boost {
color: #fff;
}
index.js:
function sliderUpdated(event,ui) {
}
function getSliderValues() {
return {boost:$("#boost").slider("value"),fuelmix:$("#fuelmix").slider("value"),gearchange:$("#gearchange").slider("value"),braking:$("#braking").slider("value"),drivetrain:$("#drivetrain").slider("value"),brakeforce:$("#brakeforce").slider("value")};
}
function setSliderValues(values) {
$(".slider").each(function(){
if(values[this.id]!=null) {
$(this).slider("value",values[this.id]);
}
});
sliderUpdated();
}
function menuToggle(bool,send=false) {
if(bool) {
$("body").show();
$(".monitor-brand").css("top",$(".monitor").offset().top+$(".monitor").height()*1.075);
}
if(send){
$.post('http://solrp_tuner/togglemenu', JSON.stringify({state:false}));
}
}
$(function(){
$(".monitor-brand").css("top",$(".monitor").offset().top+$(".monitor").height()*1.075);
$("#monitorBrand").text(Config.monitorBrand);
$("#appName").text(Config.appName);
$("#boost").slider({min:0.1,value:0.25,step:0.01,max:0.75,change:sliderUpdated});
$("#fuelmix").slider({min:1,value:1.3,step:0.01,max:2,change:sliderUpdated});
$("#gearchange").slider({min:1,value:9,max:50,change:sliderUpdated});
$("#braking").slider({value:0.5,max:1,step:0.05,change:sliderUpdated});
$("#drivetrain").slider({value:0.5,max:1,step:0.05,change:sliderUpdated});
$("#brakeforce").slider({value:1.4,max:2,step:0.05,change:sliderUpdated});
$("#defaultbtn").click(function(){setSliderValues({boost:0.25,fuelmix:1.3,gearchange:9,braking:0.5,drivetrain:0.5,brakeforce:1.4});});
$("#savebtn").click(function(){
$.setupTypewriter();
$.post('http://solrp_tuner/save', JSON.stringify(getSliderValues()));
});
$("#exitProgram").click(function(){
menuToggle(false,true);
});
$("#shutDown").click(function(){
menuToggle(false,true);
});
document.onkeyup = function (data) {
if (data.which == 27) {
menuToggle(false,true);
}
};
window.addEventListener('message', function(event){
if(event.data.type=="togglemenu") {
menuToggle(event.data.state,false);
if(event.data.data!=null) {
setSliderValues(event.data.data);
}
}
});
});
textanim.js:
function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 1,
tempTypeSpeed = 0;
var type = function() {
if (writingTag === true) {
tag += HTML[cursorPosition];
}
if (HTML[cursorPosition] === "<") {
tempTypeSpeed = 0;
if (tagOpen) {
tagOpen = false;
writingTag = true;
} else {
tag = "";
tagOpen = true;
writingTag = true;
tag += HTML[cursorPosition];
}
}
if (!writingTag && tagOpen) {
tag.innerHTML += HTML[cursorPosition];
}
if (!writingTag && !tagOpen) {
if (HTML[cursorPosition] === " ") {
tempTypeSpeed = 0;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + 0;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + 0;
writingTag = false;
if (tagOpen) {
var newSpan = document.createElement("span");
t.appendChild(newSpan);
newSpan.innerHTML = tag;
tag = newSpan.firstChild;
}
}
cursorPosition += 1;
if (cursorPosition < HTML.length - 1) {
setTimeout(type, tempTypeSpeed);
}
};
return {
type: type
};
}
var typer = document.getElementById('typewriter');
typewriter = setupTypewriter(typewriter);
typewriter.type();
textanim.css:
.var-highlight{
color: #008ae6;
}
.string-highlight{
color: #008ae6;
}
#typewriter{
padding-top: 5px;
font-size: 10px;
color: #fff;
margin: 0;
overflow: hidden;
font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
&:after{
content: "|";
animation: blink 500ms linear infinite alternate;
}
}
@-webkit-keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
@-moz-keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
@keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
Aucun commentaire:
Enregistrer un commentaire