SVG ins WEB

Anfängerfragen zum Programmieren mit PureBasic.
Benutzeravatar
Velindos
Beiträge: 598
Registriert: 15.11.2010 10:56

SVG ins WEB

Beitrag von Velindos »

Hallo Leute,
wollte das Starfield ins Programm integrieren, funzt jedoch nicht!

Code: Alles auswählen

Global Present_Web


Procedure.s PLUGIN_Starfield(GGadget)
  Protected Starfield.s  =  ""
  ; -----------------------
  Starfield +"<svg"
  Starfield +"    xmlns='http://www.w3.org/2000/svg' "
  Starfield +"    xmlns:xlink='http://www.w3.org/1999/xlink'"
  Starfield +"    version='1.1'"
  Starfield +"    width='" + GadgetX(Present_Web)+"'"
  Starfield +"    height='"+GadgetY(Present_Web)+"'"
  Starfield +"    onload='init(evt)'>"
  Starfield +"   <script type='text/ecmascript'>"
  Starfield +"    <![CDATA["
  Starfield +"        var svgDocument;"
  Starfield +"        var svgNS = 'http://www.w3.org/2000/svg';"
  Starfield +"        var xlinkNS = 'http://www.w3.org/1999/xlink';"
  Starfield +"        "
  Starfield +"        var centerX;"
  Starfield +"        var centerY;"
  Starfield +"        var angles = [];"
  Starfield +"        var distances = [];"
  Starfield +"        var maxD = 1000;"
  Starfield +"        var nStars = 32;"
  Starfield +"       "
  Starfield +"        function init(evt) {"
  Starfield +"            If ( window.svgDocument == null ) {"
  Starfield +"                svgDocument = evt.target.ownerDocument;"
  Starfield +"            }"
  Starfield +"            "
  Starfield +"            centerX = svgDocument.childNodes[0].getAttributeNS(null, 'width')/2;"
  Starfield +"            centerY = svgDocument.childNodes[0].getAttributeNS(null, 'height')/2;"
  Starfield +"            maxD = Math.sqrt(centerX * centerX + centerY * centerY) + 40;"
  Starfield +""
  Starfield +"            createStars(nStars);"
  Starfield +"            beginAnimation();"
  Starfield +"        }"
  Starfield +"   "
  Starfield +"        function createStars(n) {"
  Starfield +"            For (var i=1; i<=n; i++) {"
  Starfield +"                var star = document.createElementNS(svgNS, 'use');"
  Starfield +"                star.setAttributeNS(null, 'id', 'star' + i);	"
  Starfield +"                star.setAttributeNS(xlinkNS, 'href', '#star');			"
  Starfield +"                document.getElementById('star-group').appendChild(star);"
  Starfield +"                angles.push(Math.PI * 2 * Math.random());"
  Starfield +"                distances.push(maxD * Math.random());"
  Starfield +"            }"
  Starfield +"        }"
  Starfield +"   "
  Starfield +"        function drawField() {"
  Starfield +"            For (var i=0; i<nStars; i++) {"
  Starfield +"               var star = svgDocument.getElementById('star' + (i+1));"
  Starfield +"                var d = distances[i];"
  Starfield +"                var x = centerX + d * Math.sin(angles[i]);"
  Starfield +"                var y = centerY + d * Math.cos(angles[i]);"
  Starfield +"                var scale = 2*(1 - (maxD / (d+maxD)));"
  Starfield +"                "
  Starfield +"                star.setAttributeNS(null, 'transform', 'translate(' + x + ',' + y + ') scale(' + scale*scale + ')');"
  Starfield +"            }"
  Starfield +"        }"
  Starfield +"   "
  Starfield +"        function updateImage() {"
  Starfield +"            For (var i=0; i<nStars; i++) {"
  Starfield +"                distances[i]++;"
  Starfield +"                If (distances[i] > maxD) {"
  Starfield +"                   distances[i] = 0;"
  Starfield +"                }"
  Starfield +"            }"
  Starfield +"            drawField();"
  Starfield +"        }"
  Starfield +"   "
  Starfield +"        function beginAnimation() {"
  Starfield +"            var timeout = setInterval(updateImage, 10);"
  Starfield +"        }"
  Starfield +"        "
  Starfield +"    ]]>"
  Starfield +"   </script>"
  Starfield +"    "
  Starfield +"    <defs>"
  Starfield +"        <path id='star' fill='#ee2' d='M-4 -17.2L-8.7 -3.6 -23.1 -3.3 -11.6 5.4 -15.8 19.2 -4 11 7.9 19.2 3.7 5.4 15.2 -3.3 0.8 -3.6z'/>"
  Starfield +"    </defs>"
  Starfield +"    "
  Starfield +"    <rect width='"+GadgetX(Present_Web)+"' height='"+GadgetY(Present_Web)+"' fill='#228' />"
  Starfield +"    <g id='star-group'></g>"
  Starfield +"    "
  Starfield +"    </svg>"
  ; -----------------------
  ProcedureReturn Starfield
  ; -----------------------
EndProcedure



If OpenWindow(0, 0, 0, 600, 300, "WebGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  ; Funzt nicht
  ;  Present_Web = WebGadget(#PB_Any, 10, 10, 580, 280, PLUGIN_Starfield(GGadget))
  ; Funzt nicht
  Present_Web = WebGadget(#PB_Any, 10, 10, 580, 280, "")
  SetGadgetItemText(Present_Web, #PB_Web_HtmlCode, PLUGIN_Starfield(GGadget))  
  ; Funzt nicht ganz
  ;  Present_Web = WebGadget(#PB_Any, 10, 10, 580, 280, "")
  ; SetGadgetItemText(Present_Web, #PB_Web_HtmlCode, PeekS(?Starfield_Quad_1920,-1,#PB_Ascii))  
  Repeat 
  Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf

;{ PAGES
;- [HTML] Pages
DataSection
  Starfield_Quad_1920:
  IncludeBinary "D:\[Pure@API]\[STORE]\PLUGIN\Starfield_Quad_1920.svg": Data.b 0
EndDataSection
;}    
Mit der HTML funzt die Sache:

Code: Alles auswählen

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
    width="1920"
    height="929"
    onload="init(evt)">

   <script type="text/ecmascript">
    <![CDATA[
        var svgDocument;
        var svgNS = "http://www.w3.org/2000/svg";
        var xlinkNS = "http://www.w3.org/1999/xlink";
        
        var centerX;
        var centerY;
        var angles = [];
        var distances = [];
        var maxD = 1000;
        var nStars = 32;
        
        function init(evt) {
            If ( window.svgDocument == null ) {
                svgDocument = evt.target.ownerDocument;
            }
            
            centerX = svgDocument.childNodes[0].getAttributeNS(null, 'width')/2;
            centerY = svgDocument.childNodes[0].getAttributeNS(null, 'height')/2;
            maxD = Math.sqrt(centerX * centerX + centerY * centerY) + 40;

            createStars(nStars);
            beginAnimation();
        }
   
        function createStars(n) {
            For (var i=1; i<=n; i++) {
                var star = document.createElementNS(svgNS, "use");
                star.setAttributeNS(null, "id", "star" + i);	
                star.setAttributeNS(xlinkNS, "href", "#star");			
                document.getElementById("star-group").appendChild(star);
                angles.push(Math.PI * 2 * Math.random());
                distances.push(maxD * Math.random());
            }
        }
   
        function drawField() {
            For (var i=0; i<nStars; i++) {
                var star = svgDocument.getElementById('star' + (i+1));
                var d = distances[i];
                var x = centerX + d * Math.sin(angles[i]);
                var y = centerY + d * Math.cos(angles[i]);
                var scale = 2*(1 - (maxD / (d+maxD)));
                
                star.setAttributeNS(null, 'transform', 'translate(' + x + ',' + y + ') scale(' + scale*scale + ')');
            }
        }
   
        function updateImage() {
            For (var i=0; i<nStars; i++) {
                distances[i]++;
                If (distances[i] > maxD) {
                    distances[i] = 0;
                }
            }
            drawField();
        }
   
        function beginAnimation() {
            var timeout = setInterval(updateImage, 10);
        }
        
    ]]>
   </script>
    
    <defs>
        <path id="star" fill="#ee2" d="M-4 -17.2L-8.7 -3.6 -23.1 -3.3 -11.6 5.4 -15.8 19.2 -4 11 7.9 19.2 3.7 5.4 15.2 -3.3 0.8 -3.6z"/>
    </defs>
    
    <rect width="1920" height="929" fill="#228" />
    <g id="star-group"></g>
    
</svg>
Jemanden einen Tip?

Gruss ... Velindos!
Windows 7/8/8.1/10 (32/64-Bit) |Ubuntu 10.4 (64-Bit) |Purebasic 5.71 LTS (32/64-Bit)
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SVG ins WEB

Beitrag von RSBasic »

Also grundsätzlich funktioniert das sowieso nicht, weil IE 7 kein SVG kann: https://caniuse.com/#search=svg
Erst ab 9.
Du hast zwei Möglichkieten: Entweder erstellst du einen Registry-Eintrag ( https://www.purebasic.fr/english/viewto ... 39#p467239 ), um neue IE-Version in deinem WebGadget zu erzwingen oder du benutzt folgende Bibliothek, um WebKit verwenden zu können: viewtopic.php?f=11&t=31422
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
Velindos
Beiträge: 598
Registriert: 15.11.2010 10:56

Re: SVG ins WEB

Beitrag von Velindos »

Hallo RSBasic,
Entweder erstellst du einen Registry-Eintrag ( https://www.purebasic.fr/english/viewto ... 39#p467239 ), um neue IE-Version in deinem WebGadget zu erzwingen
werde die Sache mal so angehen! Was ich nicht verstehe ist, warum läuft die im IE aber nicht im Gadget, ist das Webgadget begrenzt weil es ein API ist??

DANKE!



Gruss ... Velindos!
Zuletzt geändert von Velindos am 14.05.2019 10:24, insgesamt 2-mal geändert.
Windows 7/8/8.1/10 (32/64-Bit) |Ubuntu 10.4 (64-Bit) |Purebasic 5.71 LTS (32/64-Bit)
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SVG ins WEB

Beitrag von RSBasic »

Weil Microsoft aus irgendwelchen Gründen (vielleicht aus Kompatibilitätsgründen) der Meinung ist, dass das WebGadget standardmäßig nur auf maximal auf IE 7 laufen soll. Wenn du IE ohne WebGadget aufrifst, verwendest du die aktuelle Version (11) und die aktuelle Version kann SVG. Aber IE 7 konnte damals noch kein SVG.
Leider hat Microsoft auch keine API-Einstellung bereitgestellt, um die Version im WebGadget zu ändern. Man muss leider stattdessen in der Registry einen Eintrag für die eigene Anwendung erstellen.
Warum es unbedingt die Registry für die Festlegung der IE-Version für das eigene Programm sein soll, verstehe ich auch nicht. Es gibt sonst für jede Einstellungsmöglichkeit eine API-Funktion oder -Message und es gibt ja auch Interfaces wie z.B. IWebBrowser2, um Eigenschaften des WebGadgets ändern zu können, aber die zu verwendete IE-Version ist nicht drin. :?
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
Velindos
Beiträge: 598
Registriert: 15.11.2010 10:56

Re: SVG ins WEB

Beitrag von Velindos »

Hallo RSBasic,
Hab die Sache integriert, und mit
SetGadgetItemText(Present_Web, #PB_Web_HtmlCode, PeekS(?Starfield_Quad_1920,-1,#PB_Ascii))
das Gadget bedient! Jetzt zeigt er immerhin schon Sterne, rechnet aber falsch!

Code: Alles auswählen

Global Present_Web
Global Google.IWebBrowser2

Procedure SetBrowserEmulation()
  
  ; https://msdn.microsoft.com/en-us/library/ee330730(v=vs.85).aspx
  
  Protected IEVersion.s = "2AF9" ; setting the desired IE-Version (see below)
  
  ; 11001 (0x2AF9) IE11. Webpages are displayed in IE11 edge mode, regardless of the declared !DOCTYPE directive. Failing to declare a !DOCTYPE directive causes the page to load in Quirks.
  ; 11000 (0x2AF8) IE11. Webpages containing standards-based !DOCTYPE directives are displayed in IE11 edge mode. Default value for IE11.
  ; 10001 (0x2711) IE10. Webpages are displayed in IE10 Standards mode, regardless of the !DOCTYPE directive.
  ; 10000 (0x2710) IE10. Webpages containing standards-based !DOCTYPE directives are displayed in IE10 Standards mode. Default value for IE 10.
  ;  9999 (0x270F) IE9.  Webpages are displayed in IE9 Standards mode, regardless of the declared !DOCTYPE directive. Failing to declare a !DOCTYPE directive causes the page to load in Quirks.
  ;  9000 (0x2328) IE9.  Webpages containing standards-based !DOCTYPE directives are displayed in IE9 mode. Default value for IE 9. Important  In IE 10, Webpages containing standards-based !DOCTYPE directives are displayed in IE10 Standards mode.
  ;  8888 (0x22B8) IE8.  Webpages are displayed in IE8 Standards mode, regardless of the declared !DOCTYPE directive. Failing to declare a !DOCTYPE directive causes the page to load in Quirks.
  ;  8000 (0x1F40) IE8.  Webpages containing standards-based !DOCTYPE directives are displayed in IE8 mode. Default value for IE 8 Important  In IE 10, Webpages containing standards-based !DOCTYPE directives are displayed in IE10 Standards mode.
  ;  7000 (0x1B58) IE7.  Webpages containing standards-based !DOCTYPE directives are displayed in IE7 Standards mode. Default value for applications hosting the WebBrowser Control.
  
  Protected RegistryString.s
  Protected TempRegFile.s
  Protected FF
  
  RegistryString = "Windows Registry Editor Version 5.00" + #CRLF$ +
                   "" + #CRLF$ +
                   "[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION]" + #CRLF$ +
                   Chr(34) + GetFilePart(ProgramFilename()) + Chr(34) + "=dword:" + IEVersion + #CRLF$
  
  TempRegFile = GetTemporaryDirectory() + "SetBrowserEmulation.reg"
  
  FF = CreateFile(#PB_Any, TempRegFile)
  
  If FF
    WriteString(FF, RegistryString)
    CloseFile(FF)
    RunProgram("regedit", "/s " + Chr(34) + TempRegFile + Chr(34), "", #PB_Program_Hide | #PB_Program_Wait)
    DeleteFile(TempRegFile)
    ProcedureReturn #True
  EndIf
  
EndProcedure
SetBrowserEmulation()
Procedure.s PLUGIN_Starfield(GGadget)
  Protected Starfield.s  =  ""
  Protected Breitegadget.s  = "1220"
  Protected Hoehegadget.s  = "670"
  
  ;   Protected Breitegadget.s  = Str(GadgetX(GGadget))
  ;   Protected Hoehegadget.s  = Str(GadgetY(GGadget))
  ;   Protected Breitegadget.s  = Str(GadgetX(Present_Web))
  ;   Protected Hoehegadget.s  = Str(GadgetY(Present_Web))
  ; -----------------------
  Starfield +"<svg"
  Starfield +"    xmlns='http://www.w3.org/2000/svg' "
  Starfield +"    xmlns:xlink='http://www.w3.org/1999/xlink'"
  Starfield +"    version='1.1'"
  Starfield +"    width='"+Breitegadget+"'"
  Starfield +"    height='"+Hoehegadget+"'"
  ;   Starfield +"    width='1200'"
  ;   Starfield +"    height='670'"
  Starfield +"    onload='init(evt)'>"
  Starfield +"   <script type='text/ecmascript'>"
  Starfield +"    <![CDATA["
  Starfield +"        var svgDocument;"
  Starfield +"        var svgNS = 'http://www.w3.org/2000/svg';"
  Starfield +"        var xlinkNS = 'http://www.w3.org/1999/xlink';"
  Starfield +"        "
  Starfield +"        var centerX;"
  Starfield +"        var centerY;"
  Starfield +"        var angles = [];"
  Starfield +"        var distances = [];"
  Starfield +"        var maxD = 1000;"
  Starfield +"        var nStars = 32;"
  Starfield +"       "
  Starfield +"        function init(evt) {"
  Starfield +"            If ( window.svgDocument == null ) {"
  Starfield +"                svgDocument = evt.target.ownerDocument;"
  Starfield +"            }"
  Starfield +"            "
  Starfield +"            centerX = svgDocument.childNodes[0].getAttributeNS(null, 'width')/2;"
  Starfield +"            centerY = svgDocument.childNodes[0].getAttributeNS(null, 'height')/2;"
  Starfield +"            maxD = Math.sqrt(centerX * centerX + centerY * centerY) + 40;"
  Starfield +""
  Starfield +"            createStars(nStars);"
  Starfield +"            beginAnimation();"
  Starfield +"        }"
  Starfield +"   "
  Starfield +"        function createStars(n) {"
  Starfield +"            For (var i=1; i<=n; i++) {"
  Starfield +"                var star = document.createElementNS(svgNS, 'use');"
  Starfield +"                star.setAttributeNS(null, 'id', 'star' + i);   "
  Starfield +"                star.setAttributeNS(xlinkNS, 'href', '#star');         "
  Starfield +"                document.getElementById('star-group').appendChild(star);"
  Starfield +"                angles.push(Math.PI * 2 * Math.random());"
  Starfield +"                distances.push(maxD * Math.random());"
  Starfield +"            }"
  Starfield +"        }"
  Starfield +"   "
  Starfield +"        function drawField() {"
  Starfield +"            For (var i=0; i<nStars; i++) {"
  Starfield +"               var star = svgDocument.getElementById('star' + (i+1));"
  Starfield +"                var d = distances[i];"
  Starfield +"                var x = centerX + d * Math.sin(angles[i]);"
  Starfield +"                var y = centerY + d * Math.cos(angles[i]);"
  Starfield +"                var scale = 2*(1 - (maxD / (d+maxD)));"
  Starfield +"                "
  Starfield +"                star.setAttributeNS(null, 'transform', 'translate(' + x + ',' + y + ') scale(' + scale*scale + ')');"
  Starfield +"            }"
  Starfield +"        }"
  Starfield +"   "
  Starfield +"        function updateImage() {"
  Starfield +"            For (var i=0; i<nStars; i++) {"
  Starfield +"                distances[i]++;"
  Starfield +"                If (distances[i] > maxD) {"
  Starfield +"                   distances[i] = 0;"
  Starfield +"                }"
  Starfield +"            }"
  Starfield +"            drawField();"
  Starfield +"        }"
  Starfield +"   "
  Starfield +"        function beginAnimation() {"
  Starfield +"            var timeout = setInterval(updateImage, 10);"
  Starfield +"        }"
  Starfield +"        "
  Starfield +"    ]]>"
  Starfield +"   </script>"
  Starfield +"    "
  Starfield +"    <defs>"
  Starfield +"        <path id='star' fill='#ee2' d='M-4 -17.2L-8.7 -3.6 -23.1 -3.3 -11.6 5.4 -15.8 19.2 -4 11 7.9 19.2 3.7 5.4 15.2 -3.3 0.8 -3.6z'/>"
  Starfield +"    </defs>"
  Starfield +"    "
  Starfield +"    <rect width='"+Breitegadget+"' height='"+Hoehegadget+"' fill='#228' />"
  ;   Starfield +"    <rect width='1200' height='670' fill='#228' />"
  Starfield +"    <g id='star-group'></g>"
  Starfield +"    "
  Starfield +"    </svg>"
  ; -----------------------
  ProcedureReturn Starfield
  ; -----------------------
EndProcedure

If OpenWindow(0, 0, 0, 600, 300, "WebGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  ; Funzt nicht
  ;  Present_Web = WebGadget(#PB_Any, 10, 10, 580, 280, PLUGIN_Starfield(GGadget))
  ; Funzt nicht
  Present_Web = WebGadget(#PB_Any, 10, 10, 580, 280, "")
  ; -----------------------------
  ; Popups
  SetGadgetAttribute(Present_Web, #PB_Web_BlockPopups,1)
  ; -----------------------------
  ;  Skriptfehler ausschalten
  Google.IWebBrowser2 = GetWindowLong_(GadgetID(Present_Web), #GWL_USERDATA)   
  ; -----------------------------
  If Google.IWebBrowser2
    Google.IWebBrowser2\put_Silent(#True)
  Else
    Google.IWebBrowser2\put_Silent(#False)
  EndIf
  ; -----------------------------
  ;  SetGadgetItemText(Present_Web, #PB_Web_HtmlCode, PLUGIN_Starfield(GGadget))
  SetGadgetItemText(Present_Web, #PB_Web_HtmlCode, PeekS(?Starfield_Quad_1920,-1,#PB_Ascii))
  ; -----------------------------
  ; Funzt nicht ganz
  ;  Present_Web = WebGadget(#PB_Any, 10, 10, 580, 280, "")
  ; -----------------------------
  Repeat
  Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf

;{ PAGES
;- [HTML] Pages
DataSection
  Starfield_Quad_1920:
  IncludeBinary "D:\[Pure@API]\[STORE]\PLUGIN\Starfield_Quad_1920.svg": Data.b 0
EndDataSection
;}    
Gruss ... Velindos!
Windows 7/8/8.1/10 (32/64-Bit) |Ubuntu 10.4 (64-Bit) |Purebasic 5.71 LTS (32/64-Bit)
Antworten