genieframework / stippledemos Goto Github PK

Demo apps for Stipple

Julia 18.89% Dockerfile 0.04% JavaScript 10.46% CSS 27.89% HTML 28.50% SCSS 14.21%

stippledemos's Introduction

Deprecation Warning !!!

Stipple Ecosystem, now GenieFramework, is evolving very fast. You'll find some of these demos outdated and broken(if not used with relevant .toml). You can find the new demos here

Demos for Stipple Ecosystem

This repository includes a collection of Stipple demo application. Uses Stipple, StippleUI, StippleCharts and Genie from Stipple Ecosystem

Set up

Download or clone STIPPLEDEMOS repo.
cd <path_to_demos_folder_> and follow the README.md instructions in respective directories

NOTE: path_to_demos_folder_ could be IrisClustering | GermanCredits | BasicExamples | AdvancedExamples

BasicExamples

Card Component
Date Picker Compontent
Form Component
Pie Chart
Text Example
Using Javascript methods with Stipple Julia
Reverse Input Text
Button Compontent and methods

AdvancedExamples

Using Custom CSS for syling
Using WebCAM to capture frame
Using Contour Plot and animation for heat transfer simulation

Iris Cluture Project

German Credit Project

stippledemos's People

Contributors

Stargazers

Watchers

stippledemos's Issues

trying out 2048

@hhaensel I wanted to add this demo on genieframework.com showcase section and looks like the game doesn't look like what @essenciary showed me

When I disable internet and run the game offline. I can play the game. But it doesn't look like what Adrian showed me. Color are different

When my internet is enabled and I run the game. I can't play the game

Weird error stack

......
└ @ Genie.WebChannels ~/.julia/packages/Genie/cdRrC/src/WebChannels.jl:237
[ Info: GET /stipple.jl/master/assets/css/stipplecore.css 200
[ Info: GET /genie.jl/master/assets/js/channels.js 200
[ Info: GET /stipple.jl/master/assets/js/underscore-min.js 200
[ Info: GET /stipple.jl/master/assets/js/vue.js 200
[ Info: GET /stipple.jl/master/assets/js/stipplecore.js 200
[ Info: GET /stipple.jl/master/assets/js/watchers.js 200
┌ Error: Base.IOError("write: broken pipe (EPIPE)", -32)
└ @ Genie.WebChannels ~/.julia/packages/Genie/cdRrC/src/WebChannels.jl:237
┌ Error: Base.IOError("stream is closed or unusable", 0)
└ @ Genie.WebChannels ~/.julia/packages/Genie/cdRrC/src/WebChannels.jl:237
┌ Error: Base.IOError("write: broken pipe (EPIPE)", -32)
└ @ Genie.WebChannels ~/.julia/packages/Genie/cdRrC/src/WebChannels.jl:237
┌ Error: Base.IOError("stream is closed or unusable", 0)
└ @ Genie.WebChannels ~/.julia/packages/Genie/cdRrC/src/WebChannels.jl:237
┌ Error: Base.IOError("write: broken pipe (EPIPE)", -32)
└ @ Genie.WebChannels ~/.julia/packages/Genie/cdRrC/src/WebChannels.jl:237
┌ Error: Base.IOError("stream is closed or unusable", 0)
└ @ Genie.WebChannels ~/.julia/packages/Genie/cdRrC/src/WebChannels.jl:237
┌ Error: Base.IOError("write: broken pipe (EPIPE)", -32)
└ @ Genie.WebChannels ~/.julia/packages/Genie/cdRrC/src/WebChannels.jl:237
┌ Error: Base.IOError("stream is closed or unusable", 0)
└ @ Genie.WebChannels ~/.julia/packages/Genie/cdRrC/src/WebChannels.jl:237
┌ Error: Base.IOError("write: broken pipe (EPIPE)", -32)
└ @ Genie.WebChannels ~/.julia/packages/Genie/cdRrC/src/WebChannels.jl:237
┌ Error: Base.IOError("stream is closed or unusable", 0)
└ @ Genie.WebChannels ~/.julia/packages/Genie/cdRrC/src/WebChannels.jl:237
┌ Error: Base.IOError("write: broken pipe (EPIPE)", -32)
└ @ Genie.WebChannels ~/.julia/packages/Genie/cdRrC/src/WebChannels.jl:237
....

Are we using some assets in cloud or something? So they are not loaded properly. I using Macbook M1(air 2020)

hi, I write an example about contour plot and animation when l learned how to use Stipple. I met some problems and I solved them. I think this example may help people understand Stipple better. So, I hope this example can be added to StippleDemos. If allowed, I will start a pull request.

This is the example:

Camera widget

I have turned the WebCam Demo into a camera widget.
It's not yet very fast and can certainly be optimised, perhaps by using VideoIO.jl, that's why I currently leave it in broken.

Whoever is interested, please try out and comment here.

include function has been depreciated

When I followed the readme file inside of BasicExamples, there is one step where you want to load in your code using the include function but I get the following error

┌ Warning: This method has been deprecated and will be removed soon. Please use `init(m::Type{M}, kwargs...)` instead.
└ @ Stipple C:\Users\ignac\.julia\packages\Stipple\qLkpM\src\Stipple.jl:788
ERROR: LoadError: UndefVarError: setfield not defined
Stacktrace:
 [1] setchannel(m::FormComponent, value::String)
   @ Stipple C:\Users\ignac\.julia\packages\Stipple\qLkpM\src\Stipple.jl:255
 [2] init(m::Type{FormComponent}; vue_app_name::String, endpoint::String, channel::Nothing, debounce::Int64, transport::Module, parse_errors::Bool, core_theme::Bool)
   @ Stipple C:\Users\ignac\.julia\packages\Stipple\qLkpM\src\Stipple.jl:735
 [3] init(m::Type{FormComponent})
   @ Stipple C:\Users\ignac\.julia\packages\Stipple\qLkpM\src\Stipple.jl:725
 [4] init(m::FormComponent; kwargs::Base.Pairs{Symbol, Union{}, Tuple{}, NamedTuple{(), Tuple{}}})      
   @ Stipple C:\Users\ignac\.julia\packages\Stipple\qLkpM\src\Stipple.jl:789
 [5] init(m::FormComponent)
   @ Stipple C:\Users\ignac\.julia\packages\Stipple\qLkpM\src\Stipple.jl:788
 [6] top-level scope
   @ c:\Users\ignac\Documents\julia_learn\StippleDemos\BasicExamples\Form.jl:18
in expression starting at c:\Users\ignac\Documents\julia_learn\StippleDemos\BasicExamples\Form.jl:18

How should you use init or is there another way to load the file? I tried

 init("Form.jl")

but to no avail.

I think it has something to do with

 <pkg> instantiate

Because it gives me no respons

Call function

How to call a function in the StippleButtons example?

Image gallery not applying CSS properly

from https://quasar.dev/vue-components/img#loading-states

<template>
  <div class="q-pa-md">
    <q-btn push color="teal" label="Change image" @click="refresh" class="q-mb-md" />

    <div class="q-gutter-sm row items-start">
      <q-img
        :src="url"
        spinner-color="red"
        style="height: 140px; max-width: 150px"
      />

      <q-img
        :src="url"
        spinner-color="primary"
        spinner-size="82px"
        style="height: 140px; max-width: 150px"
      />

      <q-img
        :src="url"
        style="height: 140px; max-width: 150px"
      >
        <template v-slot:loading>
          <div class="text-subtitle1 text-white">
            Loading...
          </div>
        </template>
      </q-img>
</template>

should output images in row view

But our example: https://github.com/GenieFramework/StippleDemos/blob/master/BasicExamples/ImageGallery.jl

#....
    row([
      div(class="q-pa-md",[
        btn(color="teal", label="Change image", click!! = "refresh=true", class="q-mb-md")

        div(class="q-gutter-sm row items-start",[
          imageview(
            src=:url, 
            spinnercolor="white",
            style="height: 140px; max-width: 150px")
#....

instead chooses to output images in column view as shown here:

Update Tree Example

The Tree demo is broken. I tried following the deprication messages but I'm still running into problems.

╭─mcamp on Butler in ~/code/StippleDemos/BasicExamples/Tree on master🔥
╰─🚧 julia Tree.jl        
┌ Warning: @reactive! is deprecated, please replace use `@vars` instead.
│ 
│ In case of errors, please replace `@reactive!` by `@old_reactive!` and open an issue at
│ https://github.com/GenieFramework/Stipple.jl.
│ 
│ If you use `@old_reactive!`, make sure to call `accessmode_from_pattern!()`, because the internals for
│ accessmode have changed, e.g.
│ ```
│ model = init(MyDashboard) |> accessmode_from_pattern! |> handlers |> ui |> html
│ ```
└ @ Main ~/.config/julia/packages/Stipple/qnyBY/src/stipple/reactivity.jl:430
ERROR: LoadError: UndefVarError: register_mixin not defined
Stacktrace:
 [1] top-level scope
   @ ~/code/StippleDemos/BasicExamples/Tree/Tree.jl:39
in expression starting at /home/mcamp/code/StippleDemos/BasicExamples/Tree/Tree.jl:39
╭─mcamp on Butler in ~/code/StippleDemos/BasicExamples/Tree on master🔥
╰─🚧 vim Tree.jl        
╭─mcamp on Butler in ~/code/StippleDemos/BasicExamples/Tree on master🔥
╰─🚧 vim Tree.jl
╭─mcamp on Butler in ~/code/StippleDemos/BasicExamples/Tree on master🔥
╰─🚧 julia Tree.jl
ERROR: LoadError: type Bool has no field args
Stacktrace:
 [1] getproperty(x::Bool, f::Symbol)
   @ Base ./Base.jl:38
 [2] var"@var_storage"(__source__::LineNumberNode, __module__::Module, expr::Any, new_inputmode::Any)
   @ Stipple ~/.config/julia/packages/Stipple/qnyBY/src/stipple/reactivity.jl:258
 [3] var"@var_storage"(__source__::LineNumberNode, __module__::Module, expr::Any)
   @ Stipple ~/.config/julia/packages/Stipple/qnyBY/src/stipple/reactivity.jl:247
 [4] eval(m::Module, e::Any)
   @ Core ./boot.jl:368
 [5] var"@vars"(__source__::LineNumberNode, __module__::Module, expr::Any)
   @ Stipple.ReactiveTools ~/.config/julia/packages/Stipple/qnyBY/src/ReactiveTools.jl:151
in expression starting at /home/mcamp/.config/julia/packages/Stipple/qnyBY/src/ReactiveTools.jl:151
in expression starting at /home/mcamp/code/StippleDemos/BasicExamples/Tree/Tree.jl:27
in expression starting at /home/mcamp/code/StippleDemos/BasicExamples/Tree/Tree.jl:27

update image via js_methods

In the WebCam example, we should replace

StippleDemos/WebCam.jl

Line 88 in cd49df1

script( # this should probably move to js_methods()

with the Stipple.js_methods(::WebCam) implementation.

Perhaps coupling the repeating updates to the image with the state of the camera via the model's cameraon parameter (there is no need for the client to repeatedly connect to a new image if the camera is off.

MultiUserApp doesn't reliably synchronize

I opened the multiuser app on 3 browsers on the same machine (safari, chrome, brave). The controls on all three browsers only updated the plot on one browser (seemingly the one that was opened last).

If i close the "updating" window. the others still do not update, even with a browser refresh.

Sometimes slider changes are not noticed (even in the julia console).

I then tried 3 windows of the same browser and things worked as expected (with some missed changed). But interestingly, when i then opened a 4th window in Safari, it acted independently. The julia console reported changes in brave or safari, but only updated within browser.

checking serversidefiltering.jl is this a typo

@hhaensel v-bind takes filterAbortFn:

StippleDemos/AdvancedExamples/ServerSideFiltering.jl

Line 46 in 1d698a9

@on(:filter, "filterAbortFn")

and in js_methods it's defined as abortFilterFn:

StippleDemos/AdvancedExamples/ServerSideFiltering.jl

Line 26 in 1d698a9

abortFilterFn () {

'UndefVarError: watchplot not defined' running PlotlyBaseEvents.jl

when running StipplePlotly)/PlotlyBaseEvents.jl I get UndefVarError: watchplot not defined

I trying adding StipplePlotly to StipplePlotly.watchplot.

StippleButtons fails to precompile

julia> include("StippleButtons.jl")
[ Info: Precompiling Stipple [4acbeb90-81a0-11ea-1966-bdaff8155998]
[ Info: Precompiling StippleUI [a3c5d34a-b254-4859-a8fa-b86abb7e84a3]
┌ Warning: This method has been deprecated and will be removed soon. Please use `init(m::Type{M}, kwargs...)` instead.
└ @ Stipple ~/.julia/packages/Stipple/tm9i4/src/Stipple.jl:769
ERROR: LoadError: type SBModel has no field channel__
Stacktrace:
 [1] setproperty!(x::SBModel, f::Symbol, v::String)
   @ Base ./Base.jl:43
 [2] init(m::Type{SBModel}; vue_app_name::String, endpoint::String, channel::Nothing, debounce::Int64, transport::Module, parse_errors::Bool, core_theme::Bool)
   @ Stipple ~/.julia/packages/Stipple/tm9i4/src/Stipple.jl:720
 [3] init(m::SBModel; kwargs::Base.Pairs{Symbol, Int64, Tuple{Symbol}, NamedTuple{(:debounce,), Tuple{Int64}}})
   @ Stipple ~/.julia/packages/Stipple/tm9i4/src/Stipple.jl:770
 [4] top-level scope
   @ ~/.julia/dev/StippleDemos/BasicExamples/StippleButtons.jl:9
 [5] include(fname::String)
   @ Base.MainInclude ./client.jl:451
 [6] top-level scope
   @ REPL[3]:1
in expression starting at /home/fxw/.julia/dev/StippleDemos/BasicExamples/StippleButtons.jl:9

PlotlyBaseEvents.jl not working

using latest StipplePlotly v0.13.0 - PlotlyBaseEvents.jl is not working

[c7e460c6] ArgParse v1.1.4
[336ed68f] CSV v0.10.4
[a93c6f00] DataFrames v1.3.4
[1313f7d8] DataFramesMeta v0.12.0
[0c46a032] DifferentialEquations v7.2.0
[c43c736e] Genie v5.1.0
[caafb194] Kaleido v0.2.7
[bac558e1] OrderedCollections v1.4.1
[ccf2f8ad] PlotThemes v3.0.0
[58dd65bb] Plotly v0.4.1
[a03496cd] PlotlyBase v0.8.18
[f0f68f2c] PlotlyJS v0.18.8
[91a5bcdd] Plots v1.31.5
[295af30f] Revise v3.4.0
[4acbeb90] Stipple v0.25.0
[ec984513] StipplePlotly v0.13.0
[a3c5d34a] StippleUI v0.20.0
[ade2ca70] Dates
[10745b16] Statistics

Launch julia first (typo in README.md)

BasicExamples/README.md starts with

julia> julia --project
julia> #enter package mode with ]

shoud be

$ cd path-to-BasicExamples
$ julia --project
julia> #enter package mode with ]

I suppose

Basic examples - Hello Pie

Hi.

I've gone through most of the basic examples now, getting them to work and looking at the code. I could not get Hello Pie to work, and haven't been able to find the issue in the code. A few lines from the error I am getting:

MethodError: Cannot `convert` an object of type Char to an object of type AbstractString
│ Closest candidates are:
│   convert(::Type{T}, !Matched::StringEncodings.Encodings.Encoding{enc}) where {T<:AbstractString, enc} at C:\Users\Emile\.julia\packages\StringEncodings\hHXRr\src\encodings.jl:17
│   convert(::Type{T}, !Matched::T) where T<:AbstractString at strings/basic.jl:231
│   convert(::Type{T}, !Matched::AbstractString) where T<:AbstractString at strings/basic.jl:232
│   ...
│ Stacktrace:
│   [1] setindex!(A::Vector{AbstractString}, x::Char, i1::Int64)
│     @ Base .\array.jl:843
│   [2] _append!
│     @ .\array.jl:995 [inlined]
│   [3] append!(a::Vector{AbstractString}, iter::NTuple{156, Char})
│     @ Base .\array.jl:985
│   [4] push!(::Vector{AbstractString}, ::Char, ::Char, ::Char, ::Char, ::Char, ::Vararg{Char, N} where N)
│     @ Base .\array.jl:986
│   [5] deps(channel::String; core_theme::Bool)
│     @ Stipple C:\Users\Emile\.julia\packages\Stipple\5LJ49\src\Stipple.jl:1152
│   [6] layout(output::Vector{AbstractString}; partial::Bool, title::String, class::String, style::String, head_content::String, channel::String, core_theme::Bool)
│     @ Stipple.Layout C:\Users\Emile\.julia\packages\Stipple\5LJ49\src\Layout.jl:47
│   [7] page(elemid::String, args::Vector{ParsedHTMLString}; partial::Bool, title::String, class::String, style::String, channel::String, head_content::String, prepend::String, append::Vector{Any}, core_theme::Bool, kwargs::Base.Iterators.Pairs{Union{}, Union{}, Tuple{}, NamedTuple{(), Tuple{}}})
│     @ Stipple.Layout C:\Users\Emile\.julia\packages\Stipple\5LJ49\src\Layout.jl:89
│   [8] #page#3
│     @ C:\Users\Emile\.julia\packages\Stipple\5LJ49\src\Layout.jl:99 [inlined]
│   [9] ui(model::HelloPie)
│     @ Main c:\Users\Emile\Desktop\Dash2\stipple\HelloPie.jl:36
│  [10] |>
│     @ .\operators.jl:858 [inlined]
│  [11] (::var"#22#23")()
│     @ Main c:\Users\Emile\Desktop\Dash2\stipple\HelloPie.jl:68

and there's more going all the way to [28]. Would this be an issue with the packages I have installed or is there a variable name misspelled in the code or something else I cannot find?

Thanks very much.