OLA!
Tenho um pagina feita em bootstrap 4 que controla uma maquina.
Ela esta pronta para receber o codigo de automação.
Mas não sei CSS o suficiente para deixar ela resposiva.
Abaixo meu
index.html para você ver que não é grande, mas tem que evoluir o CSS...
Se fecharmos negocios eu mando todo o restante e as imagens.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Reforco</title>
<link rel="stylesheet" href="/assets/bootstrap/css/
bootstrap.min.css">
<link rel="stylesheet" href="
https://fonts.googleapis.com/css?family=Lato:400,700,400italic">
<link rel="stylesheet" href="/assets/css/
styles.css">
</head>
<body>
<div class="row" id="row_mensagens" style="margin-right: 0px;margin-left: 0px;">
<div class="col-sm-12 col-md-3 col-lg-3 col-xl-3" id="column_nome_hora" style="height: 6vh;">
<p class="lead text-center text-sm-center text-lg-left text-xl-left d-lg-flex" id="paragraph_nome_hora" style="margin-bottom: 0px;">nome + hora </p>
</div>
<div class="col" id="column_mensagens" style="height: 6vh;">
<p class="lead text-center text-sm-center text-lg-center text-xl-center" id="paragraph_mensagens" style="margin-bottom: 0px;">mensagens</p>
</div>
<div class="col-sm-12 col-md-3 col-lg-3 col-xl-3" id="column_estado" style="height: 6vh;">
<p class="lead text-center text-sm-center text-md-center text-lg-right text-xl-right" id="paragraph_estado" style="margin-bottom: 0px;">o que esta fazendo</p>
</div>
</div>
<div class="row no-gutters align-items-center" id="row_principal">
<div class="col-sm-12 col-md-12 col-lg-9 col-xl-9 m-auto" id="layout_machine"><img id="bg01" src="/assets/img/
bg01.png" width="100%" height="auto" alt="bg01" z-index="-1" style="background-repeat: no-repeat;min-height: auto;height: auto;"><img id="desbob_img" src="/assets/img/
maq-desbob.png" href="#" width="30%" alt="desbob" style="background-position: top;margin: 4px;margin-top: 11%;margin-bottom: 0%;margin-right: 0px;">
<img
id="desbob_img_button_off" src="/assets/img/
ihm-ent-desbob-off.png" href="#" width="11%" alt="desbob_button_off" style="background-position: top;margin: 4px;margin-top: -31%;margin-bottom: 0%;margin-right: 0px;margin-left: -24%;"><img class="d-none" id="desbob_img_button_on" src="/assets/img/
ihm-ent-desbob-on.png" href="#" width="11%" height="11%" alt="desbob_button_on" style="background-position: top;margin: 4px;margin-top: -31%;margin-bottom: 0%;margin-right: 0px;margin-left: -24%;">
<img
id="arrow_left_img" src="/assets/img/
cmd-aplan-perfil-recua.png" href="#" width="12%" alt="arrow_left" style="background-position: top;margin: 4px;margin-top: -11%;margin-bottom: 17%;margin-right: 0px;margin-left: 16%;"><img id="arrow_right_img" src="/assets/img/
cmd-aplan-perfil-avanca.png" href="#" width="12%" alt="arrow_right" style="background-position: top;margin: 4px;margin-top: -11%;margin-bottom: 17%;margin-right: 0px;margin-left: 5%;"><img id="mesa_img" src="/assets/img/
maq-perf-mesa.png"
href="#" width="45%" alt="mesa_img" style="background-position: top;margin: 0px;margin-top: 0px;margin-bottom: -30%;margin-right: 0px;margin-left: -32%;width: 41%;"><img id="castelo1_img" src="/assets/img/
maq-perf-castelo.png" href="#" width="7%"
height="7%" alt="castelo1" style="background-position: top;margin: 0px;margin-top: 0px;margin-bottom: -4%;margin-right: 0px;margin-left: -41%;"><img id="castelo2_img" src="/assets/img/
maq-perf-castelo.png" href="#" width="7%" height="7%" alt="castelo2"
style="background-position: top;margin: 0px;margin-top: 0px;margin-bottom: -4%;margin-right: 0px;margin-left: 0%;"><img id="castelo3_img" src="/assets/img/
maq-perf-castelo.png" href="#" width="7%" height="7%" alt="castelo3" style="background-position: top;margin: 0px;margin-top: 0px;margin-bottom: -4%;margin-right: 0px;margin-left: 0%;">
<img
id="castelo4_img" src="/assets/img/
maq-perf-castelo.png" href="#" width="7%" height="7%" alt="castelo4" style="background-position: top;margin: 0px;margin-top: 0px;margin-bottom: -4%;margin-right: 0px;margin-left: 0%;"><img id="castelo5_img" src="/assets/img/
maq-perf-castelo.png" href="#" width="7%" height="7%" alt="castelo5" style="background-position: top;margin: 0px;margin-top: 0px;margin-bottom: -4%;margin-right: 0px;margin-left: 0%;"><img id="mesa_corte_img"
src="/assets/img/
maq-cort-mesa.png" href="#" width="15%" alt="mesa_corte" style="background-position: top;margin: 0px;margin-top: 0px;margin-bottom: -30%;margin-right: 0px;margin-left: 12%;"><img id="corte_prensa_img" src="/assets/img/
maq-perf-prensa.png"
href="#" width="13%" alt="corte_prensa" style="background-position: top;margin: 0px;margin-bottom: -2%;margin-left: -14%;"><img id="corte_button" src="/assets/img/
cmd-prensa-ligar.png" href="#" width="12%" alt="corte_button" style="background-position: top;margin: 0px;margin-bottom: 29%;margin-left: -13%;"></div>
<div
class="col-sm-12 col-md-12 col-lg-3 col-xl-3 text-center" id="layout_machine_bottons" style="padding-right: 0px;padding-left: 0px;"><button class="btn btn-primary btn-block" id="button_stop_maq" type="button" style="margin-right: 0px;padding-left: 12px;padding-bottom: 12px;padding-top: 12px;">stop maq</button><button class="btn btn-primary btn-block" id="button_start_maq"
type="button" style="padding-bottom: 12px;padding-top: 12px;">start maq</button><button class="btn btn-primary btn-block" id="button_manual" type="button" style="padding-bottom: 13px;padding-top: 12px;">manual</button><button class="btn btn-primary btn-block"
id="button_auto" type="button" style="padding-top: 12px;padding-bottom: 12px;margin-right: 0px;padding-right: 12px;">auto</button><label class="text-center" id="label_pecas_min" style="margin-bottom: 0px;padding-top: 12px;">peças / min</label>
<input
class="d-block" type="text" id="text_pecas_min" style="margin: auto;width: auto;" autocomplete="off" inputmode="numeric" readonly=""><label class="text-center" id="label_pecas_restantes" style="margin-bottom: 0px;">peças restantes</label><input class="d-block" type="text" id="text_pecas_restantes" style="margin: auto;width: auto;margin-bottom: 6px;" autocomplete="off" inputmode="numeric"
readonly=""></div>
</div>
<div class="row" id="row_button_desligar">
<div class="col-sm-12 col-md-6 col-lg-2" id="column_button_principal" style="padding-right: 6px;padding-left: 6px;"><button class="btn btn-primary btn-block" id="button_principal" type="button" style="font-size: 24px;margin: 0px;margin-top: 5px;height: 60px;">principal</button></div>
<div class="col-sm-12 col-md-6 col-lg-2" id="column_button_tarefas" style="padding-right: 6px;padding-left: 6px;"><button class="btn btn-primary btn-block" id="button_tarefas" type="button" style="font-size: 24px;margin-top: 5px;height: 59px;">tarefas</button></div>
<div class="col-sm-12 col-md-6 col-lg-2" id="column_button_blocok" style="padding-right: 6px;padding-left: 6px;"><button class="btn btn-primary btn-block" id="button_blocok" type="button" style="font-size: 24px;margin-top: 5px;height: 59px;">bloco k</button></div>
<div class="col-sm-12 col-md-6 col-lg-2" id="column_button_relatorios" style="padding-right: 6px;padding-left: 6px;"><button class="btn btn-primary btn-block" id="button_relatorios" type="button" style="font-size: 24px;margin-top: 5px;height: 60px;padding-right: 6px;padding-left: 6px;">relatorios</button></div>
<div class="col-sm-12 col-md-6 col-lg-2" id="column_button_manutencao"
style="padding-right: 6px;padding-left: 6px;"><button class="btn btn-primary btn-block" id="button_manutecao" type="button" style="font-size: 24px;margin-top: 5px;padding-right: 6px;padding-left: 6px;height: 60px;">manutenção</button></div>
<div class="col-sm-12 col-md-6 col-lg-2" id="column_button_desligar"
style="padding-left: 6px;padding-right: 6px;"><button class="btn btn-primary btn-block" type="button" style="font-size: 24px;margin-top: 5px;height: 60px;">desligar</button></div>
</div>
<script src="/assets/js/
jquery.min.js"></script>
<script src="/assets/bootstrap/js/
bootstrap.min.js"></script>
<script src="/assets/js/
jquery.keyboard.js"></script>
<script src="/assets/js/
mqttws31.js"></script>
</body>
</html>
Prazo de Entrega: Não estabelecido