OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to implement a html file into a python tkinter window?

  • Thread starter Thread starter EnQuire
  • Start date Start date
E

EnQuire

Guest
so i wanted to implement my html webpage project into a python tkinter window, using tkinter html view.

but when i attempted to do exactly that, i get this (python tkinter window) what im geting

but this is how i originally made it to look like (in browser, the colors are messed up because of my client side settings) supposed to look like

so here is my python code in "app.py":

Code:
import tkinter as tk
from tkhtmlview import HTMLText, RenderHTML

root = tk.Tk()
root.title("Youtube")
root.geometry("1200x600")
html_label = HTMLText(root, html=RenderHTML('OpenMe.html'))
html_label.pack(fill="both", expand=True)
html_label.fit_height()
root.mainloop()

and here is my html "OpenMe.html" code:

Code:
<html lang="en">
  <head>
      
      <!--
            page version number 16.10
        -->
      
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML GIZMO!</title>
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
      <style>
        
          
          .buttn {
            transition: 0.2s;
            height: 100px;
            width: 200px;
            color: white;
            border-color: black;
            border-radius: 15px;
            background-color: transparent;
            border-width: 3px;
            click: pointer;
        }
        
        button {
            transition: 0.2s;
            height:100px;
            width:200px;
            color: white;
            border-color: white;
            border-radius: 15px;
            background-color: transparent;
            border-width: 2px;
        }
        
        button:hover {
            transition: 0.2s;
            height:150px;
            width:300px;
            color: black;
            border-color: white;
            border-radius: 15px;
            background-color: white;
            border-width: 2px;
        }
        
        .buttn:hover {
            transition: 0.2s;
            height:150px;
            width:250px;
            color: white;
            border-color: white;
            border-radius: 15px;
            background-color: transparent;
            border-width: 2px;
        }
          
          
          
        body {
          margin: 0;
          padding: 0;
          font-family: 'Roboto', sans-serif;
        }
          
          hr {
        width: 15%;
        margin-left: auto;
        margin-right: auto;
      }
          
         .title { font-size: 80px; }

                .navi {
            transition: 0.2s;
            height:50px;
            width:100px;
            color: white;
            border-color: white;
            border-radius: 15px;
            background-color: transparent;
            border-width: 2px;
        }
        
        .navi:hover {
            transition: 0.2s;
            height:75px;
            width:150px;
            color: black;
            border-color: white;
            border-radius: 15px;
            background-color: white;
            border-width: 2px;
        }
          
          </style>
    <script>

        function hm(){
            location.href="./OpenMe.html"
        }
        function game(){
            location.href="./games/games.html"
        }
        function tools(){
            location.href="./tools/tools.html"  
        }
        function sett(){
            location.href="./settings.html" 
        }
        function cre(){
            location.href="./info/credits.html" 
        }
        
function Startup(){
    //Time//
    const date = new Date();
    const hour = date.getHours();
    const mins = date.getMinutes();
    document.getElementById("CConsole").innerHTML = hour+":"+mins;  
}
        
    </script>
  </head>
   <body bgcolor="#050505" onload="Startup();">
       <center><nav><font color = "white">
           <br>
            <button class="navi" style="background-color:white;color:black;" onclick="hme();">Home</button>   <button class="navi" onclick="game();">Games</button> <button class="navi" onclick="tools();">Tools</button> <button class="navi" onclick="cre();"> Updates </button>
           
       </nav></center>
      <center><p class="title"><font color="lime"> H<font color="blue">T<font color="purple">M<font color="red">L<font color="orange"> G<font color="orange">I<font color="lime">Z<font color="red">M<font color="orange">O<font color="yellow">!<font color="white"></p>
          <h1>What's New:</h1>
          -Made UI Changes<br>
          -Added a New Game<br>
          -Fixed Bugs
          <font color="grey"><h4><center>Version 0.1.10.00.000</center></h4></center>
  </body>
</html>

can someone with this pleasae? i am pretty new to python and especially tkinter it would really help alot!

<p>so i wanted to implement my html webpage project into a python tkinter window, using tkinter html view.</p>
<p>but when i attempted to do exactly that, i get this (python tkinter window) <a href="https://i.sstatic.net/Z2srF.png" rel="nofollow noreferrer">what im geting</a></p>
<p>but this is how i originally made it to look like (in browser, the colors are messed up because of my client side settings) <a href="https://i.sstatic.net/2XJdk.png" rel="nofollow noreferrer">supposed to look like</a></p>
<p>so here is my python code in "app.py":</p>
<pre><code>import tkinter as tk
from tkhtmlview import HTMLText, RenderHTML

root = tk.Tk()
root.title("Youtube")
root.geometry("1200x600")
html_label = HTMLText(root, html=RenderHTML('OpenMe.html'))
html_label.pack(fill="both", expand=True)
html_label.fit_height()
root.mainloop()
</code></pre>
<p>and here is my html "OpenMe.html" code:</p>
<pre><code>
<html lang="en">
<head>

<!--
page version number 16.10
-->

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML GIZMO!</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>


.buttn {
transition: 0.2s;
height: 100px;
width: 200px;
color: white;
border-color: black;
border-radius: 15px;
background-color: transparent;
border-width: 3px;
click: pointer;
}

button {
transition: 0.2s;
height:100px;
width:200px;
color: white;
border-color: white;
border-radius: 15px;
background-color: transparent;
border-width: 2px;
}

button:hover {
transition: 0.2s;
height:150px;
width:300px;
color: black;
border-color: white;
border-radius: 15px;
background-color: white;
border-width: 2px;
}

.buttn:hover {
transition: 0.2s;
height:150px;
width:250px;
color: white;
border-color: white;
border-radius: 15px;
background-color: transparent;
border-width: 2px;
}



body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}

hr {
width: 15%;
margin-left: auto;
margin-right: auto;
}

.title { font-size: 80px; }

.navi {
transition: 0.2s;
height:50px;
width:100px;
color: white;
border-color: white;
border-radius: 15px;
background-color: transparent;
border-width: 2px;
}

.navi:hover {
transition: 0.2s;
height:75px;
width:150px;
color: black;
border-color: white;
border-radius: 15px;
background-color: white;
border-width: 2px;
}

</style>
<script>

function hm(){
location.href="./OpenMe.html"
}
function game(){
location.href="./games/games.html"
}
function tools(){
location.href="./tools/tools.html"
}
function sett(){
location.href="./settings.html"
}
function cre(){
location.href="./info/credits.html"
}

function Startup(){
//Time//
const date = new Date();
const hour = date.getHours();
const mins = date.getMinutes();
document.getElementById("CConsole").innerHTML = hour+":"+mins;
}

</script>
</head>
<body bgcolor="#050505" onload="Startup();">
<center><nav><font color = "white">
<br>
<button class="navi" style="background-color:white;color:black;" onclick="hme();">Home</button> <button class="navi" onclick="game();">Games</button> <button class="navi" onclick="tools();">Tools</button> <button class="navi" onclick="cre();"> Updates </button>

</nav></center>
<center><p class="title"><font color="lime"> H<font color="blue">T<font color="purple">M<font color="red">L<font color="orange"> G<font color="orange">I<font color="lime">Z<font color="red">M<font color="orange">O<font color="yellow">!<font color="white"></p>
<h1>What's New:</h1>
-Made UI Changes<br>
-Added a New Game<br>
-Fixed Bugs
<font color="grey"><h4><center>Version 0.1.10.00.000</center></h4></center>
</body>
</html>
</code></pre>
<p>can someone with this pleasae? i am pretty new to python and especially tkinter it would really help alot!</p>
 

Latest posts

Top