Mobirise Extension Generator

[Tommy Herrmann]

Moin Volker,

a propos "Video-Tuts", wie erstellst Du eigentlich diese .mbrext Dateien ganz genau, damit man diese Datei dann direkt in Mobirise importieren kann.

Das ist ja wohl ein ZIP-Archiv - aber wie wird das generiert, sodass alles für den Import dabei ist?

Falls Du das irgendwo beschrieben haben solltest, habe ich das wohl verpasst ....

[Volker]

Tommy,

dafür habe ich einen Generator gebaut

https://www.niederastroth.de/02/blocks.php

Wie es geht siehst Du in dem Video unter dem Generator

Das selbe für Icons :

https://www.niederastroth.de/mbrext/

[Volker]

So,
nochmal zum Thema eigene Blöcke.
Ihr alle habt die gleichen Bedingungen wie ich. PC, Mobirise, Zugang zu allen KI´s .
Es kann also praktisch jeder von Euch Blöcke erstellen - Mein Generator macht es ja möglich

Komischerweise bin ich aber im Moment der einzige hier im Forum der Blöcke erstellt
Klar muss man sich da rein arbeiten, aber ich gebe ja schon so viel Input wie ich kann - ich mache Videos, erkläre was gemacht werden muss ( Siehe mein HTML dazu ) https://www.niederastroth.de/mobirise-b ... orial.html

Vieles muss ich auch erst nachlesen oder mir von der KI machen lassen, aber letztendlich kommen immer Blöcke bei raus. Ja auch fehlerhafte weil nicht für Handy optimiert Aber ich versuche eben immer alles erst am PC und vergesse eben das Handy immer

Also Jungs und Mädels - haut rein und probiert es - Hubi ist ja auch einer der probiert - das ist toll, auch wenn man Rückschläge erleidet. Immer weiter machen

[Tommy Herrmann]

Ja - das hatte ich irgendwie übersehen - erst jetzt getestet und das funzt ganz prima

Wer hat Dir diesen Generator gebaut? Eine KI? Das muss man doch wissen, was da alles in das ZIP-Archiv rein kommen muss. Auch die .json Datei(en) müssen ja richtig erstellt werden.

[Volker]

Du denkst auch ich mach alles mit KI

Ich kann PHP ! Wenn auch nicht alles Tommy
Ich lerne jeden Tag dazu und auch dieser Generator ist mein Werk zu 80 %

Jungs, dann baut mal so einen Generator nach mit KI. Bin gespannt was raus kommt

mbrext konnte ich bereits schon vor über einem Jahr erstellen Tommy
Und da ich weiß wie das geht kann das auch mein PHP Script

Ganz nebenbei möchte ich noch erwähnen das ich einen solchen Generator auch noch nirgends im Web gesehen habe. Weder bei Witsec, Rudy oder sonst wem Falls es einen gibt wäre ein Link interessant

[Tommy Herrmann]

ja also - ganz ohne eigenes PHP hat mir ChatGPT mit einem einzigen Versuch einen Generator erstellt, den ich bisher mit einem Block erfolgreich getestet habe - das war also echt einfach:

https://www.mobirise-tutorials.com/Mobi ... erator.php

Ich habe diese Animation von Dir dafür verwendet:

https://www.mobirise-tutorials.com/Vorlageseite/


Bitte teste mal - danke


HTML:

Code: Alles auswählen

<section data-bs-version="5.1" class="header1 spot-header" group="Headers" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{'mbr-fullscreen': fullScreen, 'mbr-parallax-background': bg.parallax}">

    <mbr-parameters>
        <header>Spotlights (Einsatz-Licht)</header>
        <input type="checkbox" title="Spot 1 Aktiv" name="spot1Active" checked>
        <input type="color" title="Farbe Spot 1" name="spot1Color" value="#4479d9" condition="spot1Active">
        <input type="checkbox" title="Spot 2 Aktiv" name="spot2Active" checked>
        <input type="color" title="Farbe Spot 2" name="spot2Color" value="#ff8a8a" condition="spot2Active">
        <input type="checkbox" title="Spot 3 Aktiv" name="spot3Active" checked>
        <input type="color" title="Farbe Spot 3" name="spot3Color" value="#ffe161" condition="spot3Active">
        
        <input type="range" inline title="Spot Weite" name="spotWidth" min="10" max="100" step="5" value="25">
        <input type="range" inline title="Geschwindigkeit (s)" name="spotSpeed" min="2" max="20" step="1" value="14">

        <header>Size</header>
        <input type="checkbox" title="Full Screen" name="fullScreen" checked>
        <input type="checkbox" title="Full Width" name="fullWidth">
        <input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="6" condition="fullScreen == false">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="6" condition="fullScreen == false">

        <input type="range" inline name="textWidth" title="Width" min="4" max="12" value="12" step="1">
        <select title="Align" name="contentAlign">
            <option value>Left</option>
            <option value="justify-content-center" selected>Center</option>
            <option value="justify-content-end">Right</option>
        </select>
        <header>Show/Hide</header>
        <input type="checkbox" title="Title" name="showTitle" checked>
        <input type="checkbox" title="Subtitle" name="showSubitle">
        <input type="checkbox" title="Text" name="showText" checked>
        <input type="checkbox" title="Buttons" name="showButtons" checked>
        <header>Background</header>
        <fieldset type="background" name="bg" parallax>
            <input type="image" title="Image" value="file:///C:/Users/Thoma/Documents/Mobirise/Vorlageseite/assets/images/mbr.png" selected>
            <input type="color" title="Color" value="#000000">
            <input type="video" title="Video" value="https://vimeo.com/428046504">
        </fieldset>
        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'" checked>
        <input type="color" title="Overlay Color" name="overlayColor" value="#000000" condition="overlay && bg.type !== 'color'">
        <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.2" condition="overlay && bg.type !== 'color'">
    </mbr-parameters>

    <div class="mbr-fallback-image disabled" mbr-if="bg.type == 'video'"></div>
    <div class="mbr-overlay" mbr-if="overlay && bg.type !== 'color'" opacity="{{overlayOpacity}}" bg-color="{{overlayColor}}"></div>

    <div class="container-wrap" mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row {{contentAlign}}">
            <div class="col-12 col-lg-{{textWidth}}">
                <h1 class="mbr-section-title mbr-fonts-style mbr-white mb-3" data-app-selector=".mbr-section-title" mbr-theme-style="display-2" mbr-if="showTitle"><b>Tommys Block</b></h1>

            </div>
        </div>
    </div>

    <div class="spotlight-container" mbr-style="{'--spot-size': spotWidth + 'vw'}">
        <div class="spot" id="s1" mbr-if="spot1Active" mbr-style="{'background': 'radial-gradient(circle, ' + spot1Color + ' 0%, transparent 75%)', 'animation-duration': spotSpeed + 's'}"></div>
        <div class="spot" id="s2" mbr-if="spot2Active" mbr-style="{'background': 'radial-gradient(circle, ' + spot2Color + ' 0%, transparent 75%)', 'animation-duration': (spotSpeed * 1.3) + 's'}"></div>
        <div class="spot" id="s3" mbr-if="spot3Active" mbr-style="{'background': 'radial-gradient(circle, ' + spot3Color + ' 0%, transparent 75%)', 'animation-duration': (spotSpeed * 0.7) + 's'}"></div>
    </div>

</section>

CSS:

Code: Alles auswählen

& when not (@fullScreen) {
  padding-top: (@paddingTop * 1rem);
  padding-bottom: (@paddingBottom * 1rem);
}
& when (@bg-type = 'image') {
  background-image: url(@bg-value);
}
& when (@bg-type = 'color') {
  background-color: @bg-value;
}
.spot-header {
  position: relative;
  overflow: hidden !important;
  background-size: cover;
  background-position: center;
}
.container-wrap {
  position: relative;
  z-index: 5;
}
.spotlight-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  mix-blend-mode: screen;
  overflow: hidden;
}
.spot {
  position: absolute;
  width: var(--spot-size, 60vw);
  height: var(--spot-size, 60vw);
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.6;
  will-change: transform;
}
#s1 {
  top: -20%;
  left: -20%;
  animation: moveSpot1 linear infinite;
}
#s2 {
  bottom: -20%;
  right: -20%;
  animation: moveSpot2 linear infinite;
}
#s3 {
  top: 40%;
  left: 40%;
  animation: moveSpot3 linear infinite;
}
@keyframes moveSpot1 {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(80vw, 30vh);
  }
  66% {
    transform: translate(20vw, 70vh);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes moveSpot2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-80vw, -50vh);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes moveSpot3 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(25vw);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(25vw);
  }
}
.mbr-overlay {
  z-index: 1;
}
h1, h2, p, .mbr-section-subtitle {
  color: #ffffff !important;
}
H1 {
  text-align: center;
}
.mbr-text, .mbr-section-btn {
  text-align: center;
}

[Volker]

Das muss man doch wissen, was da alles in das ZIP-Archiv rein kommen muss. Auch die .json Datei(en) müssen ja richtig erstellt werden.

So viel kann ich verraten Tommy

Code: Alles auswählen

/* params.json  */
$params = [
    "name"          => $name,
    "alias"         => $alias,
    "version"       => 1,
    "minAppVersion" => "4",
    "components"    => $components,
    "plugins"       => ["plugins"],
    "ampCompatible" => false,
    "appScript"     => false,
    "description"   => $extTitle,
    "logo"          => $coverFile

[Volker]

Erschreckend

Ich hab da eine Woche dran gesessen

Jetzt gibt es auch einen bei Tommy

[Tommy Herrmann]

… ja - habe mich auch erschrocken

Ich habe nichts weiter als eine .mbrext Datei als Vorbild hochgeladen und dazu geschrieben, dass Bootstrap 5.0.1 verwendet wird.

Ein einziger Versuch - das hat sofort geklappt. Ich habe bei anderen Anwendungen bei ChatGPT schon bestimmt 20 Mal versuchen müssen, bis es halbwegs geklappt hat.

Es ist bei der KI also immer nur die Frage ob die Anweisungen perfekt sind oder nicht.

[Volker]

OK ich habe die Erweiterung importiert und es klappt auch alles. Da ist ein Script ?? oder mehrere ?

[Tommy Herrmann]

Das ist ein Skript - willst Du es haben? Ich sende es dann als Link via PN.

[Volker]

Ich brech ab

Ich hab da 2 scripte für gebraucht eins ist schlappe 500 Zeilen lang

Ja lass mich mal gucken bitte

[Tommy Herrmann]

Habe Dir den Download vom Extension-Generator als PN gesendet.



Tommys Mobirise Extension Generator:

Mobirise-Extension-Generator/mobrext_generator.php



Habe (ChatGPT) da 2 Minuten und 19 Sekunden gebraucht - ist aber auch 500 Zeilen lang

[Volker]

He he ,
ist aber auch ein Zufall das die Chat Tante fast meine Farben genutzt hat
Ich wette 100% chat GPT hat meinen Generator zumindest mal gesehen

Naja, das KI in Sekunden Scripte schreibt weiß ich ja selber, aber so ein Ding ist echt heftig
Aber wenigstens hab ich ja auch noch diese Version, die erlaubt auch aus mbrext fertige Samlmungen zu machen :

https://www.niederastroth.de/blocks.php


Aber wird die KI wohl auch können

[Volker]

Was mich wundert,
wenn ich chat gpt wegen blöcken frage, dann bietet sie/es mir immer an das als mbrext zu liefern.
Bis heute konnte ich keine einzige mbrext von chat GPT importieren - immer Fehler. Und jetzt haut die so ein Ding raus.

Lass die Tante doch mal einen Block machen Tommy. Mich würde interessieren ob die das jetzt fehlerfrei hin bekommt. Meine Versuche waren bis jetzt alle gescheitert. Lediglich bei der CSS und Java Script konnte ich mich auf KI Hilfe verlassen, aber die Blöcke selber waren alle nicht zu gebrauchen.

Und ich habe der echte Blöcke gezeigt, von wegen Aufbau usw.

[Bushisan]

Jetzt hört mal langsam auf damit
Ich komme mir sooo dusselig vor. Hab schon oft versucht so ein Teil selbst zu bauen - bin immer wieder gescheitert und das so richtig. Habs mal geschafft so einen Clip Path Generator nachbauen zu lassen - ist alleding irgendwie offensichtlich wo die KI die notwendigen Informationen herholt - die Ähnlichkeit mit vorhanden ist schon verblüffend. Aber ich seh das ganze auch ein wenig sportlich - dazuzulernen hat noch keinem geschadet.

Hubi ist ja auch einer der probiert

Dir entgeht aber auch nichts

Ich wünsche Euch allen noch schöne Ostertage !!!

[Tommy Herrmann]

Volker,

… ich verstehe jetzt nicht ganz, was du sehen willst?!

Ich habe doch schon einen ganzen Haufen von Anwendungen mit ChatGPT erstellt, u.a. jene, die du hier findest:

https://www.mobirise-tutorials.com/AI-Beispiele/

.mbrext Dateien habe ich bis heute noch nie erstellt, dazu fehlte mir ja der Generator, den ChatGPT erst heute für mich erstellt hat.

Was ChatGPT dir anbietet, wie z.B. eine .mbtext Datei zu erstellen, lernt und leitet die KI ja von deinem Verhalten und Anfragen ab.

Aus sämtlichen Anfragen wird die KI immer weiter dazu entwickeln. Mir wurde bis heute daher noch nie eine .mbrext Datei angeboten, weil ich bisher auch noch nie danach gefragt habe.



P.S.:

Dieses dunkle (schwarze) Design ist super typisch für KI-Anleitungen oder Generatoren. ChatGPT verwendet immer schwarz dafür wenn ich es nicht anders angebe. Auch mein Block- und Textschatten-Generator war zunächst schwarz, dann habe ich auf weiß umgestellt und einen Schalter verwendet:

https://www.mobirise-tutorials.com/Tuto ... Shadow.php


Nach einer "Block-Sammlung" habe ich ja nicht gefragt, daher auch nicht erhalten. Das würde ich auch nicht wollen, da ich dafür eher keine Verwendung habe.