PureBasic Forums - English

Posted: **Tue Jul 11, 2023 11:40 am**

I have opened it in there but the when it opens, the html doesn't work.
here is the html

<!DOCTYPE html>
<html>
  <head>
    <title>Search Example</title>
    <style>
      table, th, td {
        border: 0px solid black;
        border-collapse: collapse;
        padding: 5px;
      }
      
      th {
        background-color: #e6e6e6;
      }
      
      .adj {
        font-style: italic;
       color: rgb(119, 0, 0);
	   font-weight: bold
        font-size: smaller;
      }
	  .search-container {
  display: flex;
  align-items: center;
}

label {
  margin-right: 10px;
  font-size: 16px;
}

input[type="text"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button[type="submit"]:hover {
  background-color: #3e8e41;
}

    </style>
  </head>
  <body>
    <form>
      <div class="search-container">
  <label for="search-input">Search for:</label>
  <input type="text" id="search-input" name="search-input">
  <button type="submit">Search</button>
  <button style="background-color: lightblue; font-weight: bold; color: black;" type="button" id="random-word-button">Random word</button>

</div>

    </form>
    
    <div id="search-results" style="display: none;"></div>
    
    <script>
      const words = [
        { word: 'abki', meaning1: 'Used for greetings', adj: 'adj,pl;baaki', meaning2: 'ijale', trans: 'he comes and goes',aud: 'orole.mp3'},
        { word: 'abopig', meaning1: 'for meat', adj: 'farm animal', meaning2: 'for agriculture',aud: 'sample.wav' },
        { word: 'abchicken', meaning1: 'for meat and eggs', adj: 'domestic bird', meaning2: 'for poultry farming',aud: 'sample.wav' }
      ];
      
      const form = document.querySelector('form');
      const searchInput = document.querySelector('#search-input');
      const searchResults = document.querySelector('#search-results');
      const randomWordButton = document.querySelector('#random-word-button');
	  
      form.addEventListener('submit', (event) => {
        event.preventDefault();
        const query = searchInput.value.toLowerCase();
        let result;
        const word = words.find(word => word.word === query);
        if (word) {
          result = `
            <table>
              <tr>
                <th>${word.word}</th>
                <th></th>
                <th>Audio</th>
              </tr>
              <tr>
                <td>${word.meaning1}</td>
                <td class="adj">${word.adj}</td>
                <td><button style="background-color: lightblue; font-weight: bold; color: black;" onclick="speak('${word.word}')">Pronounce it !!</button></td>
              </tr>
              <tr>
               <td><big style="color: rgb(0, 56, 0);"><span
style="font-style: italic; font-weight: bold;">Example:</span></big>
 ${word.meaning2}</td>
                <td class="trans"><big style="color: rgb(0, 56, 0);"><span
style="font-style: italic; font-weight: bold;">Translation:</span></big>
 ${word.trans}</td>
               <td><button style="background-color: lightblue; font-weight: bold; color: black;" onclick="var audio = new Audio('${word.aud}'); audio.play();">Pronounce it !!</button></td>

              </tr>
            </table>
          `;
          searchResults.innerHTML = result;
        } else {
          result = 'No results found';
          searchResults.innerHTML = result;
        }
        searchResults.style.display = 'block';
      });
	  randomWordButton.addEventListener('click', () => {
        const randomIndex = Math.floor(Math.random() * words.length);
        const randomWord = words[randomIndex].word;
        searchInput.value = randomWord;
        form.dispatchEvent(new Event('submit'));
      });
      
      function speak(text) {
        const utterance = new SpeechSynthesisUtterance(text);
        speechSynthesis.speak(utterance);
      }
      searchInput.addEventListener('input', () => {
  const query = searchInput.value.toLowerCase().trim();
  if (query.length > 0) {
    const matches = words.filter(word => word.word.startsWith(query)).slice(0, 5);
    const matchList = matches.map(match => `<li>${match.word}</li>`).join('');
    if (matchList) {
      searchResults.style.display = 'block';
      searchResults.innerHTML = `<ul>${matchList}</ul>`;
      const listItems = searchResults.querySelectorAll('li');
      listItems.forEach(item => {
        item.addEventListener('click', () => {
          const word = words.find(word => word.word === item.textContent);
          const meaning = word ? word.meaning : 'No meaning found';
          searchInput.value = item.textContent;
          searchResults.innerHTML = `${item.textContent}; ${meaning1}`;
        });
      });
    } else {
      searchResults.style.display = 'none';
      searchResults.innerHTML = '';
    }
  } else {
    searchResults.style.display = 'none';
    searchResults.innerHTML = '';
  }
});
const randomButton = document.createElement('button');
randomButton.textContent = 'Random word';
randomButton.addEventListener('click', () => {
  const randomWord = words[Math.floor(Math.random() * words.length)];
  const result = `
    <table>
      <tr>
        <th>${randomWord.word}</th>
        <th>${randomWord.adj}</th>
        <th>Button</th>
      </tr>
      <tr>
        <td>${randomWord.meaning1}</td>
        <td class="adj">${randomWord.adj}</td>
        <td><button onclick="speak('${randomWord.meaning1}')">Speak</button></td>
      </tr>
      <tr>
        <td>${randomWord.meaning2}</td>
        <td class="adj">${randomWord.adj}</td>
        <td><button onclick="speak('${randomWord.aud}')">Speak</button></td>
      </tr>
    </table>
  `;
  searchInput.value = randomWord.word;
  searchResults.innerHTML = result;
  searchResults.style.display = 'block';
});


    </script>
  </body>
</html>

and here is the pb file, how can it be edited so that the inside html functions well, you could try out running the html aside and see what it does
the pb file is

Code: Select all

EnableExplicit

Enumeration Window
  #Window_0
EndEnumeration

Enumeration Gadgets
  #WebView_1
EndEnumeration

Define iEvent.i

Declare Open_Window_0(X = 0, Y = 0, Width = 640, Height = 480)

Procedure Open_Window_0(X = 0, Y = 0, Width = 640, Height = 480)
  If OpenWindow(#Window_0, X, Y, Width, Height, "Window_0", #PB_Window_SystemMenu | #PB_Window_MinimizeGadget | #PB_Window_MaximizeGadget | #PB_Window_SizeGadget | #PB_Window_ScreenCentered)
 WebGadget(#WebView_1, 0, 0, 640, 480, "file://C:/Users/HP/Desktop/FinishedApps/MYnewDictionary.html")

  EndIf
EndProcedure

Open_Window_0()

Repeat
  iEvent = WaitWindowEvent()
  Select iEvent
    Case #PB_Event_Menu
      Select EventMenu()
      EndSelect

    Case #PB_Event_Gadget
      Select EventGadget()
      EndSelect

    Case #PB_Event_CloseWindow
      End
  EndSelect
ForEver

Posted: **Tue Jul 11, 2023 1:45 pm**

I don't think the webgadget is meant to be a full-featured web browser with javascript etc.
You could try the chromium or qt webgadget add-ons (search forums).

Posted: **Tue Jul 11, 2023 4:28 pm**

jassing wrote: Tue Jul 11, 2023 1:45 pm I don't think the webgadget is meant to be a full-featured web browser with javascript etc.
You could try the chromium or qt webgadget add-ons (search forums).

Quite an impressive tool, it works @ 100%.
A sneaky way to turn webpages/ html code to .exe file. I am impressed

Posted: **Tue Jul 18, 2023 8:51 pm**

Hallo members, lets say you have a panel with a canvas named new_0, how do yo edit the code such that whenever a user goes under File and clicks on New the automatically "new_1" with a canvas opens in the panel, and so on i.e if a user continues to click on New then tabs with canvas are opened in panel
The code is;

Code: Select all

EnableExplicit

Enumeration Window
  #Window_0
EndEnumeration

Enumeration
  #MainMenu
EndEnumeration



Define iEvent.i



Enumeration Gadgets
  #Panel_1
  #CanvCont_1
  #CanvCont_2
EndEnumeration

;- Declare
Declare Open_Window_0(X = 0, Y = 0, Width = 800, Height = 600)

Procedure Open_Window_0(X = 0, Y = 0, Width = 800, Height = 600)
  If OpenWindow(#Window_0, X, Y, Width, Height, "Window_0", #PB_Window_SystemMenu | #PB_Window_MinimizeGadget | #PB_Window_MaximizeGadget | #PB_Window_SizeGadget | #PB_Window_ScreenCentered)

    If CreateMenu(#MainMenu, WindowID(#Window_0))
      MenuTitle("File")
        MenuItem(0, "New")
        MenuBar()
        MenuItem(1, "&Quit")      
    EndIf
    PanelGadget(#Panel_1, 130, 30, 490, 330)
      AddGadgetItem(#Panel_1, -1, "new_0")
      CanvasGadget(#CanvCont_1, 10, 10, 360, 270, #PB_Canvas_Border | #PB_Canvas_Container)
      CloseGadgetList()   ; #CanvCont_1
      AddGadgetItem(#Panel_1, -1, "new_1")
    CloseGadgetList()   ; #Panel_1
    
  EndIf
EndProcedure




Open_Window_0()

Repeat
  iEvent = WaitWindowEvent()
  Select iEvent
    Case #PB_Event_Menu
      Select EventMenu()
        Case 1   ;Quit
          End
        Case 2   ;New
          
          MessageRequester("New", "Menu Sample", 0)
        Default
          MessageRequester("Information", "ToolBar Or Menu ID: " + Str(EventMenu()), 0)
          
          
          
          
      EndSelect

    Case #PB_Event_Gadget
      Select EventGadget()
      EndSelect

    Case #PB_Event_CloseWindow
      End
  EndSelect
ForEver

Posted: **Tue Jul 18, 2023 9:00 pm**

Ktim07 wrote: Tue Jul 11, 2023 11:38 am
Olli wrote: Tue Jul 11, 2023 10:58 am
I am not sure that I understand your explanation.

Don't worry. It's absolutely normal to have trouble understanding Olli.

Posted: **Tue Jul 18, 2023 11:26 pm**

Ha, how you like that?

Code: Select all

EnableExplicit

Enumeration Window
  #Window_0
EndEnumeration

Enumeration
  #MainMenu
EndEnumeration



Define iEvent.i



Enumeration Gadgets
  #Panel_1
  #CanvCont_1
  #CanvCont_2
EndEnumeration

;- Declare
Declare Open_Window_0(X = 0, Y = 0, Width = 800, Height = 600)

Procedure Open_Window_0(X = 0, Y = 0, Width = 800, Height = 600)
  If OpenWindow(#Window_0, X, Y, Width, Height, "Window_0", #PB_Window_SystemMenu | #PB_Window_MinimizeGadget | #PB_Window_MaximizeGadget | #PB_Window_SizeGadget | #PB_Window_ScreenCentered)

    If CreateMenu(#MainMenu, WindowID(#Window_0))
      MenuTitle("File")
        MenuItem(0, "New")
        MenuBar()
        MenuItem(1, "&Quit")      
    EndIf
    PanelGadget(#Panel_1, 130, 30, 490, 330)
      AddGadgetItem(#Panel_1, -1, "new_0")
      CanvasGadget(#CanvCont_1, 10, 10, 360, 270, #PB_Canvas_Border | #PB_Canvas_Container)
      CloseGadgetList()
    CloseGadgetList()
    
  EndIf
EndProcedure

Open_Window_0()

Repeat
  iEvent = WaitWindowEvent()
  Select iEvent
    Case #PB_Event_Menu
      Select EventMenu()
          
        Case 1   ;Quit
          Break
          
        Case 0   ;New
          OpenGadgetList(#Panel_1)
            AddGadgetItem(#Panel_1, -1, "new_" + CountGadgetItems(#Panel_1))
            Define cg = CanvasGadget(#PB_Any, 10, 10, 360, 270, #PB_Canvas_Border | #PB_Canvas_Container) 
            SetGadgetColor (cg, #PB_Gadget_BackColor, RGB(Random(255), Random(255), Random(255)))
            CloseGadgetList()
          CloseGadgetList()
          SetGadgetState(#Panel_1, CountGadgetItems(#Panel_1)-1)

        Default
          MessageRequester("Information", "ToolBar Or Menu ID: " + Str(EventMenu()), 0)
 
      EndSelect

    Case #PB_Event_Gadget
      Select EventGadget()
      EndSelect

    Case #PB_Event_CloseWindow
      Break
      
  EndSelect
ForEver

Posted: **Wed Jul 19, 2023 2:55 am**

chi wrote: Tue Jul 18, 2023 11:26 pm Ha, how you like that?

O my Go

d,this is the basic IDea that I envisioned, thanks ALOT

Posted: **Wed Jul 19, 2023 3:50 am**

Ktim07 wrote: Wed Jul 19, 2023 2:55 am
chi wrote: Tue Jul 18, 2023 11:26 pm Ha, how you like that?

O my Go d,this is the basic IDea that I envisioned, thanks ALOT

No problem

. Also, you might want to take a look at STARGÅTE's TabBarGadget...

Posted: **Wed Jul 19, 2023 7:21 am**

you might want to take a look at STARGÅTE's TabBarGadget...

this looks great

Posted: **Mon Jul 24, 2023 1:09 pm**

Hallo members, I have this code below, which is supposed to allow the user to in put a png or jpeg file, then divide it in grid boxes of about 10x10 px then check the px of each box , capture/eye drop/approximate the rgb value of each grid and then display the result of the photo replaced with actual rgb colors. I seem to be really stuck , it not easy for me, Please help.

Code: Select all


EnableExplicit

Enumeration Window
  #Window_0
EndEnumeration

Enumeration Menue
  #MainMenu
EndEnumeration

Enumeration MenuItems
  #MenuSave
  #MenuQuit
EndEnumeration

Enumeration Gadgets
  #Editor_1
EndEnumeration


; Function to load an image file (PNG or JPEG)
Procedure LoadImageFile(imagePath.s)
  If FileExist(imagePath)
    ; Check if the selected file has a valid image extension
    If FilePart(imagePath, #PB_FileExtension) = "png" Or FilePart(imagePath, #PB_FileExtension) = "jpg" Or FilePart(imagePath, #PB_FileExtension) = "jpeg"
      ; Load the image into an ImageGadget
      If ImageGadgetID
        ReleaseGadget(ImageGadgetID)
      EndIf
      ImageGadgetID = ImageGadget(#PB_Any, 10, 50, 128, 128)
      LoadImage(ImageGadgetID, imagePath)
    Else
      MessageRequester("Invalid File", "Please select a PNG or JPEG image file.", #PB_MessageRequesterError)
    EndIf
  EndIf
EndProcedure



Procedure Open_Window_0(X = 0, Y = 0, Width = 640, Height = 480)
  If OpenWindow(#Window_0, X, Y, Width, Height, "RGB DISPLAY", #PB_Window_SystemMenu | #PB_Window_MinimizeGadget | #PB_Window_MaximizeGadget | #PB_Window_SizeGadget | #PB_Window_ScreenCentered)

    If CreateMenu(#MainMenu, WindowID(#Window_0))
      MenuTitle("File")
        MenuItem(#MenuSave, "Save")
        MenuBar()
        MenuItem(#MenuQuit, "&Quit")      
    EndIf

    EditorGadget(#Editor_1, 160, 50, 230, 200)
    AddGadgetItem(#Editor_1, -1, "Editor_1")
  EndIf
EndProcedure


Define.i iEvent, Quit, save
Define Filename$

Open_Window_0()

Repeat
  iEvent = WaitWindowEvent()
  Select iEvent
      Case #PB_Event_Menu
      Select EventMenu()
        Case 1   ;Quit
          End
        Case 0   ;Save
          Define cFile.s = SaveFileRequester("Save","sample.txt","Text File|*.txt",0)
          If cFile 
            CreateFile(0,cfile)
            WriteString(0,GetGadgetText(#Editor_1))
            CloseFile(0)
          EndIf 
     
      EndSelect

    Case #PB_Event_Gadget
      Select EventGadget()
      EndSelect

    Case #PB_Event_CloseWindow
      If MessageRequester("Sure", "Really exit?", #PB_MessageRequester_YesNo) = #PB_MessageRequester_Yes
        Quit = #True
      EndIf
      
  EndSelect
    
Until Quit

Posted: **Sun Jul 30, 2023 6:59 pm**

Hallo members,
Suppose you already developed a PB desktop application and you are looking for a quick easy way to have it on mobile devices as .apk file how is it possible to port the PB GUI app to Android

Posted: **Sun Jul 30, 2023 8:25 pm**

How many different questions do you want to include in this thread?

No one can later find an answer to a similar question, because the title does not reflect this.

PB is for PCs, SB (SpiderBasic) is for Android.
But if you really want to build android apps you have to learn java.

Posted: **Mon Jul 31, 2023 12:15 am**

infratec wrote: Sun Jul 30, 2023 8:25 pm How many different questions do you want to include in this thread?

I see, I had thought following one thread is easier but now I see the problem. Because the original question was titled "SaveFileRequester()" which is always attached, but I guess now I have to change the strategy

infratec wrote: Sun Jul 30, 2023 8:25 pm PB is for PCs, SB (SpiderBasic) is for Android.
But if you really want to build android apps you have to learn java.

Alright

PureBasic Forums - English

port PB GUI app to Android as .apk SaveFileRequester()

Re: html

Re: SaveFileRequester()

Re: SaveFileRequester()

Re: NewFileRequester()

Re: SaveFileRequester()

Re: SaveFileRequester()

Re: SaveFileRequester()

Re: SaveFileRequester()

Re: SaveFileRequester()

Re: RGB Display from photo SaveFileRequester()

port PB GUI app to Android as .apk SaveFileRequester()

Re: port PB GUI app to Android as .apk SaveFileRequester()

Re: port PB GUI app to Android as .apk SaveFileRequester()